JavaScript의 기본 배열 메서드

jy·2024년 11월 4일

Javascript

목록 보기
7/7
post-thumbnail

join

  • 배열의 모든 요소를 연결해 하나의 문자열로 만듬.
  • 구분자로 문자열을 전달할 수 있으며, 기본 구분자는 쉼표(,).
const arr = ["Hello", "World"];
console.log(arr.join("|")); // "Hello|World"

split

  • 문자열을 지정한 구분자를 기준으로 나누어 배열로 반환
  • 배열메서드가 아니라 문자열 메서드
const str = "Hello World";
console.log(str.split(" ")); // ["Hello", "World"]

reverse

  • 배열의 요소 순서를 반대로 뒤집습니다. 원본 배열을 변경함.
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

slice

  • 배열의 일부를 잘라 새로운 배열로 반환. 원본 배열은 변경되지 않는다.
const arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // [2, 3]

find

  • 조건에 맞는 첫 번째 요소를 반환, 조건에 맞는 요소 없으면 undefined 반환.
const arr = [1, 2, 3, 4];
const result = arr.find(num => num > 2);
console.log(result); // 3

filter

  • 조건에 맞는 '모든 요소'를 배열로 반환, 조건에 맞는 요소 없으면 빈배열 반환.
const arr = [1, 2, 3, 4];
const result = arr.filter(num => num > 2);
console.log(result); // [3, 4]

map

  • 배열의 각 요소에 대해 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환.
  • 원본 배열 변경 x
const arr = [1, 2, 3];
const result = arr.map(num => num * 2);
console.log(result); // [2, 4, 6]

some

  • 여러 배열 요소 중 하나라도 조건에 맞으면 true, 모든 조건 부적합 false를 반환.
const arr = [1, 2, 3];
const result = arr.some(num => num > 2);
console.log(result); // true

reduce

  • 배열의 모든 요소를 하나의 값으로 줄이기 위한 누적 계산을 수행.
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

sort

  • 배영의 요소를 정렬.
  • 기본, 문자열 변환후 유니코드 순서로 정렬, 비교함수 지정해야함.
const arr = [4, 2, 1, 3];
arr.sort((a, b) => a - b); // 오름차순 정렬
console.log(arr); // [1, 2, 3, 4]

for문과 forEach문 차이

for

기본 제어 구조로 문자열을 포함한 다양한 데이터 구조를 순회

-사용자가 직접 반복 조건을 설정하고, 인덱스 값을 관리해야함
-동기적

const array = [1, 2, 3];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]); // 1, 2, 3
}

forEach()

JavaScript의 배열(Array) 전용 메서드

  • 배열의 각 요소에 대해 콜백 함수를 실행
  • 배열의 요소를 순회하면서 내부적으로 자동으로 인덱스를 관리
  • 비동기적
const array = [1, 2, 3];

array.forEach((element) => {
    console.log(element); // 1, 2, 3
});
profile
Frontend Developer를 위한 공부중입니다 : )

0개의 댓글