JavaScript - Simple Array Methods / The new at Method

1. slice

• 대상 배열의 범위 만큼 복사하여 새로운 배열 객체로 반환하는 메소드
• 원본 배열은 바뀌지 않는다

const arraySlice = ['s', 'i', 'm', 'p', 'l', 'e'];

const newArray = arraySlice.slice(2);
-> newArray ['m', 'p', 'l', 'e']

const newArray2 = arraySlice.slice(1, 3);
-> newArray2 ['i', 'm', 'p']

const newArray3 = arraySlice.slice();
-> newArray3 ['s', 'i', 'm', 'p', 'l', 'e']

const newArray4 = arraySlice.slice(6);
-> newArray4 []

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

2. splice

• 대상 배열의 요소를 삭제 또는 교체 하거나 추가하는 메소드
• 대상 배열의 요소를 삭제 또는 교체했을 경우 제거 된 요소가 반환되어 나온다
• 원본 배열이 변경된다

const arraySplice = ['angel', 'clown', 'mandarin', 'sturgeon'];

const newArray = arraySplice.splice(2, 0, 'drum');
-> arraySplice ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
-> newArray []

const newArray1 = arraySplice.splice(3, 1);
-> arraySplice ['angel', 'clown', 'drum', 'sturgeon']
-> newArray1 ['mandarin']

const newArray2 = arraySplice.splice(1, 2, 'parrot', 'anemone');
-> arraySplice ['angel', 'parrot', 'anemone', 'sturgeon']
-> newArray2 ['clown', 'drum']

const newArray3 = arraySplice.splice(2);
-> arraySplice ['angel', 'parrot']
-> newArray3 ['anemone', 'sturgeon']

const arr = ['clown', 'anemone'];
const newArray4 = arraySplice.splice(1, 0, ...arr);
-> arraySplice ['angel', 'clown', 'anemone', 'parrot']
-> newArray4 []

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

3. reverse

• 배열의 순서를 반전시키는 메소드
• 원본 배열이 변경된다

const arrayReverse = [1, 2, 3, 4, 5,]; 

const newArray = arrayReverse.reverse(); 
-> arrayReverse [5, 4, 3, 2, 1]
-> newArray [5, 4, 3, 2, 1]

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

4. concat

• 인자로 주어진 배열이나 값들을 받아 기본 배열에 합쳐서 새 배열을 반환하는 메소드
• 원본 배열은 바뀌지 않는다

const arrayConcat = ['H', 'E', 'L', 'L', 'O']; 

const newArray = arrayConcat.concat(['W', 'O', 'R', 'L', 'D']); 

console.log(arrayConcat);
console.log(newArray);
-> arrayConcat ['H', 'E', 'L', 'L', 'O']
-> newArray ['H', 'E', 'L', 'L', 'O', 'W', 'O', 'R', 'L', 'D']

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

5. join

• 대상 배열의 모든 요소를 연결하여 하나의 문자열로 반환 메소드
• 원본 배열은 바뀌지 않는다
• 대상 배열의 길이가 0이거나 요소가 undefined 또는 null일 경우 빈 문자열을 반환한다

const arrayJoin = ['WOW', 'HELLO', 'WORLD']; 

const newString = arrayJoin.join(); 
-> arrayJoin ['WOW', 'HELLO', 'WORLD']
-> newString WOW,HELLO,WORLD

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

6. at

• 대상 배열의 인덱스 요소를 반환하는 메소드
• 예전부터 쓰던 대괄호 표기법과는 다른 방법의 메소드라 할 수 있다
• 해당 인덱스 위치에 요소가 없다면 undefined를 반환한다
• 매개변수를 설정하지 않고 at()만 호출할 경우 0번째 인덱스 요소를 반환한다
• 원본 배열은 바뀌지 않는다

const arrayAt = ['apple', 'banana', 'pear'];

const newElement = arrayAt.at(1);
-> newElement 'banana'

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