js 객체 리터럴 / 객체값 가져오기 / 얕은복사 깊은복사 비교

객체 客體

객체란 무엇이냐.. (손 객에 몸체 자를 쓴다)
사전적 정의로는 '실제 존재하는 것' 인데
나는 이걸, 다양한 속성을 가지고있는 '무언가' 같은거라고 이해했다. 추상적인 개념도 객체로 표현될수 있으니깐.
컴퓨팅 정의로는 '실제 메모리에 할당되어 존재하는 것' 이라고 한다.

객체는 property의 집합이다.
객체 리터럴의 프로퍼티는,  key, value로 구성된다.

let myPhone = {
    model: 'Zplip3', // key: value
    uniqueness: '이 폰은 반으로 접힌다' // key: value
}

 

자바스크립트에서 원시값을 제외한 모든것은 객체다.
배열도 객체라 볼수있고, 함수도 객체라 볼수있다.

let empty = {}; // 중괄호는 코드블럭이 아니다. 따라서 뒤에 세미콜론이 붙는다.

 

 

프로퍼티 접근

let test={
    0:'zero', //key를 숫자로 넣어도 문자열로인식한다.
    1:'one',
}

test['0'] //'zero'
test[0] //'zero' 왜..나오지? 0 == '0' 이니깐..



let test2={
    zero:0,
    one:1,
}

test2.zero // 0
test2['zero'] //0

대괄호 프로퍼티 접근 연산자 내부에 지정하는 키는 반드시 따옴표로 감싼 문자열이여야 한다. (문자열이 아니면 식별자로 인식하니까)
그런데 test 객체를 보면, 키가 0,1로 숫자로 들어가있지만 문자열로 인식한다.

 

객체 리터럴 확장

let x = 21.2;
let y = 29.23;
const coordinate = {x, y} 
console.log(coordinate) // {x: 21.2, y: 29.23}

 

원시값과 객체 비교

원시값은 재할당시(값 변경시) 다른 메모리를 차지하게 된다.
따라서 서로 간섭할 수 없다.

let score = 100;
let copy = score;

 

참조값을 copy하는것은 얕은복사이다.

spreadOperation (...)는 1depth의 깊은 복사만 한다.
Object.assign()도 1depth의 깊은 복사만 한다.

const array = [1,2,3]
const copyArray = array // Ref copy == 얕은복사
const deepCopyArray = [...array];

console.log(array == copyArray) // true
console.log(array == deepCopyArray) // false == 1depth 깊은복사

const test = {key:1}
const copyTest = Object.assign({}, test);

copyTest.key = 2;

console.log(test) // {key:1}
console.log(copyTest) // {key:2}

 

완전한 깊은복사를 하려면 JSON.parse(JSON.stringify())를 쓴다.
lodash 라이브러리를 쓰거나.