반복문정리

JavaScript에서 사용할 수 있는 반복문의 형태

 

1. while 문

2. do / while 문

3. for 문

4. for / in 문

5. for / of 문

6. for each

 

while문

while (표현식) {

    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}



ex) 
var i = 1;
while(i<10){  // i가 10이하일때만 반복
	console.log(i);
}

do while문

do { 
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}
while (조건문); 
//  조건문을 판단하기 전에 do 블록의 코드를 먼저 실행

ex) 
let i = 1; 
do {
 console.log(i);
 i++;
}  
while(i<=5);

for문

for (초기식; 표현식; 증감식) { 
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; 
}

ex) 

for(var i=1; i< 10; i++){
	console.log(i) 
}

for / In문  

for / in 문은 일반적인 for 문과는 전혀 다른 형태의 반복문
for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회하도록 한다

for (변수 in 객체) { 
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문; 
}

ex)  

let brands = ['Google', 'Kakao', 'Naver', 'Kakao', "CoffeeBean","Starbucks"];   
for(let idx in brands){
    console.log()
}

for / of 문

for / of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문

for (변수 of 객체) {

    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;

}  

ex)  

let brands = ['Google', 'Kakao', 'Naver', 'Kakao', "CoffeeBean","Starbucks"];  
for(let element of brands){
    console.log(element);
}


ex) 

// 투표 결과 리스트
let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

// 풀이 1
let voteCounter = {};  

for (let name of votes) {
  // 코드를 작성하세요.
    if(name in voteCounter === false) {   // if(!(name in voteCounter)) {}
        voteCounter[name] = 1
    }else{
      voteCounter[name] += 1
    }
    


}

// 풀이2
let voteCounter = {};  

for (let name of votes) {
  // 코드를 작성하세요.
  if (name in voteCounter) {
    voteCounter[name]+= 1;
  } else {
    voteCounter[name] = 1;
  }
}


// 후보별 득표수 출력
console.log(voteCounter); // { '이재식': 17, '이규하': 23 }

 

forEach

forEach 메서드도 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다.

forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다.

Current Value (명명된 매개변수) - 처리할 현재 요소
Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
Array (선택적 매개변수) - forEach 메서드를 호출한 배열

=====================================
- 우선 forEach 메서드를 사용해 배열을 순회하려면 콜백 함수 또는 익명 함수가 필요

- 콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 합니다.

기본 syntax
numbers.forEach(function(){
// code  
});
==================

// 함수선언
numbers.forEach(function(number){
    console.log(number);
});

// 화살표함수
numbers.forEach(number => console.log(number));


==============================


선택적 매개변수
인덱스(Index)
이어서 선택적 매개변수에 대해 알아봅시다.

첫 번째 선택적 매개변수는 각 요소의 순서를 나타내는 인덱스입니다.

즉 두 개의 매개변수를 활용하여 메서드를 사용하면 두 번째 매개변수를 통해 요소의 인덱스를 확인

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index, array) =>{
    console.log('index ' + index + ' value: ' + number, '원본 array ' + array); 
});

index 0 value: 1 원본 array 1,2,3,4,5
index 1 value: 2 원본 array 1,2,3,4,5
index 2 value: 3 원본 array 1,2,3,4,5        
index 3 value: 4 원본 array 1,2,3,4,5        
index 4 value: 5 원본 array 1,2,3,4,5   
==============================
==============================