diff --git a/Javascript/spread-operator.md b/Javascript/spread-operator.md new file mode 100644 index 0000000..9cbba05 --- /dev/null +++ b/Javascript/spread-operator.md @@ -0,0 +1,68 @@ +## spread-operator 전개구문 +전개구문은 개인적으로 진짜 손에 안 익혀지는 문법이다. 한 번 더 공부하면서 최종정리 하려 한다 ! + +### 1. Spread operator 스프레드 연산자 +스프레드 연산자는 반복가능한(이터러블)객체에 적용할 수 있는 문법이다. +배열이나 문자열 등을 아래처럼 풀어 요소 하나하나로 전개시킬 수 있다. +```js +const arr = [1,2,3,4,5]; +const str = "string"; + +console.log(...arr) //1 2 3 4 5 +console.log(...str) // s t r i n g +``` + +### 2. 사용 케이스 +스프레드 연산자는 ...만 붙이면 자유롭게 그 객체를 펼칠 수 있어 여러 곳에 유용하게 사용할 수 있다 +1) 함수 호출 시 인자로 넘길 때
+```js +function mul(x,y,z) { + return x*y*z; +} +const arr = [1,3,5]; + +const result1 = mul.apply(null, arr); //원래는 apply()를 사용했어야 하는데 +const result2 = mul(...arr); //...을 사용할 수도 있다 + +console.log(result1); +console.log(result2); +``` + +2. 배열 리터럴의 전개
+배열 리터럴은 []로 생성한 배열을 의미한다. +배열에 추가로 요소를 넣는다던지, 배열을 복사, 배열 이어 붙이기 등 다양한 작업에서 ... 연산자를 사용할 수 있다. +```js +const arr1 = [0, 1, 2]; +const arr2 = [3, 4, 5]; + +//1. 배열 복사 +const arr3 = [...arr1]; //[0, 1, 2] +//2. 배열에 추가 요소로 넣기 +const arr4 = [1,2, ...arr2, 9, 10]; // [1, 2, 3, 4,5, 9, 10] +//3. 두 배열 이어 붙이기 +const arr5 = [...arr1, ...arr2]; //[0, 1, 2, 3, 4, 5] +``` +3. 객체 스프레드 프로퍼티
+어떤 한 객체의 프로퍼티를 다른 새로운 객체에 복사할 때도 유용하게 사용된다. 사실 객체 (object)자체는 반복가능한(iterable) 객체가 아니며, 아래와 같이 사용하면 에러가 발생한다 +```js +const obj = {name : 'john', age: '20'}; +console.log(...obj); +``` +하지만 위와 같은 방식이 아니라 ES9에서는 객체의 프로퍼티를 전개할 수 있도록 지원하고 있으며 아래와 같이 객체 내부에 사용할 수 있다. +```js +console.log(obj1); +console.log(clonedObj1); +console.log(obj1 == clonedObj1) //false : 프로퍼티만 복사받은 객체이므로 두 객체의 참조값 자체는 다르다 + +const mergedObj = {...obj1, ...obj2}; +console.log(mergedObj); +``` +이러한 스프레드 연산자의 성질은 상태의 불변성 유지에도 유용하다. +### 기존의 메모리에 담겨 있던 값이 다시 변경되지 않으며, 이 불변성을 유지함으로서 상태변화를 빠르게 탐지할 수 있다. +```js +const obj1 = {name : 'John', age : '20', flag : 'true', foo: 'bar'}; +const newObj1 = { ...obj1, name: 'Alice'}; //복사받은 값에서 뒤에 적은 name값만 변경(덮어씌우는)효과를 갖게 된다 + +console.log(newObj1); +console.log(obj1 === newObj1); //false : 서로 다른 객체임 +``` \ No newline at end of file