자바스크립트 Arrow Function

자바스크립트 Arrow Function

Arrow Function

---

 Arrow Function은 함수를 정의하는 새로운 방법이다. 이런 게 언제 생겼는지 모르겠다.

사실 전문 웹프론트 개발자가 아닌 "나" 이기에... 새로운 문법이나 몰랐던 방법을 보게 되면 바로바로 기억해서 써먹어보고자 노력하는 편이다.

 오늘은 화살표 함수에 대해 알아본다.

 화살표 함수를 사용해 함수를 정의하면 기존 함수 선언식이나 함수 표현식에 비교해 구문이 짧아진다는 장점이 있다.

 화살표 함수 내의 this는 언제나 상위 스코프 this를 가리킨다.

 

예제

// 함수 선언식
function hello(str){
    return "Hello, " + str
}

// 함수 표현식
const hello2 = function (str){
    return "Hello, " + str
}

console.log(hello("김봉두"));
console.log(hello2("김봉두"));

// Arrow Function
const hello3 = (str) => {return "Hello, " + str};

console.log(hello3(" 김봉두(화살표 함수1.)"));

// 파라미터가 하나만 있을 때는 주변 괄호를 생략 가능하다.
const hello4 = str => {return "Hello, " + str};

console.log(hello4(" 김봉두(화살표 함수2.)"));

// 화살표 함수의 유일한 문장이 return 일때 return 과 중괄호 ({})를 생략할 수 있다.
const hello5 = str => "Hello, " + str;

console.log(hello5(" 김봉두(화살표 함수3.)"));

결과