[JS] '.forEeach' 와 '화살표함수(=>)'

자바스크립트는 각 배열을 돌며 한 아이템마다 순서대로 작업을 수행하는 .forEach 라는 함수가 있다.

 

forEach는 return이 없는 콜백함수로 아이템을 가져오는 것이라고 한다.

배열명.forEach(요소명 => {
	실행문(요소명)
});

위와 같이 사용하면 되며 내장함수이기 때문에 일반적으로 사용하는 for문보다 속도가 더 빠르다고 한다.

 

const arr = ['사과', '바나나', '딸기', '망고'];

arr.forEach(function(element, index, array){
	console.log(`${array}의 ${index}번째 요소 ${element}를 꺼내다.`);
});

위와 같이 임시로 함수를 만들고 사용해도 되는데

const arr = ['사과', '바나나', '딸기', '망고'];

function printItem(i){
	console.log(`${i}를 꺼내다`);
}

arr.forEach(printItem);

이런식으로도 쓸 수 있다.

forEach문과 화살표 함수는 특히 오브젝트를 다룰 때 환상의 짝꿍인 것 같다.

 

 

화살표 함수는 함수표현의 간편한 대안이라고 한다.

다만, 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없다고 한다.

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

기본 구문

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

고급 구문

// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수를 지원함
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// 매개변수 목록 내 구조분해할당도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

클론 코딩을 하면서 좋다고 썼는데 더 알아봐야 할 것 같다.

화살표로 표시하는 형태가 직관적이고 독특하다.

뭔가 파이썬의 is, or, not 이 생각난다.

화살표 함수 - JavaScript | MDN