[ES6] 함수 선언 방식, 화살표 함수

[devwontory]

Arrow Function?

일반적인 자바스크립트 함수는 키워드 function을 갖는 모양입니다. var myFnc() = function이라는 구문도 확인할 수 있습니다.

function myFnc() {
    ...
}

화살표 함수는 const가 선언되고 오른쪽에는 등호(=)가 있습니다. 몇몇 인수들을 가질 수 있고, 화살표가 있습니다. 뚱뚱한 화살표 =>를 사용하고 그런 다음 {}로 본문을 감싸줍니다. 화살표 함수의 구문은 키워드 function을 생략했기 때문에 일반적인 함수보다 짧습니다. 그리고 자바스크립트에서 갖고 있었던 키워드 this로 인해 생겼던 많은 문제들을 해결해주는 장점을 갖고 있습니다.

const myFnc = () => {
    ...
}

자바스크립트로 작업해 본 적이 있다면, 코드를 작성할 때 키워드 this가 항상 우리가 원하는 객체를 참조하지 않는다는 것을 알 것입니다. 화살표 함수 안에 this 키워드를 사용하면, 항상 정의한 객체를 나타내고 실행 중에 갑자기 바뀌지 않습니다.

 

예제 1)

function printMyName(name) {
    console.log(name);
}

printMyName('Wontory');    // Wontory

const printMyName = (name) => {
    console.log(name);
}

printMyName('Wontory');    // Wontory

// 전달하고자 하는 인수가 1개라면 괄호를 생략할 수 있다.
const printMyName = name => {
    console.log(name);
}

printMyName('Wontory');    // Wontory

// 파라미터가 없거나 2개 이상이면 반드시 괄호를 사용한다.
const printMyName = (name, age) => {
    console.log(name, age);
}

printMyName('Wontory', 23);    // Wontory
			       // 23

예제 2)

const multiply = (number) => {
    return number * 2;
}

console.log(multiply(2));

// 본문에 return문 하나만 존재한다면 중괄호를 생략할 수 있다.
// 단, 이 경우 return 키워드는 제거한다.
const multiply = number => number * 2;

console.log(multiply(2));

[gabrielyoon7]

#12 에 관련 글을 작성했습니다.