WeniVooks

검색

JavaScript 에센셜

원시타입 vs 객체타입

1. 저장된 값

원시타입과 객체타입은 메모리에 저장되는 값이 다릅니다. 원시타입은 실제 값을 저장하고, 객체타입은 참조 값을 저장합니다. 원시타입은 변수에 연결된 주소에 실제 값이 저장되어 있습니다.

let name = 'weniv';
let name = 'weniv';

객체타입은 실제 값이 저장되어 있는 위치의 주소, 즉 참조 값을 저장합니다.

const user = {
  age: 30,
  name: 'licat',
};
const user = {
  age: 30,
  name: 'licat',
};

2. 값에 의한 전달

원시 타입과 객체 타입은 변수에 할당하거나 함수에 인자로 전달할 때 다르게 동작합니다.

2.1 원시 타입의 값 전달

원시 타입의 경우, 변수를 다른 변수에 할당하면 값이 복사되어 전달됩니다. 이를 '값에 의한 전달'이라고 합니다. 다음 예제에서 b의 값을 변경해도 a의 값은 영향을 받지 않습니다.

let a = 10; let b = a; console.log(a); // 10 console.log(b); // 10 b = 20; console.log(a); // 10 console.log(b); // 20
2.2 객체 타입의 참조 전달

객체 타입의 경우 변수에 할당하면 참조 값이 복사되어 전달됩니다. 이를 '참조에 의한 전달'이라고도 하지만, 실제로는 저장되어 있떤 참조 값이 복사되어 전달되는 것이므로 '값에 의한 전달'이라고 볼 수 있습니다. 다음 예제에서 obj1과 obj는 같은 객체를 참조하고 있기 때문에, obj2 객체의 속성을 변경하면 obj1 객체도 영향을 받습니다. 하지만 obj2에 다른 객체를 할당하면 obj1에는 영향을 주지 않습니다.

let obj1 = { name: 'licat', age: 30 }; let obj2 = obj1; console.log(obj1); // { name: 'licat', age: 30 } console.log(obj2); // { name: 'licat', age: 30 } obj2.age = 31; console.log(obj1); // { name: 'licat', age: 31 } console.log(obj2); // { name: 'licat', age: 31 }

3. 원시 래퍼 타입

메서드는 객체 타입의 값에서 사용 가능한 기능을 제공합니다. 하지만 원시 타입의 값에서도 메서드를 사용할 수 있습니다. 이는 자바스크립트 엔진이 원시 타입의 값을 객체로 변환하여 메서드를 사용할 수 있게끔 처리하기 때문입니다.

let val = 'hello!'; console.log(val.toUpperCase());

위 코드는 실제로 아래와 같이 동작합니다. 일시적으로 문자열 객체를 만들고 이 객체에 있는 메서드를 호출한 뒤, 객체를 제거합니다. 이처럼 원시타입을 마치 객체 타입처럼 사용할 수 있게 하는 것을 '원시 래퍼 타입'이라고 합니다.

let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;
let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;

이 과정을 거치는 이유는 원시타입도 객체타입처럼 다양한 메서드를 사용할 수 있게 함으로써 일관적인 사용 경험을 제공하기 위함입니다.

4.2 객체5장 연산