본문 바로가기
웹/JavaScript

ES6. 화살표 함수 (Arrow Function)

by void pattern 2021. 1. 17.

화살표 함수(Arrow Function)

// es6 이전
function(){

}


// es6 이후
() => {}

function(){}; 이렇게 생긴 함수를  () => ; 화살표로 구문을 짧게 표현할 수 있다.

 

//es6 이전
var add = function (x, y) {
	return x + y;
}
console.log(add(2, 10));

//es6 이후
const add2 = (x, y) => x + y;
console.log(add2(2, 10));

화살표 함수는 함수 이름을 쓸 수 없다. 핸들링 하기 위해 변수에 넣어서 사용하면 된다.

 

//es6 이전
var newArr = [1, 2, 3, 4, 5].map(function (value) {
	return value * 2;
});
console.log(newArr);	//[2,4,6,8,10]


//es6 이후
let newArr2 = [1, 2, 3, 4, 5].map((v) => v * 2);
console.log(newArr2);	//[2,4,6,8,10]
  • 화살표함수에서는 return 값 생략 가능
  • this, arguments, super, new()를 사용할 수 없음
  • 항상 익명 함수임

 

let arrFunc = (...args) => { console.log(args) };

arrFunc(1, 2, 3)	//[1,2,3]

화살표 함수의 this는 this를 사용하고 있는 상위 스코프 체인 순서 대로 (중괄호 기준)    아래 hoisting 기초, spread operator 참고

인자값으로 ...args(펼침 연산자)를 사용하면 배열로 받아올 수 있다.

 

 

2021/01/04 - [웹/JavaScript] - ES6 배열. spread operator 펼침연산자 ...arr, Array.from

 

ES6 배열. spread operator 펼침연산자 ...arr, Array.from

펼침연산자 ... 배열을 펼쳐서 복사할 수 있는 녀석으로 기존 데이터의 참조를 끊고, 새로운 메모리에 새로운 데이터가 들어가게 된다. const arr = [1, 2, 3, 4]; const spreadOperator = [...arr]; console.log..

webroadcast.tistory.com

2020/08/25 - [웹/JavaScript] - var let const, hoisting 기초

 

var let const, hoisting 기초

 var es6 이하에서 변수를 선언할 수 있는 유일한 키워드 var! 1. 함수 레벨 스코프(Function-Level Scope) 함수 코드 블록만을 스코프로 인정한다. 전역 함수 외부에서 생성한 변수는 모두 전역변수이다.

webroadcast.tistory.com

 

댓글