javascript 반복문

(for문, forEach문, map문, for..in문, for..of문 비교)

 

[ javascript 반복문 비교 ]

 

javascript에서도 일반적으로 프로그래밍 언어에서 제공하는 반복문인 for문을 사용할 수 있다. 그런데, 오픈 소스들을 찾아보면 for문이 조금 다르게 생겨서 별것도 아닌데 형태가 다르다보니 이해가 바로 안될 수 있다. javascript 같은 경우에는 for문을 변형된 다른 몇가지 형태로도 제공하고 있으니, 잠깐 시간을 두고 살펴보고 넘어가는 것이 javascript 코드를 보는데 속이 편하다.

 

 

for 기본 문법

  • for( ..; ..; .. ) 형태

for 기본 문법이 변형된 형태

  • for( .. in .. ) 형태 / for( .. of .. ) 형태
  • array.forEach(callback function) 형태 / array.map(callback function) 형태

 

 

for 기본 문법 

javascript도 아래처럼 c나 java언어에서 사용되는 형태의 for 문을 사용할 수 있다. 하지만, 이러한 스타일은 요즘 javascript 진영에서는 잘 사용되지 않는다.

 

for sample code

// ...for.js
const array = ["j1", "j2", "j3"];

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


// result
j1
j2
j3

 

 

for 기본 문법이 변형된 형태

  1. 맵(map) 내 원소들을 반복하는 for..in 문법
  2. 배열(array) 내 원소들을 반복하는 for..of 문법
  3. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복하는 forEach 문법
  4. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복한 후, 반환하는 map 문법

 

 

1. 맵(map) 내 원소들을 반복하는 for..in 문법

반복시키려는 값이 맵(map)으로서 객체(object) 타입의 요소들을 가진다면, 그리고 이 요소들을 하나씩 접근하려 한다면 for..in을 사용한다. for..in 문법은 아래의 특징을 가지며, 예제 코드는 맵 객체 내의 요소들을 하나씩 출력시킨 것이다.

 

  • for..in 문법은 배열(array)가 아닌 맵(map)의 요소들을 반복한다. 따라서 배열의 요소가 아닌 맵의 요소가 반복될 때 사용된다.
  • for..in 문법에서 반복되는 element 값은 원소의 내용이 아닌 원소가 위치한 키(key)이다.
  • for..in 문법에서 반복되는 키(key)에 해당하는 값(value)은 대괄호([ ])를 사용해서 접근한다.

 

for..in sample code

// ...map_for.js
let map = { "j1": 10, "j2": 20, "j3": 30 };

for(let key in map) {
    console.log(key, map[key]);
}


// result
j1 10
j2 20
j3 30

 

 

2. 배열(array) 내 원소들을 반복하는 for..of 문법

반복시키려는 값이 배열(array)이라면, 아래처럼 for..in 문법을 사용해서 간단하게 사용할 수 있다. for..of 문법은 아래의 특징들을 가지고, 아래 예제는 배열 안의 원소들을 가지고 순서대로 출력킨 것이다.

 

  • for..of 문법은 배열(array)의 요소들을 반복한다.

 

for..of sample code

// ...array_for.js
let array = ["j1", "j2", "j3"];
let array2 = [ {"j1": 10}, {"j2": 20}, {"j3": 30}];

for(let ele of array) {
    console.log(ele);
}
for(let ele of array2) {
    console.log(ele);
}


// result
j1
j2
j3
{
    j1:10
}
{
    j2:20
}
{
    j3:30
}

 

 

3. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복하는 forEach 문법

forEach 문법은 아래와 같은 특징들을 가지고 있으며, forEach 문법의 이해를 돋우기 위해 아래처럼 4가지 상황으로 예시를 들어봤다. 

 

  • forEach 문법은 비동기 함수인 callback 함수 하나를 받는다.
  • callback 함수로 입력되는 파라미터값은 순서대로 요소값(element), 요소의 인덱스(index), 배열전체(array)이다.
  • callback 함수로 입력되는 파라미터 중 원하는 파라미터들만 받아서 사용가능하기 때문에, 모두 받거나 하나만 받아서 사용할 수도 있다.
  • callback 함수는 ES6문법인 화살표(arrow, =>)를 사용해서 축양된 형태로 사용이 가능하다.

 

array.forEach() sample 1

// ...array_foreach1.js
// "function" 키워드를 사용하는 방식
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach(function(ele, index, array) {
    array[index] = ele.concat('-check');
});

// ele(배열 요소)
array.forEach(function(ele) {
    console.log(`${ele} / function으로 여러줄을 명령(블록 사용)`);
});


// result
j1-check / function으로 여러줄을 명령(블록 사용)
j2-check / function으로 여러줄을 명령(블록 사용)

 

array.forEach() sample 2

// ...array_foreach2.js
// 화살표(arrow)를 사용하는 방식 (+한줄만 명령)
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach((ele, index, array) => array[index] = ele.concat('-check') );

// ele(배열 요소)
array.forEach(ele => console.log(`${ele} / arrow로 한줄만 명령`));


// result
j1-check / arrow로 한줄만 명령
j2-check / arrow로 한줄만 명령

 

array.forEach() sample 3

// ...array_foreach3.js
// 화살표(arrow)를 사용하는 방식 (+블록으로 여러줄 명령)
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach((ele, index, array) => {
    array[index] = ele.concat('-check');
});

// ele(배열 요소)
array.forEach(ele => {
    console.log(`${ele} / arrow로 여러줄을 명령(블록 사용)`);
});


// result
j1-check / arrow로 여러줄을 명령(블록 사용)
j2-check / arrow로 여러줄을 명령(블록 사용)

 

 

4. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복한 후, 반환하는 map 문법 

map 문법도 forEach 와 아래처럼 동일한 특징들을 가진다. 앞에서 언급한 forEach의 모든 코드는 map으로 변경해도 모두 동일하게 동작을 하므로, map에 대한 예제 코드는 전부 작성하지 않았다. 차이점만 보기 위해 화살표(arrow) 문법을 사용한 예만 작성해보았다. map의 특징은 앞에서 언급한 forEach의 모든 특징을 포함하며 몇가지가 더 추가된다.

 

  • map 문법은 비동기 함수인 callback 함수 하나를 받는다.
  • callback 함수로 입력되는 파라미터값은 순서대로 요소값(element), 요소의 인덱스(index), 배열전체(array)이다.
  • callback 함수로 입력되는 파라미터 중 원하는 파라미터들만 받아서 사용가능하기 때문에, 모두 받거나 하나만 받아서 사용할 수도 있다.
  • callback 함수는 ES6문법인 화살표(arrow, =>)를 사용해서 축양된 형태로 사용이 가능하다.
  • 앞에서 작성된 예시코드의 forEach 키워드를 모두 map 키워드로 변경해도 그대로 동작한다.
  • callback 함수의 형태는 forEach 키워드를 사용할 경우 반환(return)을 하지 못하고, map 키워드를 사용할 경우 반환(return)을 한다.

 

array.map() sample code

// ...array_map.js
let array = [ "j1", "j2" ];

// 값을 반환하지만 아무도 받지 않으므로 요소값을 그대로 출력
array.map(ele => {
    return ele.concat('-check');
});
array.map(ele => console.log(`${ele} 출력`));

// 값을 반환하고 자신에게 대입했으므로 요소값이 변경되서 출력
array = array.map(ele => {
    return ele.concat('-check');
});
array.map(ele => console.log(`${ele} 출력`));

// result
j1 출력
j2 출력
j1-check 출력
j2-check 출력

 

저작자표시 비영리 변경금지

티스토리툴바