for문의 종류에 대해 알아봅시다.

반복문을 하기 전에 변수에 대해 알아보자

자바스크립트에는 let(변수)와 const(상수)가 있습니다. var란 변수도 있지만 사용시 변수와 상수가 둘다 가능하기 때문에  let(변수)와 const(상수)를 사용하는 것이 효율적입니다.

 

for문

자바스크립트에서 가장 많이 사용하는 반복문은 for문 입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리하죠. for문에서는 몇번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫번쨰  항에서 카운터 변수를 지정합니다.

 

사용방법 : for(초깃값; 조건; 증가식) { 코드 }

1. 초깃값 : 몇번 반복할지 지정하기 위해 카운터 변수를 사용합니다.이 항목에서 카운터 변수를 선언ㅇ하고 초기화 합니다. 초깃값은 0이나 1부터 시작합니다.
2. 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for문에 있는 명령을 반복 할 수 있습니다.
3. 증가식 : 문장을 실행한 후 카운터 변수를 증가 시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다.

 

for문에서 가장 많이 사용되는 "length"에 대해서도 알아봐요.

• length는 길이를 출력하는 코드입니다. 
• 배열로 데이터가 저장할때 데이터에 인덱스 번호가 부여되어 각각 데이터가 저장됩니다. 이때 length를 사용하면 배열의 길이를 자동으로 가져옵니다.

const name = ["An", "Kim", "Lee"];

for(let i=0; i<name.length; i++) {
	document.write(name[i]); // An, Kim, Lee가 출력됨
}

 

forEach문

단순히 배열 요소만 가져와서 보여 준다면 for문과 forEach문 사이에 큰 차이가 없습니다.

차이점이라면 배열에 있는 값들을 그대로 복사해서 사용 할 수있다는 정도로 생각하셔도 괜찮습니다.

 

사용법 : 배열명.forEach(콜백함수) { 코드 }

 

const students = ["Park", "Kim", "Lee", "Kang"];

students.forEach(function(name) {
  document.write(`${name}.`); //Park, Kim, Lee, Kang.
});

 

for in문

반복해서 객체의 값을 가져와서 처리할 수 있게 해줍니다. 해당 키의 값에 접근하려면 대괄호([ ])를 사용합니다.

(배열도 객체이므로 배열에 for in문을 사용할 수 있습니다.)

 

사용법 : for(변수 in 객체) { 코드 }

 

const Book = {
	title : "for in문을 배워봅시다",
    pubDate : "2019-12-06",
    pages : 272,
    finished : true
}

for(key in gitBook) {
	document.write(`${key} : ${Book[key]}`); 
}

출력 결과 : 
title : "for in문을 배워봅시다",
pubDate : "2019-12-06",
pages : 272,
finished : true

 

for of문

문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다. 앞에서 forEach문을 사용해서 작성했던 소스코드를 다음과 같이 for of문으로도 작성할 수 있습니다.

 

const names = ["An", "Gyo", "nam"];

for(name of names) {
  document.write(`${name}`); //An Gyo nam 출력
}