JavaScript : 배열 메서드 정리 (Array method)

✅ push, pop, shift, unshift

배열을 수정하고 시작 부분이나 끝부분에 요소를 추가/삭제할 수 있는 메서드이다.

메서드	설명
push	배열의 맨 뒤에 요소를 추가한다. ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.push(6,7) console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7 ]
pop	배열의 맨 뒤에 요소를 하나 제거한다. ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.pop() *()안은 비워두면 된다. console.log(arr); // [ 1, 2, 3, 4 ]
unshift	배열의 맨 앞에 요소를 추가한다 ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.unshift('숫자') console.log(arr); // [ '숫자', 1, 2, 3, 4, 5 ]
shift	배열의 맨 앞에 요소를 하나 제거한다. ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.shift() *()안은 비워두면 된다. console.log(arr); // [ 2, 3, 4, 5 ]

 

✅ Join()

배열의 사본을 반환하고 배열 요소(Element)를 연결해 하나의 문자열로 만든다.

const arr = ['안녕하세요', '저는', 10, '번 선수', '홍길동입니다.']
console.log(arr);  // [ '안녕하세요', '저는', 10, '번 선수', '홍길동입니다.' ]

const elements1 = arr.join();
const elements2 = arr.join("");
const elements3 = arr.join(" ");
const elements4 = arr.join("_");
console.log(elements1); // 안녕하세요,저는,10,번 선수,홍길동입니다.
console.log(elements2); // 안녕하세요저는10번 선수홍길동입니다.
console.log(elements3); // 안녕하세요 저는 10 번 선수 홍길동입니다.
console.log(elements4); // 안녕하세요_저는_10_번 선수_홍길동입니다.

 

✅ concat()

배열의 사본을 반환하고 배열의 끝에 여러 요소를 추가할 수 있다.

const arr = [1, 2, 3, 4, 5]
console.log(arr);  // [1, 2, 3, 4, 5]

let element1 = arr.concat(6, 7, 8)
let element2 = arr.concat([6, 7, 8])
let element3 = arr.concat([6, 7], 8)
let element4 = arr.concat(6, [7, [8,9]])

console.log(element1); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(element2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(element3); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(element4); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]

 배열 안에 다중배열을 넣으려면 추가할 배열을 전체적으로 대괄호[]로 묶은 다음

추가할 이중 배열을 대괄호[]로 한 번 더 묶어서 작성한다.

 

 

✅ slice

배열의 사본을 반환하고 배열의 일부만을 가져올 수 있다.

const arr = ['index0', 'index1', 'index2', 'index3', 'index4', 'index5', 'index6']
console.log(arr);  ['index0', 'index1', 'index2', 'index3', 'index4', 'index5', 'index6']

let element1 = arr.slice(1)// [ 'index1', 'index2', 'index3', 'index4', 'index5', 'index6' ]
let element2 = arr.slice(2) // [ 'index2', 'index3', 'index4', 'index5', 'index6' ]
let element3 = arr.slice(3) // [ 'index3', 'index4', 'index5', 'index6' ]
let element4= arr.slice(-1) // [ 'index6' ]
let element5 = arr.slice(-2) // [ 'index5', 'index6' ]
let element6 = arr.slice(-3) // [ 'index4', 'index5', 'index6' ]
let element7 = arr.slice(1,4) // [ 'index1', 'index2', 'index3' ]
let element8 = arr.slice(3,4) // [ 'index3' ]
let element9 = arr.slice(-5,-1) // [ 'index2', 'index3', 'index4', 'index5' ]
let element10 = arr.slice(-4,-2) // [ 'index3', 'index4' ]

 

✅ splice

배열 자체를 수정하고 임의의 위치에 요소를 추가하거나 제거할 수 있다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
//* start : 배열의 변경을 시작한 인덱스, 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다.
//(음수로 설정될 경우 배열의 끝에서부터 요소를 세어나가 array.length -n 번째 인덱스를 가르키며,
//값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.)

