한준호

[Modern javascript] 원시 값과 객체의 비교 본문

Frontend/modern javascript

[Modern javascript] 원시 값과 객체의 비교

igoman2 2021. 8. 9. 22:40
728x90

■원시타입과 객체타입

- 원시 값은 변경 불가능하지만 객체는 변경 가능하다.

 

- 원시 값을 변수에 할당하면 변수(메모리)에는 실제 값이 저장되지만 객체를 변수에 할당하면 변수(메모리)에는 참조 값이 저장된다.

 

- 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달이다.

 

var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
// 하지만 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = 'S';

console.log(str); // string

c와 다르게 자바스크립트는 문자열이라는 원시 타입을 제공한다.

변수에 문자열을 할당하면 변수는 메모리 공간의 첫번째 메모리 주소를 가리킨다.

변수의 재할당이 이루어지면 이전의 문자열을 수정하는 것이 아니라 새로운 메모리에 문자열을 생성하고 이곳을 가리킨다.

이때 변경 전과 변경 후의 문자열은 모두 메모리에 존재한다 => memory leak

 

■값에 의한 전달

var score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
var copy = score;

console.log(score, copy);    // 80  80
console.log(score === copy); // true

// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
score = 100;

console.log(score, copy);    // 100  80
console.log(score === copy); // false

변수에 원시 값을 갖는 변수를 할당하면 값에 의한 전달이 발생한다. 다른 메모리 주소를 가리키고 있기 때문에 값이 변경되어도 영향을 주지 않는다.

 

■참조에 의한 전달

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 즉 두 개의 식별자가 하나의 객체를 공유하므로 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.

 

 

결국 "값에 의한 전달" 과 "참조에 의한 전달" 은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일하다.

다만 식별자가 기억하는 메모리 공간에 저장되어 있는 값이 원시 값이냐 참조 값이냐의 차이만 있을 뿐이다. 따라서 자바스크립트에는 "참조에 의한 전달" 은 존재하지 않고 "값에 의한 전달" 만이 존재한다고 말할 수 있다. ( 참조 값도 값이므로)

728x90

'Frontend > modern javascript' 카테고리의 다른 글

[Modern javascript] 스코프  (0) 2021.08.15
[Modern javascript]함수  (0) 2021.08.12
[Modern javascript]객체 리터럴  (0) 2021.08.09
[Modern javascript]타입 변환과 단축 평가  (0) 2021.07.16
[Modern javascript] 반복문  (0) 2021.07.15
Comments