11장. 원시 값과 객체의 비교

Happhee·2022년 1월 20일
0

JS : Depp Dive

목록 보기
8/35
post-thumbnail

1. 원시 값

변경 불가능한 값
읽기 전용

const i = {};
i = 10 //불가
i.a = 1

console.log(i)	//{a:1}
  • 값에 의한 전달
var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy);  // 80


console.log(score === copy) //true : 가리키는 주소가 같은것이지 메모리 공간이 같은 것은 아니다

score = 100;

console.log(score); // 100
console.log(copy);  // ?	-> 80

console.log(score === copy) //false

왜 이런 구조냐?

예를 들어
0xc0000A2 -> 식별자 score 값 0x00000F2 (undefined)
0xc0000A2 -> 식별자 score 값 0x000001332 (80)
0xc0000A2 -> 식별자 score 값 0x00669F913 (100)
0xc0000A4 -> 식별자 copy 값 0x000001332 (80)

메모리 공간은 다르다.

값에 따라 메모리를 만들기 때문이다
이것이 불변성이다

  • 유사 배열 객체
    마치 배열처럼 인덱스로 프로퍼티 값에 접근 할 수 있고, length프로퍼티를 갖는 객체
//문자열은 변경 불가능한 값!!
var str ='seohee';

console.log(str[0]);	//s

console.log(str.length)	//6

변수에는 값이 전달되는 것이아니라 메모리 주소가 전달된다
변수와 같은 식별자는 메모리 주소를 기억한다
결구, 두 변수의 원시값은 서로다른 메모리 공간에 저장된 별개의 값이 되어서 어느한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다

2. 객체

자바스크립트 객체는 키를 인덱스로 사용하는 해시 테이블이라고 생각할 수 있다
객체는 변경가능한 값이다

// 할당이 이뤄지는 시점에 객체 리터럴이 해석되고, 그 결과 객체가 생성된다.
var person = {
  name: 'Lee'
};

// person 변수에 저장되어 있는 참조값으로 실제 객체에 접근해서 그 객체를 반환한다.
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신
person.name = 'Kim';

// 프로퍼티 동적 생성
person.address = 'Seoul';

console.log(person); // {name: "Kim", address: "Seoul"}

0x000a : person -> 0x000F2
0x000F2 : -> 0x00001332 ~ ?
{
0x0001332 : name -> 0x0005555 -> 'Kim'
}

원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하는 것은 재할당뿐이다
하지만, 객체는 재할당 없이 프로퍼티를 동적으로 추가하고,갱신하고, 삭제 할 수 있다.

  • 불변객체 : Object.freeze() // 재귀 (X)
    한번 만든 객체는 건들지말고, 새로 객체를 만든다
person.name = 'ab' 			// x
person = {name : 'ab'}		// o
  • 얕은 복사
    한 단계만 복사하는 것
    객체에 중첩되어 있는 객체의 경우 참조 값을 복사

  • 깊은 복사
    재귀적으로 원시값까지 전부 복사
    객체에 중첩되어 있는 객체까지 모두 복사

var a= {a : [1,2,3]};
var b = a;

console.log(a === b);		//true

//서로 영향을 주고 있기에 이는 얕은 복사
a.a[0] = 4;
console.log(b.a[0])		// 4


//b는 a의 원시값을 그대로 가지고 있기에 이는 깊은 복사
var b = { a: [...a.a]};
a.a[0] = 6;

console.log(b.a[0]) 	// 4 
profile
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다

0개의 댓글