[Javascript]for in, for of, forEach, map

김채현·2022년 7월 30일
0

TIL(Today I Learned..)

목록 보기
24/24

반복문 비교

각 반복문 for in, for of, forEach, map 비교를 해보겠습니다.

for in 구문

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다.
모든 객체에서 사용이 가능합니다.
for in 구문은 key 값에는 접근이 가능하지만 value 값에는 접근이 불가능합니다.

var obj = {
	a:1,
  	b:2,
  	c:3
}

for (var prop in obj) {
  console.log(prop, obj[prop]);
}
//a 1
// b 2
// c 3

for of 구문

for of 구문은 반복 가능한 객체를 반복할 수 있습니다.
보통 배열을 사용할 때 많이 사용합니다.

const arr = ['a', 'b', 'c']

for(var value of arr) {
  console.log(value);			
}

forEach vs map

두개를 혼동하기 쉬워 정리하려고 합니다.
forEach 메서드는 단순히 반복문을 대체하기 위한 함수이고, map 메서드는 요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차함수입니다.

결론은, forEach문은 반환값이 없지만 map 메서든는 새로운 배열을 생성하기 때문에 반환값을 가지고 있습니다.

const arr = [1,2,3];

arr.forEach(item => {
 	console.log(item);				
})

const value = arr.forEach(item => item*2)		

위와 같이 forEach문은 반환값이 없으므로 어떠한 변수에 값을 할당하려고 할때 undefined 가 반환됩니다.

const arr = [1,2,3];

const value = arr.map(item => item*2)

위와 같이 forEach문과 map 메소드 사용은 비슷해 보이지만 반환값 전달에서 차이가 있습니다.

profile
꿈꾸는 개발자!

0개의 댓글