1. 원시자료형(premitive data type)
원시자료형은 객체가 아니면서 메서드를 가지지 않는 데이터를 말한다.
javascript의 원시자료형에는 string, number, bigint, boolean, symbol, undefined, null 이 있다.
모든 원시값은 불변값이다. 즉 변형할 수 없다.
여기서 원시값 자체와 원시값을 할당한 변수를 혼동하지 않아야 한다.
변수에는 새로운 값을 할당할 수 있지만, 이미 생성한 원시값은 객체, 배열, 함수와 달리 변형할 수 없다.
// 문자열 메서드는 문자열을 변형하지 않음
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz
// 배열 메소드는 배열을 변형함
var foo = [];
console.log(foo); // []
foo.push("plugh");
console.log(foo); // ["plugh"]
// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
bar = bar.toUpperCase(); // BAZ
2. 원시값의 메서드와 프로퍼티
여기에 작은 string 하나가 있습니다.
const str = 'little';
이 string를 대문자로 출력해보고 길이를 알아봅시다.
console.log(str.toUpperCase()); // LITTLE
console.log(str.length); // 6
아 선생님 너무 이지한 것 아닙니까 하면서 나가지 말고 기다려보세요.
앞서 원시자료형은 객체도 아니고 메서드를 가지지 않는다고 말하였다.
하지만 어찌된 일인지 우리는 문자열에 자연스럽게 메서드를 사용하고 프로퍼티를 출력했다.
이래도 문자열이 원시값입니까? -> 예.
3. 원시값을 객체처럼 사용하기
이처럼 원시값을 객체처럼 다룰(메서드, 프로퍼티 접근) 수 있는 것은 javascript가 내부적으로 해당 원시값을 래핑하는 래퍼 객체(wrapper object)를 생성해주기 때문이다.
앞서 열거한 원시 데이터형 중에 undefined와 null을 제외한 데이터형들은 래퍼 객체를 가진다.
문자열의 래퍼 객체는 String, 숫자형의 래퍼 객체는 Number ...
원시값에서 프로퍼티나 메서드를 호출하면 js는 해당 원시값을 감싸는 래퍼 객체의 속성과 유틸리티 메서드에 접근을 제공한 후 해당 객체를 폐기한다(garbage collected).
// 래퍼 객체는 접근 후 즉시 폐기되기 때문에
// console.log를 통해 접근할 시점에는 추가한 프로퍼티와 메서드를 호출할 수 없다.
const name = 'Darth Vader';
name.alignment = 'Lawful evil';
name.tellTheTruth = () => {
console.log('Luke, I am your father!');
};
console.log(name.alignment); //=> undefined
name.tellTheTruth(); //=> Uncaught TypeError: name.tellTheTruth is not a function
래퍼 객체를 명시적으로 인스턴스화하면 일반 객체처럼 동작하도록 만들 수 있으며 자동으로 폐기되는 것을 방지할 수 있다.
const quote = new String('My precious');
quote.character = 'Gollum';
quote.showQuote = function() {
console.log(`'${this}' is a quote from '${this.character}'.`);
};
quote.showQuote(); //=> "'My precious' is a quote from 'Gollum'."
생성자를 사용하여 래퍼 객체를 인스턴스화하고 변수를 해당 객체로 초기화하면
실제로 변수에 할당되는 것은 원시값이 아닌 객체 자체에 대한 참조이다.
각 래퍼 객체는 서로 다른 참조를 가지게 되며 아래와 같은 요상한 결과가 나타나게 된다.
// 래퍼 객체와 해당 원시값은 항상 다르다.
new String('some string') === 'some string'; //=> false
new Number(42) === 42; //=> false
new Boolean(true) === true; //=> false
// 동일한 값을 래핑하는 두 객체도 서로 다르다.
new String('some string') === new String('some string'); //=> false
new Number(42) === new Number(42); //=> false
new Boolean(true) === new Boolean(true); //=> false
const num = new Number(1)
num + 1 === 2; //=> true
num + num === 2; //=> true
num === 1 //=> 😎false😎
const zero = new Number(0);
typeof 0; //=> 'number'
typeof zero //=> 😎'object'😎
if(zero) console.log('zero is true') //=> 😎'zero is true'😎
// 래퍼 객체의 valueOf() 메서드는 원시값을 반환한다
num.valueOf() === 1 //=> true
reference
https://developer.mozilla.org/docs/Glossary/Primitive
https://programmingwithmosh.com/javascript/javascript-wrapper-objects/
1. 원시자료형(premitive data type)
원시자료형은 객체가 아니면서 메서드를 가지지 않는 데이터를 말한다.
javascript의 원시자료형에는 string, number, bigint, boolean, symbol, undefined, null 이 있다.
모든 원시값은 불변값이다. 즉 변형할 수 없다.
여기서 원시값 자체와 원시값을 할당한 변수를 혼동하지 않아야 한다.
변수에는 새로운 값을 할당할 수 있지만, 이미 생성한 원시값은 객체, 배열, 함수와 달리 변형할 수 없다.
// 문자열 메서드는 문자열을 변형하지 않음
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz
// 배열 메소드는 배열을 변형함
var foo = [];
console.log(foo); // []
foo.push("plugh");
console.log(foo); // ["plugh"]
// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
bar = bar.toUpperCase(); // BAZ
2. 원시값의 메서드와 프로퍼티
여기에 작은 string 하나가 있습니다.
const str = 'little';
이 string를 대문자로 출력해보고 길이를 알아봅시다.
console.log(str.toUpperCase()); // LITTLE
console.log(str.length); // 6
아 선생님 너무 이지한 것 아닙니까 하면서 나가지 말고 기다려보세요.
앞서 원시자료형은 객체도 아니고 메서드를 가지지 않는다고 말하였다.
하지만 어찌된 일인지 우리는 문자열에 자연스럽게 메서드를 사용하고 프로퍼티를 출력했다.
이래도 문자열이 원시값입니까? -> 예.
3. 원시값을 객체처럼 사용하기
이처럼 원시값을 객체처럼 다룰(메서드, 프로퍼티 접근) 수 있는 것은 javascript가 내부적으로 해당 원시값을 래핑하는 래퍼 객체(wrapper object)를 생성해주기 때문이다.
앞서 열거한 원시 데이터형 중에 undefined와 null을 제외한 데이터형들은 래퍼 객체를 가진다.
문자열의 래퍼 객체는 String, 숫자형의 래퍼 객체는 Number ...
원시값에서 프로퍼티나 메서드를 호출하면 js는 해당 원시값을 감싸는 래퍼 객체의 속성과 유틸리티 메서드에 접근을 제공한 후 해당 객체를 폐기한다(garbage collected).
// 래퍼 객체는 접근 후 즉시 폐기되기 때문에
// console.log를 통해 접근할 시점에는 추가한 프로퍼티와 메서드를 호출할 수 없다.
const name = 'Darth Vader';
name.alignment = 'Lawful evil';
name.tellTheTruth = () => {
console.log('Luke, I am your father!');
};
console.log(name.alignment); //=> undefined
name.tellTheTruth(); //=> Uncaught TypeError: name.tellTheTruth is not a function
래퍼 객체를 명시적으로 인스턴스화하면 일반 객체처럼 동작하도록 만들 수 있으며 자동으로 폐기되는 것을 방지할 수 있다.
const quote = new String('My precious');
quote.character = 'Gollum';
quote.showQuote = function() {
console.log(`'${this}' is a quote from '${this.character}'.`);
};
quote.showQuote(); //=> "'My precious' is a quote from 'Gollum'."
생성자를 사용하여 래퍼 객체를 인스턴스화하고 변수를 해당 객체로 초기화하면
실제로 변수에 할당되는 것은 원시값이 아닌 객체 자체에 대한 참조이다.
각 래퍼 객체는 서로 다른 참조를 가지게 되며 아래와 같은 요상한 결과가 나타나게 된다.
// 래퍼 객체와 해당 원시값은 항상 다르다.
new String('some string') === 'some string'; //=> false
new Number(42) === 42; //=> false
new Boolean(true) === true; //=> false
// 동일한 값을 래핑하는 두 객체도 서로 다르다.
new String('some string') === new String('some string'); //=> false
new Number(42) === new Number(42); //=> false
new Boolean(true) === new Boolean(true); //=> false
const num = new Number(1)
num + 1 === 2; //=> true
num + num === 2; //=> true
num === 1 //=> 😎false😎
const zero = new Number(0);
typeof 0; //=> 'number'
typeof zero //=> 😎'object'😎
if(zero) console.log('zero is true') //=> 😎'zero is true'😎
// 래퍼 객체의 valueOf() 메서드는 원시값을 반환한다
num.valueOf() === 1 //=> true
reference
https://developer.mozilla.org/docs/Glossary/Primitive
https://programmingwithmosh.com/javascript/javascript-wrapper-objects/
