[자바스크립트] ES6에서 변수와 리터럴 상수 등 사용 방법과 개념

책 : 러닝 자바스크립트 : ES6로 입문하는 웹 개발

자바스크립트에서는 리터럴과 상수 그리고 변수를 알아야 한다.

1) 변수(Variable)

- 이름이 붙은 값.

- 언제든지 변경 가능.

- let number = 22; 와 같이 선언(let은 ES6에서 생성됨. 그 전에는 var만 사용 가능) 

  변수 number를 선언(즉, 생성)하고 초기값을 할당(22)하는 2가지를 나타냄.

- 초기값을 반드시 지정해야 하는것은 아니지만, 할당하지 않으면 undefined가 출력.

- 다중 선언 가능.   let num01 = 11 , num02 = 22, num03;

- 값이 수시로 변할 상황에서 변수를 사용한다.

2) 상수(Constant)

- const 키워드 사용. Ex)  const ROOM_NUMBER  = 1004;

- ES6에서 새로 생성됨.

- 변수와 마찮가지로 값을 할당할 수 있지만, 한 번 할당된 값은 변경이 불가.

- 상수 이름은 대문자와 밑줄만 사용해야 한 눈에 상수인지 파악. 가독성이 높음.

- 상황에 따라 다르지만, 될 수 있으면 변수보다 상수를 사용하는 것이 바람직함.

- 한 번 정해진 값이 변하지 않을 경우 상수로 선언한다.

3) 식별자(Identifier) 규칙

- 글자, 달러 기호 $ , 그리고 밑줄 _ 로만 시작해야 함(숫자 시작 불가)

- 글자, 달러 기호 $ , 그리고 밑줄 _ , 숫자로만 쓸 수 있음.

- 예약어(또는 키워드)는 쓸 수 없음.

- 카멜 케이스(Camel Case) : 두 단어 이상일때, 첫 글자는 대문자로 작성. 

  이러한 형태가 낙타의 혹처럼 보인다해서 이렇게 부른다. examBestScore 이런식으로..

- 스네이크 케이스(Snake Case) : 뱀처럼 _를 쓰는 방식.  exam_best_score 이런식으로..

- 대문자로 시작은 안 됨.

4) 리터럴(Literal)

- 위 num01... 변수에 선언한 11 22 33이 모두 리터럴.

- 리터럴이란 값을 프로그램 안에서 직접 지정한다는 의미이다.

- 리터럴과 식별자의 차이.

   let num01 = 11

에서 num01은 변수를 가리키는 식별자, 11은 숫자형 리터럴이자 num01의 값. 따옴표를 통해 구별함.

5) 원시 타입(Primitive)과 객체(Object)

- 원시 타입의 종류 : 숫자, 문자열, 불리언, null, undefined, Symbol(심볼)

- 원시 타입은 불변함. 숫자는 항상 같은 숫자. 문자열도 항상. 같음.

- 객체 : 원시 값과 달리 객체는 여러 가지 형태와 값을 갖을 수 있음

- 자바스크립트에서 내장된 객체 종류도 많다 : Array, Date, Map, Set ...

/////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////

<숫자>

- 자바스크립트에서는 숫자형 데이터 타입이 하나밖에 존재하지 않음.  바로, 더블(Double) 형식.

<문자열>

- 자바스크립트 문자열은 유니코드 텍스트.

- 자바스크립트 문자열 리터럴은 작은 따옴표, 큰 따옴표, 백틱(Backtick)을 사용.

- 이스케이프 문자. 문자열안에 따옴표 쓰거나...   \를(역슬레시)를 써줘야 문자열로 인식

- 문자열은 작은, 큰 따옴표 모두 가능하지만, 큰 따옴표를 추천함.

- 특수문자 :  \n \r \t \' \" \` \$ \\ 등등...

<템플릿 문자열>

- 문자열 병합 : + 기호로 숫자 등을 문자열으로 만들어 사용.

- ES6 이전에는 문자열 병합뿐이었지만, ES6에서는 문자열 템플릿이라는 기능이 도입.

- 문자열 템플릿은 문자열 채우기라고도 부름.

- 문자열 템플릿은  문자열의 정해진 위치에 값을 채워 넣는 간편한 방법.

- 문자열 템플릿은 큰, 작은 따옴표를 사용하지 않고 백틱을 사용함.

(기존. 문자열 병합)

let roomNumber = 112;

const message = "방 번호는 " + roomNumber + "입니다";

(ES6. 문자열 템플릿)

let roomNumber = 112;

const message = "방 번호는 ${roomNumber}입니다";

- 문자열 템플릿에서는 달러 기호가 특수문자가 됨.

- 달러 기호 다음 중괄호로 감싼 값이 문자열에 곧바로 삽입됨.

<숫자와 문자열 결합>

const num1 = 5 +'50' : 550    // 5가 문자열로 바뀜.

const num2 = 5 * '50' : 250    // 50이 숫자로 바뀜.

<불리언>

- true 또는 false 두 값만 갖는 데이터 타입. 

- 불리언을 사용할 때는 따옴표 안에 넣지 말것. 따옴표 "false" 또는 "true"는 그냥 문자열.

<Symbol>

- ES6에서 새롭게 도입된 데이터 타입.

- 심볼은 항상 유일하며 다른 어떤 심볼과도 일치하지 않음(객체와 유사)

<null & undefined>

- null이 갖을 수 있는 값은 null 하나. 또한 undefined가 갖을 수 있는 값도 undefined 하나로 동일.

- 또한, 둘 모두 존재하지 않는다는 것을 나타냄.

- null은 프로그래머에게 허용된 데이터 타입. undefined는 자바스크립트 자체에서 사용한다.

- undefined를 할당하기보다, 불확실한 변수 값, 적용할 수 없는 경우 null을 선택하도록.

- 변수를 선언만하고, 값을 할당하지 않으면 undefined가 기본적으로 저장됨.

<객체>

- 원시 타입은 단 하나의 값만 나타낼 수 있고, 불변하지만

- 객체는 여러 가지 값이나 복잡한 다수의 값을 나타낼 수 있으며, 변할 수도 있다.

- 빈 객체 생성 : const obj = {};