반목문

안녕하세요😄

이번시간에는 자바스크립트의 반복문에 대해 배워보도록하겠습니다.

반복문

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

자바스크립트에서 사용할 수 있는 반복문은 여러 가지가 있습니다.

그 중에서 우리는 가장 많이 사용되는 몇 가지 반복문에 대해 배우면서, 배열과 객체에서 반복문을 사용해 해당 배열과 객체의 요소 및 프로퍼티들을 순회하는 방법까지 알아보도록 하겠습니다.

for문

for문은 앞에서 잠깐 언급했던 반복문인데요,

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

1부터 5까지 출력하는 프로그램을 작성해보겠습니다.

반복문을 사용하지 않는다면, 이렇게 console.log를 5번 반복 작성해 출력해야합니다.

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

그럼, 이번에는 for 문을 이용해 같은 프로그램을 작성해보도록하겠습니다.

for문은 초기화식, 조건식, 증감식 그리고 실행해야할 코드로 이렇게 구성되어있습니다.

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

우리는 1부터 5까지의 숫자를 출력하는 반복문을 작성해야하므로,

초기화식에는 let 키워드를 통해 i를 1로 초기화 해줍니다.

그 다음 조건식에는, 현재 값이 1인 변수 i의 값이 5보다 같거나 작을 때 까지 혹은 6보다 작을 때 까지로 설정해주어야합니다.

i 의 값은 매번 코드가 실행될 때마다 1씩 증가해야하므로, i++ 이라는 증감식을 작성해줍니다.

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

그럼, 이 for문의 실행 순서에 대해 자세하게 살펴보겠습니다.

먼저, 변수 i의 초기값을 1로 할당했고, i의 값이 1이기 때문에 i<6 이라는 조건식을 만족하기 때문에 console.log(i)가 실행되고 현재 i의 값인 1이 출려되게 됩니다.

그 다음, i++ 이라는 증감식을 통해 i의 값이 2가 되고, 다시 i<6 이라는 조건식을 만족하기 때문에 console.log를 통해 2가 출력됩니다.

같은 과정을 반복해서 만약 i의 값이 5가된다면, i<6 조건식을 만족해 console.log를 통해 숫자 5가 출력되고 i++ 을 통해 i의 값이 6으로 증가합니다.

이때, i 의 값이 6이므로, i<6 이라는 조건식을 만족하지 않게되어, for문이 종료됩니다.

그럼 이번엔 숫자 5부터 1까지 순서대로 출력하는 프로그램을 for문을 통해 작성해보겠습니다.

for(let i = 5; i > 0; i--){
    console.log(i);
}

이번에는 숫자 1부터가 아니라 숫자 5부터 1까지 순서대로 출력되어야 하므로, i의 값을 5로 초기화해주겠습니다.

그 다음, i의 값이 1이 되어있을 때 까지 해당 코드가 실행되야하므로, i가 1보다 크거나 같을 때 까지 혹은 0보다 클 때 까지로 조건식을 작성해줍니다.

i 의 값은 코드가 실행될 때 마다 1씩 감소해야하므로, 이번에는 i-- 라는 증감식을 작성해줍니다.

코드 실행 결과, 5부터 1까지 순서대로 출력되는 것을 확인할 수 있습니다.

while문

다음으로는 for문과 비슷하게, 조건을 만족할 때 까지 동일한 코드를 반복 수행하는 while문이라는 반복문에 대해 알아보겠습니다.

while문은 특정 조건이 참이라면, 특정 코드를 반복 수행하는 반복문입니다.

for문은 특정 변수의 초기값과 조건문을 비교하고, 그 조건문이 참이라면, 변수의 값을 증감시켜 코드를 반복 수행하지만,

while문은 단순하게 괄호안의 조건문만 확인하여 코드를 반복 수행한다는 차이점이 있습니다.

이번에도 1부터 5까지의 숫자를 출력하는 코드를 while 문으로 작성해보겠습니다.

let i = 1;

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

while문에서는 괄호안의 조건문이 참이면 while문 내부의 코드를 계속 수행하기 때문에, while문의 내부에서 반복 횟수를 결정하는 변수의 값을 직접 변화시켜 주어야합니다.

먼저 while문을 작성해보겠습니다.

