불변성과 메서드

soo's·2023년 4월 13일

TIL

목록 보기

35/53

불변성

이번 한 주는 알고리즘 풀이를 진행했다. 내가 사용하는 메서드가 원본 데이터를 바꿔주거나 때로는 원본 데이터를 건드리지 않고 새로운 데이터를 반환하기도 했다. 메서드들마다 불변성의 여부가 다르기 때문에 정리를 해보겠다.

배열의 원본 불변 메서드

1. Array.prototype.slice()

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

2. Array.from()

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

console.log(Array.from([1, 2, 3], x => x + x));
//[2, 4, 6]
console.log(Array.from({length : 3}, (_,i) => i +1); 
// [1, 2, 3]

3. Array.prototype.concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 기존배열을 변경하지 않습니다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Array ["a", "b", "c", "d", "e", "f"]

3-1. spread 연산자 사용

원본을 변경하는 push를 대체하여 concat으로 기존 배열을 불변하게 할 수 있다. 하지만 스프레드 연산자를 이용하면 더 쉽게 사용가능하다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3= [...array1, ...array2];
console.log(array3); 
//  ['a', 'b', 'c', 'd', 'e', 'f']

배열의 원본 가변 메서드

1. Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

2. Array.prototype.fill()

fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.

const array1 = [1, 2, 3, 4];
console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

fill은 문제 풀면서 자주 사용했는데 원본 배열을 변화시키기 때문에 이 방법보다는 Array.from을 더 쓰려고 했다.

3. Array.prototype.push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]