[js] for in & for of / includes & in

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

for in과 for of는 반복이 가능한 객체의 모든 원소를 하나씩 추출하여 변수에 담아 반복문을 수행하는 문법

// 1. for in
for(let value in arr){
    console.log(value)
}

// 1. for of
for(let value of arr){
    console.log(value)
}

그런데 이 둘은 반복하는 대상에 대한 차이점이 있다.

• for in 반복 대상 : Iterable object이면 모두 반복할 수 있는 대상이 됨 ==> 주로 객체에서 사용
• for of 반복 대상 : Iterable object이지만, prototype chain에 의한 Iterable은 반복 대상에서 제외됨 ==> 주로 배열에서 사용

Array.prototype.foo = function(){
return 1000
}
let arr = [1,2,3,4,5]

// 1. for in
console.log("[ for in ]")
for(let value in arr){
console.log(value + " " + arr[value])
}


// 2. for of
console.log("[ for of ]")
for(let value of arr){
console.log(value)
}

Array 객체에 prototype으로 foo 함수를 추가했으므로, arr 배열에는 foo 메서드가 추가된 상태이다.

 

2. includes vs in

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

 

in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환

// 배열
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees         // true를 반환합니다.
3 in trees         // true를 반환합니다.
(1 + 2) in trees   // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다.
6 in trees         // false를 반환합니다.
"bay" in trees     // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다.
"length" in trees  // true를 반환합니다. length는 Array(배열) 객체의 속성입니다.

// 미리 정의된 객체
"PI" in Math       // true를 반환합니다.
"P" + "I" in Math  // true를 반환합니다.

// 사용자가 정의한 객체
var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
"company" in myCar // true를 반환합니다.
"model" in myCar   // true를 반환합니다.