배열과 객체 순회 [JavaScript | 학습을 위한 자료 | 한입만 REACT]

배열과 객체 순회

// 순회는 배열,객체에 저장된 여러개의 값에 순서대로 하나씩 접근하는 것

// 1. 배열 순회
let arr = [1, 2, 3];

// 1.1 배열 인덱스
for (let i = 0; i < arr.length; i++) { // length: 배열의 길이 프로퍼티 
    console.log(arr[i]);
}

let arr2 = [4, 5, 6, 7, 8]; // 인덱스저장 후 값 순회
for (let i = 0; i < arr.length; i++) {
    console.log(arr2[i]);
}

// 1.2 for of 반복문
// 배열의 값(value)만 순회
for(let item of arr) { // arr 값만 item에 넣어 순회
    console.log(item);
}

// 2. 객체 순회
let person = {
    name: "강진호",
    age: 27,
    hobby: "테니스",
};

// 2.1 Object.keys 사용
// 객체에서 key 값들만 뽑아서 새로운 배열로 반환
let keys = Object.keys(person);
console.log(keys); // 출력: ["name", "age", "hobby"]

// 키 배열을 순회
for(let i = 0; i < keys.length; i++) {
    console.log(keys[i]);
}

// 키와 값을 함께 순회
for (let key of keys){
    const value = person[key];
    console.log(key, value);
}

// 2.2 Object.values
// 객체에서 value 값들만 뽑아서 새로운 배열로 반환
let values = Object.values(person);
console.log(keys);

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

// 2.3 for in
// 객체의 키(key)를 순회하며, 각 키로 값을 접근
for(let key in person){ // for of는 배열순회에만 사용, for in은 객체순회에만 사용
    console.log(person);
    const value = person[key];
    console.log(key, value);
}

 

---