🔖 자바스크립트 변수와 상수 - 한 입 크기로 잘라먹는 리액트 1장을 읽고

웹 에디터로 자바스크립트 편집하기

자바스크립트는 어떻게 실행될까?

자바스크립트는 '자바스크립트 엔진'이라는 프로그램이 해석해 실행한다. 자바스크립트 엔진 기본적으로 웹 브라우저에 탑재되어 있다. Node.js와 같은 별도의 실행 환경을 설치하지 않는 한, 자바스크립트를 실행하려면 반드시 웹 브라우저가 있어야 한다.

크롬처럼 자바스크립트 엔진을 사용하면서도 여러 줄에 걸쳐 코드를 입력하고 편집할 수 있는 웹 에디터인 '코드샌드박스'를 활용하여 실습을 진행해 보자.

코드샌드박스 사용 방법

크롬처럼 자바스크립트 엔진을 사용하면서도 여러 줄에 걸쳐 코드를 입력하고 편집할 수 있는 웹 에디터이다. 코드샌드박스는 샌드박스 단위로 웹 언어를 입력하고 편집할 수 있는 웹 에디터이다.

크롬 브라우저에서 다음 주소를 입력한다.
https://codesandbox.io

사이트에 접속하면 Try for free 혹은 Start for free 버튼을 클릭한다.

자바스크립트를 선택한다.

Open template를 클릭한다.

자바스크립트를 실습할 수 있는 샌드박스 페이지이다.
샌드박스 페이지는 크게 3개의 창으로 구성되어 있다. 가장 왼쪽에는 파일 탐색, 검색 등 제어기능을 모아 놓은 공간이다. 가운데 창은 코드를 작성하는 에디터 공간이다. 오른쪽 창은 결과물을 브라우저나 콘솔에서 확인하는 공간이다.

실습 환경이 갖춰졌으니 변수와 상수에 대해 알아보자.

변수와 상수

변수

변수란 프로그램을 실행하는 과정에서 변경될 수 있는 값을 저장하는 저장소이다. 어떤 값을 이름으로 가리킬 때 사용하는 기능이기도 하다.

키워드 let : let age = 25;
코드를 입력하면 25라는 값은 이제부터 age라는 이름으로 부를 수 있다. 키워드 let을 붙여 없던 변수를 만들면 "변수를 선언한다"라고 하며, age = 25처럼 값을 변수에 지정하면 '할당한다'라고 표현한다.
변수를 선언함과 동시에 값을 할당할 수도 있는데, 이것은 "변수를 초기화한다"라고 한다. 자바스크립트에서 변수의 초기화는 선택 사항이다.

키워드 var : var age = 25;
var를 이용한 변수 선언은 let과 달리 이름을 중복해 선언해도 실행할 수 있다. 가급적 변수 선언 키워드로는 let을 사용한다.

상수

상수 역시 변수처럼 이름을 가진 공간이다. 그러나 변수와 달리 프로그램 실행 과정에서 값을 변경할 수 없다.

키워드 const : const age = 25;
선언과 동시에 할당하는 초기화 과정이 필요치 않은 변수와 달리, 상수는 선언과 동시에 값을 할당하는 과정이 꼭 필요하다.

명명 규칙

1. 기호 사용 규칙
   • 변수의 이름에는 한글을 포함하여 문자, 숫자 그리고 특수 기호의 일부(_, $)를 사용할 수 있다.
   • 특수 기호 _: 두 단어 이상으로 이루어진 합성어일 때 가독성을 높이기 위해 사용.
   • 특수 기호 $: jQuery를 사용할 때처럼 이 변수가 별도의 라이브러리 객체라는 것을 가리킬 때 사용.
2. 숫자 사용 규칙
   • 변수 이름으로 숫자를 사용할 수 있지만, 숫자로 시작해서는 안 된다.
   • let 2022year = "good"; (X)
   • let _2022year = "good"; (O)
3. 예약어 규칙
   • let, const 키워드처럼 예약어란 자바스크립트에서 이미 사용하기로 약속한 단어이다. 따라서 예약어는 변수명으로 사용할 수 없다.
   • https://www.w3schools.com/js/js_reserved.asp
4. 대•소문자 구별
   • 위 3가지 규칙과 달리 대•소문자를 구별하는 명명 규칙은 직접적인 오류가 발생하지는 않는다.
   • 하지만 이 규칙을 인지하지 못한 상황에서 아래와 같이 변수의 이름을 짓게 되면, 의도치 않은 오류가 발생할 수 있다.

let code = 1;
let Code = 2;

console.log(code); // 1
console.log(Code); // 2