자바스크립트 배열 메소드

자바스크립트 배열
https://jjaong34.tistory.com/16

자바스크립트 배열

매서드 4가지에 이어서
추가로 자주 사용하는 매서드에 대해 정리하려고 한다.
 

#1 - concat

두 배열을 결합해서 새로운 제3 배열을 만들어낸다.

let dogs = ['jason','bob'];
let cats = ['may', 'yarn'];

dogs.concat(cats) // ['jason','bob', 'may', 'yarn']

배열은 합치되 기존의 배열을 수정하진 않는다.
 

#2 - includes

불리언 매서드의 예시로 true, false로 응답한다.
배열에 특정한 값이 있는지 판단한다

let dogs = ['jason','bob'];
let cats = ['may', 'yarn'];

dogs.includes('bob'); // true
dogs.includes('Bob'); // false

대문자 입력도 다른 문자열로 인식한다.
 

#3 - indexOf

문자열에서 indexOf 매서드와 매우 유사하다.
해당 요소가 있는지 물어보면 인덱스가 나오고 없으면 -1이 나온다.

let dogs = ['jason','bob'];
let cats = ['may', 'yarn'];

let set = dogs.concat(cats) // ['jason','bob', 'may', 'yarn']
set.indexOf('bob') // 1
set.indexOf('go') // -1

어떤 요소가 배열에 있는지 없는지로도 알아낼 수 있다. (없으면 -1이 나오기 때문에)
 

#4 - reverse

배열을 뒤집어 준다.
주의 할점은 그 자리에서 바뀐다는 점 원본을 파괴시킨다.

let dogs = ['jason','bob'];
let cats = ['may', 'yarn'];

let set = dogs.concat(cats) // ['jason','bob', 'may', 'yarn']
set.reverse() // ['yarn','may','bob','jason'];
console.log(set) // ['yarn','may','bob','jason'];

reverse는 사본을 제공하지 않고 원본에 적용되기 때문에 사본을 만들어서 사용하자
 

#5 - slice

배열을 복사해준다.

let colors = ['red', 'orange', 'yellow', 'green' ,'blue'];

colors.slice() // ['red', 'orange', 'yellow', 'green' ,'blue'];

원하는 길이 만큼 인덱스를 입력해서 가져갈 수도 있다.

array.slice(start, [end]) // end는 생략가능

colors.slice(3) // ['green','blue']

console.log(colors) // ['red', 'orange', 'yellow', 'green' ,'blue'];

slice 매서드를 사용해도 원본은 그대로이다.
인덱스를 - 값으로 입력해 준다면?

colors.slice(-2) // ['green' ,'blue'];

1개를 가져오고 싶다면 -1을 2개를 가져오고싶다면 -2를 입력하면 된다.
 

#6 - splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
splice 도 원본에 적용된다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

배열의 변경을 시작할 인덱스, 배열에서 제거할 요소의 수, 배열에 추가할 요소 이다.

let colors = ['red', 'orange', 'yellow', 'green' ,'blue'];

colors.splice(3, 1) // ['green']
console.log(colors) // ['red', 'orange', 'yellow','blue']

위에 코드를 보면 3번째 인덱스부터 1개의 요소를 제거하겠다는 뜻이다.
splice는 원본에 적용되기 때문에 splice를 해서 green이 도출되고
원본에선 green이 삭제된 모습이다.
 
이번엔 orange와 yellow 사이에 green을 다시 추가해보겠다.

colors.splice(2,0,'green'); // ['red','orange','green','yellow','blue'];

orange 다음에 와야 하기 때문에 index는 2번, 삭제할 요소가 없기 때문에 0, 그리고 추가할 요소 'green'을 입력했다
 
● 찾아본 정보에 의하면 splice는 값을 삽입하는 것보다는 삭제하는 용도로 쓰인다고 한다. 
 

#7 - sort

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 복사본이 만들어지는 것이 아닙니다.
자바스크립트 sort 매서드는 유니코드에 의해서 정렬되는 것이 기본으로 내장되어있다.
때문에 생각보다 정렬할 때 유용하지 않다.
그래서 주로 내커스텀을 해서 사용한다.
 
오름 차순의 예시로

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

이런식으로 사용하는데
mdn에 여러 방식이 있으니 참고하자
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

 
이 매서드는 일부분일 뿐이고 다른 매서드가 중요하지 않은건 아니다.
mdn에 보면 매서드가 훨씬 많이 있다.
공부할 때 참고해서 활용하자