while문 옆의 괄호안에는 조건식이 들어갑니다. 우리는 1부터 5까지 숫자를 출력해야하므로 i가 6보다 작을 때 까지 반복문을 실행시켜주겠습니다.

여기까지 코드를 작성해보면, i 에 빨간 줄이 생기면서, i is not defined 라는 오류가 생기게 됩니다.

아직 i를 선언한 선언식이 없다는 것인데요, 그럼, while문의 바깥에 변수 i를 선언한 다음, 초기화 해주도록 하겠습니다.

i라는 변수의 값이 1부터 5까지 출력되어야 하므로, i의 값을 1로 초기화 해주겠습니다.

이렇게 코드를 작성하고, 코드의 실행 순서를 살펴보면, i의 값은 1이기 때문에 i<6 이라는 조건을 만족하고 true를 반환해 console.log(i)를 통해 1을 출력합니다.

그 다음, i 의 값은 여전히 1이므로 또 숫자 1이 출력되게됩니다. 이렇게 i의 값에 아무런 변화를 주지 않는다면, i<6 이라는 조건을 계속 만족하는 상태가 되기 때문에 숫자 1이 무한대로 계속 출력되게 될 것입니다.

우리는 1부터 5까지 순서대로 출력을 해야하므로, console.log(i) 라는 코드 아래에 i++ 이라는 증감식을 작성해 i의 값을 코드가 실행될 때마다 1씩 늘려주도록 하겠습니다.

코드를 실행시켜보면 1부터 5가 순서대로 출력 되는 것을 볼 수 있습니다.

while 문을 작성하실 때에는 언젠가는 조건문을 만족하지 않아 false가 반환 되어 종료될 수 있도록 주의해서 작성해주어야 합니다.

배열과 반복문

이러한 for문과 while문은 자바스크립트에서 배열의 모든 요소들에 접근해야 할 때 유용하게 사용됩니다.

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

1부터 5까지의 숫자가 들어있는 arr 배열을 생성한 다음, arr 배열 요소들을 하나씩 출력해보겠습니다.

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

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

배열 인덱스는 0번부터 시작하므로, for문 안의 변수 i는 0으로 초기화해줍니다.

그 다음, 배열의 length 프로퍼티는 배열의 현재 길이를 가지고 있기 때문에, for문의 조건식 부분에 arr.length 를 통해 정확하게 배열의 크기만큼 for문을 실행시킬 수 있고,

0부터 1씩 증가하는 i 변수로, 이렇게 배열의 인덱스를 하나씩 늘려가면서 모든 배열의 요소에 접근할 수 있게 됩니다.

코드 실행 결과 1부터 5까지 알맞게 출력된 것을 볼 수 있습니다.

객체와 반복문

이렇게 반복문 중에서 for문과 while문에 대해 알아보면서, 배열을 반복문을 사용해 배열의 모든 요소에 접근해보았습니다.

우리는 배열 뿐만아니라, 객체의 프로퍼티도 반복문을 활용하여 순회할 수 있습니다.

다만, 객체의 프로퍼티를 순회하기 위해서는, 객체를 배열의 형태로 변경해주어야합니다.

person 이라는 객체에 이름, 나이, 키에 대한 정보를 담아보겠습니다.

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

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

그 다음, 이 person 객체를 배열로 변경하는 3가지 방법에 대해 하나씩 알아보도록하겠습니다.

console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

1. Object.keys()

우선 첫 번째 방법은 Objec.keys() 를 사용하는 방법입니다.

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

한 번 작성해보도록 하겠습니다.

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

코드를 실행해보면, 출력 결과 person 객체의 key 값인 name, age, height 가 출력되는 것을 볼 수 있습니다.

이렇게 객체를 key 값들로 이루어진 배열로 변환했으니, for문을 사용해 객체의 프로퍼티들을 모두 순회해보도록하겠습니다.

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

for (let i = 0; i < newArray.length; i++) {
    let nowKey = newArray[i]; // newArray 배열의 요소 순서대로 접근
    console.log(`key : ${nowKey}, value : ${person[nowKey]}`);
}

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

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

i를 0으로 초기화 하고, i 가 newArray 배열 요소들을 모두 순회할 수 있도록, 조건식에 length 프로퍼티를 사용해줍니다.

