[JS]반복문

swimming·2023년 6월 30일

variable
각 반복에 서로 다른 속성값이 variable에 할당됩니다.

iterable
반복되는 열거가능(enumerable)한 속성이 있는 객체.

forEach

Array, Map, Set 등 객체에서 사용 가능한 메서드. 배열의 요소들을 반복한다.
callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

let items = [1, 2, 3];

items.forEach(function (items) {
  console.log(items); ///1,2,3
});

for ... in

주로 객체에서 사용된다. (인덱싱 순서가 중요하지 않기에)
객체를 배열로 변환하는 과정없이 한번에 객체의 모든 프로퍼티에 접근 가능하다.
배열에서 사용하지 않는 게 권장된다. '인덱스의 순서'가 중요한 배열의 특성과 달리 for...in 반복문은 '순서 없이' 반복되는 특성을 가졌기 때문이다. 배열의 인덱스 순서대로 반복한다는 결과를 >보장< 할 수 없다.

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


for (let key in person) {
  console.log(prop, obh[prop]); // a 1, b 2, c 3
  console.log(`key: ${prop}, value: ${obj[prop]}** `) 
  //key: a, value: 1** key: b, value: 2** key: c, value: 3** 
}

for ... of

주로 배열의 모든 요소에 접근해야할 때 사용된다.
반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

컬렉션 전용 반복 구문이며, 해당 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 한다.(직접 명시 가능)

기본 문법

for (variable of iterable) {
  statement
}

객체별 예시

● Array 에 대해 반복

let arr = [1, 2, 3];

for (let i of arr) {
  console.log(i); //1, 2, 3
}

let 대신 const도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우에 한해서.

let arr = [1, 2, 3];

for (const i of arr) {
  console.log(i); //1, 2, 3
}

● String 에 대해 반복

let iterable = "day";

for (let value of iterable) {
  console.log(value);
}
// "d"
// "a"
// "y"

● TypedArray 에 대해 반복

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

● Map 에 대해 반복

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

● Set 에 대해 반복

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

● function 에 대해 반복

function* fibonacci() {
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // 1000에서 수열을 자름
  if (n >= 1000) {
    break;
  }
}

for...in 과 for...of 더 자세히 비교하기

console.log(">> for.. in 반복 결과");
const fruits = ["apple", "banana", "tomato"];
for (let i in fruits){     //배열에는 for.. in을 쓰지 맙시다!
  console.log(fruits[i]);
}

console.log(""); // 사이 띄움

console.log(">> for.. of 반복 결과");
const heros = ["Iron-man", "Spider-man", "Bat-man"];
for (let i of heros){
  console.log(i);
}

해석

for ...in은 객체의 key값과 value값을 받을 수 있기 때문에 앞서 보여줬던 문자열을 변수로한 예시에서 해당 글자 하나하나가 아닌 그 글자들의 순서 "0", "1", "2", "3", "4"가 반환된 것이다.
이렇듯 for ...in문에서는 배열을 사용하는 것이 적절한 방법이 아니라고 할 수 있겠다.

for in 반복문과 for of 반복문의 차이점

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {}; //Object 프로토타입에 커스텀 속성 추가
Array.prototype.arrCustom = function () {}; //Array 프로토타입에 커스텀 속성 추가

let iterable = [3, 5, 7];
iterable.foo = "hello"; //배열객체에 foo 속성 추가 및 값 할당.

console.log("for.. in 반복 결과");
for (let i in iterable) {
  console.log(i);
}

console.log(""); // 사이 띄움

console.log("for.. of 반복 결과");
for (let i of iterable) {
  console.log(i);
}

해당 배열을 for...in 사용할 경우, 눈의 보이는 배열의 원소 뿐만 아니라, 눈에 보이지 않는 프로토타입 속성의 인덱스까지 모두 돌며 반복하는 것을 확인할 수 있다.
게다가 objCustom을 먼저 정의해주었지만, arrCustom이 먼저 출력되었는데, 여기서 인덱싱의 순서 보장이 안된다는 점을 확인할 수 있다.