[JavaScript] for...in, for...of, forEach()

codeing999·2022년 7월 17일
0

JavaScript

목록 보기
2/24

forEach()

이건 map, reduce, filter와 같이 정리해 놓은 글에 따로 자세히 써놨다. 뭘 리턴하지도 않고 원본을 바꾸지도 않는다.
@ ES5에서 나온 함수로 배열의 전체를 순회할 때 전통적 for문보다 간단하긴 하다. 근데 break나 return 같은 게 안먹힌다고 한다.

for...in

이거 파이썬에서는 배열의 값을 가져왔었는데 자바스크립트에선 그 기능을 하는게 for...of였고 이건 인덱스를 가져오길래 당황했다.
근데 인덱스를 가져와서 어디다 쓰나했던. arr[i]라고 쓰면 값을 가져올 수 있긴한거네. 인덱스랑 값이랑 둘 다 필요할 땐 이게 더 낫다고 볼 수 있겠다.
그리고 더군다나 그냥 배열이 아니라 키:밸류 구조를 가진 배열일 때에 더 빛을 발한다.
그럴 땐 가져오는 게 키값이고 arr[key]가 밸류이므로 키와 밸류를 둘 다 접근하며 쓰는 구조.
변수 이름은 배열일 경우엔 i나 idx, index이런거로 하고,
객체일 때는 k나 key로 하면 될 듯.
@ 이 때 가져오는 인덱스값은 숫자가 아니라 문자라서 덧셈 연산을 한다고 하면 "2"+1 = "21" 이와 같이 된다고 한다.
@ 숫자 인덱스만 순회하는게 아니라 추가한 속성들까지도 순회하고 심지어 명시되어 있지 않은 프로토타입 체인이라는 것까지도 순회를 한다고 하니 일반적으로 배열 전체를 순회할 땐 굳이 좋지 않다고 한다.
@ 결론적으로는 그냥 배열엔 다른 것들 쓰고 객체배열같은 거일 때 쓰는게 좋은 듯.

for...of

이게 위에서 말했듯이 배열의 값을 가져오며 반복하는 거.
@ ES6에서 새로 나온 문법이라고 한다.
@ 이거랑 forEach()의 차이는 뭘까? 똑같이 배열 전체 순회하는데. 이거는 forEach랑은 다르게 break, return 같은 구문이 먹힌다고 한다.
@ 그리고 이거는 배열 뿐만 아니라 string 그리고 set, map 등의 객체에서도 쓸 수 있다고 한다.
@ 특히 map과 썼을 때

for (var [key, value] of phoneBookMap) {
  console.log(key + "'s phone number is: " + value);
}

이런 식으로 키값과 밸류값을 분리해서 갖고 올 수 있기도 하다.

결론

@ for...in은 그냥 배열순회할 땐 다른걸 쓰는게 좋고 객체배열을 순회할 때 쓰면 좋다.
@ for...of는 배열뿐만 아니라 문자열, set, map에도 쓸 수 있고 map이랑 쓸 땐 키랑 밸류 분리할 수도 있어서 편리하다.

profile
코딩 공부 ing..

0개의 댓글