자바스크립트의 유용한 내부 기능

hyeo71·2023년 11월 3일
0

JS

목록 보기
2/2

forEach, map

  • 공통점
    배열의 요소를 하나씩 반복 작업을 하는 메소드
    첫번째 아규먼트로 콜백 함수를 전달 받음
    파라미터로는 배열의 요소, index, 메소드를 호출한 배열(index, 배열 생략 가능)

  • 차이점
    map은 첫번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴

const numbers = [1, 2, 3];

// forEach
numbers.forEach((element, index, array) => {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});

// map
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

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

filter, find

filter: 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴
find: 배열의 요소를 반복 중 조건과 일치하는 첫번째 요소를 리턴하고 반복을 종료

// filter
const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});
// 중괄호, 리턴문 없이 표현 가능
const apples = devices.filter((element, index, array) => element.brand === 'Apple');

// find
const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

some, every

some: 콜백 함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지 확인
every: 배열의 모든 요소가 콜백 함수가 리턴하는 조건을 만족하는지

두 메소드 모두 조건(some: true, every: false)에 걸리면 값을 리턴하고 종료

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

reduce

누적값을 계산할 때 사용하는 메소드
해당 메소드는 두 개의 파라미터를 활용(콜백 함수, 초기 accumulator 값)
이전의 메소드들에 들어가는 콜백 함수 파라미터 외에 accumulator가 첫번째 파라미터로 전달
accumulator: 실행되는 콜백 함수의 리턴값이 다음에 동작할 콜백 함수의 첫번째 파라미터로 전달

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

sort, reverse

sort: 배열의 정렬에 사용
기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬

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

두 메소드는 원본 배열의 요소를 재배치하는 것이기 때문에 주의

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

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

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

// reverse
letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

Map, Set

Map: 객체와 비슷
Set: 배열과 비슷

일반적인 객체, 배열의 메소드를 사용하는 것이 아닌 독자적인 메소들 통해 값을 다루는 것이 특징

일반 객체는 문자열과 심볼값만 key로 사용할 수 있지만 Map은 다양한 자료형을 key로 활용 가능

Set은 개별값에 접근하는 방법이 없음, 반복문을 통해 전체요소를 한꺼번에 다루는 순간에만 접근 가능
중복값을 허용하지 않는 특징이 있어 중복값을 제거한 묶음을 만들 때 활용

0개의 댓글