반응형
for of => 배열 순회에 쓰임
for in => 객체 순회에 쓰임
1. 배열 순회
// 1 배열 순회
let arr = [1, 2, 3];
// 1.1 배열 인덱스
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 1.2 for of 반복문
for (let item of arr) {
console.log(item);
}
// index방식과 for of는 성능상 차이는 없음
2. 객체 순회
// 2. 객체 순회
let person = {
name: "DY",
age: 32,
hobby: "PS5",
};
// 2.1 Object.keys사용
// -> 객체에서 key 값들만 뽑아서 새로운 배열로 변환
let keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'hobby']
// for of는 배열에서만 사용하는 연산자
for (let key of keys) {
const value = person[key];
console.log(key, value);
}
// name DY
// age 32
// hobby PS5
// 2.2 Object.values
// -> 객체에서 value 값들만 뽑아서 새로운 배열로 변환
let values = Object.values(person);
console.log(values); // ['DY', 32, 'PS5']
for (let value of values) {
console.log(value);
}
// DY
// 32
// PS5
// 2.3 for in
// for in은 객체에서만 사용하는 연산자
for (let key in person) {
const value = person[key];
console.log(key, value);
}
// name DY
// age 32
// hobby PS5
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript][기초] 배열 순회탐색 메소드 (forEach, includes, indexOf, findIndex, find) (1) | 2024.07.14 |
---|---|
[JavaScript][기초] 배열 요소 조작 메소드 (push, pop, shift, unshift, slice, concat) (1) | 2024.07.14 |
[JavaScript][기초] Object Type 깊은 복사/깊은 비교 (0) | 2024.06.30 |
[JavaScript][기초] Spread / Rest (...) (0) | 2024.06.30 |
[JavaScript][기초] 배열, 객체의 구조분해 할당 (0) | 2024.06.30 |