JavaScript 원래 값 및 패키지 객체에 대한 상세 설명

앞말

자바스크립트가 유행하면서 점점 더 많은 개발자들이 자바스크립트를 접하고 사용하기 시작했다.
또한 많은 개발자들이 자바스크립트의 가장 기본적인 원시 값과 포장 대상에 대해 명확하게 이해하지 못한다는 것을 발견했다.
그러면 이 글은 찌꺼기가 여러분에게 그것들을 상세하게 소개해 드리겠습니다.
🧐 말이 많지 않아, Let's go!

본문

원본 유형(Primitive types)

원본 유형도'기본 유형'이라고 부른다.
현재 JavaScript에는 다음과 같은 원시 유형이 있습니다.

string(문자열)

number(숫자)

boolean(부울)

null

undefined(미정의)

bigint(대정수, ES6)

symbol(플래그? ES6)

📝 다음과 같습니다.

typeof 'chenpipi';  // "string"
typeof 12345;       // "number"
typeof true;        // "boolean"
typeof null;        // "object"
typeof undefined;   // "undefined"
typeof 12345n;      // "bigint"
typeof Symbol();    // "symbol"

💡 각별히 주의하다
typeof null은 "object"를 되돌려주지만 이것은 null이 대상이라는 것을 의미하지 않습니다. 이것은 사실 자바스크립트의 버그입니다. 그리고 자바스크립트가 탄생한 이래로 이렇습니다.
JavaScript의 최초 구현에서 JavaScript의 값은 유형을 나타내는 라벨과 실제 데이터 값으로 표시됩니다.객체의 유형 레이블은 0입니다.null은 빈 바늘 (대부분의 플랫폼 아래 값은 0x00) 을 대표하기 때문에null의 형식 탭은 0이고 typeofnull도 "object"로 되돌아옵니다.
The history of “typeof null”:https://2ality.com/2013/10/typeof-null.html

원본 값(Primitive values)

원본 값, 즉 원본 유형의 값(데이터)이다.
A primitive value is data that is not an object and has no methods.
원시 값은 아무런 방법이 없는 비대상 데이터이다.
즉string,number,boolean 등 원시 유형의 값 자체는 어떠한 속성과 방법도 없다.
😨 이때 후각이 예민한 꼬마는 이미 뭔가 이상하다는 것을 알아차렸지?
부지런하다!나는 꾸준함을 더했다!(수동 개머리 자르기)
🤓 여기에는 매우 재미있는 점이 하나 있지만, 이 문제를 토론하기 전에 먼저 포장 대상을 알아보자.

패키지 객체(Wrapper objects)

null과undefined를 제외한 원시 유형은 모두 그에 상응하는 포장 대상이 있다.

String(문자열)

Number(숫자)

부울

BigInt(대정수, ES6)

Symbol(플래그? ES6)

객체(Object)

객체는 참조 유형입니다.
우선, 포장 대상 자체는 하나의 대상이자 함수이다.

String instanceof Object;   // true
String instanceof Function; // true

구조 함수(Constructor)

인스턴스(Instance)
여기에서 String, Number, Boolean은 new 연산자를 사용하여 해당하는 패키지 객체 인스턴스를 만들 수 있습니다.
📝 예를 들어 String의 선언(절선):

interface StringConstructor {
  new(value?: any): String;
  (value?: any): string;
  readonly prototype: String;
}
declare var String: StringConstructor;

📝 new 연산자를 사용하여 얻은 데이터는 개체(Object)입니다.

//  
typeof 'pp';                      // "string"
typeof new String('pp');          // "object"
new String() instanceof Object;   // true
//  
typeof 123;                       // "number"
typeof new Number(123);           // "object"
new Number() instanceof Object;   // true
//  
typeof true;                      // "boolean"
typeof new Boolean(true);         // "object"
new Boolean() instanceof Object;  // true

📝 패키지 객체 인스턴스의 valueOf () 함수를 호출하여 원래 값을 가져올 수 있습니다.

