19. spread연산자 vs arguments

spread연산자 vs arguments 의 대해 알아보자 ! 

---

요즘은 argument 보다 스프레드 연사자(...arr)을 쓰는 추세이다. 

 

먼저 두개를 비교하기 전에 용어를 파악하고 가자 

 

1. 파라미터 VS 아규먼트 

아규미터(argument)란 함수를 실행할때 넣는값이다. 

파라미터 (parameter)란 함수에서 받을 수 있는 변수 이다. 

function add(val1,val2){	//val1과 val2가 파라미터이다.

	reutn val1 + val2 ;
    
}

add(1,2)	//여기서 1,2가 아규먼트 이다. 

---

2. arguments(아규먼트에 s가 붙음!)

파라미터는 2개인데 아규먼트 3개이상 하고 싶은 때 함수 내부에서 arguments사용 할 수 있다. 

유사배열 형태로 참조하는 값이다. 

let arr = [1,2,3,4,5];

function a (a,b){
	
    console.log(arguments)

}

a(2,3) // {'0':2,'1':3}
a(1,2,3,4,5)	//{"0": 1, "1":2, "2":3, "3":4, "4":5}

---

3. spred 연산자 

배열 문자열등을 개별의 요소로 만들어 준다. 

let arr = ['a', 'b', 'c']
let brr = [1,2,3,4,5]

console.log(arr) // ['a', 'b', 'c']
console.log(...arr) // 'a' 'b' 'c'

console.log([...arr, ...brr]) // ['a', 'b', 'c', 1, 2, 3, 4, 5]

const copiedArr = [...arr]
console.log(copiedArr) // ['a', 'b', 'c']

 

ES9부터는 객체 또한 가능 하다. 

 

let obj1 = {a: 1, b: 2}
let obj2 = {c: 3}
console.log({...obj1, ...obj2}) // {a: 1, b: 2, c: 3} 객체합치기

let obj = {...obj1}
console.log(obj) // {a: 1, b: 2} 객체복사

let obj3 = {...obj1, b: 'b'}
console.log(obj3) // {a: 1, b: 'b'}
// 기존 객체의 값을 수정해서 새로운 객체 만들기에 사용할 수 있습니다.