어... 이거 왜이렇게 어렵지?

🌷코어 자바스크립트 뽀개기 시리즈🌷

• 데이터 타입 (상)
• 데이터 타입 (하)

---

   4. 변수 복사   

변수를 복사할 때, 기본형 데이터와 참조형 데이터는 어떻게 다를까?
사실, 기본형 데이터를 복사하는건 (상)편에서 한번 다뤄봤다!

let a = 10;
let b = a;
a = 15;

순서대로, a 라는 변수에 숫자 10이 저장된 데이터 영역의 주솟값을 할당하고,
b 라는 변수에 a 변수의 값(숫자 10의 주솟값)을 그대로 할당한다.
마지막으로 변수 a의 값을 15로 재할당 한다.

그럼 컴퓨터에선 이런 일이 일어난다!

파란색 글씨부터 보면, 변수 a와 b의 값으로 @5003 이 중복되서 할당되었다가,변수 a의 값만 @5004 로 변경되었다.

기본형 데이터는 변경할 수 없는 값이므로, 컴퓨터는 a = 15 라는 명령을 @5003 에 저장된 데이터 자체를 15로 변경하는게 아닌, 15라는 데이터를 새로 저장한 것이다.

참조형 데이터를 복사하면 어떻게 될까?

let obj1 = { name: 'solmi', age: 26 };
let obj2 = obj1;

@5003 주솟값을 값으로 가지는 obj1 객체를 생성했다.

그 후에 obj2 객체를 생성하는데, 이는 obj1과 같다고 한다.

그럼 컴퓨터는 우선, obj2를 담을 변수를 생성하고(@1003), 변수 영역에서 식별자가 obj1인 데이터를 검색해서(@1002) 그 값을 (@5003) @1003의 값에 그대로 할당한다.

console.log( obj1 === obj2 ) // true
이다. 왜냐하면, 식별자는 다르지만 같은 주솟값 @5003 을 값으로 갖고 있기 때문!

---

여기까지는 기본형 데이터와 동일하다. 그럼 obj2의 프로퍼티를 변경해보면 어떻게 될까?

obj2.age = 27;

27이라는 데이터가 메모리에 없으므로, 새로 데이터 영역에 추가한다. @5006

obj2의 age라는 프로퍼티의 값이 바뀌어야 하므로, obj2가 참조하는 @5003 → @7001 ~ ? 에 가서 식별자가 age인 @7002 의 값을 새로 추가한 @5006 으로 바꾼다.

엇? 근데 객체 @5003 의 변수영역 의 값은 바뀌었지만, 실제 변수영역에서 obj1 과 obj2 가 참조하는 주솟값은 변하지 않았다.

실제 변수 영역의 값이 바뀌던 기본형 데이터와 차이를 알겠는가?!

더 확실히 알기 위해 console을 찍어보자!

console.log(obj1); // { name: 'solmi', age: 27 }
console.log(obj2); // { name: 'solmi', age: 27 }

앗!!! obj2의 age만 변경하고 싶었는데, obj1의 age까지 바뀌어버렸다.

실제로 변경된건 객체 @5003 의 변수영역 이고, 이를 obj1, obj2가 동일하게 참조하고 있기 때문이다!

즉, 사본이 바뀌면 원본도 바뀌고... 원본이 바뀌면 사본도 바뀐다😱😱😱

---

물론 obj2 = obj1 으로 복사하지 말고, 아래처럼 새로운 객체 자체를 할당하면 문제없이 동작한다.

let obj1 = { name: 'solmi', age: 26 };
let obj2 = { name: 'solmi', age: 26 };
obj2.age = 27;

console.log(obj1); // { name: 'solmi', age: 26 }
console.log(obj2); // { name: 'solmi', age: 27 }

즉, 참조형 데이터 자체를 변경할 경우가 아닌, 그 내부의 프로퍼티를 변경할 경우에 참조형 데이터는 가변값이다.

