언어/JavaScript

[JavaScript] 필수 배열 함수

Pasak 2024. 7. 8. 22:54

 

기존 배열을 변경시키는 함수

push(x)

  • 동작: 배열의 맨 끝에 요소 추가
  • 반환: 추가 후 배열 길이 반환

 

pop()

  • 동작: 배열의 맨 끝 요소 삭제
  • 반환: 삭제한 값 반환

 

shift()

  • 동작: 배열의 맨 처음 요소 삭제
  • 반환: 삭제한 값 반환

 

unshift(x)

  • 동작: 배열의 맨 처음에 요소 추가
  • 반환: 추가 후 배열 길이 반환

 

splice(i, num)

  • 동작: i번째 요소부터 num개의 요소를 삭제
  • 반환: 삭제한 배열 반환

 

기존 배열을 변경시키지 않는 함수

concat(x)

  • 동작: 배열의 맨 끝에 요소 추가
  • 반환: 요소를 추가한 새로운 배열을 반환

 

slice(s, e)

  • 동작: s번째 요소부터 e-1번째 요소까지 자름
  • 반환: 자른 배열 반환

 

join(d)

  • 동작: 구분자 d를 기준으로 모든 배열내의 요소 값을 문자열로 합침
  • 반환: 합친 문자열 반환

 

map(콜백함수)

  • 동작: 배열의 모든 값을 순회하면서 배열 요소들을 변형시킴
  • 반환: 변형시킨 새로운 배열 반환
let test = [1, 2, 3, 4, 5];

console.log(test.map((x) => x * 10));

// 출력: [ 10, 20, 30, 40, 50 ]

 

 

filter(콜백함수)

  • 동작: 콜백 함수의 return값이 true면 배열에 포함시키고 false면 버림
  • 반환: 만들어진 새로운 배열 반환
let test = [1, 2, 3, 4, 5];

console.log(test.filter((x) => x % 2 === 0));

// 출력: [ 2, 4 ]

 

 

find(콜백함수)

  • 동작: 콜백 함수의 return값이 true인 첫 번째 요소
  • 반환: 찾은 첫 번째 요소를 반환
let test = [1, 2, 3, 4, 5];

console.log(test.find((x) => x % 2 === 0));

// 출력: 2

 

 

findIndex(콜백함수)

  • 동작: 콜백 함수의 return값이 true인 첫 번째 요소의 index값
  • 반환: 찾은 첫 번째 요소의 index값 반환
let test = [1, 2, 3, 4, 5];

console.log(test.findIndex((x) => x % 2 === 0));

// 출력: 1

 

 

reduce(콜백함수)

  • 동작:
    1. 가장 처음 초기값 0이 p에 입력됨
    2. test 배열의 첫 번째 요소가 n에 입력됨
    3. p + n 연산이 일어나고 반환된 값은 p에 입력됨
    4. 2번 동작부터 반복됨 (단, n에 입력되는 값은 첫 번째 값이 아닌 순서대로 입력됨)
  • 반환: 마지막 반환값 반환
let test = [1, 2, 3, 4, 5];

console.log(test.reduce((p, n) => p + n, 0));

// 출력: 15

 

정렬 (기존 배열을 변경시킴)

sort()

  • 동작: 배열을 오름차순으로 정렬
  • 반환: 없음

 

sort(콜백함수)

  • 동작: 콜백함수의 반환값에 따라 정렬
  • 반환: 없음

콜백함수를 넣으면 정렬 동작에 대한 커스터마이징이 가능하다.

아래 3가지 규칙을 염두하여 코드를 작성

 

   a, b를 비교했을 때,

  1. a를 b보다 나중에 정렬하려면 (뒤에 두려면) 0보다 큰 숫자를 반환
  2. a를 b보다 먼저 정렬하려면 (앞에 두려면) 0보다 작은 숫자를 반환
  3. 원래 순서를 그대로 두려면 0을 반환
let numbers = [
    1,
    9,
    7,
    5,
    3,
];

numbers.sort((a, b)=>{ // 오름차순
    return a > b ? 1 : -1;
});

numbers.sort((a, b) => a > b ? -1 : 1); // 내림차순

'언어 > JavaScript' 카테고리의 다른 글

[JavaScript] 단축평가 (short circuit evaluation)  (0) 2024.07.07
[JavaScript] Hoisting(호이스팅)  (0) 2024.07.06