자바스크립트 메소드2

forEach 메소드

배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드

const numbers = [1, 2, 3];

numbers.forEach((element, index, array) => {
  console.log(element); // 1, 2, 3이 한 줄씩 출력
});

numbers.forEach((element) => {
  console.log(element); // 1, 2, 3이 한 줄씩 출력
});

forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는다 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다 (index와 array는 생략가능)

map 메소드

forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드

const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
  return element + 2;
});

console.log(twiceNumbers); // (3) [2, 3. 4]

첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징

filter 메소드

filter 메소드는 배열의 요소를 하나씩 살펴보면서 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴하는 메소드

const numbers = [1, 2, 3]

const res = numbers.filter((element, index, array) => element[idx] > 2);

console.log(res) // [3]

const devices = [
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

find 메소드

배열의 요소들을 반복하는 중에 콜백함수가 리턴하는 조건과 일치하는 가장 첫번째 요소를 리턴하고 반복을 종료하는 메소드

const devices = [
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apple = devices.find((element, index, array) => {
  return element.brand === 'Apple';
});

console.log(apples); // [{name: 'MacbookPro', brand: 'Apple'}]

some 메소드

배열 안에 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인하는 메소드

모든 요소가 조건을 만족하지 않는다면 false를 리턴
조건을 만족하는 요소가 등장한다면 바로 true를 리턴

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

// some: 조건을 만족하는 요소가 1개 이상 있는지
const res = numbers.some((element, index, array) => {
  return element > 3;
});

console.log(res); // true;

3보다 큰 4가 존재하기 때문에 index는 true

every 메소드

리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인하는 메소드

모든 요소가 리턴하는 조건을 만족한다면 true를 리턴
조건을 만족하지 않는 요소가 등장한다면 바로 false를 리턴하고 반복을 종료

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

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const res = numbers.some((element, index, array) => {
  return element > 3;
});

console.log(res); // false;

reduce 메소드

누적값을 계산할 때 활용하는 메소드

매번 실행되는 콜백함수의 리턴값이 다음에 동작할 콜백함수의 첫번째 파라미터로 전달
결과적으로 마지막 콜백함수가 리턴하는 값이 reduce 메소드의 최종 리턴값이 된다

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

// reduce
const res = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0);

console.log(res); // 10

accumulator가 0으로 시작되고 반복문이 돌면서
1 accumulator = 1
2 accumulator = 1 + 2 = 3
3 accumulator = 1 + 2 + 3 = 6
4 accumulator = 1 + 2+ 3 + 4 = 10 이된다

sort 메소드

배열을 정렬

const numbers = [1, 2, 3, 4];
const letters = ['D', 'C', 'E', 'B', 'A'];

numbers.sort();
letters.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

오름차순

const numbers = [1, 2, 3, 4];
numbers.sort((a, b) => a - b);

내림차순

const numbers = [1, 2, 3, 4];
numbers.sort((a, b) => b - a);

reverse 메소드

배열의 순서를 뒤집어 주는 메소드

const numbers = [1, 2, 3, 4];
numbers.reverse();

console.log(numbers); // [4, 3, 2, 1]

Map

일반 객체와 다르게 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다

new 키워드를 통해서 Map을 만들 수 있고 아래와 같은 메소드를 통해 Map 안의 여러 값들을 다룰 수 있다

• map.set(key, value): key를 이용해 value를 추가하는 메소드.
• map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
• map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
• map.delete(key): key에 해당하는 값을 삭제하는 메소드.
• map.clear(): Map 안의 모든 요소를 제거하는 메소드.
• map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

문자열과 심볼 값만 key(프로퍼티 네임)로 사용할 수 있는 일반 객체와는 다르게 Map 객체는 메소드를 통해 값을 다루기 때문에, 다양한 자료형을 key로 활용할 수 있다는 장점

Set

여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷하다
배열의 메소드는 활용할 수 없고 Map과 비슷하게 Set만의 메소드를 통해서 값을 다루는 특징이 있다

• set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
• set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
• set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
• set.clear(): Set 안의 모든 요소를 제거하는 메소드.
• set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

Set에는 개별 값에 바로 접근하는 방법이 없다
Set은 중복되는 값을 허용하지 않는 독특한 특징

참고
코드잇