배열 내장함수 - forEach / map

자바스크립트를 사용하다보면 자주 사용하게 되는 함수들이 있다.

이중 배열함수에 대해 알아보고자 한다.

앞으로 작성될 몇개의 포스팅에서는 자주 사용하는 배열함수들을 하나씩 정의 해본 다음

마지막 포스팅으로 한번에 요약해 볼 예정이다.

 

 

 

1. forEach

-  for문과 비슷하게 반복적인 기능을 수행하는 함수

 

상황) 하나의 배열 객체를 만들고 console창에 내부의 배열값들을 전부 하나씩 호출시키고자 한다.

 

방법)

① 내가 좋아하는 음식들로 이루어진 foods라는 배열을 선언한 후 for in문을 통해 console창에 각각의 음식들을 출력한다.

const foods = ['피자','치킨','파스타','게장','떡볶이'];

for (let i in foods){
  console.log(foods[i]);
}
//결과값 : '피자','치킨','파스타','게장','떡볶이'

 

②-1 console창 입력 명령 함수를 만들고,  forEach 내장함수를 이용하여 for in문(혹은 for문)을 생략하고 바로 호출할 수 있다.

const foods = ['피자','치킨','파스타','게장','떡볶이'];

// print라는 이름으로 함수 선언 ( 괄호 안에는 배열의 각 값들이 파라미터로 들어갈것이다. 나는 임의로 myFoods라고 입력하였다)
function print(myFoods){
  console.log(myFoods)
}

//배열명.내장함수(작성한함수-여기서는 console창에 답을 입력하는 함수)
foods.forEach(print)

//결과값 : '피자','치킨','파스타','게장','떡볶이'

 

②-2 console창에 값을 입력하는 함수를 미리 선언하지 않고, 바로 내장함수와 함께 익명함수로 선언 할 수 있다

const foods = ['피자','치킨','파스타','게장','떡볶이'];

foods.forEach(function(myFoods){
  console.log(myFoods)
});
//결과값 : '피자','치킨','파스타','게장','떡볶이'

 

+위의 식을 화살표 함수를 이용하여 조금 더 깔끔하게 정리 할 수도 있다.

const foods = ['피자','치킨','파스타','게장','떡볶이'];

foods.forEach((myFoods) => {
  console.log(myFoods)
});

 

2. map

-  배열 안의 모든 원소들을 변환하여 새로운 배열로 만들어내는 함수

 

상황) 숫자로 이루어진 배열을 만들고, 그 배열의 제곱값으로 새로운 배열을 만들어 console창에 출력한다.

 

① numbers라는 배열을 선언 한 후 for문을 사용하여 제곱값을 새로운 배열을 만든다

const numbers = [1, 2, 3, 4];
const sqaured = [];

for (let i = 0; i < numbers.length; i++) {
  sqaured.push(numbers[i] * numbers[i]);
}

console.log(sqaured);

//결과값 : [1, 4, 9, 16]

 

② forEach를 이용하여 제곱의 배열을 만든다

const numbers = [1, 2, 3, 4];
const squared = [];

//배열의 값들을 하나씩 가져와 제곱값을 구한 후 squared라는 배열 안에 push해준다
numbers.forEach( n => {
  squared.push(n * n);
});

console.log(squared);

//결과값 : [1, 4, 9, 16]

 

③-1 map함수를 사용해서 새 배열을 만든다.

const numbers = [1, 2, 3, 4];

//배열을 만들어 push하는 과정을 생략하고, 바로 제곱을 구하는 함수를 만들어 mpa으로 새로운 배열을 만들어준다.
const square = n => n * n;
const squared = numbers.map(square);

console.log(squared);

//결과값 [1, 4, 9, 16] 

 

③-2 squared라는 변수에 함수를 바로 작성해서 식을 깔끔하게 정리해본다.

const numbers = [1, 2, 3, 4];

const squared = numbers.map(n => n * n);

console.log(squared);

//결과값 : [1, 4, 9, 16]

 

 

 

상황2) 2개이상의 key값이 있는 객체에서 특정 key값을 지정하여 하나의 배열을 뽑아 console창에 출력한다.

const myScore = [
  {
    name : '이유림',
    score : 100
  },
  {
    name : '조창규',
    score : 100
  }
];

const scoreArray = myScore.map(myScore => myScore.score);
console.log(scoreArray);

//sore로만 이루어진 배열이 만들어진다.
//결과값 : [100, 100]