객체 내부의 프로퍼티를 비교하면서 동시에 원본 객체와 복사한 사본 객체가 서로 영향을 끼치면 안될 때, 예를 들어 사본 객체에 사용자마다 다른 정보를 입력받고 원본 객체와 비교해야 한다던가 등의 상황이 오면, 매번 새로운 객체를 만들어 재할당하는 식으로 객체의 불변성을 지킬 수 있을 것이다.

그렇다고 위의 예시처럼 매번 저렇게 중복되는 객체를 일일이 입력해야 한다면, 너무너무 비효율적이고 유지보수도 개똥같은 코드 완성 ★

그렇다면 어떻게 효율적으로 객체를 복사하면서 객체의 불변성을 지킬 수 있을까?

---

   5. 불변 객체   

불변 객체(immutable object)는 JavaScript 라이브러리나 프레임워크에서뿐만 아니라 프로그래밍, 디자인 패턴 등에서도 기초가 되는 중요한 개념이다.

나의 경우도 React (JavaScript 라이브러리) 를 사용하면서, state 객체의 값을 바꿀 땐, 불변성을 유지하기위해 새로운 객체를 만들어서 어쩌구저쩌구~ 하는 설명을 듣고 머릿속이 ??? 인 상태로 아무튼 시키는대로 코딩을 했던 것 같다.

React에서 불변 객체를 사용해야 하는 이유는 종택 멘토님 블로그에 재밌는 예시와 함께 잘 정리되어 있어서 가져와봤다!

실제로 state 객체에 this.state.name = 'solmi' 같은 식으로 직접 접근해서 프로퍼티 값을 바꾸면 어떻게 될까?

React.js 컴포넌트는 state, props의 값이 변경될 때 마다(= 컴포넌트가 업데이트 될때마다) 리렌더링해서 화면을 변경해주는데, state 객체에 직접 접근해서 프로퍼티값을 변경하면 내부의 값은 변경되더라도, 실제 state 객체가 참조하는 주솟값은 동일하기 때문에 변화를 감지하지 못한다.

즉, 리렌더링 하지 않기 때문에 화면을 변경할 수 없다.

React.js 에서 배열에 요소를 추가하고자 할 때 push()(원본 배열에 추가) 가 아닌 concat()(이전 배열과 대상 배열을 병합해서 새 배열을 반환) 을 사용하는 이유도 이와 같다.

---

그렇다면 불변 객체는 대체 어떻게 만들 수 있는걸까? 방법은 다양하다!

• 각종 라이브러리 (Lodash, immutable.js, immer.js, baobab.js 등)
  ( Lodash의 deepclone 메서드 등을 사용하면 쉽게 깊은 복사를 할 수 있다. )
• spread operator { ...state }
• JavaScript에 내장된 Object.assign 등의 메서드
• 사용자 정의 함수
• JSON 객체의 메서드 이용

하나씩 뜯어보자!!!!!!!!......기 전에, 먼저 얕은 복사 vs 깊은 복사라는 개념에 대해 살짝 짚고 넘어가자!

---

:: 얕은 복사 vs 깊은 복사

