Array 메서드

이번 주제는 자바스크립트에서 반복문 가능한 배열 메서드에 관한 주제이다.

 

Array.forEach 😊

for문과 동일하게 배열의 요소를 순차적으로 조사를 한다.

forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다.

이 함수의 파라미터 hero는 각 원소를 가르키게 된다.

함수형태의 파라미터를 전달하는 것을 콜백함수 라고 부른다.

 

예시 👇🏻👇🏻

const mvHero = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});

 

Array.map 😊

Array.map은 순차적으로 조회 하면서 중괄호 내부에서 반환된 값들을 모아 다시 배열로 만든 후 반환 하는 함수이다.

 

예시 👇🏻👇🏻

const colors = ["red", "blue", "green", "pink", "mint"];

const newColors = colors.map((color) => {
  return `new ${color}`;
});
console.log(newColors);

 

Array.reduce😊

Array.reduce는 요소 별 함수 수행 누적 결과값을 반환한다.

사용방법은 아래와 같다.

Array.reduce(function(accumulator, item, index, array){})
accumulator: 이전 함수 결과(initial로 초기값 설정 가능), item: 배열 요소, index: 배열 위치, array: 배열

 

예시 👇🏻👇🏻

let nums = [1, 2, 3, 4, 5];
let call_count = 0;

console.log("accmul\titem\tindex");

let sum = nums.reduce(function (accumulator, item, index, array) {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  /*
  accmul	item	index
    0 		 1 		 0
    1 		 2 		 1
    3 		 3 		 2
    6 		 4 		 3
    10 		 5 		 4
  */
  call_count++;
  return accumulator + item;
}, 0);

console.log("call_count: " + call_count); //5
console.log("sum: " + sum); //15

 

for...of😊

for...of는 for문과 같은 기능이지만 for문은 index 접근을 한다고 하면 for..of는 element접근을 한다.

 

예시 👇🏻👇🏻

let fruits = ["apple", "orange", "melon"];

for (let fruit of fruits) {
  console.log(fruit); //apple \n, orange\n, melon
}

 

for...in😊

for...in은 key로 접근을 한다.

 

예시 👇🏻👇🏻

let fruits = ["apple", "orange", "melon"];

for (let key in fruits) {
  console.log(key); //0\n, 1\n, 2\n
  console.log(fruits[key]); //apple \n, orange\n, melon
}

 

마무리 😊

이번 주제 Array 메서드에 관하여 알아보았다.