1. 변수
변수는 데이터를 담는 그릇이다.
자바스크립트에서는 변수에 데이터뿐만 아니라 오브젝트 및 함수도 당을 수 있다.
변수를 선언하게 되면 자바스크립트는 변수 값을 저장하기 위한 메모리 공간을
확보하고 값을 저장하는데, 변수를 선언할 때 사용한 변수명을 통해 값이
저장되어 있는 메모리 공간에 연결하게 된다.
정확히는 변수명(변수 식별자)이 값이 저장되어 있는 메모리 위치를
기억하고 참조 중인 상태가 되는 것이다.
var 또는 let 키워드를 사용한다.
2. 상수
상수는 변화하지 않는 값을 가지고 있는 변수를 뜻한다.
const라는 키워드를 사용한다.
3. 변수 선언 형식
자바스크립트에서는 데이터를 변수 선언자, 변수명, 할당할 값
형식으로 선언해서 사용한다.
변수명은 최대한 의미 있는 이름을 사용해서 변수명을 보고
어떤 용도로 사용될지 알 수 있도록 하는 것이 매우 중요하다.
4. 변수 선언 규칙
- 변수명은 문자(특수문자 제외), 숫자, _(언더스코어),
$(달러 기호)를 포함하여 만들 수 있다.
- 변수명은 숫자로 시작할 수 없다.
- 변수명은 대소문자를 구분한다.
- 자바스크립트 예약어는 사용할 수 없다.
5. 네이밍 컨벤션
네이밍 컨벤션이란 변수명을 짓는 규칙을 말한다.
자바스크립트를 포함한 프로그래밍 언어 모두 변수명을 만들 때
크게 다음과 같은 4가지 규칙을 사용한다.
1) 카멜 표기법(camelCase) - 변수명이 두 단어 이상이면 두 번째 이후부터는
단어의 첫 번째 문자를 대문자로, 나머지는 모두
소문자로 작성하며 모든 단어를 붙여서 사용한다.
2) 스네이크 표기법(snake_case) - 변수명을 모두 소문자로 사용하며 단어와 단어
사이에 언더스코어를 사용해서 연결한다.
3) 파스칼 표기법(PascalCase) - 카멜표기법과 유사하지만,
첫 번째 단어의 첫 문자도 대문자를 사용한다.
4) 헝가리언 표기법(Hungarian Notation) - 소문자 변수타입+단어(첫문자는 대문자)
표기법을 사용한다.
첫 단어는 반드시 데이터 타입에
해당하는 약어를 사용한다.
예를 들어 문자열은 str, 숫자는 i
혹은 n을 사용하며, 변수명을 보면
어떤 데이터 타입일지 예측이 가능하다.
ex) let userName = ""; -> 카멜 표기법
let user_name = ""; -> 스네이크 표기법
let UserName = ""; -> 파스칼 표기법
let strUserName = ""; -> 헝가리언 표기법
!! 스크립트 표준인 ECMAScript에서 변수명과 함수명은 카멜 표기법,
클래스명과 생성자명에는 파스칼 표기법을 권장하므로 이와 동일하게
사용하는 것을 권장한다.6. var, let, const 선언자
1) var 선언자: var로 변수를 선언하면 같은 자바스크립트 코드 안에서
동일한 변수명을 사용하는 것이 가능하다.
비슷한 용도로 사용되는 변수의 이름을 구분하기 위해서
x1, x2와 같은 방법을 사용한다.
장점으로는 동일한 변수명을 사용해도 에러가 나지 않기 때문에
매번 새로운 변수명을 만들어서 사용하지 않아도 된다.
단점으로는 기존 코드에서 동일한 이름으로 사용되던 변수에
할당된 값이 사라지므로 해당 변수를 참조하고 있는 프로그램에
예기치 못한 에러가 발생할 수도 있다.
var x = 5; -> 변수명 x에 5를 저장
var y = 6; -> 변수명 y에 6을 저장
var z = z + y; -> 변수명 z에 변수 x, y를 더한 값을 저장
z에는 11이 저장됨
var x = 7; -> 변수를 새로 선언하고 x에 7를 저장
z = x + y -> 변수 z에 변수 x, y를 더한 값을 저장
기존에 저장되었던 값은 사라지고 새로운 값으로 변경
z에는 13이 저장됨
2) let 선언자: ES6에 새롭게 추가된 선언자로 변수를 선언하고 값을
할당하는 방식은 var과 동일하지만 변수 선언자로 let을
사용하고 재선언을 할 수 없으며 동일한 변수명으로
변수가 선언되면 에러가 발생된다.
앞서 var과 다르게 변수명을 중복으로 사용할 수 없기 때문에
var에서 발생하는 에러를 해결할 수 있게 된다.
let x = 5; -> 변수명 x에 5를 저장
let y = 6; -> 변수명 y에 6을 저장
let z = x + y; -> 변수명 z에 변수 x, y를 더한 값을 저장
z에는 11이 저장됨
x = 7; -> 변수 x에 7를 저장
let x = 7; -> 에러 발생. 동일한 변수명인 x로 재선언 불가능
3) const 선언자: ES6에 새롭게 추가된 선언자로 const는
변화하지 않는 변수를 선언할 때 사용한다.
이렇게 const로 선언한 변수를 상수(constant)라고 한다.
const 선언자를 사용할 경우 선언 시점에 값을 할당한 후
같은 변수명으로 재선언뿐만 아니라 이미 선언된 변수의 값도
변경할 수 없다.
- 포맷 형태를 지정하여 변경할 수 없도록 하면 좋은 UX를 제공
ex) const DATE_FORAMT = 'yyyy.mm.dd';
- 기억하기 힘든 값을 변수에 할당해 별칭으로 사용
ex) const COLOR_RED = '#FF0000';
!! 변수명을 지을 때 상수인 경우는 소문자를 사용할 때도 있고,
대문자를 사용하는 경우도 있다. 색상 값, 날짜 포맷처럼
하드 코딩된 상수 값을 할당할 때는 일반적으로 변수명을 대문자로 사용한다.
const x = 5; -> 변수명 x에 5를 저장
const y = 6; -> 변수명 y에 6을 저장
const z = x + y; -> 변수명 z에 변수 x, y를 더한 값을 저장
z에는 11이 저장됨
x = 7; -> 에러 발생
const x = 7; -> 에러 발생
Hello World!