//* deleteCount : 배열에서 제거할 요소의 갯수이다.
//(deleteCount를 생략하거나 값이 array.length - start 보다 크면 start부터 모든 요소를 제거하며
//0이하라면 어떤 요소도 제거하지 않으나 이 때는 최소한 하나의 새로운 요소를 지정해야한다.)

//* item : 배열에 추가할 요소이다 (배열을 삭제할때는 생략해서 사용한다.)

➕ 추가 ➕ 

const arr = ['기존', '기존', '기존']

// index 0번째부터 '추가1', '추가2' 를 추가한다.
arr.splice(0, 0, '추가1', '추가2') // [ '추가1', '추가2', '기존', '기존', '기존' ]

// index 2번째부터 '추가' 를 추가한다.
arr.splice(2, 0, '추가') // [ '기존', '기존', '추가', '기존' ]

// index 3번째부터 '추가1', '추가2', '추가3' 를 추가한다.
arr.splice(3, 0, '추가1', '추가2', '추가3') // [ '기존', '기존', '기존', '추가1', '추가2', '추가3' ]

// index 10번째부터 '추가1', '추가2', '추가3' 를 추가한다.
arr.splice(10, 0, '추가1', '추가2', '추가3') // [ '기존', '기존', '기존', '추가1', '추가2', '추가3' ]
// ✅ index의 length가 3인데 그보다 높은수를 지정하면 index.length의 마지막에 요소를 추가한다.

 

➖제거➖

const arr = ['기러기', '토마토', '스위스', '한국인', '인도인', '별똥별', '우영우', '역삼역', '강남역']

// index 3번째부터 1개의 요소를 제거한다.
arr.splice(3,1) // ['기러기', '토마토', '스위스', '인도인', '별똥별', '우영우', '역삼역', '강남역']

// index 6번째부터 2개의 요소를 제거한다.
arr.splice(6,2) // [ '기러기', '토마토', '스위스', '인도인', '별똥별', '우영우' ]

// index 10번째부터 5개의 요소를 제거한다.
arr.splice(10,5) // [ '기러기', '토마토', '스위스', '인도인', '별똥별', '우영우' ]
✅ 배열의 length보다 길고 요소도 존재하지않음으로 제거되지 않는다.

// index 1번째부터 -1개의 요소를 제거한다.
arr.splice(1,-1) // [ '기러기', '토마토', '스위스', '인도인', '별똥별', '우영우' ]
✅ 이 역시 deleteCount가 -1이므로 제거되지 않는다.

 

➰교체➰

const arr = ['거위', '토마토', '스위스', '한국인', '중국인', '별똥별', '오수재']

// index0 부터 요소 1개를 삭제하고 '기러기'를 추가한다.
arr.splice(0, 1, '기러기') // [ '기러기', '토마토', '스위스', '한국인', '별똥별', '오수재' ]

// index3 부터 요소 2개를 삭제하고 '인도인'을 추가한다.
arr.splice(3, 2, '인도인') // [ '기러기', '토마토', '스위스', '인도인', '별똥별', '오수재' ]

// index5 부터 요소 1개를 삭제하고 '우영우','역삼역'을 추가한다.
arr.splice(5, 1, '우영우', '역삼역')// [ '기러기', '토마토', '스위스', '인도인', '별똥별', '우영우', '역삼역']

 

✔️추출✔️

const arr = ['거위', '양배추', '토마토', '양배추', '기러기', '대한민국', '스위스', '한국인', '중국인', '별똥별', '우영우', '오수재', '양배추', '인도인']

const text1 = arr.splice(4, 1) // [ '기러기' ]
const text2 = arr.splice(2, 1) // [ '토마토' ]
const text3 = arr.splice(4, 1) // [ '스위스' ]
const text4 = arr.splice(10, 1) // [ '인도인' ]
const text5 = arr.splice(6, 1) // [ '별똥별' ]
const text6 = arr.splice(6, 1) // [ '우영우' ]

// 필요한값만 제거하고 남은값
console.log(arr); // ['거위', '양배추', '양배추', '대한민국', '한국인', '중국인', '오수재', '양배추']