i 는 1씩 증가해야하므로 i++ 이라는 증감식을 적어주겠습니다.

for문의 내부에는, nowKey 라는 변수를 생성하고, newArray의 배열 요소 즉, person 객체의 key값을 하나씩 저장해주겠습니다.

그럼 우리는 person 객체의 key 값을 nowKey 라는 변수를 통해 얻어올 수 있고, 괄호표기법을 사용해 대괄호 안에 nowKey 변수를 작성해 해당 key 값에 해당하는 value 값을 얻어올 수 있습니다.

코드 출력 결과, key 값과 value 값이 알맞게 출력 된 것을 볼 수 있습니다.

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

2. Object.values()

이렇게 Object.keys() 를 사용해 객체를 배열로 변경하는 방법에 대해 알아보고, 이후 person 객체의 모든 프로퍼티들을 출력해보았습니다.

객체를 배열로 변경하는 두 번째 방법은 Object.values를 이용하는 것 입니다.

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

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

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

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

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

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

마찬가지로 newArray에 객체 프로퍼티의 value 값들로 이루어진 배열을 저장하고,

for문을 통해 바로 value 의 값을 출력해보겠습니다.

실행 결과, person 객체의 프로퍼티의 값들이 출력됩니다.

3. Object.entries()

객체를 배열로 변경하는 마지막 방법은 Object.entries() 를 사용하는 것입니다.

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

한 번 작성해보겠습니다.

console.log(Object.entries(person));
//[ ["name", "홍길동"], ["age", 25], ["height",180] ]

마찬가지로, Object.entries()를 이용해 객체를 배열로 변환 후 객체의 모든 프로퍼티에 접근해보겠습니다.

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]}`);
}

먼저 newArray에 Object.entries를 통해 person 객체의 프로퍼티들을 모두 배열로 반환한 값을 넣어주겠습니다.

이번에는 newArray에 key값과 value 값이 모두 들어있기 때문에

key값을 꺼낼 때에는 i번째 인덱스 중 0번째 값을, value값을 꺼낼 때에는 i번째 인덱스 중 1번째 값을 꺼내주어야 합니다.

코드를 실행시켜보면, person 객체 프로퍼티의 key와 value 들이 잘 출력되는 것을 볼 수 있습니다.

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

for...of 와 for...in

이렇게 자주 사용되는 반복문을 알아보면서, 배열과 객체의 모든 요소들과 프로퍼티들에 접근하는 방법까지 배워보았습니다.

이번에는 알아두면 유용한 자바스크립트의 또 다른 반복문들을 몇 가지 배워보도록하겠습니다.

for...of

먼저 for...of라는 반복문에 대해 살펴봅시다.

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

arr 이라는 배열에 1부터 5까지의 값을 담고, for...of 문을 사용해 배열 요소들을 하나씩 출력해보겠습니다.

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

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

for...of 문은 이렇게 for문의 괄호 안에 변수를 선언한 다음, of를 작성하고, 뒤에 배열의 이름을 작성해주면 됩니다.

괄호 안에 선언된 변수를 사용해 배열 요소에 접근할 수 있습니다.

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

for...in

다음으로는, for...in 이라는 반복문에 대해 알아보겠습니다.

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

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

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

person 이라는 객체에 동일하게 이름 홍길동, 나이 25, 키 180 이라는 프로퍼티를 넣어주고,

아래에 for, 그리고 괄호 안에 key라는 변수를 선언해주겠습니다.

그 다음 in 을 작성하고 옆에 객체의 이름인 person 을 작성해주겠습니다.

이렇게 작성하면, key라는 변수에는 실제로 person 객체의 프로퍼티의 key값이 저장되고, 우리는 괄호표기법으로 key값에 해당하는 value 값을 알 수 있습니다.

출력 결과 person 객체 프로퍼티의 key값과 그에 맞는 value 가 알맞게 출력된 것을 볼 수 있습니다.

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

이번 시간에는 자바스크립트의 반복문에 대해 배워보았습니다.

다음 시간에는 배열을 조금 더 유용하게 사용할 수 있도록 배열이 가지고있는 여러가지 배열 내장함수들에 대해 배워보겠습니다.

감사합니다.