js 반복문 다뤄보기

우리는 코딩을 하면서 다양한 상황을 마주하게 된다.

여러 상황 중, 배열과 관련된 처리같이 많고 반복적인 데이터를 편리하게 처리해줄 반복문들을 다뤄보자

 

 

Array.forEach()

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

 

const arr = [1,2,3,4,5,6,7,8,9,10];

arr.forEach((element)=>console.log(element));

// console.log
1 2 3 4 5 6 7 8 9 10

// 간단 예제

arr.forEach((element)=>console.log(element*10)); // 10 20 30 40 --- 80 90 100

// for문처럼 화살표 함수 오른쪽 부분에 push 등과 같은 메서드를 통해 새 배열을 만들어줄 수도 있다.
const newArr = [];
arr.forEach((item)=>{newArr.push(item)}); 
// newArr = 
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

메서드의 첫 번째 괄호(element-원소)는 일종의 파라미터(매개변수)이다.

파라미터가 element인지 item인지는 중요하지 않다.

파라미터를 어떻게 처리해줄 것인지가 중요하다.

(당연한 말이겠지만, 파라미터가 사용되는 이름은 동일해야한다.)

 

for(){} 문

가장 먼저 접하게 되는 반복문이지 않을까 싶다.

const arr = [1,2,3,4,5,6,7,8,9,10];

const newArr = []
 (초기값(i=0) ; 조건(i가 10 미만까지 반복) ; 증감문(i는 1씩 증가한다.))
for(let i = 0;i<arr.length;i++){
    newArr.push(arr[i])
}
// console.log
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

원한다면 조건문을 통해 반복 중단 가능
for(~~){
	if(a===b){
    	braek
    }
}

for문은 i를 통해 반복할 횟수를 설정하여 원하는 반복작업을 실행하게 해준다.

 

.map() 

forEach와 유사하게 배열 안의 각 요소들에게 콜백 함수를 적용시킨다.

const arr = [1,2,3,4,5,6,7,8,9,10];

let ex = arr.map((item)=>item*10)
//console.log(ex)
[
  10, 20, 30, 40,  50,
  60, 70, 80, 90, 100
]

map은 파라미터에 배열의 인덱스 값도 넣을 수 있다.

const arr = [1,2,3,4,5,6,7,8,9,10];

let ex = arr.map((item,index)=>item*10+`(${index}번째)`)
//console.log(ex)
[
  '10(0번째)', '20(1번째)',
  '30(2번째)', '40(3번째)',
  '50(4번째)', '60(5번째)',
  '70(6번째)', '80(7번째)',
  '90(8번째)', '100(9번째)'
]
여러모로 배열을 다양하게 사용할 수 있다.