// 추출한 배열을 합치기위해 전개연산자 (... Spread Operator)를 사용한다.
const newArr = [
    ...text1,
    ...text2,
    ...text3,
    ...text4,
    ...text5,
    ...text6,
]

// 전개연산자를 이용한 배열 재조합
console.log(newArr); // [ '기러기', '토마토', '스위스', '인도인', '별똥별', '우영우' ]
console.log(`안녕하십니까! 제이름은 똑바로 읽어도 거꾸로 읽어도 우영우 입니다. ${newArr}`);
// 안녕하십니까! 제이름은 똑바로 읽어도 거꾸로 읽어도 우영우 입니다. 기러기,토마토,스위스,인도인,별똥별,우영우

 

✅ copyWithin

배열 자체가 수정하고 배열 요소를 복사해서 다른 위치에 붙여 넣고 기존 요소위에 덮어쓴다.

const arr = [1,2,3,4];
// arr.copyWithin(붙여넣을 위치, 복사 시작 위치, 복사 종료 위치);

arr.copyWithin(1, 2);		// arr = [1,3,4,4]
arr.copyWithin(2, 0, 2);	// arr = [1,3,1,3]		
arr.copyWithin(0, -3, -1);	// arr = [3,1,1,3]

 

✅ fill

배열 자체를 수정하고 정해진 값으로 배열을 채운다.

const arr = [1,2,3,4,5,6]
// arr.fill(vlaue, start, end)

// 배열을 모두 '변환'으로 수정한다.
arr.fill('변환') // [ '변환', '변환', '변환', '변환', '변환', '변환' ]

// index 1번째 부터 '변환'으로 수정한다.
arr.fill('변환',1) // [ 1, '변환', '변환', '변환', '변환', '변환' ]

// index 2번째 에서 4번째까지 '변환'으로 수정한다.
arr.fill('변환',2,4) // [ 1, 2, '변환', '변환', 5, 6 ]

 

✅ reverse

배열 자체를 수정하고 요소의 순서를 반대로 바꾼다.

const arr = [1,2,3,4,5,6]

arr.reverse() // [ 6, 5, 4, 3, 2, 1 ]

 

✅ sort

배열 자체를 수정하고 요소의 순서를 오름차순 내림차순으로 정렬할 수 있다.

🆘 정렬할 배열의 요소가 2개 미만일 경우 오류가난다.

 

✔️ 문자정렬

const arr = ['Apple', 'Dog', 'Element', 'Korea', 'Zero', 'Banana', 'Japan']

arr.sort();
// ['Apple', 'Banana', 'Dog', 'Element', 'Japan', 'Korea', 'Zero']

✔️ 숫자정렬

const arr = [7, 2, 55, 23, 18, 100, 78]

오름차순
arr.sort(function (a, b) {
    return a - b;
    // [2, 7, 18, 23, 55, 78, 100]
})

// 내림차순
arr.sort(function (a, b) {
    return b - a;
    // [100, 78, 55, 23,18, 7, 2]
})

✔️ 객체정렬

const member = [
    { name: '기형', age: 25 },
    { name: '수호', age: 22 },
    { name: '민지', age: 32 },
    { name: '효영', age: 18 },
    { name: '배진', age: 25 }
]

// 이름 오름차순 정렬
member.sort(function (a, b) {
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0
    // 기형, 민지, 배진, 수호, 효영
})

// 이름 내림차순 정렬
member.sort(function (a, b) {
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0
    // 효영, 수호, 배진, 민지, 기형
})

나이 오름차순
let age = "age"
member.sort(function(a,b){
    return a[age] - b[age]
    // 18, 22, 25, 25, 32
})

// 나이 내림차순
let age = "age"
member.sort(function (a, b) {
    return b[age] - a[age]
    // 32, 25, 25, 22, 18
})

console.log(member);

 

✅ indexOf

// indexOf : 찾고자 하는 값과 정확히 일치하면 인덱스를 반환한다.
const arr = [1, 2, 3, 4, 5]

arr.indexOf(3) // 2
arr.indexOf(10) // -1

 

✅ map

