🏆 Javascript(2) Object(구조 분해 할당, 전개 연산자, 깊은 복사, 얕은 복사), JSON

Object

const info = {
  firstName: "JooAm",
  lastName: "Lee",
  age: 27,
  career: null,
};

console.log(info.firstName, info["age"]);

JooAm 27

객체는 다음과 같이 key와 value 형태로 이루어진 참조 타입의 데이터이다.

해시 맵 기능이 필요할 때 특히 유용하다. 내부 속성에 접근할 때는 위와 같이 점 표기법이나 대괄호 표기법을 이용할 수 있다.

전개 연산자, 구조 분해 할당

const arr = [1, 2, 3, 4, 5];
const obj = { id: 1234, name: "joo" };
const obj2 = { age: 27, name: "Lee" };

console.log(...arr);
console.log({ ...obj } === obj);
console.log({ ...obj, ...obj2 });

1 2 3 4 5
false
{ id: 1234, name: 'Lee', age: 27 }

전개 연산자(spread operator)는 iterable한 요소에 사용할 수 있는 문법이다.

위 처럼 배열의 모든 원소를 각각 전개해서 나열하거나, 객체의 속성들을 열거하여 새로운 객체 리터럴에 할당할 수 있다.

const obj = { id: 1234, name: "joo", age: 27, carrer: null };
const arr = [1, 2, 3, 4, 5];

const [a, b, ...rest] = arr;
const { name, id, ...objRest } = obj;
const { name: newName, id: newId, hi = "hello" } = obj;

console.log(a, b, rest);
console.log(name, id, objRest);
console.log(newName, newId, hi);

1 2 [ 3, 4, 5 ]
joo 1234 { age: 27, carrer: null }
joo 1234 hello

전개 연산자와 마찬가지로 구조 분해 할당도 유용한 문법 중 하나다.

다음과 같이 배열의 인덱스나 객체의 키에 각각 접근해서 할당하는 것이 아니라 하나의 문장으로 편하게 변수에 할당할 수 있다.

이때 전개 연산자와 비슷한 문법인 나머지 연산자와 함께 활용하면 따로 지정하지 않은 요소들 또한 묶어서 할당할 수 있다.

변수의 이름을 객체의 key 뿐만 아니라 사용자가 임의로 지정할 수도 있고 default 값도 정할 수 있으니 적절하게 활용한다면 정말 편리한 문법이다.

얕은 복사, 깊은 복사

const info = {
  firstName: "JooAm",
  lastName: "Lee",
  age: 27,
  career: null,
};
const newInfo = info;
const realNewInfo = { ...info };

console.log(newInfo === info);
newInfo.lastName = "Kim";
console.log(info);
console.log(realNewInfo === info);
realNewInfo.lastName = "Lee";
console.log(info);

true
{ firstName: 'JooAm', lastName: 'Kim', age: 27, career: null }
false
{ firstName: 'JooAm', lastName: 'Kim', age: 27, career: null }

객체를 다룰 때에는 약간의 주의사항이 필요하다. 객체는 참조 타입의 변수이기 때문에 다른 변수에 할당하면 똑같은 메모리를 참조한다.

그렇기 때문에 위처럼 전개 연산자나 Object의 Assign 메소드를 활용해 새로운 객체를 만드는 식으로 할당해야한다.

하지만 이것도 완전한 해결책은 아니다. 이것은 얕은 복사이기 때문이다.

얕은 복사는 객체의 겉부분만 복사한다. 이 말의 의미를 밑의 예시에서 살펴보자.

const info = {
  firstName: "JooAm",
  lastName: "Lee",
  age: 27,
  career: null,
  skills: {
    language: ["javascript, c, c++, python"],
    tools: ["React, Redux, Koa"],
    skillToLearn: ["TypeScript, MSW, Express, MongoDB"],
  },
};
const newInfo = info;
const realNewInfo = { ...info };

realNewInfo.age = 30;
realNewInfo.skills.hi = "Hello";

console.log(newInfo);

{
  firstName: 'JooAm',
  lastName: 'Lee',
  age: 27,
  career: null,
  skills: {
    language: [ 'javascript, c, c++, python' ],
    tools: [ 'React, Redux, Koa' ],
    skillToLearn: [ 'TypeScript, MSW, Express, MongoDB' ],
    hi: 'Hello'
  }
}

