for, for of, for in, forEach / 자바스크립트 반복문 [자바스크립트 도장깨기]

목차

 

 

배열을 순회하면서 처리하고자 할때 사용하는 함수이다.

 

 

for 문

일반족인 for문이다.

• 중간에 loop를 건너뛰거나 종료가 가능하다 ( continue, break )

conitnue와 break 차이🔽

2022.05.01 - [개발기록/자바스크립트 & jQuery] - continue와 break 사용하는 법 [자바스크립트 도장깨기]

 

//형식
for(let i=0; i< 조건; 증감식){
	//조건의 결과가 True일 시 반복적 실행한다.
}

 

예시

const arr = ['apple', 'banana', 'orange'];

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

 

for of 문

String, Array, Map, Set, NodeList등을 순회하는 반복문이다. 

예시처럼 객체(object)는 에러가 나온다.

//형식
for(변수 of 객체){
	//객체 
}

 

예시

const arr = ['apple', 'banana', 'orange'];
const object = { fruit1 : 'apple', fruit2 : 'banana'};

for(let i of arr){ // String 배열
	console.log(i);
}
// apple
// banana
// orange

for(let i of object){ // 객체
	console.log(i);
}

// object is not iterable

 

for in 문

객체 모든 속성의 Key를 순회한다. 

예시처럼 객체(object)는 에러가 나온다.

// 형식
for(let i on arr){
	//
}

 

예시

const object = { fruit1 : 'apple', fruit2 : 'banana'};

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

// fruit1 : apple
// fruit2 : banana

 

forEach

배열의 모든요소를 순회한다. (break와 continue 불가능)

map()과 차이가 있다면 map은 배열 내 모든 요소에 대해 함수를 호출한 결과를 새로운 배열에 반환한다면

forEach는 배열요소마다 한번 씩 함수를 실행하며 리턴값을 보내지 않는다.

//형식
배열.forEach( function(currentValue, index, array){
    // currentValue : 배열 원소의 값
    // index :  현재 요소의 인덱스
    // array : 현재 배열
})


// 화살표 함수로 변환
arr.forEach((item, index) => {
  // 반복 실행문
});

 

예시

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

arr.forEach(num => { x => console.log(x); })

const arr = ['apple', 'banana', 'orange'];

arr.forEach((item, index) => {
  console.log(item);
});

// apple
// banana
// orange

 

 

객체

Object.keys(객체)

객체의 key를 배열로 반환한다.

 

//형식
Object.keys({});

예시

const obj = { fruit1 : 'apple', fruit2 : 'banana'};

Object.keys(obj);
// ['fruit1', 'fruit2']

 

Object.values(객체)

객체의 값을 배열로 반환한다.

// 형식
Object.values({});

const obj = { fruit1 : 'apple', fruit2 : 'banana'};

Object.values(obj);
// ['apple', 'banana']