Categories: JavaScript

JavaScript 자바스크립트 배열(Array) 메서드 사용법

자바스크립트 배열 메서드란?

자바스크립트 배열 메서드는 배열에 대해 다양한 작업을 수행하는 함수들을 말합니다. 이러한 메서드들은 배열을 조작하거나 배열 요소를 검색, 변환하는 데 사용됩니다.

주요 배열 메서드

push(element1, …, elementN)

배열의 끝에 하나 이상의 요소를 추가합니다.

JavaScript
let fruits = ['사과', '바나나'];
fruits.push('딸기');
// 결과: ['사과', '바나나', '딸기']
JavaScript

pop()

배열의 끝에서 요소를 제거하고 반환합니다.

JavaScript
let fruits = ['사과', '바나나', '딸기'];
let removedFruit = fruits.pop();
// 결과: removedFruit = '딸기', fruits = ['사과', '바나나']
JavaScript

unshift(element1, …, elementN)

배열의 시작 부분에 하나 이상의 요소를 추가합니다.

JavaScript
let fruits = ['사과', '바나나'];
fruits.unshift('수박');
// 결과: ['수박', '사과', '바나나']
JavaScript

shift()

배열의 시작에서 요소를 제거하고 반환합니다.

JavaScript
let fruits = ['수박', '사과', '바나나'];
let removedFruit = fruits.shift();
// 결과: removedFruit = '수박', fruits = ['사과', '바나나']
JavaScript

splice(start, deleteCount, item1, …, itemN)

배열에서 요소를 추가하거나 제거합니다.

  • start: 배열에서 변경을 시작할 인덱스입니다.
  • deleteCount: 제거할 요소의 수입니다. 0이면 요소를 제거하지 않습니다.
  • item1, …, itemN: 추가할 요소입니다.
JavaScript
let fruits = ['사과', '바나나', '딸기'];
fruits.splice(1, 1, '포도');
// 결과: ['사과', '포도', '딸기']
JavaScript

slice(start, end)

배열의 일부를 추출하여 새로운 배열을 반환합니다.

  • start: 추출을 시작할 인덱스로, 이 인덱스의 요소를 포함합니다.
  • end: 추출을 종료할 인덱스로, 이 인덱스의 바로 앞에 위치한 요소까지 추출합니다. 만약 생략하면 배열의 끝까지 추출합니다.
JavaScript
let fruits = ['사과', '바나나', '딸기', '포도'];
let citrus = fruits.slice(1, 3);
// 결과: citrus = ['바나나', '딸기']
JavaScript

concat(array1, array2, …, arrayN)

하나 이상의 배열을 결합하여 새로운 배열을 반환합니다.

JavaScript
let fruits = ['사과', '바나나'];
let moreFruits = ['딸기', '포도'];
let combinedFruits = fruits.concat(moreFruits);
// 결과: combinedFruits = ['사과', '바나나', '딸기', '포도']
JavaScript

indexOf(element, fromIndex)

배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 해당 요소가 없으면 -1을 반환합니다.

  • element: 찾을 요소입니다.
  • fromIndex (선택 사항): 검색을 시작할 인덱스입니다. 이 인덱스부터 배열의 끝까지 검색합니다. 기본값은 0입니다.
JavaScript
let fruits = ['사과', '바나나', '딸기', '바나나'];
let bananaIndex = fruits.indexOf('바나나');
// 결과: bananaIndex = 1
JavaScript

lastIndexOf(element, fromIndex)

배열에서 특정 요소의 마지막 인덱스를 반환합니다. 해당 요소가 없으면 -1을 반환합니다.

  • element: 찾을 요소입니다.
  • fromIndex (선택 사항): 검색을 시작할 인덱스입니다. 이 인덱스부터 배열의 처음까지 역방향으로 검색합니다. 기본값은 배열의 마지막 인덱스입니다.
JavaScript
let fruits = ['사과', '바나나', '딸기', '바나나'];
let lastBananaIndex = fruits.lastIndexOf('바나나');
// 결과: lastBananaIndex = 3
JavaScript

includes(element)

배열에 특정 요소가 포함되어 있는지 여부를 확인하는 데 사용됩니다.

  • 이 메서드는 불리언 값을 반환하며, 포함되어 있다면 true를 반환하고, 그렇지 않으면 false를 반환합니다
JavaScript
let fruits = ['사과', '바나나', '딸기', '포도'];

// '딸기'가 배열에 포함되어 있는지 확인
let includesStrawberry = fruits.includes('딸기');
// 결과: includesStrawberry = true

// '수박'이 배열에 포함되어 있는지 확인
let includesWatermelon = fruits.includes('수박');
// 결과: includesWatermelon = false
JavaScript

forEach(callback)

배열의 각 요소에 대해 주어진 함수를 실행합니다.

JavaScript
let fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function (fruit, index) {
  console.log(index, fruit);
});
// 결과: 0 사과, 1 바나나, 2 딸기
JavaScript

map(callback)

배열의 각 요소에 대해 주어진 함수를 실행하고, 새로운 배열을 반환합니다.

JavaScript
let numbers = [1, 2, 3];
let squaredNumbers = numbers.map(function(number) {
    return number * number;
});
// 결과: squaredNumbers = [1, 4, 9]
JavaScript

filter(callback)

주어진 조건을 만족하는 요소로 이루어진 배열을 반환합니다.

JavaScript
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});
// 결과: evenNumbers = [2, 4]
JavaScript

결론

JavaScript의 배열 메서드들은 데이터를 효과적으로 다룰 수 있는 도구들입니다. push(), pop(), unshift(), shift()와 같은 기본적인 메서드들은 배열의 끝이나 앞에 요소를 추가하거나 제거하는 데 사용됩니다. 또한, slice()와 splice()를 사용하여 배열의 일부를 추출하거나 대체할 수 있습니다.

배열을 반복하고 조작하는 데에는 forEach(), map(), filter()와 같은 메서드들이 유용합니다. forEach()는 배열의 각 요소에 함수를 적용하며, map()은 각 요소에 대한 새로운 배열을 생성합니다. filter()는 주어진 조건을 만족하는 요소들로 이루어진 배열을 반환합니다.

이러한 배열 메서드들은 코드를 간결하고 가독성 있게 작성할 수 있도록 도와주며, 데이터 처리 작업을 더 효율적으로 수행할 수 있습니다. 따라서, JavaScript 에서는 이러한 배열 메서드들을 적절히 활용하여 코드를 작성하는 것이 중요합니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

3일 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

4일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago