배열 메서드 정리

■  push : 배열에 값 추가

기존 배열의 뒤에 삽입

const fruits = ["사과", "바나나"];
fruits.push("포도");
console.log(fruits); // [ '사과', '바나나', '포도' ]
fruits.push("키위");
console.log(fruits); // [ '사과', '바나나', '포도', '키위' ]

 

 

■  pop : 가장 끝에 있는 요소를 꺼내줌

꺼내서 return 해줌

const arr = [30, 1, 2, 5, 40];
const test = arr.pop();
console.log(test); // 40

 

 

■  forEach  

각 배열 요소에 대해 제공된 함수를 한 번씩 실행함

const fruits = ["사과", "바나나", "키위"];
// for문으로 표현
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
} // 사과 바나나 키위

 

forEach로 위 for 문 표현하기

// forEach로 표현
fruits.forEach((아무이름) => {
    console.log(아무이름);
}); 
// 사과 - forEach 함수가 첫번째로 실행될때 매개변수 아무이름에 사과가 할당 되어 사과 출력
// 바나나 - 함수가 두번째에 실행될때 매개변수 아무이름에 바나나가 할당 되어 바나나 출력
// 키위 - 함수가 세번째에 실행될때 매개변수 아무이름에 키위가 할당 되어 키위 출력

 

forEach 함수는 배열의 요소 개수 만큼 실행되며 매개변수로 함수를 받음 → 콜백함수

forEach 함수가 실행 될 때 마다 콜백함수 안의 매개변수 자리(아무이름) 에 배열의 요소들이 순서대로 한 번씩 할당이 됨

* 콜백함수의 매개변수에는 아무이름이나 쓸 수 있음

 

* forEach 의 첫번째 매개변수는 배열의 요소, 두번째 매개변수는 요소의 인덱스이다.

사용하지 않는 매개변수는 생략할 수 있다.

(요소의 인덱스를 사용하지 않으면 요소만 표시해도 되고,

 요소의 인덱스를 사용하는 경우 배열의 요소를 사용하지 않더라도 배열의 요소를 가리키는 매개변수를 사용해야 함

 → 요소의 인덱스가 두번째 매개변수로 고정되어 있기 때문!)

const testArr = [
  {
    name: '홍길동',
    age: 20,
  },
  {
    name: '김옥지',
    age: 28,
  },
  {
    name: '김빵빵',
    age: 35,
  },
];

// 이름을 순서대로 출력하기
testArr.forEach((info) => {
  console.log(info.name);
}); // 홍길동 김옥지 김빵빵

// 나이가 30살 이상인 경우만 이름 출력하기
testArr.forEach((info) => {
  if (info.age >= 30) {
    console.log(info.name);
  }
}); // 김빵빵

 

정리

① forEach 는 배열의 메서드다. (각각 하나씩)
② 이 배열 메서드는 input(매개변수)을 갖는다.
③ 그 매개변수는 함수다(매개변수로 들어오는 함수 = 콜백함수)
④ 그 매개변수로 들어온 함수는 input(매개변수)을 갖는다.
⑤ 그 매개변수에는 호출의 주체가 된 배열의 각 요소가 차례대로 할당된다.

 

 

■  map

배열 내의 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

const testArr = [3, 1, 2];
const 결과값 = testArr.map((item) => {
   return item * 10;
})
console.log(결과값); // [ 30, 10, 20 ]

const testArr = ["김옥지", "김빵빵", "김대리", "김과장"];
const newArr = testArr.map(function(name) {
    return {
        name : name,
        job : "teacher"
    }
});
console.log(newArr);
// [
//  { name: '김옥지', job: 'teacher' },
//  { name: '김빵빵', job: 'teacher' },
//  { name: '김대리', job: 'teacher' },
//  { name: '김과장', job: 'teacher' }
// ]

 

 

 

 

■  filter

배열의 각 요소 true or false 값의 포함여부를 새로운 배열에 포함시킬지 말지를 결정함

const testArr = [30, 10, 25, 7];
// testArr에서 20보다 크거나 같은 값을 filter 하기
const newArr = testArr.filter(function (숫자) {
  // if (숫자 >=20;) {
  //   return true;
  // } else {
  //  return false;
  // }
  return 숫자 >= 20;
});
console.log(newArr); // [ 30, 25 ]

 

 

★ forEach 는 호출했을 때 새로운 값(배열)을 반환하지 않는다.

★ filter 와 map 은 새로운 값(배열)을 반환한다.

     새로 반환된 배열에다가 map 메서드 사용이 또 가능!

 

 

■  slice

배열의 특정범위의 요소를 잘라내서 추출한 결과를 새로운 배열로 반환하는 함수

첫 번째 인자로 시작 인덱스, 두번째 인자로 종료 인덱스를 받는다.

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

const newNumbers = numbers.slice(1, 3);
// 시작 : 1
// 끝 : 3
console.log(newNumbers); // [ 2, 3 ]

 

 

■  some 

배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트함(어떤 값이 존재하냐? / 함수를 인자로 받는 콜백함수)

값을 true false 으로 반환하고 하나라도 true 값이 있으면 true 이다. 논리합이랑 같다고 생각하면 쉬움

const people = [
  {
    name: "홍길동",
    age: 21,
  },
  {
    name: "홍길순",
    age: 30,
  },
];

// 30살 이상인 사람이 한명이라도 존재하니?
const result = people.some(function (p) {
  return p.age >= 30;
});

console.log(result); // true

 

 

■  every

배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트함, 불리언 값을 반환한다.

some 메서드와 동일한데 모든요소가 통과하느냐, 적어도 하나라도 통과하느냐(some) 의 차이. 논리곱이랑 같다고 생각하면 쉬움

// 모든 사람이 30살 이상이니?
const result2 = people.every(function (p) {
  return p.age >= 30;
});

console.log(result2); // false

 

 

🙂 느낀점

실시간 강의에서 배열 메서드 들을 배우고 같이 하나씩 실습하면서 연습했다. 강의에서 짧게 설명하고 지나갔을때는 아 이런 메서드가 있구나! 정도였지 어떻게 써야하고 디테일한 개념들은 머리에 잡히지 않았는데 실습하면서 배우니 이해하기 좀 더 수월해서 좋았고 역시 직접 코드를 쳐보면서 써봐야 체득이 된다는 것을 한번 더 느꼈다. 이해가 안되면 직접 쳐보고 여러번 복습하자.