[JS] 모던 자바스크립트 - 01. 변수, 네이밍 컨벤션, 표현식과 문

변수

---

: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
: 값의 위치를 가리키는 상징적인 이름

 

- 변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름

- 변수 값 : 변수에 저장된 값

- 할당(assignment) : 변수에 값을 저장하는 것

- 참조(reference) : 변수에 저장된 값을 읽어 들이는 것 

- 식별자(identifier) : 메모리 상에 존재하는 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 값이 아닌 메모리 주소를 기억

- 선언(declaration) : 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것

- 상수(constant) : 변하지 않는 값. 값을 재할당 할 수 없는 값. 값을 한 번만 할당할 수 있는 변수

 

식별자 네이밍 규칙 

1. 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.

2. 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작해서는 안 된다.

3. 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어, ex) await, break, function 등)는 식별자로 사용할 수 없다. 

 

네이밍 컨벤션

: 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙

 

1. 카멜 케이스 (camelCase)

2. 스테이크 케이스 (snake_case)

3. 파스칼 케이스 (PascalCase)

4. 헝가리언 케이스 (typeHungarianCase)

 

ex) 헝가리언 케이스

var strFirstName; // type + identifier
var $element = documnet.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

 

일반적으로 자바스크립트에서는 변수나 함수의 이름에 카멜 케이스 / 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용

 

 

표현식과 문

---

- 리터럴(literal) : 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호(' ', " ", [ ], { },  // 등)를 사용해 값을 생성하는 표기법. 리터럴은 그 자체로 표현식

3 // 숫자 리터럴
'hello' // 문자열 리터럴
true // 불리언 리터럴
{ name : 'Lee', address : 'Seoul' } // 객체 리터럴
function() {} // 함수 리터럴

- 토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소. 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표(.) 등의 특수기호.

- 문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위. 선언문, 할당문, 조건문, 반복문 등.

- 표현식(expression) : 값으로 평가될 수 있는 문(statement). 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이루어질 수 있음

- 값(value) : 표현식(expression)이 평가(evaluate)되어 생성된 결과 

 

 

표현식인 문과 표현식이 아닌 문

문에 표현식이 포함되는 개념. 다소 헷갈릴 수 있는 이 두 가지를 구분하기 위해서는 변수에 할당해보면 알 수 있다.

 

변수 선언문은 표현식이 아닌 문.

할당문은 표현식인 문. 값으로 평가 가능.

 

- 표현식이 아닌 문(변수 선언문)은 값처럼 사용할 수 없음.

// 표현식이 아닌 문은 값처럼 사용 불가능
var foo = var x; //SyntaxError : Unexpected token var

- 표현식인 문(할당문)은 값처럼 사용할 수 있음.

// 표현식인 문은 값처럼 사용 가능
var foo = x = 100;
console.log(foo); // 100

 

 

 

 

 

출처 : 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리