전개 연산자와 객체 리터럴로 할당한 realNewInfo는 기존의 info와 메모리 주소가 다르다는 걸 이전에 확인했다.

하지만 realNewInfo 내부에 또다른 참조 데이터 타입이 있을 경우가 문제다.

위에서 realNewInfo의 데이터를 수정했는데 newInfo의 값이 바뀌었다. skills에 매핑 된 값이 메모리 주소이기 때문이다.

겉부분만 복사했을 뿐 안에서는 같은 메모리 주소를 참조하고 있는 형태이다.

이를 해결하기 위해선 재귀적으로 복사하는 함수를 구현하던가, 아니면 JSON 객체의 메소드들을 활용해야한다.

JSON

// mock.json
{
  "name": "lee",
  "age": 27,
  "carrer": null,
  "graduated": true
}

JSON은 데이터 전송을 위한 format 중 하나다. 위에서 볼 수 있듯이 key-value 형태이지만 문자열 형태로 전송된다.

그렇기 때문에 네트워크 환경에서 아주 유용하다. JSON은 값으로 문자열, 숫자, 불리언, null, 다른 객체(배열도)를 포함할 수 있다.

위의 예시에서는 {}로 묶어 객체처럼 표현했지만 대괄호를 이용해 배열로도 활용이 가능하다.

const mock = require("./mock.json");
// node js 환경에서 실행했기 때문에 require로 불러옴

console.log(mock);

const str = JSON.stringify(mock);

console.log(str);
console.log(typeof str);
console.log(JSON.parse(str));
console.log(typeof JSON.parse(str));

{ name: 'lee', age: 27, carrer: null, graduated: true }
{"name":"lee","age":27,"carrer":null,"graduated":true}
string
{ name: 'lee', age: 27, carrer: null, graduated: true }
object

자바스크립트는 JSON 객체를 통한 parse와 stringify 메소드를 지원한다. stringify 메소드를 사용할 경우 위와 같이 JSON 형태로 변환된다.

parse 메소드는 반대로 JSON 형태의 데이터를 자바스크립트의 객체처럼 변환해준다.

위의 예시에서 볼 수 있듯이 둘의 타입을 확인하면 각각 string, object인걸 확인할 수 있다.

JSON 메소드를 활용한 깊은 복사

const info = {
  firstName: "JooAm",
  lastName: "Lee",
  age: 27,
  career: null,
  skills: {
    language: ["javascript, c, c++, python"],
    tools: ["React, Redux, Koa"],
    skillToLearn: ["TypeScript, MSW, Express, MongoDB"],
  },
};
const newInfo = info;
const realNewInfo = JSON.parse(JSON.stringify(info));

realNewInfo.age = 30;
realNewInfo.skills.hi = "Hello";

console.log(newInfo);

{
  firstName: 'JooAm',
  lastName: 'Lee',
  age: 27,
  career: null,
  skills: {
    language: [ 'javascript, c, c++, python' ],
    tools: [ 'React, Redux, Koa' ],
    skillToLearn: [ 'TypeScript, MSW, Express, MongoDB' ]
  }
}

아까의 얕은 복사 예시를 다시 보자. 지금은 전개 연산자로 새로운 객체를 만들어내지 않고, JSON 객체의 메소드를 활용하고 있다.

결과를 확인해보면 원본을 참조하는 newInfo의 값이 전혀 변하지 않았다.

만약 이것으로 해결된다면 lodash 라이브러리의 deep clone이나 재귀적인 복사 함수는 필요없다. 해결이 된다면 말이다... 😂

const myObj = {
  name: "Jooam",
  carrer: null,
  age: 27,
  sayHello: function () {
    console.log("Hello I'm", this.name);
  },
};

myObj.sayHello();

const newObj = JSON.parse(JSON.stringify(myObj));

console.log(newObj);

Hello I'm Jooam
{ name: 'Jooam', carrer: null, age: 27 }

위와 같은 상황이 예외 중 하나다. 객체에 메소드를 정의했는데, JSON 메소드를 거치고 나니 정의한 메소드가 사라졌다!

의도에서 벗어나는 결과를 만들어낼 수도 있으니 적절하게 판단하여 어떤 방식으로 copy할지 판단해야한다.

Symbol 타입도 stringify 메소드에서 무시된다고 하는데, Symbol 타입의 변수를 사용해 본 적이 없기 때문에 생략하겠다.