Web/HTML CSS JS

Java Script - function

dev_sr 2020. 9. 23. 18:42

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