[JavaScript] 제로부터 시작하는 자바스크립트(2)

[스프레드]

"..."

역시 나를 당황하게 했던 ... 연산자

도무지 뭐에 쓰이는것인지 용도를 알 수 없었다 (당연함 공부를 안함 ㅋㅋ)

 

예를들어, oldArray가 있는데 이 oldArray 배열에 있는 모든 원소들을 새로운 배열에 추가하고,

거기에 원소 1과 2를 더 추가하고 싶다면 요 구문을 사용하게 된다.

...oldObejct로 oldObject의 모든 프로퍼티와 값을 꺼내서 새 객체의 키 값으로 추가한다 !

만약, oldObject가 새로운 프로퍼티를 갖게 된다면,  위의 newProp로 덮어쓰여질 것이다.

=> 우리가 갖고 있는 프로퍼티가 우선권을 갖는다 !

이것이 스프레드 연산자 ㅎㅎ

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];

console.log(newNumbers);


//출력 결과
[1, 2, 3, 4]

구문을 실행하면 이전 배열에 새 배열의 원소 4가 추가 된 것을 볼 수 있다.

만약 ... 없이 실행했다면, 새 배열에 하나의 원소로 띡 하고 추가되었을 것이다 !

이해 완

const person = {
	name: 'Coyangee'
    };
  
const newPerson = {
	...person,
    age: 28
    }

console.log(newPerson);

//출력 결과
[object Object] {
	age: 28,
	name: "coyangee"
}

앞에 나온 person 객체를 취해 스프레드 연산자가 있는 newPerson에 전달하고 있는 것을 볼 수 있다.

 

 

 

[레스트]

레스트 연산자도 [...]과 같은 연산자이지만, 레스트 연산자는 함수의 인수 목록을 배열로 합치는 데 사용된다 !

sortArgs는 매개변수를 무제한으로 받는다고 하는데, 매개변수가 몇 개이든간에

우리는 ...args라고 쓴다!

1개 이상의 매개변수를 갖게 되어도 모두 배열로 통합될 것이다 !! (사실 뭔소린지 잘 모르겠음)

 

const filter = (...args) => {
	return args.filter(el => el === 1);
    }
    
 console.log(filter(1, 2, 3));
 
 //출력 결과
 [1]

매개변수 (1,2,3)을 전달한 다음 실행하면 배열로 [1]이 출력되는데

이는 ...으로 레스트 연산자를 생성해서 배열을 필터링 했기 때문이다!!