웹 사이트를 동적으로 만들어 주고 서버를 만들거나 웹에서 작동하는 프로그램을 만들어 줄 수 있는 자바스크립트에 대해 공부를 시작했고
가장 먼저 자바스크립트에서 사용하는 기본 자료형에는 어떤 것이 있는지 정리해 보려고 한다.
숫자(Number)
숫자는 정수와 실수로 나누어 구분하며 연산자를 활용하여 계산이 가능하다.
document.wirte(10); // document.write:웹 페이지 내에 내용 출력하는 함수=> 출력값: 10
document.write(1+1);=> 출력값: 2
문자열(String)
작은 따옴표(')나 큰 따옴표(")로 묶은 자료를 의미한다. 숫자도 이와 같이 묶일 경우 문자로 인식한다.
document.write("자바스크립트");=> 출력값: 자바스크립트
document.write("1"+"1");=> 출력값: 11
논리형(Boolean)
참(true)와 거짓(false)이라는 값을 표현하는 자료형이다. 주로 프로그램에서 조건을 확인할 때 사용한다. false로 간주되는 값은 0, null, undefined, NaN, '' 가 있다.
document,write(20 < 30); // 숫자 20은 숫자 30보다 작다.=> 출력값: true
document.write(10 === 20) // 숫자 10은 숫자 20과 같다.=> 출력값: false
변수(Variable)
수학에서 사용하는 미지수 x, y처럼 변하는 값을 저장할 때 사용한다. 변수는 변수를 선언하고 그에 대해 값이나 식을 저장하여 만든다.
1. 변수 선언
변수는 구분이 가능한 이름을 붙여 주어야 하고 이를 '변수를 선언한다'고 한다.
변수를 선언할 때는 변수의 이름 앞에 키워드를 붙여 변수를 선언하고 있음을 표시해야 하는데 이때 사용하는 키워드에는 var와 let,const가 있다.
ES5까지 사용했던 var 키워드는 ES6에서 값이 변경될 수 있는 let과 값이 변경되지 않는 const로 구분하여 사용하도록 변경 되었는데, var도 사용은 가능하나 아래와 같은 이유로 let,const의 사용이 권장되고 있다.
:: var hoisting
var는 let과 달리 어디에서 선언 했느냐에 상관없이 함수 안에 있는 선언들을 해당 함수 유효 범위의 최상단으로 끌어올리는 것이다. 호이스팅으로 인해 코드의 가독성이 떨어지고 유지보수가 힘들 수 있으며 쓸모 없는 코드가 생길 수 있다.
- let
> let age; > age = 40; < 40 > age = 40; > let age; < undefined
- var
> var age; > age = 40; < 40 > var = 40; > let age; < 40;
:: var has no block scope
var는 블록 레벨 스코프가 적용되지 않아 선언하지도 않은 많은 변수와 그 값들이 할당되어 나타날 수 있어 코드 작성 시 오류 발생의 여지가 커진다.
- 블록레벨 스코프: 블록(함수, if 문, for 문, while 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없는 것
- let
{let age; age = 40;} console.log(age); // console.log: 개발자 도구의 console에 결과 값 출력 함수 > undefined {let age; age = 40; console.log(age);} > 40
- var
{var age; age = 40;} console.log(age); > 40
:: const safeness
값이 변경될 수 있는 let과 반대로 한 번 선언하면 값을 변경 할 수 없는 const의 경우 해커가 값을 변경하는 것을 방지 할 수 있는 보완상의 이유, tread들이 동시에 변수에 접근하여 값을 변경할 위험성이 낮으며 코드 작성 시 발생할 수 있는 실수를 줄일 수 있다는 점에서 var보다 사용을 권장한다.
2. 변수에 값이나 식 저장
선언한 변수에 값을 저장하기 위해 '=' 기호를 붙이고 오른쪽에 값이나 식을 저장한다.
- 값 저장
> let age; > age = 20; // 변수 먼저 선언 후 값 저장 > let food = "apple"; // 변수를 선언하면서 값 저장
- 식 저장
> let first = 20; > let second = 10; > let sum = first + second // '변수의 합'이라는 식 저장 < 30
미지정(undefined) & 유효하지 않은 값(null)
undefined는 자료형이 정의되지 않았을 때의 상태이다. 변수에서 처음부터 변수에 값이 할당되지 않았음을 의미하는 것이다. null의 경우 처음에 할당된 값이 더이상 유효하지 않음을 의미한다. 두 가지 개념의 서로 다른 점을 구분해야 한다.
> let first; > first; < undefined
> let second = 1; > second = null > second; < null
상징(Symbol)
객체에 고유한 식별자를 부여하거나 동시다발적으로 발생하는 이벤트 코드에서 우선 순위를 부여하고자 할 때 사용한다. 심볼을 출력할 때는 반드시 심볼.description으로 작성하여 심볼의 string을 출력해야 한다.
> const symbol1 = Symbol('id'); > const symbol2 = Symbol('id'); > symbol1 === symbol2 < false > const symbol3 = Symbol.for('id'); > const symbol4 = Symbol.for('id'); > symbol3 === symbol4 < true
자바스크립트의 경우 dynamically typed language이기 때문에 자료가 작성되면서 자료형이 결정되는 것이 아닌 실행되면서 자료형을 인식하게 된다. 그렇기 때문에 코드의 유지 및 보수 단계에서 자료형이 생각과 다르게 달라지는 경우가 있다. 이러한 점을 보완하기 위해 Type Script가 등장하게 되었다.
