구조분해할당
구조화 되어 있는 배열, 객체와 같은 데이터를 destructuring 시켜 각각에 변수를 담는 것을 말한다.
let arr = [1,2]
let [one, two] = arr
console.log(one, two); // 1 2배열의 구조분해할당에서는 순서가 중요하다.
let obj = {name: "otter", gender: "male"}
let {name, gender} = obj;
let {name: newName, gender: newGender} = obj; // 새로운 이름으로 할당
console.log(gender, name) // male otter객체의 구조분해할당에서는 순서는 중요하지 않고 객체의 키와 이름이 중요하다. 기존의 이름이 아닌 새로운 이름으로 할당할 수도 있다.
spread 연산자 (...)
하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자이다.
let str = "Hello";
console.log(...str); // "H" "e" "l" "l" "o"rest 파라미터
spread 연산자와 함께 쓰이며 구조분해할당을 선택적으로 할 때 나머지 데이터를 지칭할 때 쓰이는 파라미터이다.
let origin = {name: "abc", age: 12, petName: "cream", hobby: "skate"}
const {petName, hobby, **...rest**} = origin;
console.log(**rest**); // {name: "abc", age: 12}이름은 rest 파라미터이지만 rest가 아닌 다른 이름을 사용해도 무방하다.
복사
객체를 복사하기 위해 임의의 변수에 객체를 할당하고 그 변수의 내용을 변경하면 원본 객체의 내용도 변경된다. 복사할 때 객체 값을 복사하는 것이 아니라 그 값이 저장되어있는 주소값을 복사, 전달하는 것이기 때문에 같은 주소에 있는 값을 변경하게 되면 같은 주소를 참조해 사용하고 있는 원본 객체의 값도 변경된다.
객체를 복사할 땐
1. spread 연산자를 사용해 아래와 같이 값을 복사하거나
let copy = {...obj};JSON.stringify후JSON.parse를 해서 문자 그 자체를 복사해오면 새로운 주소값이 연결되어 새로운 객체가 생성된다.
주소값까지만 복사하는 것을 얕은 복사, 실제 데이터까지 복사하는 것을 깊은 복사라고 한다.
const obj = {name: "otter"}
obj.name = "rabbit" 위의 코드에서 obj는 const로 선언되었는데 안의 아이템이 수정가능했다.
= const 키워드로 선언된 obj(안에 담긴 주소값)는 변환되지 않았다. const로 선언하는 것은 그것이 가리키는 주소값이다.
📍 배열, 객체를 선언할 때 const 키워드를 사용한다면 직접 확인하지 않더라도 이 안에는 배열이나 객체가 들어있겠구나 확신할 수 있다.
객체 안에 있는 객체는 엄밀히 말하면 복사가 불가능하다. 이 땐 JSON.stringify와 JSON.parse를 이용해 문자열로 가져올 수 있는데 이 과정이 조금 느려서 lodash라는 라이브러리를 활용한다.
lodash
🔗 npm - https://www.npmjs.com/package/lodash
🔗 공식 홈페이지 - https://lodash.com/docs/4.17.15
import _ from "lodash";
const copy = _.deepClone(복사할객체)Heap 메모리
데이터 값의 주소값을 타고 들어갔을 때 다른 주소값을 참조해 그 원본 값을 가지고 있는 메모리.
유동적으로 크기가 변동되는 값의 모음이다.
