본문 바로가기
Front-End

[JS] 리터럴과 변수, 상수, 데이터 타입

by Judy 2020. 4. 30.

1. 변수와 상수

1-1. 변수 (variable) : 이름이 붙은 값

변수를 선언(생성)하고 초기값을 할당하는 두 가지 일을 합니다. 재할당이 가능합니다.

let variable; // 변수 선언 undefined
variable = 10; // 10 이라는 숫자를 할당

 

1-2. 상수 (constant) : ES6에서 새로 생겼으며 변수와 마찬가지로 값을 할당할 수 있음.

하지만, 한 번 할당한 값을 바꿀 수 없음.

const CONSTANT = 10; // 10

const CONSTANT = 20; // 재할당이 가능하지 않음.

* 가능한 변수보다 상수를 써야 되며, 루프 제어나 시간이 지나면서 값이 바뀌는 경우에는 변수 사용.

 

1-3. 식별자 이름

변수, 상수, 함수이름

1) 식별자 규칙

- 식별자는 반드시 글자나 달러 기호($), 밑줄( _ )로 시작해야 함.

- 식별자에는 글자, 숫자, 달러 기호, 밑줄, 유니코드 문자를 쓸 수 있으며, 예약어는 식별자로 쓸 수 없습니다.

 

1-4. 리터럴 (literal)

값을 프로그램 안에서 직접 지정함.

 

1-5. 원시 타입과 객체

자바스크립트의 값인 원시 값(primitive) 또는 객체(object)

 

1) 원시 타입

- 숫자

- 문자열

- 불리언

- undefined

- null

- symbol

 

2) 객체: 여러 가지 값이나 복잡한 값을 나타낼 수 있으며, 변할 수 있음.

몇 가지 내장된 객체 타입

- Array

- Date

- RegExp

- Map과 WeakMap

- Set과 WeakSet

 

1) 객체에도 중괄호({})를 사용하는 리터럴 문법

const obj = {
	color: 'red'
}; // obj.color = 'red'

객체의 콘텐츠는 프로퍼티(property)이며, 이름(key)과 값(value)으로 구성됨.

프로퍼티 키는 문자열 또는 심볼이며, 값은 어떤 타입이든 상관없으며 다른 객체여도 상관없음.

 

2) 객체 타입 Number, String, Boolean

Number.INFINITY 와 같은 특별한 값을 저장함.

함수 형태로 기능을 제공함.

 

1-6. 배열

객체와 달리 배열 콘텐츠에는 항상 순서가 있고, 키는 순차적인 숫자.

- 배열 크기는 고정되지 않으며, 요소를 추가, 제거가 가능함.

- 요소의 데이터 타입들이 다를 수 있음.

- 배열 요소는 index: 0으로 시작함.

const a = [1, 2, 3, 4, 5];
a.length; // 5 배열의 갯수
a[0]; // 1 배열의 index [0, 1, 2 ...]으로 index번호가 매겨짐

 

1-7. 날짜

Date 객체 - 날짜와 시간은 내장된 Date 객체.

* new Date() 사용

// 현재 날짜와 시간 - new Date()
const now = new Date()
now; // Thu Apr 30 2020 10:22:43 GMT+0900 (대한민국 표준시)

// 특정 날짜의 객체
const hbd = new Date(2020, 9, 20, 22, 0); // Tue Oct 20 2020 22:00:00 GMT+0900 (대한민국 표준시)
// 월은 index로 인해 9 -> 10

// 각각 가져올 수 있는 내장된 Date객체
hbd.getFullYear(); // 2020
hbd.getMonth(); //10
hbd.getDate(); // 20
hbd.getDay(); // 2 (화요일. 0은 일요일/ 1은 월요일 ...)
hbd.getHours(); // 22
hbd.getMinuter(); // 0
hbd.getSeconds(); // 0
hbd.getMilliseconds(); // 0

 

1-8. 정규표현식 (RegExp)

자바스크립트의 부속 언어에 가까우며, 일종의 확장으로 제공.

문자열에서 필요한 복잡한 검색과 교체 작업을 비교적 단순하게 만듦.

 

1-9. Map과 Set

Map과 Set / WeakMap과 WeakSet

 

1) Map

객체와 마찬가지로 key와 value를 연결

 

2) Set

배열과 비슷하지만 중복이 허용되지 않음.

 

3) WeakMap과 WeakSet은 Map과 Set처럼 동작하지만 특정 상황에서 성능이 더 높아지도록 일부 기능을 제거한 버전.

 

1-9. 데이터 타입 변환

 

1) 숫자로 바꾸기

- Number 객체 생성자를 사용하는 방법

- 내장 함수인 parseInt(기수)나 parseFloat함수를 사용하는 방법

- Date객체를 숫자로 바꿀 때는 valueOf() 메서드를 사용.

 

2) 문자열로 변환

- toString() 메서드를 사용

 

3) 불리언으로 변환

- 참 같은 값, 거짓 같은 값으로 부정 연산자(!)를 사용

- Boolear() 생성자 사용

const a = 0;
const b = !a; // true
const c = !!a; // false
const d = Boolean(a); // false

 

 

 

 

 

 

 

 

 

 

'Front-End' 카테고리의 다른 글

[JS] 배열  (0) 2020.04.30
[JS] 스코프  (0) 2020.04.30
[JS] 함수  (0) 2020.04.30
[JS] 표현식과 연산자  (0) 2020.04.30
[JS] 참조형과 원시형  (0) 2020.04.30