Javascript - DeepDive(11) : Primitive Type

­이승환·2021년 9월 11일
0

Javascript DeepDive

목록 보기
11/13

자바스크립트에 대해서..


자바스크립트는 OOP 인지 함수형 언어인지 헷갈린다. ES2015+ 에 새로 등장한 class와 extends 등의 기능을 통해서 클래스와 상속을 흉내? 낼 수 있게 됨으로써 OOP로 취급을 해야하는 것인가..? 아니면 함수도 사실 오브젝트인 만큼 객체로 취급을해야하며 단지 prototype, Symbol 등의 새로운 기능들을 통해 효율을 낼 수 있는 함수형 언어인가?

원시타입(Primitive Type)


자바스크립트의 원시타입은 아래와 같다.
boolean : true, false
null
undefined
number
string
symbol : ECMA2015 에 새로 생긴 원시타입이며 iterator에서 주로 사용

그 외 Object 가 존재한다. 간단히 말하면 key-value 저장소이다

const obj = {
		key : value,
        key2 : value2
	}

한마디로 정의하면 위 6개 기본 원시타입 + 1개의 오브젝트 형태로 구성된다(함수, 클래스...)

// Primitive Types
true instanceof Object; // false -> boolean
null instanceof Object; // false -> null
undefined instanceof Object; // false -> undefined
0 instanceof Object; // false -> number
'bar' instanceof Object // false -> string

// Non-primitive types
const foo = function () {}
foo instanceof Object; // true -> function;

특징 1
원래는 원시타입에는 어떠한 메소드도 붙어있지 않다. 또한 원시타입은 immutable 속성을 갖는다. 자기 자신을 변경할 수 있는 메소드를 갖지 않기 때문이다. 물론 변수에 원시 타입을 언제든 재할당하고, 자료형을 바꿀 수 있지만 이것은 메모리 저장장소에 실제 값을 교체하는 것이 아닌 다른 메모리 주소에 값을 할당하고 매칭을 다르게 하는 방식이다. 3이라는 값을 저장하고 있는 8바이트 메모리에 값을 문자로바꾼다..? 말도 안 된다.

특징 2

원시타입은 참조로 저장되는 Object 와 다르게 값 그 자체로 저장되어 있다. 값이 동일한지 체크할 때 앞의 문장이 정확히 무슨 의미인지 알 수 있다.

"dog" === "dog"; // true 
14 === 14; // true

{} === {}; // false
[] === []; // false
(function () {}) === (function () {}); // false

함수

함수는 특별한 프로퍼티를 가진 새로운 형태의 객체이다.
아래와 같이 사용할 수도 잇다.

const foo = function (baz) {} ;
foo.name; // "foo"
foo.length; // 1

메소드

메소드는 함수와 같이 객체의 프로퍼티이다.

const foo = {};
foo.bar = function () { console.log("baz"); };
foo.bar(); // "baz"

생성자 함수

생성자 함수란 리턴값으로 생성하는 함수를 객체 그 자체로서 반환하는 함수이다. 같은 코드를 공유하는 여러가지 객체를 같고 싶으면 생성자 함수를 삽입해야한다. 자세한 내용은 추후 클래스와 프로퍼티와 관련된 포스팅에서 진행할것 이다.

const Foo = function () {};
const bar = new Foo();
bar; // {}
bar instanceof Foo; // true
bar instanceof Object; // true

래퍼오브젝트

String Number Boolean 과 같은 원시타입을 new 키워드로 생성하면 원시타입에 대한 래퍼 오브젝트가 생성된다.

String(1337); // "1337"
String(true); // "true"
String(null); // "null"
String(undefined); // "undefined"
String(); // ""
String("dog") === "dog"; // "true"
typeof String("dog"); // "string"

new String("dog");
typeof pet; // "object"
pet === "dog"; // false

오토박싱

원시타입과 new String 모두 String이라는 자료형을 토대로 선언이 된다. 하지만 실제 사용해보면 a.length(여기서 a는 string) 을 우리는 종종 사용하곤 한다. 원시타입은 메소드가 없다고 했는데 왜일까?

const pet = new String("dog");
pet.constructor === String; // true
String("dog").constructor === String; // true

정답은 오토박싱 때문이다. 우리가 특정한 원시타입에서 프로퍼티나 메소드를 호출하려 할때 자바스크립트는 임시 래퍼 오브젝트로 바꾼 뒤 프로퍼티나 메소드를 접근하려고 한다. 이 과정에서 원본에는 아무런 영향을 주지 않는다.

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

위의 예에서, length 라는 프로퍼티에 접근하기 위해 자바스크립트는 foo를 오토박싱하고 이것을 래퍼 오브젝트에 넣는다. 그리고 래퍼 오브젝트의 length 프로퍼티에 접근하고 값을 이용한 뒤에는 지운다. 이 모든 과정은 foo라는 원시타입 변수에 전혀 영향을 미치지 않는다.

물론 null , undefined 에는 사용되지 않는다.

profile
Mechanical & Computer Science

0개의 댓글