TIL 23.01.04

 

JavaScript Koans 과제를 진행하면서, 새롭게 알게 된 내용을 정리해보았다.

호이스팅

 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

 

함수 선언식은 호이스팅 가능

catName("클로이"); //"제 고양이의 이름은 클로이입니다"  
function catName(name) {   console.log("제 고양이의 이름은 " + name + "입니다"); }  
catName("호랑이"); //"제 고양이의 이름은 호랑이입니다"

 

함수 표현식은 호이스팅 불가

console.log(catName("클로이")); // ReferenceError
let catName = function(name) {   return "제 고양이의 이름은 " + name + "입니다"; }  
console.log(catName("호랑이")); //"제 고양이의 이름은 호랑이입니다"

 

 

얕은 복사(shallow copy)와 깊은 복사(deep copy)

 

JS에서 얕은 복사는 참조값을 복사하고,

깊은 복사는 값 자체를 복사한다.

 

얕은 복사 예시

const obj1 = { a:1, b:2 }; 
const obj2 = obj1; 
obj2.a = 100; 
console.log( obj1.a ); // 100

 

깊은 복사 예시

const obj1 = { a:1, b:2 };
const obj2 = { ...obj };
obj2.a = 100;
console.log( obj1 === obj2 ) // false 
console.log( obj1.a ) // 1

 

이 예제를 통해서 얕은 복사와 깊은 복사에 대해서는 알았지만,

과제를 진행하면서 assgin 메소드 ,spread연산자를 사용한 복사는 얕은 복사인지, 깊은 복사인지

의문을 가지게 되었다.

 

assign 메소드

const obj1 = {a:1, b:2} 
const assignObj = Object.assign({},obj1);  
assignObj.a = 100;  
console.log( obj1 === assignObj ) // false 
console.log( obj1.a ) // 1

obj1과 assignObj는 동일한 객체가 아니며 다른 주소를 가지고 있는 객체이다

따라서 이 경우에, 깊은 복사를 했다고 볼 수 있다.

 

2 depth 이상이면 얕은 복사.

const obj1 = {a:1, b:2, c: {d: 4}, e: [1,2,3] } 
const assignObj = Object.assign({},obj1);  
assignObj.c.d = 100; 
assignObj.e.push(4)  
console.log( obj1.c.d === assignObj.c.d ) // true 
console.log( obj1.e === assignObj.e ) // true

다음과 같이 객체 안에 배열이나 객체가 있을 경우,

해당 요소는 얕은 복사를 한다. (이외의 값은 깊은 복사)

 

결론

assign 메소드는

1 depth 까지는 깊은 복사,

2 depth 이상이면 얕은 복사

 

그렇다면 다른 복사 방식인 spread 연산자는 어떨까?

spread 연산자

const obj1 = {a:1, b:2} 
const spreadObj = {...obj1}  
spreadObj.a = 100;  
console.log( obj1 === spreadObj ) // false 
console.log( obj1.a ) // 1

assgin 메소드와 동일하게,

obj1과 spreadObj는 동일한 객체가 아니며 다른 주소를 가지고 있는 객체이다

따라서 이 경우에, 깊은 복사를 했다고 볼 수 있다.

 

2 depth 이상이면 얕은 복사.

const obj1 = {a:1, b:2, c: {d: 4}, e: [1,2,3] } 
const spreadObj = {..obj1}  
spreadObj.c.d = 100; 
spreadObj.e.push(4)  
console.log( obj1.c.d === spreadObj.c.d ) // true 
console.log( obj1.e === spreadObj.e ) // true

다음과 같이 객체 안에 배열이나 객체가 있을 경우,

해당 요소는 얕은 복사를 한다. (이외의 값은 깊은 복사)

 

결론

spread 연산자 또한

1 depth 까지는 깊은 복사,

2 depth 이상이면 얕은 복사

 

 

객체의 길이는 구할 수 있을까?

정답은 No , 객체는 배열과 달리 연속적인 데이터의 집합이 아니므로 길이를 구할 수 X

따라서 객체의 길이를 직접 구하면, undefined가 반환되고,

객체의 프로퍼티의 개수를 구하고 싶다면, keys를 활용하면 된다.

const obj = {one: 1, two: 2, three: 3, sum: (a, b) => {return a + b} }; 
console.log(obj.length);     //undefined 
console.log(Object.keys(obj));        // ['one', 'two', 'three', 'sum'] 
console.log(Object.keys(obj).length); // 4

 

 

참고 : https://hanamon.kr/javascript-shallow-copy-deep-copy/

 

 

Uploaded by Notion2Tistory v1.1.0