https://velog.io/@minhyeon18/javascript-데이터-타입
데이터 타입과 이어지는 글 입니다.
불변객체
불변객체는 여러 라이브러리(React, Vue.js)뿐만 아니라 함수형 프로그래밍, 디자인 패턴 등에서 기초가 되는 개념입니다. 객체 지향 프로그래밍에서 정의하는 불변객체는 생성 후 상태를 바꿀 수 없는 객체를 의미합니다. 값을 재할당 한다면 객체가 바뀌는것이 아니라 메모리 영역에 새로운 데이터가 저장이 되고 그 값이 변수의 값에 들어가는 것을 의미합니다. 그렇기 때문에 참조투명성을 유지할 수 있게 됩니다.
불변객체를 만드는 법
불변 객체를 만드는 간단한 방법은 아래와 같습니다.
function copyObject(obj) {
let result = [];
for ( let prop in obj) {
result[prop] = obj[prop];
}
return result;
}얕은복사와 깊은 복사
위의 방법은 얕은복사만 가능합니다. 얕은 복사와 깊은복사가 구분되는 이유는 js에서 객체를 만들때 객체 안의 객체가 존재하는 중첩객체가 존재하기 때문입니다. 얕은복사만 진행되면 내부 객체는 가변성을 띄게 됩니다. 깊은복사까지 진행되어야 모든 속성이 복사되어 별도의 객체라고 볼 수 있습니다. 깊은 복사를 위해 만든 함수는 재귀적으로 동작하게 됩니다.
얕은복사와 깊은복사에 대해선 별도로 정리해둔 글이 있어서 해당글로 대체하겠습니다.
https://velog.io/@minhyeon18/JavaScript-얕은-복사와-깊은-복사
Undefined와 Null
자바스크립트에서 '없음'을 나타내는 두가지 데이터 타입입니다. undefined는 사용자가 직접 설정할 수도 있지만, 값이 없을때 자바스크립트 엔진이 자동으로 할당하는 경우도 있습니다. 그래서 사용자가 의도적으로 '없음'을 표시하는것을 나타내기 위해 null을 사용하는것을 더 추천하고 있습니다. 왜 null의 사용을 지향하는지 undefined에 대해 살펴보겠습니다.
undefined가 자동 할당되는 경우
- 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
- 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
- return 문이 없거나 호출되지 않는 함수의 실행 결과
undefined를 수동으로 할당하면
- 빈 배열에 undefined만 지정했을때
let arr1 = [];
arr1.length = 3;
console.log(arr1);
//[empty × 3]
let arr2 = [undefined, undefined, undefined]
console.log(arr2)
// [undefined, undefined, undefined]- 빈 요소가 있는 배열을 이용할때
let arr1 = [undefined, 1];
let arr2 = [];
arr2[1] = 1;
arr1.forEach(function (v, i) {console.log(v, i); });
arr2.forEach(function (v, i) {console.log(v, i); });
/*
arr1 : undefined 0 / 1 1
arr2 : 1 1
*/
arr1.map(function (v, i) { return v + i; });
arr1.map(function (v, i) { return v + i; });
/*
arr1 : [NaN, 2]
arr2 : [empty, 2]
*/ undefined도 사용자가 할당할 수 있는 데이터 타입 이기 때문에 하나의 값으로 동작합니다. 따라서 프로퍼티나 배열의 요소는 고유의 키값으로 실존하게 되고 순회의 대상이 됩니다. 그러나 javascript가 자동으로 할당한 undefined의 경우 해당 프로퍼티(혹은 배열)의 인덱스가 존재하지 않습니다. 그렇기 때문에 여러 혼란을 방지하기 위해서 '없음'을 나타내기 위해 null의 사용을 추천하고 있습니다.
