JavaScript 기초2

함수

1. 함수 선언

함수란?

이름이 붙은 명령들의 모음

function 함수이름 (매개변수){
    함수가 수행하는 명령
}

function greeting(){
    console.log("안녕하세요!");
}

greeting(); //greeting 함수 호출

//안녕하세요!

function getArea(){
    let width = 10;
    let height = 20;
    let area = width * height;
    
    console.log(area);
}

getArea(); //200 출력

2. 함수 반환

return 문 사용

function getArea(width, height){
    let area = width * height;
    return area;
    console.log("함수종료");
}

let result = getArea(10, 20);
console.log(result); //200 출력

함수는 return문을 만나면, 더 동작할 코드가 남아도 함수는 종료된다. 위의 코드에서 return문 아래에 있는 console.log(“함수종료”); 는 수행되지 않는다.

3. 호이스팅(Hoisting)

프로그램에서 변수나 함수를 호출하는 코드가 함수 선언보다 위에 있음에도, 마치 선언 코드가 위에 있는 것 처럼 동작하는 기능이다.

func();

function func(){
    console.log("hello");
}

함수 func을 선언하기 전에 호출하지만 오류가 발생하지 않는다.
이 현상은 JS의 내부 알고리즘 때문이다. JS는 코드를 실행하기 전에 준비 단계를 거치는데, 중첩 함수가 아닌 함수들을 모두 찾아 미리 생성해 둔다. 이런 준비 단계를 거친 후 프로그램을 실행하는 것이다.

4. 함수 표현식

함수를 생성하고 변수에 값으로 저장하는 방법이다.

익명함수를 변수에 저장

let greeting = function(){
    console.log("hello");
};

greeting(); //hello 출력

이름을 정의하지 않은 ‘익명 함수’를 변수의 값으로 저장해 생성하였다.

선언한 함수를 변수에 저장

function greet(){
    console.log("hello");
};

greet(); //hello 출력

let greeting = greet;
greeting(); //hello 출력

선언한 함수를 변수에 저장할 때는 소괄호()를 명시하지 않는다.

함수 표현식으로 만든 함수는 호이스팅이 되지 않는다.

5. 콜백함수

함수가 동일한 기능을 갖더라도 특정 부분이 달라 새 함수를 만들게 되면 중복 코드가 발생하는데 이 때 문제를 효과적으로 해결할 수 있는 함수가 ‘콜백함수’이다.

function repeat(count, callBack){
    for(let idx = 0; idx < count; idx++){
        callBack(idx+1);
    }
}

function origin(count){
    console.log(count);
}

function double(count){
    console.log(count * 2);
}

repeat(5, double); //2 4 6 8 10

• 매개변수에 2를 곱해 출력하는 함수 double을 만든다.
• 함수 repeat의 매개변수 callBack에 함수 double을 인수로 전달한다. callBack에는 double 함수가 저장된다.
• repeat의 반복문이 진행될 때 마다 callBack에 저장된 함수 double을 호출하고, 인수로 idx+1 을 전달한다.
• 콘솔에 2 4 6 8 10 이 출력된다.

6. 화살표 함수

익명함수를 간결하게 작성할 때 사용하는 함수 표현식 문법이다.

let funA = (매개변수) => 반환값;
----------------------

let funA = function(매개변수){
    return 반환값;
}

예시

let greeting = (name) => `hello {name}`;
const greetingText = greeting("자바");

console.log(greetingText); // hello 자바
------------------------------------------------

let greeting = (name) => {
    let greetingText = `hello {name}`;
    return greetingText;
};

console.log(greeting("자바"));