[ONEBITE-REACT] JS 심화 - 반복문으로 배열과 객체 순회하기 (Iteration)

의미

배열, 객체에 저장된 여러개의 값에 순서대로 하나씩 접근하는 것을 말한다.

주의할 점은 배열의 경우에는 순서가 보장되지만, 객체의 경우에는 속성의 순서가 보장되지 않는다.

배열을 순회하는 방법과 객체를 순회하는 방법이 다르다.

배열 순회 (Iterating over Arrays)

배열을 순회할 때는 주로 for 루프, forEach 메서드, for...of 루프, map 매서드를 사용한다.

for 루프

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
} // 1 / 2 / 3 / 4 / 5

코드해석
for 반복문을 사용해서 i라는 변수를 만들고 0이라는 값으로 초기화한다.
i<arr.length 즉 i가 arr라는 배열의 길이인 5가 되기 전까지 1단계를 증가시키며 콘솔에 arr[i]에 해당하는 인덱스를 불러오게 된다. 즉 4까지 반복하다가 i가 5가 되는 순간 루프를 멈춘다. arr 배열의 인덱스는 0~4까지 존재하므로 모든 값이 출력된다.

forEach 메서드

const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
    console.log(item);
}); // 1 / 2 / 3 / 4 / 5

for...of 루프

for...of 반복문은 for 반복문처럼 함수나 다른 코드에서도 사용되는 것이 아니라 오로지 배열을 순회하기 위해서만 사용되는 메서드이다.
for 반복문은 index 값의 증가를 이용해서 배열의 값을 순회하지만 for...of는 순회만 하게 된다.
따라서 for 반복문은 이 때 생성된 index 값으로 추가적으로 다른 작업도 할 수 있지만 for...of는 할 수 없다는 차이가 있다.

const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
    console.log(item);
} // 1 / 2 / 3 / 4 / 5

코드해석
이 코드는 해석할 필요가 없다.
오로지 배열의 순회를 위해 만들어진 메서드라 위의 식이 공식이다. arr이라는 배열을 순회하면서 item이라는 변수의 값으로 담는 메서드이다. 변수는 item이 아니라 다른 값으로 명명해도 된다.

map 메서드

const arr = [1, 2, 3, 4, 5];
arr.map(item => {
    console.log(item);
}); // 1 / 2 / 3 / 4 / 5

객체 순회 (Iterating over Objects)

object.keys 내장 함수

배열에서 for...of 반복문처럼 오로지 객체의 key값만 배열로 반환하는 내장 함수이다.
따라서 이것도 별도로 코드해석을 할 필요는 없고 공식을 그대로 사용하면 된다.

const wonYoung = {
    name: "장원영",
    age: 21,
    group: "Ive",
}

const jang = Object.keys(wonYoung);
console.log(jang); // ['name', 'age', 'group']

위와 같이 객체의 key 값들이 배열로 반환되었기 때문에 이 상태에서 배열을 순회하는 방법들을 사용 가능하다.

// for 반복문
const jang = Object.keys(wonYoung);

for (let i = 0; i < jang.length; i++) {
  console.log(jang[i]);
} // name / age / group

// for...of 반복문
const jang = Object.keys(wonYoung);

for (let key of jang) {
  console.log(key); // name / age / group
}

만약 for...of 반복문으로 배열을 순회할 때 key 값과 더불어 value도 같이 반환하고 싶다면 원래 변수에서 값을 받아오면 된다.
원래변수명[key]를 콘솔에 추가하면 된다.

const jang = Object.keys(wonYoung);

for (let key of jang) {
  console.log(key, wonYoung[key]); // name 장원영 / age 21 / group Ive
}

원래 변수로 다시 돌아가서 value를 가져오는 과정이 번거롭다면 별도로 변수를 선언하고 value값을 초기화 해도 된다.

for (let key of jang) {
    let value = wonYoung[key];
    console.log(key, value); // name 장원영 / age 21 / group Ive
}

Object.values 내장 함수

Object.keys가 객체의 key값들을 반환하는 내장 함수였다면 Object.values는 객체의 value값들을 배열로 반환하는 내장 함수이다.

const jang = Object.values(wonYoung);

console.log(jang); // ['장원영', 21, 'Ive']

배열로 반환됐기 때문에 다시 for...of 반복문을 이용해 배열의 값을 순회하면 배열을 잘 순회한다.

const jang = Object.values(wonYoung);

for (let value of jang) {
  console.log(value);
} // 장원영 / 21 / Ive

for...in 루프

for...in은 배열이 아닌 객체만을 위해 존재하는 특수한 반복문이다.
for...of와 문법은 비슷하다. 마찬가지로 콘솔에 출력할 때 console.log(변수명)만이 아니라 console.log(변수명, 원래변수명[key])까지 작성하면 value값들도 같이 반환한다.

이것도 원래변수명[key]를 다른 변수로 만들어서 저장하면 더 편리해진다.

const wonYoung = {
  name: "장원영",
  age: 21,
  group: "Ive",
};

for (const key in wonYoung) {
  console.log(key, wonYoung[key]);
} // name 장원영, age 21, group Ive

// key값들은 key...in으로 반환하고, 원래변수명에서 불러온 value는 별도의 변수에 초기화하기
for (const key in wonYoung) {
    let values = wonYoung[key]
  console.log(key, values); // name 장원영, age 21, group Ive
}

배열 프로퍼티를 순회하는 방법으로는 for...of 반복문이 있고 객체 프로퍼티를 순회하는 방법으로는 for...in이 있다.
헷갈린다면 in이라는 단어에 주목하면 된다.
객체 프로퍼티의 존재 유무를 확인하는 방법 중에 in 연산자를 활용하는 방법이 있었다.
복습하자면 확인할 프로퍼티명 in 변수명으로 객체 내에 프로퍼티가 존재하는지 확인할 수 있는 방법이었다.

const wonYoung = {
    name: "장원영",
    age: 21,
    group: "Ive"
}

console.log('town' in wonYoung); // false