//  
let s = new String('pp');
s.valueOf();                // "pp"
typeof s.valueOf();         // "string"
//  
let n = new Number(123);
n.valueOf();                // 123
typeof n.valueOf();         // "number"
//  
let b = new Boolean(true);
b.valueOf();                // true
typeof b.valueOf();         // "boolean"

이류(Attention)
BigInt와 Symbol은 모두'불완전한 클래스'에 속하며 new 연산자를 지원하지 않습니다.
📝 예를 들어 BigInt 선언(절선):

interface BigIntConstructor {
  (value?: any): bigint;
  readonly prototype: BigInt;
}
declare var BigInt: BigIntConstructor;

BigInt 선언에는 new 연산자 관련 함수가 없습니다.

일반 함수(Function)

포장 대상도 일반 함수로 사용할 수 있다.
여기서 String(), Number() 및 Boolean() 함수는 모든 유형의 데이터를 명시적으로 변환할 수 있습니다.
또한 Object() 함수는 명시적 형식 변환에도 사용할 수 있지만 본문은 더 이상 전개되지 않습니다.
String
📝 예제 코드:

typeof String();    // "string"
String();           // ""
String('pp');       // "pp"
String(123);        // "123"
String(true);       // "true"
String(false);      // "false"
String(null);       // "null"
String(undefined);  // "undefined"
String([]);         // ""
String({});         // "[object Object]"

💡 팁1
String () 함수를 사용하여 객체를 변환할 때 JavaScript는 객체의 toString () 함수에 먼저 액세스하고 그렇지 않으면 원형 체인을 따라 위로 찾습니다.
🌰 밤 들기: String 실행 () {return'pp';})결과는 "pp"입니다. "[object Object]"가 아닙니다.
따라서 String() 함수는 값이 객체인지 여부를 판단하는 데 사용되지 않습니다(뒤집힐 수 있음).
💡 팁2
객체를 판단하는 데 자주 사용되는 방식은 Object입니다.prototype.toString({}) === '[object Object]'.
🌰 밤 들기: Object를 실행합니다.prototype.toString({ toString() { return 'pp'; } }) [object Object]가 반환됩니다.
Number
📝 예제 코드:

typeof Number();    // "number"
Number();           // 0
Number('');         // 0
Number('pp');       // NaN
Number(123);        // 123
Number(true);       // 1
Number(false);      // 0
Number(null);       // 0
Number(undefined);  // NaN
Number([]);         // 0
Number({});         // NaN

💡 팁
Number () 함수에 있어서 가장 실용적인 변환은true와false를 1과 0으로 바꾸는 것입니다.
Boolean
📝 예제 코드:

typeof Boolean();   // "boolean"
Boolean();          // false
Boolean('');        // false
Boolean('pp');      // true
Boolean(0);         // false
Boolean(1);         // true
Boolean(null);      // false
Boolean(undefined); // false
Boolean([]);        // true
Boolean({});        // true

💡 팁
경우에 따라 데이터에서 0과 1을 사용하여 실제 상태를 나타냅니다. 이때 Boolean()을 사용하여 상태를 판단할 수 있습니다.
BigInt
BigInt() 함수는 정수를 큰 정수로 변환하는 데 사용됩니다.
이 함수는 정수를 매개 변수로 받아들인다. 매개 변수가 부동점수나 비디지털 형식의 데이터라면 오류가 발생할 수 있다.
📝 예제 코드:

BigInt(123);        // 123n
BigInt(123n);       // 123n
typeof 123n;        // "bigint"
typeof BigInt(123); // "bigint"

BigInt & Number
주의해야 할 것은 Big Int와 Number는 엄격하게 같지 않다는 것이다.
📝 예제 코드:

123n === 123; // false
123n == 123;  // true

