Learning Javascript - 1. 리터럴과 변수, 상수, 데이터 타입

Leanring Javascript(러닝 자바스크립트) 읽고 개인적으로 정리한 내용입니다.
리터럴과 변수, 상수, 데이터 타입에 대해서 설명 한다.

변수와 상수

변수(Variable)

변수(Variable)란 간단히 말해 이름이 붙은 값으로, 변수라는 이름이 암시하듯 값은 언제든 바뀔 수 있다.

1	let currentTempC = 22; // 섭씨온도

이 문은 변수 currentTempC를 선언(생성)하고 초깃값을 할당하는 두 가지 일을 한다. 그래서 currentTempC값을 언제든 바꿀 수 있다.

1	currentTempC = 22.5;

변수를 선언 할때 꼭 초깃값을 지정해야 하는 건 아니다. 초깃값을 할당하지 않으면 암시적으로 특별한 값 undefined가 할당 된다.

1	let targetTempC; // let targetTempC = undefined;와 같다.

let 문 하나에 변수 여러 개를 선언할 수 있다.

1	let targetTempC, room1 = "conference_room_a", room2 = "lobby";

console

> targetTempC
< undefined
> room1
< "conference_room_a"
> room2
< "lobby"

targetTempC 값을 할당하지 않았으므로 암시적으로 undefined가 할당 되고, room1과 room2는 문자열(텍스를)를 할당하였기 때문에 문자열 변수 이다.

상수(Constant)

상수도 변수와 마찬가지로 값을 할당받을 수 있지만, 한 번 할당한 값을 바꿀 수 없다.

1	const ROOM_TEMP_C = 21.5, MAX_TEMP_C = 30;

변수보다 상수를 쓰도록 노력하자. 상수를 사용하면 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일이 줄어 든다.

식별자 이름

변수와 상수, 함수 이름을 식별자(identifier)라 부른다. 그리고 식별자에는 규칙이 있다.

식별자는 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야 한다.
식별자에는 글자와 숫자, 달러 기호, 밑줄만 쓸 수 있다.
𝜋 나 ⊇ 같은 유니코드 문자도 쓸 수 있다.
예약어는 식별자로 쓸 수 없다

자바 스크립트의 식별자 표기법

카멜 케이스(camel case) : 낙타 혹처럼 보이게 currentTempC 처럼 문자가 변경 될때 대문자를 붙이는 방법이다.
스네이크 케이스(snake case) : current_temp_c 스네이크 케이스에 다라 이름을 만든 방법이다.

리터럴

리터럴(literal)이란 값을 프로그램 안에서 직접 지정한다는 의미이다.
리터럴과 식별자의 차이를 예를 들면 room1변수에 값 "confrence_room_a"은 할당 했을때, room1은 변수를 가리키는 식별자이며, "confrence_room_a" 문자열 리터럴인 동시에 room1의 값이다.

let room1 = "conference_room_a"; // "conference_room_a"(따옴표 안)은 리터럴이다.

let currentRoom = room1;         // currentRoom의 값은 room1값("conference_room_a")과 같다.

currentRoom = conference_room_a  // conference_room_a란 식별자가 존재하지 않으므로 에러가 난다.

console

1 2	Uncaught ReferenceError: conference_room_a is not defined at <anonymous>:3:1

원시 타입과 객체

자바스크립트에의 값은 원시 값(primitive) 또는 객체(object) 이다.
원시 타입 6가지

숫자
문자열
불리언
null
undefined
심볼(Symbol)

원시 값과 다르게 객체는 여러 가지 형태와 값을 가질 수 있다

Array
Date
RegExp
Map과 WeakMap
Set과 WeakSet

숫자

자바스크립트는 10진수, 16진수, 지수 등 어떤 리터럴 형식을 사용하더라도 결국 숫자는 더블 형식으로 저장 된다.

let count = 10;           // 숫자 리터럴. count는 더블이다
const blue = 0x000ff;     // 16진수, 16진수ff는 10진수 255와 같다.
const umask = 0o0022;     // 8진수, 8진수 22는 십진수 18과 같다.
const roomTemp = 21.5;    // 십진수
const c = 3.0e6;          // 지수 (3.0 x 10^6 = 3,000,000)
const e = -1.6e-19;       // 지수 (-1.6 x 10^-19 = 0.00000000000000000016)
const inf = Infinity;
const ninf = -Infinity;
const nan = NaN;          // "숫자가 아님"

console

> count
< 10
> blue
< 255
> umask
< 18
> roomTemp
< 21.5
> c
< 3000000
> e
< -1.6e-19
> inf
< Infinity
> ninf
< -Infinity

