---

래퍼 객체(Wrapper Objects)

• JS는 원시 데이터 유형과 그에 대응하는 래퍼 객체가 존재함.
• 원시 데이터는 값 자체를 말하며, 래퍼 객체는 이러한 값을 객체로 랩핑함.
• 객체 안에는 여러 메서드와 프로퍼티가 존재.
• Number, String, Boolean 등 래퍼 객체 존재.
• .valueOf() 메서드를 이용하면 래퍼 객체가 래핑한 원시 데이터 값을 반환.

String 래퍼 객체

• new String("문자열") 로 생성.

const strObj = new String("World"); // 문자열 래퍼 객체 생성

console.log(strObj); // [String: 'World'] (문자열 래퍼 객체)
console.log(typeof strObj); // "object" (문자열 래퍼 객체)
console.log(typeof strObj.valueOf()); // "string" (문자열 래퍼 객체의 원시 값의 데이터 유형)

주요 메서드와 프로퍼티

• String.prototype.charAt() : 주어진 인덱스에 해당하는 문자를 반환.
• String.prototype.toUpperCase() : 문자열을 모두 대문자로 변환한 새로운 문자열을 반환.
• String.prototype.toLowerCase() : 문자열을 모두 소문자로 변환한 새로운 문자열을 반환.
• String.prototype.concat() : 문자열과 하나 이상의 문자열을 합쳐 새로운 문자열을 반환.
• String.length : 문자열의 길이를 나타내는 프로퍼티.

Number 래퍼 객체

• new Number(숫자) 로 생성.

const numObj = new Number(7); // 숫자 래퍼 객체 생성

console.log(numObj); // [Number: 7] (숫자 래퍼 객체)
console.log(typeof numObj); // "object" (숫자 래퍼 객체의 데이터 유형)
console.log(typeof numObj.valueOf()); // "number" (숫자 래퍼 객체의 원시 값의 데이터 유형)

주요 메서드와 프로퍼티

• Number.prototype.toFixed() : 소수점 이하 자릿수를 제한한 문자열로 변환한 후 반환.
• Number.prototype.toPrecision() : 지정된 숫자의 유효 숫자 자릿수를 가지는 문자열로 변환한 후 반환.
• Number.prototype.toString() : 주어진 진수에 따라 숫자를 문자열로 변환한 후 반환.
• isNaN() : 숫자가 NaN(Not-a-Number)인지 여부를 나타내는 부울 값을 반환.

Boolean 래퍼 객체

• new Boolean(불리언) 로 생성.

const boolObj = new Boolean(false); // 불리언 래퍼 객체 생성

console.log(boolObj); // [Boolean: false] (불리언 래퍼 객체)
console.log(typeof boolObj); // "object" (불리언 래퍼 객체의 데이터 유형)
console.log(typeof boolObj.valueOf()); // "boolean" (불리언 래퍼 객체의 원시 값의 데이터 유형)

자동 형 변환 (Type Coercion)

• JS는 동적 타입 언어로, 데이터 유형 간에 자동 형 변환이 수행되는 언어.
• 데이터 유형 간의 자동 형 변환이 필요한 경우에 자동으로 수행함.
• 문자열과 숫자의 자동 형 변환

const num = 42; // 숫자
const str = "3"; // 문자열

const result = num + str; // 자동 형 변환 발생
console.log(result); // "423" (문자열로 결합)

• 불리언과 숫자 자동 형 변환

const isTrue = true; // 불리언
const num = 7; // 숫자

const result = isTrue + num; // 자동 형 변환 발생
console.log(result); // 8 (숫자로 변환 및 덧셈)

• 문자열와 불리언

const str = "true"; // 원시 문자열 데이터 유형
const isTrue = true; // 원시 불리언 데이터 유형

const result = (str === isTrue); // 자동 형 변환 발생
console.log(result); // true (데이터 일치)

• 자동 형 변환은 JavaScript의 유연성을 제공하지만, 예상치 못한 결과를 초래할 수 있으므로 주의가 필요하며, 정적 타입 시스템을 제공하는 TypeScript를 이용하는 추세.

원시 값을 래퍼 객체로 자동 형 변환

• 원시 값은 래퍼 객체로 자동 형 변환 되기 때문에 프로퍼티와 메서드를 모두 사용할 수 있음.
• 문자열

const str = "Hello"; // 문자열

// 자동 형 변환
const strLength = str.length; // 원시 문자열에서 문자열 래퍼 객체로 자동 변환

console.log(strLength); // 5

• 숫자

const num = 42; // 숫자

// 자동 형 변환
const numValue = numObj.valueOf(); // 숫자 래퍼 객체의 valueOf() 메서드 호출
console.log(numValue); // 7 (원시 숫자 값 반환)

• 형변환 과정
  1. Boxing : 원시 값을 래퍼 객체(메서드, 프로퍼티)로 사용하려 할 때, JS 엔진은 해당 원시 값을 래퍼 객체로 "Boxing" 하여 임시 객체 생성.
  2. 작업 수행 : 임시 객체에 존재하는 해당 메서드(or 프로퍼티)를 호출하여 작업을 수행하고 결과를 반환.
  3. 제거 : 임시 객체가 해당 스코프에서 사용이 완료되면 JS 엔진의 가비지 컬렉터(Garbage Collector)에 의해 파기.

원시 값과 래퍼 객체

• 자동 형 변환으로 원시 값도 래퍼 객체처럼 이용이 가능함.
• 래퍼 객체를 사용하면 성능 및 가독성 이슈가 발생할 수 있음.
• 원시 데이터 유형을 직접 사용하는 것이 일반적으로 더 효율적.
• 원시 값은 해당 데이터 유형의 메서드와 프로퍼티을 가지고 있지 않음.
• 원시 값은 불변이며, 래퍼 객체는 변이성을 가지는데,
• 래퍼 객체의 원시 값을 직접 변경하는 것을 의미하는 것은 아님.

---