function은 Object 타입
그래서 변수에 값처럼 할당할 수 있고 Object 의 속성들을 사용할 수도 있다.
익명으로 많이 쓰는데
function print 처럼 이름을 붙여서 named function 으로 쓸 수도 있다.
function 도 호이스팅이 된다.
선언 된 것을 가장 위로 올려준다.
정의하기 전에 호출해서 사용해도 문제가 되지 않는다.
//function hoisting
console.log(sum(5, 6));
function sum(a, b) {
return a + b;
}
1. 콜백
변수와 함수들을 매개변수 값으로 넘겨 받아서 사용함
조건에 맞으면 해당 함수 실행
//콜백
const printY = () => console.log("정답");
const printN = () => console.log("오답");
const callback = function (answer, printY, printN) {
if (answer === "Love you") {
printY();
} else {
printN();
}
}
callback("Love you", printY, printN); //정답
callback("Like you", printY, printN); //오답
2. Rest Parameter
//Rest Parameters (added in ES6)
//배열을 파라미터로 넘겨받는다
function printAll(...args) {
//출력 방법 1
for (let i = 0; i < args.length; i++) {
console.log(args[i]);
}
//출력 방법 2
for (const arg of args) {
console.log(arg);
}
//출력 방법 3
args.forEach((arg) => console.log(arg));
}
printAll('멍멍', '야옹', '이힣힣');
3. early return
조건에 맞지 않으면 빨리 리턴을 한다.
이건 다른 언어에서도 중요할 듯
//early return
//조건에 맞지 않으면 먼저 리턴시켜라
function printNumber(a) {
if (a < 10) {
return;
} else {
console.log(a);
}
}
printNumber(8);
printNumber(10); //이것만 출력
4. IIFE
정의하면서 별도의 호출 코드 없이 함수를 호출한다.
//IIFE : Immediately Invoked Function Express
//정의와 동시에 함수를 실행한다.
(function hello() {
console.log('IIFE');
})();
계산기
//계산기
function calculate(command, a, b) {
switch (command) {
case 'add':
return a + b;
case 'substract':
return a - b;
case 'divide':
return a / b;
case 'multiply':
return a * b;
case 'remainder':
return a % b;
}
}
console.log(`덧셈: ${calculate('add', 4, 5)}`);
console.log(`뺄셈: ${calculate('substract', 4, 5)}`);
console.log(`나눗셈: ${calculate('divide', 4, 5)}`);
console.log(`곱셈: ${calculate('multiply', 4, 5)}`);
console.log(`나머지셈: ${calculate('remainder', 4, 5)}`);
'Web > HTML CSS JS' 카테고리의 다른 글
Java Script - Object (0) | 2020.09.24 |
---|---|
Java Script - Class (0) | 2020.09.24 |
Java Scripts - HTML안에 JS파일 불러오는 위치, async, defer (0) | 2020.09.23 |
Java Script 변수타입 및 기본예제 따라하기 (0) | 2020.09.23 |
CSS 기본 (0) | 2020.09.22 |