또한 숫자에 대응하는 Number 객체에는 중요한 숫자형 값에 해당하는 유용한 프로퍼티가 있다.

const small = Number.EPSILON;             // 1에 더했을 때 1과 구분되는 결과를 만들 수 있는 가장 작은값이다. 근사치 2.2e-16
const bigInt = Number.MAX_SAFE_INTEGER;   // 표현할 수 있는 가장 큰 정수
const max = Number.MAX_VALUE;             // 표현할 수 있는 가장 큰 숫자
const minInt = Number.MIN_SAFE_INTEGER;   // 표현할 수 있는 가장 작은 정수
const min = Number.MIN_VALUE;             // 표현할 수 있는 가장 작은 숫자
const nInf = Number.NEGATIVE_INFINITY;    // -Infinity
const nan = Number.NaN;                   // Nan
const inf = Number.POSITIVE_INFINITY;     // Infinity

console

> small
< 2.220446049250313e-16
> bigInt
< 9007199254740991
> max
< 1.7976931348623157e+308
> minInt
< -9007199254740991
> min
< 5e-324
> nInf
< -Infinity
> nan
< NaN
> inf
< Infinity

특수문자

코드	설명	예제
\n	줄바꿈 문자	“Line1\nLine2”
\r	캐리지 리턴(Carriage return)	“Windows line 1\r\nWindows line2”
\t	탭	“Speed:\t60kph”
\’	작은따옴표, 꼭 이스케이프할 필요가 없어도 작은따옴표를 쓸 수 있는 곳에서는 항상 이스케이프한 작은 따옴표를 쓸 수 있다	“Don\’t”
\”	큰따옴표, 꼭 이스케이프할 필요가 없어도 큰따옴표를 쓸 수 있는 곳에는 항상 이스케이프한 큰따옴표를 쓸 수 있다.	‘Sam Said \”hello\”.’
`	백틱. ES6에서 새로 생겼다.	`New in ES6: \` strings.`
\$	달러 기호. ES6에서 새로 생겼다.	`New in ES6: ${interpolation}`
\	역슬래시	“Use \\ to represent \!”

템플릿 문자열

문자열 병합을 통해 변수나 상수를 문자열 안에 쓸 수 있다.

ES5

1 2	var currentTemp = 19.5; const message = "The current temperature is " + currentTemp + "\u00b0C";

ES6에서는 문자열 템플릿(template)기능이 도입댔다.

ES6

1 2	var currentTemp = 19.5; const message = `The current temperature is ${currentTemp} \u00b0C`;

숫자와 문자열

숫자를 따옴표 안에 넣으면 그건 숫자가 아니라 문자열이다. 하지만 자바스크립트는 필요하다면 숫자가 들어 있는 문자열을 자동으로 숫자로 바꾼다.
숫자열과 문자열은 명확하게 표시해주는것이 좋다.

1 2	const result1 = 3 + "30"; // 3이 문자열로 바뀐다. const result2 = 3 * "30"; // '30'이 숫자로 바뀐다.

console

> result1
< "330"
> result2
< 90

심볼

심볼(symbol)은 유일한 토큰을 나타내기 위해 ES6에서 도입한 새 데이터 타입이다.

1
2
3

const RED = Symbol("The color of a sunset!");
const ORANGE = Symbol("The color of a sunset!");
RED === ORANGE

console

> false

null과 undefined

let currentTemp;              // 암시적으로 undefined
const targetTemp = null;      // null 값이므로 아직 모르는 값
currentTemp = 19.5;           // 19.5라는 값이 있음.
currentTemp = undefined;

객체

1	const obj = {};

객체의 콘텐츠는 프로퍼티(property) 또는 멤버(member)라고 부른다. 프로퍼티 이름은 반드시 문자열 또는 심볼이어야 하며, 값은 어떤 타입이든 상관없다.

1	obj.color = "yellow";

프로퍼티 이름에 유요한 식별자를 써야 멤버 접근 연산자(member access operator) .를 사용할 수 있다. 프로퍼티 이름에 유요한 식별자가 아닌 이름을 쓴다면 계산된 멤버 접근 연산자(computed member access operator) []를 써야 한다.

1
2
3

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

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

1
2
3

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

배열

const a1 = [1, 2, 3, 4]             // 숫자로 구성된 배열
const a2 = [1, 'tow', 3, null]      // 여러 가지 타입으로 구성된 배열
const a3 = [                        // 객체가 들어있는 배열
  {name: "Ruby", hardness: 9},
  {name: "Diamond", hardness: 10},
  {name: "Topaz", hardness: 8}
]

참조

http://m.hanbit.co.kr/store/books/book_view.html?p_code=B2328850940