스프레드 연산자의 장점_1

스프레드 연산자가 개꿀인 부분을 정리하고자 함

 

자바스크립트 배열에는 push 메서드가 존재한다. 어떤 항목을 배열에 추가하고 싶을 때 사용한다.

const a = ['a', 'b', 'c'];
a.push('d');
//a = ['a', 'b', 'c', 'd'];

아주 쉽고 편리하지만 push()를 사용하는 순간 원본 배열이 바로 조작된다는 사실에 주의해야 한다. 예를 들어,

const a = ['a', 'b', 'c'];

function addItem(array) {
	if (array.length > 3) {
    	return {
        	error: '이미 가득 차버렸습니다.',
        };
	}
    
    const newArray = array.push('e');
    //a = ['a', 'b', 'c', 'e']
	return newArray;
}

위 코드에는 배열의 길이가 3을 넘는다면 에러를 리턴하고, 그런 경우가 아니라면 배열 a에 'e'를 추가해서 새로운 변수에 할당하는 함수가 있다. 배열 a는 push에 의해 ['a', 'b', 'c', 'e'] 로 조작된다. 여기서는 문제가 없지만,

const a = ['a', 'b', 'c'];

function addItem(array) {
	const newArray = array.push('e');
    //a = ['a', 'b', 'c', 'e']    
    if (array.length > 3) {
    	return {
        	error: '이미 가득 차버렸습니다.',
        };
	}
    
	return newArray;
}

위와 같이, 변수의 선언부를 누군가 올려주었다고 가정해보자. 코드를 돌려보면 에러가 발생한다. 조작에 의해 배열의 길이가 이미 4가 되어버렸기 때문인데, 이처럼 push에 의해 조작되는 배열을 할당하여 변수를 선언할 때에는 그 위치에 주의를 기울여야 한다. const로 선언했지만 배열 내부의 값은 언제든지 바뀔 수 있다는 사실을 잊지 말아야 한다.

 

이런 경우에 스프레드 연산자가 유용하게 쓰일 수 있다.

const a = ['a', 'b', 'c'];

function addItem(array) {
	const newArray = [...array, 'e'];
    //a = ['a', 'b', 'c']
    if (array.length > 3) {
    	return {
        	error: '이미 가득 차버렸습니다.',
        };
	}
	return newArray;
}

펼침 연산자는 원본 배열을 조작하지 않기 때문에, 변수 할당부를 맨 위로 올려주더라도 함수가 의도에 따라 작동한다.