사본을 반화하며 배열 요소를 다른 형식으로 바꾼다.

 

✔️ 객체를 두 개의 배열로 나누기

const arr = [
    {name: '아메리카노', prices: 2500},
    {name: '카페라떼', prices: 3500},
    {name: '프라푸치노', prices: 5500},
    {name: '과일스무디', prices: 5000},
    {name: '유자차', prices: 3800},
]

const names = arr.map(x => x.name);  // [ '아메리카노', '카페라떼', '프라푸치노', '과일스무디', '유자차' ]
const prices = arr.map(x => x.prices); // [ 2500, 3500, 5500, 5000, 3800 ]
const discount = prices.map(x=>x*0.5) // [ 1250, 1750, 2750, 2500, 1900 ]

 

✔️ 나눠진 배열들을 다시 객체로 결합하기

const items = ['BIG3', 'BIG5', 'FREE'];
const prices = [18000, 22000, 35000];

const tiket = items.map((x,i) => ({name: x, price: prices[i]}))

console.log(tiket); 
/*
[
    { name: 'BIG3', price: 18000 },
    { name: 'BIG5', price: 22000 },
    { name: 'FREE', price: 35000 }
  ]
  */

 

 

✅ filter

사본을 반환하며 원본 배열에서 필요한 것들만 사본에 저장한다.

const arr = [1, 33, 21, 10, 80, 92]

const even = arr.filter(x => x % 2 === 0);  // [ 10, 80, 92 ]
const odd = arr.filter(x => x % 2 === 1); // [ 1, 33, 21 ]

 

 

✅ join

배열 요소들을 하나로 합친 문자열 사본을 반환한다.

const arr = ['바람', '비', '물'];

console.log(arr.join());
// 바람,비,물

console.log(arr.join(''));
// 바람비물

console.log(arr.join('-'));
// 바람-비-물

 

✅ reduce

배열의 데이터타입을 변경한다.

 

✔️ Number로 변경

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, idx) => { return acc += cur; }, 0);
console.log(result);  // 15

const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
console.log(result2);  // 25

 

✔️ 오브젝트 배열에서 원하는 값만 더하기

const friends = [
    {
      name: '홍길동',
      age: 31,
      job: '백엔드개발자'
    },
    {
      name: '우영우',
      age: 32,
      job: '변호사'
    },
    {
      name: '이서형',
      age: 25,
      job: '프론트개발자'
    }
  ];
  
  // 3명의 나이를 더해봅니다.
  // 여기서 초기값 설정이 반드시 필요합니다.
  const ageSum = friends.reduce((accumulator, currentObject) => {
    return accumulator + currentObject.age;
  }, 0);
  
  console.log('친구들 나이 합 ', ageSum); // 친구들 나이 합  88

 

✅ 정리

✔️ 배열 콘텐츠 조작

하고 싶은 일	메서드	수정 또는 사본
스택 만들기	push, pop	배열 수정
큐 만들기	unshift,shift	배열 수정
배열 마지막에 여러 요소 +	concat	사본 반환
배열 일부가 필요할 때	slice	사본 반환
임의의 위치에 요소 +-	splice	배열 수정
배열 안에서 요소 교체	copyWithin	배열 수정
배열 채우기	fill	배열 수정
배열 반대 정렬	reverse	배열 수정
배열 정렬	sort	배열 수정

 

✔️ 배열 검색

찾고자 하는 것	사용할 메서드
요소의 인덱스	indexOf(단순한 값), findIndex(복잡한 값)
인덱스를 뒤에서부터 찾을 때	lastIndexOf(단순한 값)
요소 자체	find
조건을 만족하는 요소가 들어있는지 확인	some
모든 요소가 조건을 만족하는지 확인	every

 

✔️ 배열 변형

하고 싶은 일	사용할 메서드	수정 또는 사본
배열의 모든 요소 변형	map	사본 반환
조건에 맞는 요소만 남기기	filter	사본 반환
배열 전체를 다른 데이터 타입으로 변형	reduce	사본 반환
요소를 문자열로 바꿔서 하나로 병합	join	사본 반환