1. 변수 선언문
- 변수란, 메모리에 값을 할당하여 읽고 쓰는 것(read & write)이 가능하게 하는 작업이다.
- 변수를 선언할 때 사용하는 선언문에 따라 읽기와 쓰기를 개발자가 조정할 수 있다. 그 차이를 알아보자.
a) let (mutable type) - read & write
- ES6에서 추가된 데이터 타입으로, 변수를 선언할 때 사용된다.
- let으로 선언된 변수는 저장된 값을 바꿀 수 있다. 그러므로 메모리에 값을 읽고 쓰는것이 가능하다.
let variable1 = 123;
variable1 = "abc";
- 위의 코드에서 처럼, variable1이 갖고있는 값이 선언시에는 123(정수)였으나 "abc"라는 값으로 바꾼 것을 확인할 수 있다.
- 이처럼, 갖고있는 값을 변경할 수 있는 변수를 선언할 때 사용하는 것이 let이다.
b) const (Immutable type) - read only
- constant의 약자로, 절대로 변하지 않는 값을 갖는 변수를 선언할 때 사용한다.
- const를 이용해 선언된 변수의 값이 메모리에 할당되면 더이상 바뀔 수 없도록 메모리가 잠긴다. 그러므로 메모리에 쓰여진 값을 읽는 것만 가능하다.
c) var - 더이상 사용하지 않는 선언문
- var를 사용하지 않는 첫번째 이유는 기존의 문법 구조를 벗어나 사용할 수 있기 때문이다.
- 예를 들어, 변수를 선언하기 전에 값을 할당하는 경우가 있다.(아래 코드참고)
variable2 = 123;
var variable2;
- var를 사용하지 않는 두번째 이유는 어디에서나 접근 및 호출이 가능하기 때문이다.
- 함수 내부에 선언한 변수 또는 조건문 내부에서 선언한 변수는 외부에서 접근 및 사용이 불가하다. 하지만, var 변수의 경우 위치(블럭)에 상관없이 어디에서나 호출할 수 있다. (아래 코드참고)
function test() {
var testVariable = 123;
}
console.log(testVariable);
d) var hoisting
- var 선언문의 특성을 이용한 개념으로, 어디에 var 변수를 선언했느냐와 상관없이 항상 선언문이 가장 우선적으로 읽히는 것을 말한다.
2. 데이터 타입
a) primitive type (single item)
- 더이상 작은 단위로 나눠질 수 없는 단위를 의미한다. (number, string, boolean, null, undefined, symbol)
- number: 숫자
- string: 문자
- boolean: true/false
- null: 아무것도 없음을 의미(empty)
- undefined: 선언은 되었지만 아직 값이 할당되지 않은 변수가 갖는 상태
- symbol: map 이나 다른 자료구조에서 고유한 식별자가 필요한 경우 사용된다.
b) object type
- object는 여러개의 변수들을 하나로 묶어서 관리할 수 있도록 하는 컨테이너를 의미한다.
- object 안에는 다양한 변수가 들어있기 때문에 크기가 상대적으로 크다. 그러므로 let과 const 변수를 선언할 때처럼 바로 메모리에 올라가는 것이 아니라, object 안에 있는 변수들의 메모리 위치를 가리키는 reference를 통해 접근하는 방식을 사용한다.
- const로 선언된 object는 해당 object의 내용을 다른 object로 바꾸는 것이 불가하지만, 기존 object 내부에 존재하는 변수들의 값을 변경하는 것은 가능하다는 특징이 있다.
- 반대로 object 내부의 변수 값을 바꾸는 것이 불가능한 object도 있는데, 이를 frozen object라고 부른다.
c) function (first-class function)
- JavaScript에서는 function도 데이터 타입의 하나이다.
- first-class function이라는 것은 데이터 타입처럼 function도 변수에 할당이 가능하며, 그렇기에 함수의 인자 또는 return값으로 function을 반환할 수 있다는 의미다.
[정보 출처]
www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3
'Front-end > Vanilla JS' 카테고리의 다른 글
JS 근본 공부 - function (0) | 2020.10.30 |
---|---|
JS 근본 공부 - 연산자 (0) | 2020.10.25 |
JS 근본공부 - JS의 동작원리 (0) | 2020.10.23 |
JS 근본공부 - 자바스크립트의 역사 (0) | 2020.10.23 |
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) (0) | 2020.10.16 |
댓글