[책] 러닝 자바스크립트(2) - 원시타입과 객체

자바스크립트의 값은 원시 값(primitive) 또는 객체(object)입니다. 문자열과 숫자 같은 원시타입은 불변(immutable)입니다.

자바스크립트의 6가지 원시타입

• 숫자(Number)
• 문자열(String)
• 불린(boolean)
• null
• undefined
• 심볼(Symbol)

불변성이란 말이 변수의 값이 바뀔 수 없다는 뜻은 아니다.

let str = 'hello';
str = 'world';

문자열 str은 첫번째로 'hello'라는 불변값을 할당 받았고 다시 'world'라는 불변값을 할당받았다고 생각해야 한다.

자바스크립트의 객체

원시값과는 달리 객체는 여러 가지의 형태와 값을 가질 수 있다. 객체의 유연한 성질 때문에 커스텀 데이터 타입을 만들 때 객체를 많이 사용합니다.

자바스크립트 내장객체

• Array
• Date
• RegExp
• Map과 WeakMap
• Set과 WeakSet

원시 타입 중 숫자, 문자, 불린에 각각 대응하는 객체 타입인 Number, String, Boolean도 있다.
해당 객체 타입으로 타입을 변환할 수도 있다.

let number = 1;
String(number); // 문자열 '1'로 변환된다.

숫자

3이나 5.5처럼 컴퓨터가 정확히 나타낼 수 있는 숫자도 있지만, 근사치로만 표현할 수 있는 숫자도 많다. 𝝿(파이)와 같은 숫자는 절대로 컴퓨터로 표현할 수 없기 때문에 자바스크립트에서는 실제 숫자의 근사치를 저장할 때 IEEE-754 부동소수점 숫자 형식을 사용한다. 이 형식은 'double'이라고 부른다. 자바스크립트에는 숫자형 데이터가 하나뿐이다. 초보자들이 쉽게 접근할 수 있는 반면에 고성능 정수 연산이나 정밀한 소수점 연산이 필요한 앱에서 쓸 수 없는 것 또한 사실이다.

자바스크립트는 10진수, 2진수, 8진수, 16진수 네가지 숫자형 리터럴을 인식한다.

let count = 10;         //숫자 리터럴, 10진수, 더블형
const blue = 0x0000ff;  //16진수 === 10진수 255
const umask = 0o0022;   //8진수 === 10진수 18
const c = 3.0e6;        //지수 (3.0 * 10^6 = 3,000,000 )
const inf = Infinity;
const nan = NaN;         //숫자가 아님

※ 10진수, 16진수, 지수 등 어떤 리터럴 형식을 사용하더라도 결국 숫자는 더블 형식으로 저장됩니다. 숫자를 간편하게 표시할 수 있도록 제공된 것 뿐입니다.

문자열

문자열은 텍스트 데이터이다. string이라는 단어는 1800년대 후반 식자공들이 일정한 순서로 배열된 심볼을 가리킬 때 썻던 표현이라고 한다.

자바스크립트 문자열은 유니코드 텍스트이다. 유니코드는 텍스트 데이터에 관한 표준이며 사람이 사용하는 언어 대부분의 글자와 심볼에 해당하는 코드 포인트(문자에 부여한 고유한 숫자값)를 포함하고 있다.(여기서 말하는 '언어'에는 이모티콘까지 포함된다) 유니코드 자체는 모든 언어의 텍스트를 나타낼 수 있지만, 유니코드를 사용하는 소프트웨어가 모든 코드 포인트를 정확히 렌더링한다고 보장할 순 없다.

역슬래시()

const dialog1 = "He looked up and said \"don't do that!\" to Max.";
const dialog2 = 'He looked up and said "don\'t do that!" to Max.';

따옴표 앞에 역슬래시를 붙여줌으로 문자열이 끝나지 않았음을 자바스크립트에 알려줄 수 있다.