Symbol
Symbol () 함수는 Symbol 유형의 값을 만드는 데 사용됩니다.
이 함수는 문자열을 설명자 (매개 변수) 로 받아들여서 다른 종류의 값을 전달하면 문자열로 변환됩니다. (undefined 제외)
모든 symbol 값은 설명자가 똑같아도 유일무이하다는 것을 주의하십시오.
또한symbol 형식의 데이터는 Symbol () 함수를 통해서만 만들 수 있습니다.
📝 예제 코드:

//   Devtools  ， 
Symbol('pp');                   // Symbol(pp)
Symbol(123);                    // Symbol(123)
Symbol(null);                   // Symbol(null)
Symbol({});                     // Symbol([object Object])

//  
typeof Symbol('pp');            // "symbol"
Symbol('pp') === Symbol('pp');  // false

//  
Symbol('pp').description;       // "pp"
Symbol(123).description;        // "123"
Symbol({}).description;         // "[object Object]"
Symbol().description;           // undefined
Symbol(undefined).description;  // undefined

원래 값은 객체가 아닙니다(Primitive not Object)

🎃 재밌게 왔어요~

속성과 방법이 없음(No properties, no functions)

본고는 앞에서 언급한 바와 같이 "원시값은 어떠한 방법도 없는 비대상 데이터이다."
개체(Object)에 속성과 방법이 있을 수 있다는 것을 우리는 모두 알고 있다.
그러나 문자열은 대상이 아니기 때문에 문자열에 속성을 추가할 수 없습니다.
📝 작은 실험을 하다.

let a = 'chenpipi';
console.log(a.length);  // 8
//  
a.name = ' ';
console.log(a.name);    // undefined
//  
typeof a.slice;         // "function"
a.slice = null;
typeof a.slice;         // "function"

🎬 슬래그 소극장
이때 두철의 한 동료가 반박 기술을 사용했다.
찌꺼기 껍질 너 여기서 놀리지 마. 내가 평소에 버그를 쓰는데 코드를 쓰지 않을 때 문자열, 숫자, 부울 값에 호출할 수 있는 방법이 분명해!
📝 예를 들어 아래의 코드는 정상적으로 실행되고 예상에 부합되는 결과를 얻을 수 있다.

//  
let s = 'chenpipi';
s.toUpperCase();      // "CHENPIPI"
'ChenPiPi'.slice(4);  // "PiPi"
//  
let n = 123;
n.toString();         // "123"
(123.45).toFixed(2);  // "123.5"
//  
let b = true;
b.toString();         // "true"
false.toString();     // "false"

💡 쓸모없는 작은 지식
숫자의 글자 양 뒤에 함수를 직접 호출할 수 없다는 것을 발견했습니까?예를 들어 123을 실행합니다.toString()에는 SyntaxError(구문 오류)가 표시됩니다.
이것은 숫자(부점수) 자체가 소수점을 사용하기 때문이다.호출 함수도 소수점을 사용해야 하는데 이때 잘못된 뜻이 생겼다. (문자열과 부울 값은 이런 고민이 없다.)
이러한 경우, 우리는 괄호 () 를 사용하여 숫자를 감쌀 수 있다. 예를 들어 (123).toString();아니면 두 개의 연속적인 소수점을 사용하거나...함수를 호출합니다. 예를 들어 123...toString().
🤔 이상하다
그러면 문자열이 대상이 아닌 이상 왜 문자열에 속성과 방법이 있습니까?
돌이켜 생각해 보니 숫자는 숫자인데, 숫자에 어떻게 방법이 있겠는가?
이것은 확실히 논리에 부합되지 않지만, 이것은 또 실제와 모순된다.
어떻게 된 거야???

