JS | 함수, 익명함수, 화살표 함수(애로우 펑션)

요약

자바스크립트에서 함수를 설정하는 방법들입니다.

함수

function 함수(){
    // 내용
}

let 함수 = function(){
    // 내용
}

let 함수 = () => { 
    // 내용 
}

위의 3개의 함수는 같은 기능을 합니다.
선언문과 표현식의 생성시점이 다르기 때문에 사용에 주의를 요합니다.

• 함수 선언문 : 선언 이전에 호출 가능 (함수 호이스팅 적용)
• 함수 표현식 : 선언 이전에 호출 불가능

함수 선언문(함수 호이스팅)은 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 규칙을 무시합니다.
JSON을 창안한 더글라스 크락포드는 함수 표현식 사용하는 것을 권장합니다.

• 함수 선언문이 런타임 이전에 코드의 선두로 끌어 올려진 것처럼 동작하게 됩니다.
  이를 함수 호이스팅(Function hoisting) 이라 불립니다. 변수 호이스팅과는 다릅니다.

화살표 함수

AKA. 애로우 펑션, Arrow Function

• function 문자를 생략할 수 있습니다
• 중괄호를 생략할 수 있습니다
• 파라미터를 추가할 때 , 로 구분할 수 있습니다

단계별로 생략해가며 차이점을 알아보도록 하죠.

let 함수 = (a) => { return a + 10 }

함수(5);

let 함수 = a => a + 10;

중괄호 { } 를 생략했습니다.

• 묶음 처리를 하는 것이 안정적이기 때문에 추천하지는 않습니다.
• ; 세미콜론 붙이는 것을 추천합니다.

let 함수 = a,b => { return a + b };

a, b 와 같이 파라미터를 추가할 수도 있습니다.

오브젝트 메서드

let 오브젝트 = {
    함수 : function(){ console.log("함수호출") }
}

오브젝트.함수();

let 오브젝트 = {
    함수 : () => { console.log("함수호출") }
}

오브젝트.함수();

오브젝트 내에서 함수를 호출하는 방법입니다.
이를 메서드(Method) 라고 합니다.

let 오브젝트 {
    name : 'right',
    함수() {
        console.log("함수호출");
    }
}

ECMAScript6 부터는 메서드 축약표현이 가능합니다

forEach 문 활용하기

[1,2,3,4].forEach( a => console.log(a) );

배열에 각각 값을 넣기 위해서는 forEach문을 이렇게 사용할 수 있습니다.

this 사용

let 오브젝트 = {
    함수 : () => { console.log(this) }
}

오브젝트.함수();

오브젝트 밖에 있는 this는 window 입니다.
우리가 원하는 활용법으로 사용할 수 없습니다.

document.getElementById('버튼')
.addEventListner('click', (e) => { 
    e.currentTarget;
});

여기서 현재 상태를 담기 위해서는 e.currentTarget 을 사용하면 됩니다.