TIL 28. JavaScript - for...in, for...of, forEach

☝🏻 for...of

• array 루프를 사용할 때 많이 사용하는 for(let i = 0; i < array.length; i++)구문을 대체가능하다.

const array = [1, 2, 3, 4, 5];

for(let element of array) {
	console.log(element);
}

(console paner)
1
2
3
4
5

---

🎈 array뿐 아니라 string type에도 사용 가능하다.

const string = 'hello';

for(let value of string) {
	console.log(value);
}

// console panel;
"h"
"e"
"l"
"l"
"o"

☝🏻 forEach

• forEach는 array의 method 중 하나로 주어진 함수를 배열 요소 각각에 대해 실행한다.

const array = [1, 2, 3];

array.forEach(element => console.log(element + 1));

// console panel
2
3
4

🎈 for문을 forEach문으로 바꾸기

const array = [1, 2, 3];
const newArr =[];

// 기존 for문
for(let i = 0; i < array.length; i++) {
	newArr.push(array[i]);
}

// forEach
array.forEach(element => {
	newArr.push(element);
}

🔍 for...of와 forEach의 차이

• for...of는 array뿐 아니라 이터러블한 object를 모두 순회할 수 있다.
• forEach는 array의 method 중 하나이다.

☝🏻 for...in

• 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복하여 출력한다.

const object = {
	a: 1,
    b: 2,
    c: 3
}

for(let property in object) {
	console.log(`${property}: ${object.property}`);
}

// console panel
"a: 1"
"b: 2"
"c: 3"

🎈 object뿐 아니라 다른 type의 데이터에도 사용 가능하다.

🔍 array에서는 첫번째 parameter에 들어가는 변수는 해당 index값이 string으로 출력된다.

const array = ['a', 'b', 'c'];

for(let value in array) {
	console.log(i);
    console.log(aray[i]);
}

//console panel
'0'
'a'
'1'
'b'
'2'
'c'