스턴트맨 (I can't translate this)

정답 발표~
😎 암암리에 조작하다.
문자열(string)을 예로 들면, 코드에서 문자열의 속성이나 방법을 읽을 때 JavaScript는 다음 작업을 묵묵히 수행합니다.

문자열을 new String () 방식으로 임시 포장 대상의 실례를 만듭니다

창설된 대상을 통해 우리의 코드 논리(속성 읽기 또는 실행 함수)를 실행합니다

임시 대상은 더 이상 사용하지 않고 소각될 수 있다.

📝 아래의 밤처럼:

let a = 'chenpipi';
console.log(a);   // "chenpipi"
// ------------------------------
let b1 = a.length;
console.log(b1);  // 8
//  ：
let b2 = (new String(a)).length;
console.log(b2);  // 8
// ------------------------------
let c1 = a.toUpperCase();
console.log(c1);  // "CHENPIPI"
//  ：
let c2 = (new String(a)).toUpperCase();
console.log(c2);  // "CHENPIPI"

숫자(number)와 부울 값(boolean)은 같지만 숫자는 new Number () 를 통해 임시 대상을 만들고, 부울 값은 new Boolean () 을 통해 만듭니다.
📝 위의 예를 제외하고 가장 유력한 증명은 바로 그들의 구조 함수이다.

'chenpipi'.constructor === String;  // true
(12345).constructor === Number;     // true
true.constructor === Boolean;       // true

이 모든 것은 JavaScript가 암암리에 완성한 것이고 그 과정에서 발생한 임시 대상은 일회성이다(다 쓰면 잃어버린다).
😮 그렇구나
무호, 이렇게 되면 말이 통한다!
이것 또한 우리가 문자열의 속성과 방법에 접근할 수 있지만 속성을 증가하거나 수정할 수 없는 이유를 설명할 수 있다.
그것은 우리가 실제적으로 조작하는 목표가 사실 자바스크립트가 만든 임시 대상이기 때문이지, 문자열 자체가 아니기 때문이다!
그래서 우리의 증가나 수정 작업은 사실상 효력이 발생했고, 단지 임시 대상에 효력이 발생했을 뿐이다!
📝 이렇게

//  ：
let a = 'chenpipi';
a.name = ' ';
console.log(a.name);  // undefined

//  ：
let a = 'chenpipi';
(new String(a)).name = ' ';
console.log(a.name);  // undefined

//  ：
let a = 'chenpipi';
let temp = new String(a);
temp.name = ' ';
console.log(a.name);  // undefined

요약(Summary)

🎉 이상은 이 글의 전부입니다.
마지막으로 다음과 같이 요약해 보겠습니다.

대부분의 원시 유형은 상응하는 포장 대상이 있다

어떤 포장 대상은 new, 어떤 것은 안 된다

포장 대상은 일반적으로 현식의 유형 전환에 사용된다

대상에 속성과 방법이 있다

원시값에 속성과 방법이 없다

원시값에도 속성과 방법이 있을 수 없다

그러나 우리는 조작 대상처럼 원시 값을 조작할 수 있다

이것은 자바스크립트가 코드를 실행할 때 몰래 작은 동작을 하기 때문이다

JavaScript는 임시 패키지 객체로 원래 값 대신 작업을 수행합니다.

우리는 평소에 코드를 쓸 때 이 일을 잘 눈치채지 못하지만, 실제로는 이것도 우리가 코드를 쓰는 데 영향을 주지 않는다.
그래서 이 문장은 헛되이 보지 않습니까?
🙉 네, 다 그런 것도 아니고~
자기를 알고 상대방을 알면 백전백승한다.
이런 쓸데없는 지식을 습득한 것도 자바스크립트에 대한 이해가 깊어진 셈이죠. 적어도 허풍을 떨 수 있을 거예요.
관련 자료
JavaScript 고급 프로그래밍(버전 4).
JavaScript Premium Guide(6판)
Primitive - MDN:https://developer.mozilla.org/en-US/docs/Glossary/Primitive
The history of “typeof null”:https://2ality.com/2013/10/typeof-null.html
JavaScript 원본 값과 포장 대상에 대한 이 글은 여기에 소개되었습니다. JS 원본 값과 포장 대상에 대한 더 많은 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!