백틱(`)

let currentTemp = 22.5;

const message = "The current temperature is" + currentTemp;
//const message = `The current temperature is ${currentTemp}`;

문자열 안에 변수나 상수를 간편하게 쓰기 위해서 사용한다. 문자열 템플릿(templete)이라고도 하며 문자열 채우기(interpolation)라 부르기도 한다. 사용할 변수나 상수를 ${} 안에 써주기만 하면 된다. 여러줄 문자열을 표현할 때도 사용할 수 있다.

const multiline = `line1
line2`;

숫자와 문자열

자바스크립트는 숫자와 문자열을 자동으로 바꿔준다.

const result1 = 3 + '30'; // 3이 문자열로 바뀌고 결과는 문자열 '330'
const result2 = 3 * '30'; // '30'이 숫자로 바뀌고 결과는 숫자 90

사용자 입력이 거의 항상 문자열로 들어오기 때문에 숫자로 바꿔줘야 하는 경우가 있을 것이다. 앞서 언급됐던 Number 객체를 이용하면 손쉽게 숫자형으로 바꿀 수 있다.

심볼

심볼은 유일한 토큰을 나타내기 위해 ES6에서 도입한 새 데이터 타입입니다. 심볼을 항상 유일합니다. 다른 어떤 심볼과도 일치하지 않습니다. 이런 면에서 심볼과 객체는 유사합니다. 심볼은 항상 유일하다는 점을 제외하면 원시 값을 특징을 모두 가지고 있으므로 확장성 있는 코드를 만들 수 있습니다.

const RED = Symbol("color of sunset!");
const ORANGE = Symbol("color of sunset!");
RED === ORANGE /// false

심볼을 만들때 new 키워드를 사용할 수 없고 대문자로 시작하는 식별자는 new와 함께 쓰는 것의 예외사항임을 기억하자!

null과 undefined

두 값 모두 존재하지 않는 것을 나타낸다.

일반적인 규칙은 null은 프로그래머에게 허용된 데이터 타입이며, undefined는 자바스크립트 자체에서 사용한다고 생각하면 쉽다.

let currentTemp;  // 암시적으로 undefined
const targetTemp = null // 대상 온도는 null
currentTemp = 19 // 현재 온도에 값이 할당됨
currentTemp = undefined // 권장하지 않음

객체

객체는 여러 가지 값이나 복잡한 값을 나타낼 수 있고 변할 수도 있습니다. 객체의 본질은 컨테이너입니다. 컨테이너의 내용물은 바뀔 수 있지만 내용물이 바뀐다고 컨테이너가 바뀌는 건 아닙니다.

객체의 콘텐츠는 프로퍼티(property) 또는 멤버(member)라고 부른다. 프로퍼티는 이름(키)과 값(밸류)로 구성된다. 키는 반드시 문자열이나 심볼이어야 하며, 값은 어떤 타입이든 상관없고 객체 또는 함수여도 괜찮다.

let obj = {};

obj.color = 'yellow';

프로퍼티 키에 유효한 식별자를 써야 멤버 접근 연산자인(.)을 쓸 수 있고 유효하지 않은 식별자는 ([]) 대괄호로 접근할 수 있다. 물론 유효한 식별자도 대괄호로 접근할 수 있다.

obj["not and identifier"] = 3;
obj["not and identifier"]; // 3
obj["color"]; //'yellow'

심볼 프로퍼티에 접근할 때도 대괄호를 사용한다.

const SIZE = Symbol();
obj[SIZE] = 8;
obj[SIZE]; // 8

함수를 추가할 수도 있다.

obj.print = function() {
              console.log('hello');
              };

함수 뒤에 괄호를 붙여 호출할 수 있다.

obj.print(); // 'hello'

객체에서 프로퍼티를 제거할 때는 delete 연산자를 사용한다.

delete obj.color; // 'yellow'가 삭제됨
delete obj.print; // print 함수 삭제됨