[JS] - 원시값, 래퍼 객체란? 간단하고 쉽게 이해하기(원시값도 메서드를 사용할 수 있다)

🧹 간단 정리

• 원시값(Primitive): 숫자, 문자열, boolean 등 변경 불가능한 단일 값.
• 객체(Object): 여러 값을 묶어둔 구조.
• 메서드(Method): 객체에 붙어 있는 함수.
• 원시값도 메서드를 사용할 수 있다?! → 예! (하지만 사실은 살짝 속임수…!?)

👉 이게 무슨 말인지 아래에서 쉽게 설명하겠다!

 

---

 

📌 원시값(Primitive Value) 이란?

• 원시값(Primitive)은 자바스크립트에서 가장 기본이 되는 데이터 단위
• 속성이나 메서드를 가지지 않으며, 변경(수정)할 수 없는 값(immutable)

💎 원시값 종류

종류	예시
number	1, 3.14, -100, Infinity, NaN
string	'hello', "JavaScript", 템플릿
boolean	true, false
null	null
undefined	undefined
symbol	Symbol('id'), Symbol()
bigint	123n, BigInt(999)

 

 

근데 잠깐… 🤔 변경(수정)할 수 없는 값?? 무슨 소리!

아래처럼 string, number 등 전부 다 변경했었는데..?

let greeting = 'hi';
greeting = 'hello';

 

 

엄연히 말하자면 기존 문자열인 'hi'를 ‘hello’로 수정한 게 아니다 그림을 보고 설명을 하자면

1. greeting이 'hi'를 원시값을 할당받았다가
2. greeting이 이제 'hello'라는 원시값을 재할당 받은 것.

원시값 재할당 예시 이미지

greeting은 처음 "hi"라는 원시값을 스택에 할당받았다가
이후 "hello"라는 전혀 다른 원시값으로 재할당된 것
기존 "hi"는 그 어떤 수정도 받지 않았고 
단지 더 이상 사용되지 않게 되었을 뿐.

 

 

다시 말해 'hello'는 한번 생성되면 절대 바뀌지 않는 것이 맞다

그래서 원시값은 변경 및 수정할 수 없는 값이라고 한다!

(🙋🏻‍??? : 이봐!! 그럼 ‘hello’는 어떻게 되는 거냐!)

(궁금하면 아래 링크 클릭!)

[JS] - 가비지 컬렉션 (원피스로 이해하는 가비지 컬렉션)간단하고 쉽게 이해하기

 

 

---

✨ 원시값도 메서드를 쓴다?

위에서 우리는 원시값의 특징을 보았다.

• 속성이나 메서드를 가지지 않으며 → 맞아 객체가 아니니깐!
• 변경할 수 없는 값 → 응 이해했어!

하지만 객체가 아닌 원시값이 메서드를 사용할 수 있다는 사실..!

아래코드를 보면 문자열은 원시값인데 .toUpperCase() 메서드가 되네?? 😳

 

바로 자바스크립트의 임시 객체 변환기능 덕분.

 

임시 객체 변환 기능 예시 이미지

 

let str = "CcomCoder";
alert(str.toUpperCase()); // CCOMCODER

 

 

---

 

🧙‍♀️ 원시값 → 래퍼 객체(Wrapper Object)

• 래퍼 객체 : 원시값(primitive value)을 감싸서 객체처럼 다룰 수 있게 해주는 기본 내장 객체 

JS는 원시값에 접근할 때 잠깐 동안 객체처럼 변환해 준다

 

쉽게 말해, 원시값을 객체처럼 사용가능한 것!

 

const str = "CcomCoder";
// 위 코드를 자바스크립트는 아래처럼 처리합니다.
const temp = new String("CcomCoder");
temp.toUpperCase(); // "CCOMCODER"

• String, Number, Boolean 등 원시값은 모두 래퍼 객체가 있다.
• 메서드를 호출 시도 시 자바스크립트가 임시로 객체로 변환한 뒤
• 메서드 실행 후에는 다시 객체가 사라진다.

 

🚫 하지만 조심해야 할 점!

변환된 임시 객체는 읽기만 가능, 변경은 불가능하다는 점.

const str = "hello";
str.test = "world";
console.log(str.test); // ❌ undefined

✋ why? (앞서 말했듯이) 임시 객체는 메서드 호출이 끝나면 바로 사라지기 때문

 

 

🤔 여기서 의문점이 드시죠? (전 그랬습니다)

1. 다시 원시값으로 돌아올 거면 왜 굳이 왜 변환해서 접근하는 거야? → 객체로 선언해서 처음부터 ‘객체’로 해!
2. 객체, 원시값 모두 접근할 때 전부 객체라면 JS는 2가지를 왜 구분 지어 놓은 거야? → 그냥 전부다 객체로 하지

 

---

 

 

✅ 왜 “원시값”과 “객체”를 구분할까?

1. 성능(Performance) 때문

• 원시값은 가볍고 빠르다.
• 모든 값이 객체였다면, 메모리 사용량이 늘고 처리 속도가 느려졌을 것!

const age1 = 27; // 그냥 숫자. 메모리 한 칸에 값 저장

const age2 = new Number(27); // 객체로서 속성, 메서드, 프로토타입 등등이 따라옴

원시값은 그냥 메모리 한 칸에 “값”만 저장하면 되지만
객체는 그보다 훨씬 복잡한 구조를 갖기 때문에
무조건 객체로 만들면 낭비가 크다.

 

 

2. 값 자체가 변하지 않도록 보장해야 할 때가 많다.

• 예를 들어 문자열은 복잡한 텍스트 조작이 많기 때문에 변하지 않는 값으로 다루는 게 실수도 줄이고 안전하다.

let str = 'hello';
str.toUpperCase(); // 'HELLO' 반환, 원래 문자열은 그대로

이 불변성 덕분에, 문자열을 여러 군데에서 공유해도 걱정이 없다!

 

 

📌 요약

• 자바스크립트는 모든 걸 객체처럼 다룰 수 있다
• 다만 성능과 안정성을 위해 원시값을 따로 둔다

---

💡 개발 시 고려사항

• 원시값인 문자열을 자주 조작 한다면 "abc" 같은 리터럴을 사용하자.
• ⇒ typeof, ===시 의도와 다르게 나올 수 있음
• 객체처럼 .prop = value 하려고 하지 말자. 사라지기 때문.. 😢
• 따라서 혼란 방지를 위해 원시값은 원시값답게 다루는 게 좋다!

 

🧑🏻‍💻 마무리

자바스크립트의 원시값은 간단하지만, 임시 객체 덕분에 마치 객체처럼 사용 가능해요.

하지만 변경 불가, 잠깐만 존재라는 특성을 기억하세요!

 

 

✅ 한 줄 요약

“원시값은 잠깐 객체 코스프레는 가능하지만, 진짜 객체는 아니다!” 😎