• 얕은 복사(shallow copy) : 바로 아래 단계의 값만 복사
• 깊은 복사 (deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사

여기서 말하는 복사란, obj2 = obj1 처럼 주솟값만 그대로 가져오는게 아닌, 새로운 객체를 생성해서 재할당 하는것을 말하고,

단계란, 객체안에 객체가 포함된 중첩 객체에서 중요하게 봐야하는데, 객체 안의 값을 확인할때는 한단계 더 거쳐야 한다.

let obj = {
	name: 'solmi', // 1단계
	age: 26, // 1단계
	text: [ { 1: "a" }, { 2: "b" }, { 3: "c" } ], // text: [] = 1단계 // [ {}, {}, {} ] = 2단계 // { 1: "a" }, { 2: "b" }, { 3: "c" } = 3단계
	like: {
		food: 'chicken',
		game: 'Battleground'
	} // like: {} = 1단계 // { food: 'chicken', game: 'Battleground' } = 2단계
}

1단계가 가장 바깥 단계, 3단계가 가장 안쪽 단계인 이런 예시가 있다고 가정했을때!

1단계에서 컴퓨터가 확인할 수 있는 정보는 다음과 같다.

let obj = {
	name: @5002,
	age: @5003,
	text: @5004, // @5004 => 식별자가 text인 배열(객체)을 참조하는 주솟값
	like: @5005 // @5004 => 식별자가 like인 객체를 참조하는 주솟값
}

즉, obj 라는 객체는 얕은 복사 한다면 우리는 text라는 배열과 like라는 객체가 참조되어있는 주솟값만 가져오는것이지 실제 text 배열의 프로퍼티와 like 객체의 프로퍼티를 복사해오는 것이 아니다.

식별자가 text인 배열을 복사해오기 위해서는 2단계로 들어가서 복사해와야 하는데, 가만보면 이 배열 또한 중첩 객체이기 때문에 내부의 { 1: "a" }, { 2: "b" }, { 3: "c" } 라는 객체들로 이루어진 프로퍼티 복사해오기 위해서는 3단계까지 들어가야 하는 것!

---

🤷🏻‍♀️ 실제로 obj 를 얕은 복사 해온후에 사용하면 어떻게 될까?

const obj = {
	name: 'solmi',
	age: 26,
	text: [ { 1: "a" }, { 2: "b" }, { 3: "c" } ],
	like: {
		food: 'chicken',
		game: 'Battleground'
	}
}

const shallowCopyObj = { ...obj };

전개 연산자로 obj를 얕은 복사 해서, shallowCopyObj 라는 변수에 할당했다.
( 전개 연산자에 대한 설명은 아래에서 이어지는데, 객체의 얕은 복사를 수행할 수 있다. )

문제없이 잘 복사됐다!

이제 사본인 shallowCopyObj 의 프로퍼티 값을 변경해보자!

shallowCopyObj.name = 'coder';
shallowCopyObj.like.food = 'ramen';

보다시피 1단계에 있는 name 은 원본과 다르게 사본에서만 변경되었지만,
2단계인 like.food는 사본에서만 변경했는데도 원본까지 바뀌었다.

2단계 부터는 복사가 아닌, 단순히 원본을 참조만 했기 때문에 원본, 사본이 함께 변경되는 것이다.

바로 이런 문제 때문에 중첩 객체를 복사해야 할때는 어쩔 수 없이 깊은 복사가 필요하다😅

책에서는 사용자 정의 함수를 이용해서 깊은 복사를 설명하는데, 이는 아래에서 객체를 복사하는 방법에 대해 설명하면서 이어서 말하려고 한다!

---

:: spread operator

ES6부터 등장한 전개 연산자는 JavaScript 코드를 더욱 효율적으로 사용할 수 있게 해준다.

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

MDN에서는 전개 연산자를 이렇게 설명한다.
...아니, 설명 실화냐....? 정말이지 읽을수가 없네🙄!!!

그러니까 쉽게 말하면, 배열 또는 객체의 요소 하나하나를 개별적으로 풀어헤치는 너낌...?

이건 코드를 보면 바로 이해가 간다!

const arr = [ 1, 2, 3, 4, 5 ];
console.log( arr ); // [ 1, 2, 3, 4, 5 ]
console.log( ...arr ); // 1 2 3 4 5

200 OK👌??

---

전개 연산자는 주로 원본을 복사하여 새 객체나 배열을 만들면서 값을 바꾸거나, 혹은 다른 객체, 배열과 병합할 때 많이 쓰이는데 위의 예시처럼 사용하면 얕은 복사 기능도 수행한다!

// 원본을 복사한 후, 값을 바꾸기
const origin = { name: 'solmi', age: 26 };
const copy = { ...origin, age: 27 };
console.log(copy) //  { name: 'solmi', age: 27 };

// 원본과 사본을 병합하기
const origin = { name: 'solmi', age: 26 };
const copy = { ...origin, bloodType: 'AB', like: 'JavaScript..?' };
console.log(copy) //  { name: 'solmi', age: 26, bloodType: 'AB', like: 'JavaScript..?' };

단, 원본을 복사해서 값을 복사할때는 얕은 복사만 된 상태이기 때문에 1단계에 위치한 프로퍼티의 값만 변경해야 한다.
원본은 유지하면서 사본의 깊은 단계의 값만 복사해야 한다면 전개 연산자가 아닌 다른 방법으로 객체를 복사해와야 한다.

💁🏻‍♀️ TIP!! 원본과 사본을 병합할 때, 전개연산자를 어디에 쓰냐에 따라 출력되는 순서가 달라진다!

const origin = [ 'old', 'old2', 'old3' ]
const copy = [ ...origin, 'new..?' ] // [ 'old', 'old2', 'old3', 'new..?' ]
const copy = [ 'new..?', ...origin ] // [ 'new..?', 'old', 'old2', 'old3' ]

origin 을 기존 데이터, 'new..?' 를 새로운 데이터라고 가정했을 때,
새로운 데이터가 최상단에 보여져야 하는지, 혹은 가장 하단에 보여져야 하는지 목적에 맞게 전개 연산자를 활용하면 데이터를 원하는 순서로 쉽게 정렬할 수 있다!

---

:: Object.assign()

Object.assign() 메서드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용하고, 대상 객체를 반환한다.

출처 객체란, 복사하고 싶은 원본 객체를 말하고 대상 객체란, 출처 객체와 함께 병합되서 반환될 사본 객체를 말한다.

Object.assign(target, sources)

이렇게 작성하며, target이 대상 객체, sources가 출처 객체이다! (참고로 sources는 여러개 적어도 됨)

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const source2 = { d: 9, e: 7 };

console.log(Object.assign(target, source, source2)); // { a: 1, b: 4, c: 5, d: 9, e: 7 }

예시를 보면 쉽다!

동일한 key가 존재하면, 대상 객체 < 출처 객체 로 덮어쓰여지고, 출처 객체 중에서도 key값이 중복되면 가장 마지막에 들어온 인자의 값으로 덮어쓰여진다.
( 위 예제에서도 대상 객체의 b:2가 출처 객체의 b:4로 덮어쓰여졌다. )

---

대상 객체가 따로 없고 Object.assign() 으로 그냥 원본을 복사하기만 할땐 어떻게 할까?

const source = { a: 1, b: 2 };
const copy = Object.assign({}, source);
console.log(copy); // { a: 1, b: 2 }

단, 이때도 객체의 얕은 복사만 수행하기 때문에 중첩 객체를 복사할때는 다른 대안을 사용해야 한다!

---

:: 사용자 정의 함수

다음은 코어 자바스크립트 책에서 소개하는 깊은 복사를 수행하는 범용 함수이다.

const copyObjectDeep = target => {
  let result = {};
  if (typeof target === 'object' && target !== null) {
    for (let prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
}

인자로 들어오는 target의 type이 'object' 이면서, null이 아니라면 (null도 object type이기 때문에!)

for in 구문을 이용해서 target의 key 값을 순회하면서 copyObjectDee 함수를 재귀적으로 호출하고, 객체가 아니라면 result 에 바로 인자로 들어온 target을 할당하는 함수이다.

let originObj = {
	name: 'solmi', // 1단계
	age: 26, // 1단계
	text: [ { 1: "a" }, { 2: "b" }, { 3: "c" } ], // text: [] = 1단계 // [ {}, {}, {} ] = 2단계 // { 1: "a" }, { 2: "b" }, { 3: "c" } = 3단계
	like: {
		food: 'chicken',
		game: 'Battleground'
	} // like: {} = 1단계 // { food: 'chicken', game: 'Battleground' } = 2단계
}

const copyObj = copyObjectDeep(originObj);

원본 객체를 이 함수의 인자로 전달해줬고, 그 결과값은 copyObj라는 사본에 할당했다.

원본 객체는 중첩 객체에서 1단계, 2단계 확인할 때 봤던 예시이다!

copyObjectDeep 함수가 실행되면, 1단계인 name, age는 참조형 데이터 (=object) 가 아니기 때문에 if 조건을 충족시키지 못하고 result에 바로 각각의 값이 할당된다.

참조형 데이터 (=object)인 text를 만나는 순간, target의 type이 object이면서 null이 아니라는 조건을 충족하므로, copyObjectDeep 함수가 재귀적으로 실행된다.

이 text라는 배열의 각 요소는 key:value 쌍으로 이루어진 객체이므로 재귀적으로 실행된 copyObjectDeep 함수 내에서 또다시 if 조건을 만족하므로 다시 copyObjectDeep 함수가 실행된다.

즉, 가장 안쪽의 3단계인 "a" 라는 값에 접근해서 typeof target === 'object' 라는 조건을 불만족할때까지 재귀 함수가 실행되면서 각각의 프로퍼티를 result라는 변수에 재할당 = 복사 하는 것이다.

우왕!! 잘 복사됐다!!!

🧐 엥??? text 부분이 뭔가 이상한디?????

copyObjectDeep 함수를 재귀적으로 실행하면서
result[prop] = target[prop] result의 key 값으로 target의 key값을, result의 value값으로 target의 value를 할당해서 그렇다!
배열도 결국엔 object이므로...

console.log(typeof originObj.text === typeof copyObj.text) // true

---

그럼 정말 2단계, 3단계 프로퍼티 까지 하나하나 복사해온게 맞을까??

copyObj.text[1][2] = "New!!!";
copyObj.like.food = "ramen";

사본 객체의 내부 프로퍼티에 접근해서 값을 바꿔보았다!

오오오오오~~ 원본은 그대로 유지된다!!!!!

🤷🏻‍♀️ 깊은 복사는 객체의 모~~~든 요소를 다 복사한다?

NO!! 사실 위의 방법으로는 데이터 프로퍼티만 복사되고, 접근자 프로퍼티(getter/setter)는 복사되지 않는다.
접근자 프로퍼티를 복사하기 위해서는 JavaScript 최신 문법에 추가된 Object.getOwnPropertyDescription 같은 메서드를 사용해야 한다.

• 데이터 프로퍼티 : 값을 저장하기 위한 프로퍼티. "객체의 프로퍼티" 라고 했을 때 우리가 딱 떠올리는! 그것들이 모두 데이터 프로퍼티
• 접근자 프로퍼티 : 값이 없으며, 데이터 프로퍼티를 읽거나 쓸 때 호출하는 함수를 값 대신 지정할 수 있는 프로퍼티. 즉, 값을 획득(get)하고 설정(set)하는 함수!

---

:: JSON 객체의 메서드 이용

const copyObjectViaJSON = target => JSON.parse(JSON.stringify(target));

인자로 받은 target을 JSON 문자열로 변환했다가 다시 JavaScript 객체로 변환하는 간단한 함수를 만들었다!

const copyObj = copyObjectViaJSON(originObj);

이렇게 사용한다!

JSON 메서드를 이용하는 copyObjectViaJSON 함수의 원리는, 객체를 JSON 문자열로 변환할 때 객체에 대한 참조가 없어지고, 이를 다시 객체로 변환할 때 새로운 객체를 만드는것처럼 동작하는 것이다.

그런데 JSON 객체의 메서드를 이용하는 방식은 두 가지 문제점이 있다!

1. 다른 방식에 비해 성능이 좋지 않다. (느리다!)
2. function, _proto_ , getter/setter 등과 같이 JSON으로 변경할 수 없는 프로퍼티들은 무시된다.

---

   6. undefined, null   

기본형 데이터 타입에서 나왔던 친구들이다!

undefiend는 아마 익숙할 것이다.

익숙한 에러.....ㅎㅎ

:: undefined

undefined 는 JavaScript 엔진이 다음과 같은 경우일때 자동으로 부여한다.

• 선언은 되었지만 값이 할당된 적 없는 변수에 접근할 때
• 존재하지 않는 객체 프로퍼티에 접근할 때
• return이 없거나 호출되지 않는 함수를 실행했을 때 (실행이 안되는것이 아니라, 실행 결과로 undefined를 반환)

사실....JavaScript 에는 empty 이라는 것도 있다.

정확히 empty 부르는게 맞는지도 모르겠다. empty 는 이런 경우에 생긴다.

const arr = [];
arr.length = 3;

console.log(arr); // [empty × 3]

근데 이게....곰곰히 생각해보면 좀 이상하다.

변수 선언 과정을 기억하면서 과정을 천천히 따라가보자.

제일 먼저, 변수 영역에 변수를 하나 만드는데, 식별자의 이름은 arr로 하고, 값은 배열을 나타내는 주솟값을 참조한다.

이 상태에서 arr에 접근해서 length 라는 프로퍼티를 이용해서 배열의 공간을 3개로 변경해주었다.

여기까지 생각했을 때, 현재 메모리는 이런 상태가 되었을 것 같다.

근데 이 그림대로 되려면,

console.log(arr); // [ undefined, undefined, undefined ]

가 출력됐어야 한다.

---

하지만, 실제로는 특정 index에 값을 지정할 때야 비로소 메모리의 빈 공간을 확보하고, 식별자를 index로, 값을 데이터 영역의 주솟값으로 저장하는 등의 동작이 실행된다.

즉, 값이 지정되지 않은 index는 아직은 존재하지 않는 프로퍼티가 될 뿐이다.

사용자가 명시적으로 undefined를 할당하지 않는 이상, JavaScript 가 반환하는 undefined는 어딘가에 저장된 값이 아니라, 아직 존재하지 않는 프로퍼티에 접근했음을 알려주는 일종의 경고음인 것이다.

console.log(arr[1]) // undefined

다시 말해 위의 arr의 1번째 index에 접근했을 때 반환되는 이 undefined는

식별자의 이름이 1, 할당된 값이 undefined인 것이 아니라!

없는 식별자에 접근했기 때문에 값을 반환할 수 없어서 어쩔 수 없이 반환되는 undefined인 것!!!

💁🏻‍♀️ 사용자가 명시적으로 undefined를 할당하지 않는 이상, JavaScript 가 반환하는 ...

그렇다. 우리는 undefined를 명시적으로 할당할 수 있다.
let a = undefined;

이렇게 지정했을때의 undefined는 식별자가 a, 값이 undefined인 실존하는 프로퍼티가 되어 버린다.
물론 코드상으로는 전혀 문제가 되지 않는다.

하지만 우리는 사람이기에.......
이렇게 사용자가 명시적으로 undefined를 할당해버리면, JavaScript가 반환하는 undefined가 값이 없는 변수에 접근할때 어쩔수 없이 JavaScript 자체에서 반환해주는 undefined인지, 아니면 우리가 지정한 값이 undefined인 아이인지 알 수 없게 되어 버린다.

그래서, 없는 값을 명시적으로 나타내고 싶을 땐 undefined 가 아닌, null 을 이용해야 한다!!

---

:: null

값이 없음, 빈 값 을 명시적으로 나타내고 싶다면 null을 사용하면 된다.

그러라고 만들어진 데이터 타입이다.

한가지 주의할 점은, null은 type이 object 라는 것!

(그래서, 위에서 깊은 복사를 수행하는 사용자 정의 함수 부분에 target !== null 라는 조건을 추가로 넣어주었다.)

어떤 값이 null 인지 아닌지 체크할때는 이렇게 일치 연산자 === !== 를 이용해서 비교해주면 된다!

---

출처 : 코어 자바스크립트 [정재남]

---

개발 왕초보 코린이입니다!
이 내용은 각종 강의&구글링을 통해 배운 내용을 정리하는 것으로, 제가 이해하고 넘어간 개념이 틀렸거나 더 보충할 개념이 있다면 댓글 남겨주시면 정말 감사하겠습니다!!