forEach, for..of, for..in

movie·2022년 8월 10일
js
2

☁️ forEach

예외를 던지지 않고는 forEach()를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다. - MDN

  • 만약 순회를 도중에 중단시켜야 하는 경우가 존재한다면 forEach 는 적절한 메서드가 아니다.
  • forEach 에 넘겨진 callback 함수에는 break 와 continue 를 사용할 수 없다. (이들은 함수 내에서 사용할 수 없기 때문)
// 1️⃣ forEach

const arr = [1, 2, 3, 4];

arr.forEach(element => {
		console.log(element); // [result] 1 2 3 4

		if (element === 2) {
			return;
		}
  
  	console.log(element) // [result] 1 3 4
})

// return이 break처럼 작동한다. 
// 순회가 종료되지는 않는다. 

// 2️⃣ for
// 위의 경우를 for문으로 생각하면 이와 같다. 
// callback 함수 내부에 존재하는 return이기 때문에 반복문에 영향을 주지 않는다. 

const arr = [1, 2, 3, 4];

const callback = (element) => {
		console.log(element); // [result] 1 2 3 4

		if (element === 2) {
			return;
		}
  
  	console.log(element) // [result] 1 3 4
}

for (let index = 0; index < arr.length; index++) {
  callback(arr[index])
}
  • 반복문에서 실행되고 있는 callback 내부의 return 이기 때문에 반복문에 영향을 주지 않는다고 생각하면 된다.

즉, 반복문을 중간에 멈추고 싶다면 다른 방법을 써야한다.



🤔 여기서 잠깐 [ enumerable(열거 가능한) vs iterable(반복 가능한) ]

1️⃣ enumerable : 열거 가능한

  • 해당 property의 키를 열거할 수 있다면 열거 가능한 속성이라고 한다.
  • 객체에서 문자열로 키가 지정되어 있다. (배열도 객체임)
const obj = { a: 1, b: 2, c: 3, d: 4 }; 
const arr = [1, 2, 3, 4]

Object.keys(obj) // [ 'a', 'b', 'c', 'd' ]
Object.keys(arr) // [ '0', '1', '2', '3' ]
// 열거 가능한 속성의 키는 Object.keys 메서드를 통해 반환 받을 수 있다. 
// obj와 arr의 속성은 열거할 수 있으므로 열거 가능한 속성이다. 
const obj = { a: 1, b: 2, c: 3 }; 

Object.defineProperty(obj, 'd', {
  value: 4,
  enumerable : false // enumerable 하지 않다. 
});

console.log(obj.d) // [result] 4

for (const key in obj) {
	console.log(obj[key]) // [result] 1 2 3
}

Object.keys(obj) // [ 'a', 'b', 'c' ]

2️⃣ iterable : 반복 가능한

  • 데이터가 주어진 순서대로 표현될 수 있는 iterator 객체를 반환하는 프로토콜을 구현해 둔 상태
  • 즉, 순서가 있어야 하므로 문자열, 배열 등의 객체가 iterable하다.
  • Symbol.iterator 라는 프로퍼티를 가진다.


☁️ for..of

  • 반복 가능한 객체에 대해 반복하고, 각 개별 element에 대해 실행되는 후크 호출
  • collection 전용 반복 구문
  • for..of 구문을 사용하기 위해서는 collection이 [Symbol.iterator] 속성을 가져야 한다.
  • 반복 가능한 객체 : array, set, string 등
  • value를 이용한다.
const arr = [1, 2, 3, 4];

for (const element of arr) {
  console.log(element); // [result] 1 2 3 4
}
  • 이는 콜백함수를 반복문 내부에서 실행해주는 것이 아니기 때문에 break 를 통해 순회를 중단 시킬 수 있다.


☁️ for..in

  • 열거 가능한 속성들을 순회할 수 있도록 해준다.
  • key값에만 접근 가능하다.
  • 순서가 보장되지 않는다.
  • 객체의 key는 열거 가능한 속성이다.
  • key를 이용한다.
// 1️⃣ array

const arr = [1, 2, 3, 4]

for (const index in arr) {
  console.log(arr[index]) // [result] 1 2 3 4 
}

// key 값에만 접근 가능하기 때문에 배열에서는 index에만 접근 가능하다. 

// 2️⃣ object

const obj = { a: 1, b: 2, c: 3, d: 4 }; 

for (const key in obj) { 
	console.log(obj[key]); // [result] 1 2 3 4 
}



참고

profile
movie
영화보관소는 영화관 😎
이전 포스트

클로저

다음 포스트

git merge, rebase merge, squash merge

0개의 댓글