반복문

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

 

 

1. for문
가장 기본적인 반복문으로, 조건에 따라 일정 횟수 만큼 같은 코드를 반복 실행해야 할 때 사용한다.

1부터 5까지 출력하는 프로그램을 작성한다.
반복문을 사용하지 않는다면, 이렇게 console.log를 5번 반복 작성해 출력해야 한다.

 

// 반복문 사용하지 않음
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

 

for문을 이용해 같은 프로그램을 작성한다.
for문은 초기화식, 조건식, 증감식 그리고 실행해야할 코드로 이렇게 구성되어 있다.

 

// for문
// 1~5
for (let i = 1; i < 6; i++) {
  console.log(i);
}
// 5~1
for (let i = 5; i > 0; i--) {
  console.log(i);
}

 

반복문을 사용하면 같은 기능을 하는 코드라도 이렇게 짧게 단축해서 작성할 수 있다.


2. while문
특정 조건이 참이라면, 특정 코드를 반복 수행하는 반복문이다.
for문은 특정 변수의 초기값과 조건문을 비교하고, 그 조건문이 참이라면, 변수의 값을 증감시켜 코드를 반복 수행하지만, while문은 단순하게 괄호안의 조건문만 확인하여 코드를 반복 수행한다는 차이점이 있다.

 

// while문
let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

 

while문에서는 괄호안의 조건문이 참이면 while문 내부의 코드를 계속 수행하기 때문에, while문의 내부에서 반복 횟수를 결정하는 변수의 값을 직접 변화시켜 주어야 한다. 즉, 언젠가는 조건문을 만족하지 않아 false가 반환 되어 종료될 수 있도록 주의해서 작성해주어야 한다.


3. 배열과 반복문
for문과 while문은 자바스크립트에서 배열의 모든 요소들에 접근해야 할 때 유용하게 사용된다.

 

// 배열과 반복문
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

for문을 이용해 배열의 모든 요소를 접근하는 반복문을 작성했다.


4. 객체와 반복문
객체의 프로퍼티를 순회하기 위해서는, 객체를 배열의 형태로 변경해 주어야 한다.

 

// 객체와 반복문
let person = {
  name: "홍길동",
  age: 25,
  height: 180
};
console.log(person); // {name: "홍길동", age: 25, height: 180}

 

person 객체를 배열로 변경하는 3가지 방법에 대해 하나씩 알아본다.

 

// 객체를 배열로 변경하는 3가지 방법
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

 

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

 

// Object.keys()
console.log(Object.keys(person)); // ["name", "age", "height"]
let newArray = Object.keys(person); // person 객체를 [key, key] 형태의 배열로 변환
for (let i = 0; i < newArray.length; i++) {
  // newArray 배열의 요소 순서대로 접근
  let nowKey = newArray[i]; // key
  console.log(`key : ${nowKey}, value : ${person[nowKey]}`);
}

 

newArray 의 요소, 즉 person 객체의 key값을 알고있기 때문에 객체의 프로퍼티를 모두 출력할 수 있다.

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

 

// Object.values()
console.log(Object.values(person)); // ["홍길동", 25, 180]
let newArray = Object.values(person); // person 객체를 [value, value] 형태의 배열로 변환
for (let i = 0; i < newArray.length; i++) {
  console.log(`value : ${newArray[i]}`);
}

 

person 객체의 프로퍼티의 값들이 출력된다.

3) Object.entries()
Object.entries 메서드는 객체를 받으면 [[key, value], [key, value]] 형태의 배열로 변환한다.

 

// Object.entries()
console.log(Object.entries(person)); //[ ["name", "홍길동"], ["age", 25], ["height",180] ]
let newArray = Object.entries(person); // person 객체를 [[key,value], [key,value]] 형태의 배열로 변환
for (let i = 0; i < newArray.length; i++) {
  console.log(`key : ${newArray[i][0]}, value : ${newArray[i][1]}`);
}

 

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


5. for...of 와 for...in
알아두면 유용한 자바스크립트의 또 다른 반복문들을 몇 가지 배워본다.

1) for...of
주로 배열의 모든 요소에 접근해야 될 때 사용된다.

 

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

 

코드를 실행시켜보면 arr 배열안에 있는 요소들이 순서대로 출력되는 것을 볼 수 있다.

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

 

// for...in
let person = {
  name: "홍길동",
  age: 25,
  height: 180
};
for (let key in person) {
  console.log(`${key} : ${person[key]}`);
}

 

key라는 변수에는 실제로 person 객체의 프로퍼티의 key값이 저장되고, 괄호표기법으로 key값에 해당하는 value 값을 알 수 있다.
객체를 배열로 변환하는 과정 없이 한 번에 객체의 모든 프로퍼티에 접근할 수 있다.


참고강의 : 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

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