배열 자르기 - slice()
배열의 일부분을 잘라내어,
새로운 배열로 리턴하기 위해서는 slice() 함수를 사용한다.
slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다. (다만 종료 인덱스는 포함하지 않는 개념이다!)
이를 이용하여 배열의 마지막 요소를 반환하는 한 방법으로도 사용이 가능하다!
slice()
arr.slice([begin[, end]])
slice 함수는 잘라낼 배열의 시작index와 end index를 파라미터로 받아서,
그 사이의 원소들을 새로운 배열로 만들어서 리턴하게 된다.
이때 원본 배열인 arr은 변경되지 않는다. (splice와의 가장 큰 차이점이라고도 할 수 있다)
파라미터
begin
잘라낼 배열의 시작 index
end
잘라낼 배열의 종료 index
end index의 값은 잘라낼 배열에 포함되지 않게된다.
end index가 생략되면, begin index부터 배열의 끝까지를 잘라낸다.
리턴값
잘라낸 원소들로 만든 새로운 배열을 리턴한다.
slice() 예시
const arr = ['a', 'b', 'c', 'd'];
const arr1 = arr.slice(1, 3); // [ 'b', 'c' ]
const arr2 = arr.slice(1); // ['b', 'c', 'd']
const arr3 = arr.slice(-3, -1); // ['b', 'c'] --> 동일하게 end index는 포함하지 않는 것을 확인할 수 있다. 음수의 경우도 동일하니 실수하지 말 것!
document.write(arr1 + '<br>');
document.write(arr2 + '<br>');
document.write(arr3 + '<br>');arr.slice(1, 3);
배열의 arr[1] ~ arr[3] 까지(arr[3]은 미포함)를 복사한, 새 배열을 리턴한다.
arr.slice(1);
두번째 파라미터인 end 값이 입력되지 않으면,
시작 index부터 배열의 끝까지를 복사한, 새 배열을 리턴한다.
arr.slice(-3, -1);
begin index나 end index가 음수이면,
배열의 끝에서부터의 길이를 나타낸다.
slice() 예시 2
간단한 실습을 위해 숫자 0부터 19까지를 담고있는 배열을 생성하여 nums라는 변수에 할당한다.
> nums = Array(20).fill().map((_, i) => i)
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]이 숫자 배열에서 5부터 9까지를 복사한 값을 담고 있는 새로운 배열을 만들 수 있다.
> nums.slice(5, 10)
< [5, 6, 7, 8, 9]여기서 주의할 점은 첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함하지만, 두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다는 것이다. (실수하기 쉬운 부분이니 주의)
두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사해준다.
(그래서 마지막 요소를 받기 위해서 .slice(-1)을 사용하는 개념)
> nums.slice(10)
< [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]첫번째 인자도 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해버리는 효과를 낼 수 있다.
> nums.slice()
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]slice() 함수는 밑에서 다룰 splice() 함수와 달리 아무리 많이 호출해도 원본 배열의 값은 훼손하지 않는다. 따라서 원본 배열이 그대로 보존되야 하는 상황에서 매우 유용하게 사용된다.
다만 깊은 복사는 아니고 얕은 복사의 개념임을 주의해야 할 것.
> nums
< [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]JavaScript - 배열의 마지막 요소 가져오기
자바스크립트에서 배열의 마지막 값에 접근하여 가져오는 방법들은 여러가지가 존재한다. 첫번째로 length를 이용하여 마지막 인덱스에 접근하는 방법과 두번째로 slice를 이용하여 마지막 요소에 접근하는 방법이 있겠다. 세번째로 신규 메소드인 at()을 사용하는 방법이 있고, 마지막으로 pop()으로 배열에서 요소를 제거하고 값을 읽는 방법이 있다.
(다만 각각의 방법마다, 원본을 훼손하는지 여부를 반드시 파악하고 있어야 한다)
- 'Array.length - 1'으로 배열의 마지막 요소 접근
일반적으로 배열의 요소에 접근할 때는 아래와 같이 Index로 접근한다. Index는 0부터 시작하며, 아래 예제에서 배열의 마지막 요소에 접근하려면 arr[3]처럼 접근할 수 있다.
const arr = ['apple', 'kiwi', 'grape', 'mango'];
console.log(arr[0]); // apple
console.log(arr[1]); // kiwi
console.log(arr[2]); // grape
console.log(arr[3]); // mango하지만 배열을 정의할 때마다 길이는 달라질 수 있기 때문에 고정된 정수로 마지막 요소에 접근하면 안된다. 아래와 같이 배열의 길이(length)에서 1을 뺀 값이 항상 배열 마지막 요소의 Index가 되기 때문에 이렇게 마지막 요소를 가져오면 된다.
const arr = ['apple', 'kiwi', 'grape', 'mango'];
let last = arr[arr.length - 1];
console.log(last);Output:
mango- 'Array.slice(-1)[0]'으로 배열의 마지막 요소 접근
slice()는 배열의 특정 구간을 자를 때 사용하는 함수이다. slice(-1)은 배열의 마지막 Index에서, 배열의 마지막까지 범위에 해당하는 요소들을 잘라서 배열로 리턴한다.
const arr = ['apple', 'kiwi', 'grape', 'mango'];
console.log(arr.slice(-1));위 코드 실행 결과를 보면 배열에 마지막 요소만 포함되있는 것을 확인할 수 있다.
[ 'mango' ]slice(-1)는 마지막 요소만 있는 배열을 리턴하기 때문에, 배열에서 요소만 가져오려면 아래와 같이 slice(-1)[0]으로 가져오면 된다.
(slice는 splice와 다르게 원본을 훼손하지 않는다!)
const arr = ['apple', 'kiwi', 'grape', 'mango'];
let last = arr.slice(-1)[0];
console.log(last);Output:
mango
- Array.at()으로 배열의 마지막 요소 접근
Array.at()이라는 새로운 함수가 있는데, at(-1)은 마지막에서 첫번째 요소에 접근하고, at(-2)는 마지막에서 두번째 요소에 접근한다. 신규 함수이기 때문에 호환성 문제가 생길 수 있으니 주의해서 사용할 것.
const colors = ['red', 'green', 'blue'];
const atWay = colors.at(-1);
console.log(atWay); // 'blue'
const atWay = colors.at(-2);
console.log(atWay); // 'green'- Array.pop()으로 배열의 마지막 요소 가져오기
Array.pop()은 배열에서 마지막 요소를 삭제하고, 그 값을 리턴한다. 위의 방법들은 배열에서 마지막 요소를 삭제하지 않고, 단순히 접근하여 요소 값을 가져왔었다. 그러나 pop()은 배열에서 삭제된다는 차이점이 있습니다. 즉 원본을 훼손한다는 것(주의!)
const arr = ['apple', 'kiwi', 'grape', 'mango'];
let last = arr.pop();
console.log(last);
console.log(arr);Output:
mango
[ 'apple', 'kiwi', 'grape' ]