여러 언어로 Array 객체를 사용하려니 자꾸 헷갈려서 자바스크립트 Array 객체 사용 방법을 정리합니다.

Array 객체

push

요소 추가 후 배열의 길이 반환

const fruits = ['apple', 'banana'];
fruits.push('cherry'); // fruits: ['apple', 'banana', 'cherry']

pop

마지막 요소 제거 후 제거된 요소 반환

const fruits = ['apple', 'banana', 'cherry'];
fruits.pop(); // returns 'cherry'

shift

첫번째 요소 제거 후 제거된 요소 반환

const fruits = ['apple', 'banana', 'cherry'];
fruits.shift(); // returns 'apple'

unshift

첫번째 요소로 추가 후 배열의 길이 반환

const fruits = ['banana', 'cherry'];
fruits.unshift('apple'); // fruits: ['apple', 'banana', 'cherry']

slice

요소 추출 ( 원본 복사 )
첫번째 인자는 시작하는 인덱스, 마지막 인자는 끝나는 인덱스
마지막 인자의 인덱스는 포함하지 않는다.

const fruits = ['apple', 'banana', 'cherry'];
const someFruits = fruits.slice(1, 3); // ['banana', 'cherry']

splice

배열 요소 추가/제거, ( 원본 수정 )
slice와 사용법은 같다.
원본 배열의 요소를 직접 제거, 추가할 수 있다.

const fruits = ['apple', 'banana', 'cherry', 'date'];

// 요소 제거
const removedFruits = fruits.splice(1, 2); // fruits: ['apple', 'date'], removedFruits: ['banana', 'cherry']

// 요소 추가
fruits.splice(1, 0, 'blueberry', 'citrus'); // fruits: ['apple', 'blueberry', 'citrus', 'date']

// 요소 제거 및 추가
fruits.splice(1, 1, 'blackberry'); // fruits: ['apple', 'blackberry', 'citrus', 'date']

join

요소를 파라미터로 연결한 문자열 반환

const fruits = ['apple', 'banana', 'cherry'];
fruits.join(', '); // "apple, banana, cherry"

sort, reverse

정렬, 역전

const fruits = ['cherry', 'banana', 'apple'];
fruits.sort(); // fruits: ['apple', 'banana', 'cherry']


const fruits = ['apple', 'banana', 'cherry'];
fruits.reverse(); // fruits: ['cherry', 'banana', 'apple']

filter

필터링 후 만족하는 요소들로 새로운 배열 반환

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

map

특정 로직으로 요소를 변환 후 새로운 배열 반환

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

reduce

실행 후 하나의 결과 반환

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 10

find

함수를 만족하는 첫번째 요소 반환, 없으면 undefined

const numbers = [1, 2, 3, 4];
const firstEven = numbers.find(num => num % 2 === 0); // 2

findIndex

함수를 만족하는 첫번째 요소의 인덱스 반환, 없으면 -1 반환

const numbers = [1, 2, 3, 4];
const firstEvenIndex = numbers.findIndex(num => num % 2 === 0); // 1

includes

포함하는지 boolean 반환

const fruits = ['apple', 'banana', 'cherry'];
fruits.includes('apple'); // true

indexOf, lastIndexOf

지정된 파라미터를 찾으면 인덱스 반환, 없으면 -1 반환
last는 끝부터 검색

const fruits = ['apple', 'banana', 'cherry'];
fruits.indexOf('banana'); // 1

every, some

조건을 만족하는 boolean 반환

const numbers = [2, 4, 6, 8];
numbers.every(num => num % 2 === 0); // true

const numbers = [1, 2, 3, 4];
numbers.some(num => num % 2 === 0); // true

concat

합친 배열 반환

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2); // combined: [1, 2, 3, 4, 5, 6]

Array.from

문자열이나 반복가능한 객체로 새로운 배열 생성 후 반환

const string = 'hello';
const arr = Array.from(string); // arr: ['h', 'e', 'l', 'l', 'o']

예를들어 특정 요소의 모든 HTML 속성을 가져오고 싶다면

const elem = document.querySelector('#list');
const attributes = Array.from(elem.attributes).map(attr => attr.name);

Array.of

반복 여부에 상관없이 넣은 파라미터로 새로운 배열 생성 후 반환

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

isArray

배열인지 판별 boolean 반환

Array.isArray([1, 2, 3]);  // true
Array.isArray('hello');    // false