[Javascript] 자바스크립트 배열 내장함수 종류와 사용방법

자바스크립트(Javascript)로 개발할 때 정말 유용하게 사용했던

배열 내장 함수들에 대해 알아보자.

---

1. at

배열의 주어진 인덱스에 대한 값을 반환하는 함수

at(index)

• index: 배열에서 반환할 요소의 인덱스 (음수 값일 경우 배열의 마지막요소부터 계산)

예제

const cafe = ['아메리카노', '라떼', '스무디', '프라푸치노'];

cafe.at(0); //아메리카노
cafe.at(1); //라떼
cafe.at(2); //스무디
cafe.at(3); //프라푸치노

cafe.at(-1); //프라푸치노
cafe.at(-2); //스무디
cafe.at(-3); //라떼
cafe.at(-4); //아메리카노

2. concat

배열이나 값을 기존 배열에 합쳐서 새로운 배열을 반환하는 함수

concat(value)

• value: 배열 또는 값 (생략할 경우 기존  배열의 얕은 복사본 반환)

예제

const arr1 = ['사탕', '초콜릿'];
const arr2 = ['젤리', '껌', '푸딩'];

console.log(arr1.concat('과자')); //['사탕', '초콜릿', '과자']
console.log(arr1.concat(arr2)); //['사탕', '초콜릿', '젤리', '껌', '푸딩']
console.log(arr1.concat('과자', arr2)); //['사탕', '초콜릿', '과자', '젤리', '껌', '푸딩']

 

3. every

배열 안에 모든 요소가 특정 조건에 부합하는지 확인

every(callbackFn, thisArg)

• callbackFn: 배열 요소에 대해 실행할 함수
  • element: 배열에서 처리하는 현재 요소
  • index: 처리하는 현재 요소의 인덱스
  • array: 호출한 배열
• thisArg: callbackFn을 실행할 때 this로 사용하는 값

예제

// 화살표 함수
every((element) => { ... } )
every((element, index) => { ... } )
every((element, index, array) => { ... } )

// 콜백 함수
every(callbackFn)
every(callbackFn, thisArg)

// 인라인 콜백 함수
every(function callbackFn(element) { ... })
every(function callbackFn(element, index) { ... })
every(function callbackFn(element, index, array){ ... })
every(function callbackFn(element, index, array) { ... }, thisArg)

 

어떤 하나의 값이라도 조건에 통과하지 못하면 false를 반환한다. (빈 배열은 true를 반환한다.)

const isTrue = (value) => value > 0;
const arr1 = [1, 30, 39, 29, 10, 13];
const arr2 = [-1, 1, 30, 39, 29, 10, 13];
const arr3 = [];

console.log(arr1.every(isTrue)); //true
console.log(arr2.every(isTrue)); //false
console.log(arr3.every(isTrue)); //true

4. fill

배열의 시작 인덱스부터 끝 인덱스 전까지 인자로 받은 값으로 채운다.

every(value, start, end)

• value: 배열을 채울 값
• start: 시작 인덱스 값 (default: 0)
• end: 끝 인덱스 (default: 배열 길이)

예제

const arr = [1, 2, 3, 4];

// index 2부터 index 4 이전까지 0으로 채운다.
console.log(array1.fill(0, 2, 4)); //[1, 2, 0, 0]

// index 1부터 끝까지 5로 채운다.
console.log(array1.fill(5, 1)); //[1, 5, 5, 5]

// 모든 값을 6으로 채운다.
console.log(array1.fill(6)); //[6, 6, 6, 6]

 

5. filter

특정 조건에 부합하는 모든 배열의 요소를 새로운 배열로 반환

filter(callbackFn, thisArg)

• callbackFn: 배열 요소에 대해 실행할 함수
  • element: 배열에서 처리하는 현재 요소
  • index: 처리하는 현재 요소의 인덱스
  • array: 호출한 배열
• thisArg: callbackFn을 실행할 때 this로 사용하는 값

예제

const arr1 = [1, 5, 10, 2, 4, 8];

function isTrue(value) {
  return value > 5;
}

console.log(arr1.filter(isTrue)); //[10, 8]

 

6. forEach

인자로 주어진 함수를 배열 요소에 대해 실행하는 함수

forEach(callbackFn, thisArg)

• callbackFn: 배열 요소에 대해 실행할 함수
  • element: 배열에서 처리하는 현재 요소
  • index: 처리하는 현재 요소의 인덱스
  • array: 호출한 배열
• thisArg: callbackFn을 실행할 때 this로 사용하는 값

예제

const cafe = ['아메리카노', '라떼', '스무디', '프라푸치노'];

// arrow function
cafe.forEach(menu => {
console.log(menu);
});

// function
cafe.forEach(function (value, index, array) {
    console.log(value);
    console.log(index);
    console.log(array);
});

forEach를 사용할 때는 중간에 멈출 수 없기 때문에 목적에 맞게 for문, forEach 함수를 사용하면 된다.

7. includes

배열이 특정 요소를 포함하고 있는지 확인

includes(value, fromIndex)

• value: 검색할 값 (대소문자 구분)
• fromIndex: 검색을 시작할 인덱스 (default: 0)

예제

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, NaN];

arr.includes(2); //true
arr.includes(10); //false
arr.includes(2, 2); //false
arr.includes(NaN); //true

 

