for...in, for...of 비교해보기

알고리즘 문제를 풀다가 계속 헷갈리고 까먹어서 써보는 글..!

객체 친구 : for...in 반복문

for..in 반복문은 객체의 속성(key)를 반복하고 싶을 때 쓴다.
객체인데 for문을 쓰고싶다? 하면 for...in!!

for..in은 객체의 key의 인덱스로 접근할 수는 있지만
value 값에는 바로 접근할 수는 없다.
대신, 객체의 속성으로 접근할 수 있는 obj[key] => value 로 value에 접근해보면 된다!

const object = { a:1, b:2, c:3};
for(const key in object) {
  console.log(`obj.${key} = ${obj[key]}`);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

만약 for...in 을 문자열에 써본다면 어떤 결과가 나올까?

const str = "string";
for(let el in str) {
  console.log(el);
}
// Output:
// 0
// 1
// 2
// 3
// 4
// 5

문자열의 내용이 나오는 것이 아니라 문자열의 인덱스가 찍혀버린다.
for...in은 객체의 key값을 반복하기 때문에 객체랑 쓰는 것이 적절하다!

for ... of는?

배열을 반복문으로 돌릴 때는 보통 for문으로 잘 쓴다.
하지만 for...of로 써도 매우 편하다!
for...of는 배열뿐만 아니라 문자열, map, arguments 객체(배열의 형태의 객체)에 대해서
반복한다!

####array 반복

const arr = ['a', 'b', 'c'];
for( let el of arr) {
  console.log(el)
}
// expected output: "a"
// expected output: "b"
// expected output: "c"

string 반복

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

함수와 배열 입력받아 새로운 배열을 리턴

let result = [];
  for(let el of arr ) {
   result.push(func(el));
   
  }
  return result;

for...in 과 for...of의 차이

for...in 반복문은 객체의 모든 속성에 대해 반복하고
for...of 구문은 배열의 요소만 뽑는다!

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}