[Javascript] 배열 forEach, map, fill 배우기

배열 메서드

 

fill

 

초기 값

const answer = [3, 1, 4, 6];
const value = "3214";
let strike = 0;
let ball = 0;
for (let i = 0; i < answer.length; i++) {
    const index = value.indexOf(answer[i]);
    if (index > -1) {
      //일치하는 숫자 발견
      if (index === i) {
        //자릿수도 동일
        strike += 1;
      } else {
        //숫자만 동일
        ball += 1;
      }
    }
  }

 

forEach

• 배열 요소에 대한 반복문 역할을 수행한다.
• for문을 forEach문으로 변경할 수 있다.

const answer = [3, 1, 4, 6];
const value = '3214';
let stricke = 0;
let ball = 0;
answer.forEach((element, i)=>{
  const index = value.indexOf(element);
        if (index > -1) {
          //일치하는 숫자 발견
          if (index === i) {
            //자릿수도 동일
            strike += 1;
          } else {
            //숫자만 동일
            ball += 1;
          }
        }
});

• element: 요소, index: 각 요소의 인덱스
• 배월 원소 하나마다 계산식을 적용해 계산을 해준다.
• 배열 answer = [3, 1, 4, 6]의 각 요소에 대해 함수가 4번 실행
• for문보다 성능이 좋지는 않다.

반복 횟수	element	index
1	3	0
2	1	1
3	4	2
4	5	3

 

map

요소를 하나씩 방문하여 배열의 원소를 다른 값으로 바꾸어 준다.

const answer = [3, 1, 4, 6];
answer.map((element, index)=>{
  //식
});

 

예시

const array = [1, 2, 3, 4];
const result = [];
for (let i=0; i < 4; i++) {
    result.push(array[i] *2)
}
console.log(result); // 2, 4, 6, 8

기존 배열의 수정 없이, 새로운 배열에 결과값을 넣어 출력한다.

 

기존 배열 값: [1, 2, 3, 4]

새로운 배열 값: [2, 4, 6, 8]

 

forEach와 map 사용 이유

성능은 좋지 않지만 fill로 배열 초기화 후 연달아 쓰기 가능

 

 

fill와 map을 연달에서 사용

반복 횟수	el	idx	return
1	0	0	1
2	0	1	2
3	0	2	3
...	0	...	4
9	0	8	9

 

출처

https://tinyurl.com/ytnfzjmx