8. indexOf

배열에서 특정 요소를 검색하여 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

indexOf(value, fromIndex)

• value: 검색할 값
• fromIndex: 검색을 시작할 인덱스 (default: 0)

예제

var arr = [5, 1, 8, 7, 8];
arr.indexOf(1); //1
arr.indexOf(9); //-1
arr.indexOf(8, 3); //4
arr.indexOf(2, 1); //-1

 

9. join

배열의 모든 요소들을 연결해서 하나의 문자열로 만든다.

join(separator)

• separator: 배열의 요소를 구분할 문자열 구분자 (생략시 쉼표로 구분)

예제

배열 요소 값이 undefined 또는 null일 경우 빈 문자열로 반환된다.

const a = ['바람', '비', '불'];
console.log(a.join());      //바람,비,불
console.log(a.join(', '));  //바람, 비, 불
console.log(a.join(' + ')); //바람 + 비 + 불
console.log(a.join(''));    //바람비불

const b = ['바람', null, '비', undefined, '불'];
console.log(b.join()); //바람,,비,,불

 

10. map

배열 내의 모든 요소에 주어진 함수를 호출한 결과를 새로운 배열로 반환

map(separator)

• callbackFn: 배열 요소에 대해 실행할 함수
  
  • element: 배열에서 처리하는 현재 요소
  • index: 처리하는 현재 요소의 인덱스
  • array: 호출한 배열
• thisArg: callbackFn을 실행할 때 this로 사용하는 값

예제

const arr = [1, 4, 9];
const arr2 = arr.map(function(num) {
  return num * 2;
});

console.log(arr); //[1, 4, 9]
console.log(arr2); //[2, 8, 18]

 

11. pop

배열에서 마지막 요소를 제거 및 반환

예제

const arr = [1, 2, 3, 4];
const pop = arr.pop();

console.log(arr); //[1, 2, 3]
console.log(pop); //4

 

12. push

배열 끝에 하나 이상의 요소를 추가하고 배열 길이를 반환

push(element)

• element: 배열 끝에 추가할 요소 값

예제

let arr = [1, 2, 3, 4];
var add = arr.push(5, 6, 7);

console.log(arr); //[1, 2, 3, 4, 5, 6, 7]
console.log(add);  //7

 

13. slice

배열의 지정된 인덱스 범위로부터 얕은 복사본을 새로운 배열을 반환

slice(begin, end)

• begin: 추출 시작 인덱스 (default: 0), 음수일 경우 배열 끝에서부터의 길이
• end: 추출 종료 인덱스 (생략시 길이만큼), 음수일 경우 반대로

예제

let arr = ['사탕', '초콜릿', '껌', '젤리', '아이스크림']
let arr2 = arr.slice(1, 3)

console.log(arr); //['사탕', '초콜릿', '껌', '젤리', '아이스크림']
console.log(arr2); //['초콜릿', '껌']

 

14. some

배열 요소 중 어떤 요소 하나라도 특정 조건에 부합하는지 확인

some(callbackFn, thisArg)

• callbackFn: 배열 요소에 대해 실행할 함수
  
  • element: 배열에서 처리하는 현재 요소
  • index: 처리하는 현재 요소의 인덱스
  • array: 호출한 배열
• thisArg: callbackFn을 실행할 때 this로 사용하는 값

예제

[9, 10, 4, 3, 1].some((x) => x < 0); //false
[-1, -3, -8, 1, -4].some((x) => x > 0); //true

 

 

15. sort

배열의 요소들을 정렬하여 반환

sort(compareFn)

• compareFn: 정렬 순서를 정의하는 함수

예제

복사본이 아닌 원 배열이 정렬된다.

const arr = [6, 8, 4, 2, 7, 1, 5, 3, 9];
arr.sort(function (a, b) {
  return a - b;
});

console.log(arr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

16. splice

배열의 기존 요소를 삭제/교체 하거나 새로운 요소 추가

splice(start, deleteCount, ...item)

• start: 배열의 변경을 시작할 인덱스, 음수일 경우 배열의 끝에서부터
• deleteCount: 배열에서 제거할 요소의 수 (생략시  start부터 모든 요소 제거)
• item: 배열에 추가할 요소

예제

요소를 삭제할 경우 삭제한 요소의 값을 반환해준다.

// 1개 요소 추가
let arr = [1, 3, 5, 9];
let removed = arr.splice(1, 0, 2);

console.log(arr); //[1, 2, 3, 5, 9]
console.log(removed); //[]

// 2개 요소 추가
let arr2 = [1, 4, 5, 9];
let removed2 = arr.splice(1, 0, 2, 3);

console.log(arr2); //[1, 2, 3, 4, 5, 9]
console.log(removed2); //[]

// 1개 요소 삭제 + 2개 요소 추가

let arr3 = [1, 4, 5, 9];
let removed3 = arr3.splice(2, 1, 7, 8);

console.log(arr3); //[1, 4, 7, 8, 9]
console.log(removed3); //[5]

---

내가 자바스크립트를 사용하면서 가장 많이 사용했던

배열 내장함수들을 약소하게 정리했다.

더 많은 내장함수들이 있는데 추가적으로 알고 싶은 부분은

아래 링크에서 확인하면 된다.

 

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array