[TIL] JavaScript_변수

🚀 자바스크립트 복습하기

React, TypeScript 등 자바스크립트 기반의 무언가를 배울 때마다 기본기의 중요성을 느끼곤 한다. 자바스크립트를 처음 학습했을 때 어려움을 겪기도 했고, 제대로 설명할 수 있을까 생각해 보았을 때 자신이 없으므로 자바스크립트의 주요 핵심들을 다시 한번 되짚어보려 한다.

변수 (Variable)

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 뜻한다.

자바스크립트에서는 let 키워드를 사용하여 변수를 선언한다. (ES6 이전에는 var 키워드 사용)

• 변수에 값을 저장하는 것을 할당(assignment)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.

컴퓨터는 메모리 셀의 집합체인 메모리에 데이터를 저장한다. 메모리의 각 셀은 고유의 메모리 주소를 갖고, 이 메모리 주소는 메모리 공간의 위치를 나타낸다.
변수 이름인 식별자로 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다.

값의 할당

• 변수에 값을 할당할 때는 할당 연산자 =를 사용한다.

let color; // 변수 선언
color = 'red'; // 값 할당

• 변수 선언과 값 할당을 한 줄로 작성할 수 있다.

let color = 'red';

• 한 줄에 여러 변수를 선언하는 것도 가능하다.

let color = 'red', size = 10, shape = 'round';

→ 하지만 가독성이 좋지 않으므로 한 줄에는 하나의 변수를 선언하는 것이 좋다.

• 이미 값이 할당된 변수에 새로운 값을 재할당 할 수도 있다.

let color = 'red';
color = 'pink';

📍 let, const 키워드를 사용하여 변수를 두 번 선언하면 에러가 발생한다.

따라서 변수는 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해야 한다.

변수 네이밍 규칙

• 변수명은 특수문자를 제외한 문자, 숫자, 기호 _ 과 $를 포함할 수 있다.
• 변수명은 숫자로 시작할 수 없다.
• 예약어는 변수명으로 사용할 수 없다.

⛔️ 예약어
let, const, class, return, this, for 등

✔️ 알파벳 이외 한글 등 모든 언어를 변수명에 사용할 수 있다. 하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만드는 것이 좋다.

let 이름 = '...';
let 名 = '...';

✔️ 자바스크립트는 대소문자를 구별한다. 아래 변수는 각각 별개의 변수이다.

let userName;
let username;

✔️ 변수명은 의미를 명확히 표현해야 한다. 좋은 변수명은 코드의 가독성을 높인다.

let x = 16; 		// 변수가 의미하는 바를 알 수 없다.
let fontSize = 16; 	// fontSize 변수는 폰트 크기를 의미한다.

네이밍 컨벤션

카멜 케이스(camelCase)
첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 표기법

let userName;

스네이크 케이스(snake_case)
단어와 단어 사이 _ 기호를 추가하는 표기법

let user_name;

파스칼 케이스(PascalCase)
각 단어의 첫 글자를 대문자로 작성하는 표기법

let UserName;

일관성을 유지한다면 어떤 네이밍 컨벤션을 사용해도 좋지만, 자바스크립트에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.

참고

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info/variables