[TIL - 2022.7.7] 배열

배열에 대한 메소드를 공부하면서 가장 헷갈렸던 부분은 아마 immutable과 mutable의 구분이었다.

지금 바로 이 둘을 파악해보자.

1. concat

const array = ["apple", "grape", "pineapple"];
const array2 = ["peach", "chocolate"];

console.log(array.concat(array2)); // ["apple", "grape", "pineapple", "peach", "chocolate"]
console.log(array); //["apple", "grape", "pineapple"]

원본 배열은 바뀌지 않았으므로 immutable하다.

2. slice

const array = ["apple", "grape", "pineapple", "mango", "durian"];

console.log(array.slice(2)); // ["apple", "grape", "pineapple", "peach", "chocolate"]
console.log(array.slice(2, 3)); //  ["mango", "durian"]
console.log(array.slice(-2)); // ["apple", "grape", "pineapple", "mango", "durian"]
console.log(array); //["apple", "grape", "pineapple", "mango", "durian"]

slice도 마찬가지로 immutable하다. 참고로 slice 안에 아무것도 들어가있지 않은 경우 복사본을 만드는 것이다.

3. splice

const array = ["apple", "grape", "pineapple", "mango", "durian"];
// const array2 = ["peach", "chocolate"];

array.splice(4, 0, "hamburger"); 
console.log(array); //["apple", "grape", "pineapple", "mango", "hamburger", "durian"]

반면 splice는 slice와는 다르게 기존 배열을 변경시킨다. 따라서 mutable하다.

4. join()

const array = ["apple", "grape", "pineapple", "mango", "durian"];
// const array2 = ["peach", "chocolate"];

console.log(array.join("")); //
console.log(array); //["apple", "grape", "pineapple", "mango", "hamburger", "durian"]

join은 배열에 있는 모든 문자열을 하나로 합쳐준다. join 안에 아무것도 들어가있지 않은 경우 쉼표로 구분한다.

5. pop,push,shift,unshift

이 4개는 모두 mutable한 메소드이며, 이것들은 그냥 한방에 정리하겠다.

const array = ["apple", "grape", "pineapple", "mango", "durian"];

console.log(array.pop()); //마지막 요소 반환 durian
const pushedArray = array.push("good"); //5 (배열의 끝에 요소를 하나 이상 추가하고 그 길이를 반환)
console.log("pushedArray", pushedArray); //["apple", "grape", "pineapple", "mango", "hamburger", "durian"]
array.unshift(4, 5); //배열의 맨앞에 요소 추가 후 길이 반환
array.shift(); //배열의 맨 앞의 요소 하나를 제거 후 길이 반환
console.log("array", array); //["apple", "grape", "pineapple", "mango", "good"]

원본 배열이 변경되었으므로 mutable하다.

오늘 연습문제를 풀면서 상당히 헷갈렸던 부분인데 잘 기억해놔야겠다.