얕은복사와 깊은복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이다.
깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다.

// 얕은 복사
const copyObject = function (target) {
	const result = {};
    for(var prop in target) {
    	result[prop] = target[prop];
    }
    return result;
}

const user = {
	name: 'BigOne',
    urls: {
    	portfolio: 'http://',
        blog: 'http://blog.com',
        facebook: 'http://facebook.com/bigone',
    },
}

const user2 = copyObject(user);

user.name = 'silverCenter';
console.log(user.name === user2.name) // false

user.urls.portfolio = 'http://portfolio.com';
console.log(user.urls.portfolio === user2.urls.portfolio) // true

얕은 복사의 단점이다.
바로 아래단계의 값만 복사하여 한 단계 더 들어간 urls의 내부 프로퍼티들은 기존 데이터를 그대로 참조하고있다.

기본형일 경우에는 얕은복사를 사용해도 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야하기 떄문에 깊은 복사를 사용해야한다.

//깊은 복사
const copyObjectDeep = function (target) {
	const result = {};
    if (typeof target === 'object' && target !== null){
    	for(var prop in target) { 
        	result[prop] = copyObjectDeep(target[prop]);
    	}
    } else {
	    result = target;
    }
    return result;
}

undefined와 null

자바스크립트에서는 '없음'을 나타내는 값이 undefined, null 2가지 값이 있다.
undefined - 사용자가 명시적으로 지정할 수도 있지만 자바스크립트 엔진이 자동으로 부여하는 경우도 있다.
undefined 는 배열의 경우 좀 특이한 현상이 있다.

// 자동으로 undefined 부여하는 경우
var a ;
console.log(a);		// undefined

var obj = { a: 1, };
console.log(obj.b)	// undefined

var func = function () { };
var c = func();
console.log(c)	// undefined


// undefined와 배열
var arr = [];
arr.length = 3;
console.log(arr)	// [empty x 3]

var arr2 = new Array(3);
console.log(arr2) 	// [empty x 3]

var arr3 = [undefined, undefined, undefined];
console.log(arr3)	//	[undefined, undefined, undefined]


// 빈 요소와 배열의 순회
var arr1 = [undefined, 1];
var arr2 = [];
arr2[1] = 1;

arr1.forEach((v, i) => console.log(v, i)) // undefined, 0 / 1, 1
arr2.forEach((v, i) => console.log(v, i)) // 1, 1

arr1.map((v, i) => console.log(v + i))	// NaN, 0 / 2
arr2.map((v, i) => console.log(v + i))	// 2

사용자가 명시적으로 부여한 경우와 비어있는 요소에 접근하려할 때 반환되는 두 경우의 'undefined' 의미를 구분할 수 있다. 전자의 undefined는 그 자체로 값이다. undefined가 '비어있음'을 의미하긴 하지만 하나의 값으로 동작하기 때문에 이때의 프로퍼티나 배열의 요소는 고유의 키값(프로퍼티 이름)이 실존하게 되고, 따라서 순회의 대상이 된다.

사용자가 아무것도 하지 않은 채로 접근했을 때 자바스크립트 엔진이 하는 수 없이 반환해주는undefined는 해당 프로퍼티 내지 배열의 키값(인덱스) 자체가 존재하지 않음을 의미한다.
값으로써 어딘가에 할당된 undefined는 실존하는 데이터인 반면, 자바스크립트 엔진이 반환하는 undefined는 문자 그대로 값이 없음을 나타낸다.

그래서 우리는 '비어있음'을 명시적으로 나타낼 때는 undefined가 아닌 null을 사용하면 된다.
이렇게되면 undefined는 자바스크립트 엔진이 반환해주는 경우에만 존재하게된다.

추가 주의사항
자바스크립트 자체버그로 typeof null 은 'object' 가 출력된다.
따라서,
null == undefined // true
null === undefined // false
동등연산자(==) 가 아닌 일치연산자(===)를 사용하여 정확히 판별해야한다.