[JavaScript] for-in문, for-of문 정리

1. for-in

-for-in문은 for문과는 전혀 다른 형태의 반복문이다.

-for-in문은 배열(Array)이나 객체(Object)를 반복하는 구문이다.

-객체(Object)는 데이터를 저장할 때 키(key)를 사용하여 저장하고, 키를 이용해서 읽을 수 있다.

-객체의 key값에 접근 가능하지만 키의 값인 value값에는 직접 접근이 불가하다.

-for-in문은 모든 객체에서 사용 가능하다.

-key를 리턴한다. (배열의 경우에는 index)

 

for (let i in 객체명이나배열명){
	//반복할 표현식
   }

위와 같은 문법으로 쓰고,  i라는 변수에 배열이 갖고 있는 인덱스 번호를 담아주겠다 라는 것이다.

 

for(let i=0; i<gg.length;i++){
	alert(gg[i]);
   }
   
   //for문은 위와 같이 괄호 안에 식이 세개 들어간다.
   
   //for in 문으로 고치면 for(){}를 먼저 쓰고
   
for(let i in gg){
   	alert(gg[i]);
   }
   //로 쓴다 훨씬 식이 간단해진다.

 

 

for in 문을 응용한 문제

 

//문제) 선택상자에 지역이름을 처리하시오
// 울산,부산,서울,인천,대전,경기

//힌트: 지역이름들에 규칙이 없으므로 규칙이 없는 값을 담는 배열을 쓴다.

let output = '<select>';

let city = ['울산','부산','서울','인천','대전','경기'];

for(let i in city){
	output += '<option>' + city[i] + '</option>';
}

output += '<select>';

//문서출력
document.write(output);

 

 

 

2. for-of 

 

-for-of문은 Array,Map,String 등 iterable(반복 가능한) 객체에서 사용 가능한 반복문이다.(Object는해당X)

-이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입한다.

-for-of문은 익스플로러에서 지원하지 않는다.

-value를 리턴한다.

 

for(const element of iterable){
	//실행 할 코드 블록
}

 

for-of를 사용하면 for-loop를 사용하는 것보다 훨씬 코드가 간결해진다.

 

아래 코드는 문자열의 각 문자를 for-of를 사용해서 추출하는 예제이다.

 

let language="JavaScript";
for(const x of language){
	console.log(x);	//문자열의 단일 문자 출력
}

 

 

 

for-in문과 for-of문의 큰 차이점은

for-in은 객체(Object)의 key를 순회하고,

for-of는 iterable객체의 value를 순회하는 데 사용한다는 것이다.