자바스크립트 - 반복

반복문

• 반복문은 특정 작업을 반복적으로 수행 할 때 사용되는 구문으로, 프로그래밍을 할 때 아주 유용하게 자주 쓰이는 중요한 개념입니다. 

 

for문

• for문은 가장 기본적인 반복문으로, 조건에 따라 일정 횟수 만큼 같은 코드를 반복 실행해야 할 때 사용됩니다. 
• for문을 이용하면 아래의 코드를 쉽게 작성할 수 있습니다. 

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

 

for (let i = 1; i < 6; i++) {
    console.log(i);
}

 

 

while문

• while문은 특정 조건이 참이라면, 특정 코드를 반복 수행하는 반복문입니다. 
• 위의 코드를 while문으로 작성해보겠습니다. 

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

 

 

배열과 반복문

• 이러한 for문과 while문은 배열의 모든 요소들에 접근해야 할 때 유용하게 사용됩니다. for문을 이용해 배열의 모든 요소에 접근해보겠습니다.

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 

 

객체와 반복문

• 배열 뿐만아니라 객체의 프로퍼티도 반복문을 활용하여 순회할 수 있습니다. 다만 객체의 프로퍼티를 순회하기 위해서는, 객체를 배열의 형태로 변경해주어야 합니다. 

let person = {
    name: "홍길동",
    age: 25,
    height: 180,
};

console.log(person);
//{name: "홍길동", age: 25, height: 180}

 

그 다음, 이 person 객체를 배열로 변경하는 3가지 방법을 알아보겠습니다. 

 

1.Object.keys()

• Object.keys는, 자바스크립트의 Object라는 객체의 메소드로, 매개변수로 받은 객체의 key 들을 모두 찾아 배열의 형태로 반환하는 객체 매서드입니다.

console.log(Object.keys(person));
//["name", "age", "height"]

코드를 실행햅보면 key값들이 출력되는 것을 볼 수 있습니다. 

 

이제 key가아닌 객체의 프로퍼티들을 모두 순회해보도록 해보겠습니다.

 

먼저 newArray라는 변수에, person 객체의 key값들을 배열 형태로 변환한 결과를 담아보겠습니다.

그 다음 for문을 통해 newArray배열요소를 하나씩 모두 순회해보겠습니다. 

 

 

 

2.Object.values()

• Object.values()메서드는 매개변수로 객체를 넘기면, 해당 객체의 values를 모두 찾아 배열로 반환합니다. 

console.log(Object.values(person));
//["홍길동", 25, 180]

 

위의 메서드를 이용하면 key값을 알 필요 없이 바로 객체 프로퍼티의 value값을 알 수 있습니다. 

for문을 이용해 프로퍼티의 값들을 출력해보겠습니다.

 

let newArray = Object.values(person);
// person 객체를 [value, value] 형태의 배열로 변환

for (let i = 0; i < newArray.length; i++) {
    console.log(`value : ${newArray[i]}`);
}

 

3.Object.entries()

• entries메서드는 객체를 받으면 [[key,value], [key, value]] 형태의 배열로 반환합니다. 

 

객체를 배열로 변환 후 객체의 모든 프로퍼티에 접근해보겠습니다.

 

Object.entries는 인자로 받은 객체의 모든 key,value 쌍을 배열에 담아 반환하기 때문에 보다 쉽게 객체의 모든 프로퍼티를 출력할 수 있습니다.

 

 

for..of 

• for..of 반복문은 주로 배열의 모든 요소에 접근해야 될 때 사용됩니다. 

let arr = [1, 2, 3, 4, 5];

for (let i of arr) {
    console.log(i);
}

 

 

for...in

• for..in문은 주로 객체에서 사용되며, for문과는 달리 객체의 모든 프로퍼티를 바로 순회할 수 있도록 해줍니다.

let person = {
    name: "홍길동",
    age: 25,
    height: 180,
};

for (let key in person) {
    console.log(`${key} : ${person[key]}`);
}

 

key라는 변수에는 실제로 person객체의 프로퍼티의 key값이 저장되고,

우리는 괄호표기법으로 key값에 해당하는 value값을 알 수 있습니다. 

 

이렇게 for..in문을 사용하면, 객체를 배열로 변환하는 과정 없이 한 번에 객체의 모든 프로퍼티에 접근할 수 있습니다.

 

 

---

참고 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의