변수와 상수

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작합니다. 아래와 같이 말이죠.

1. 온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보
2. 채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보

변수는 이러한 정보를 저장하는 용도로 사용됩니다.

변수

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 입니다. 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용하죠.

자바스크립트에선 let 키워드를 사용해 변수를 생성합니다.

아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)합니다.

let message;

이제 할당 연산자 =를 사용해 변수 안에 데이터를 저장해 봅시다.

let message;

message = 'Hello'; // 문자열을 저장합니다.

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었습니다.

let message;
message = 'Hello!';

alert(message); // 변수에 저장된 값을 보여줍니다.

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있습니다.

let message = 'Hello!'; // 변수를 정의하고 값을 할당합니다.

alert(message); // Hello!

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

let user = 'John', age = 25, message = 'Hello';

이렇게 작성하면 코드가 좀 더 짧아 보이긴 하지만 권장하는 방법은 아닙니다. 가독성을 위해 한 줄에는 하나의 변수를 작성해주세요.

한 줄에 한 개의 변수를 작성하면 코드가 길어 보이지만 읽기엔 편합니다.

let user = 'John';
let age = 25;
let message = 'Hello';

어떤 사람들은 이런 방식으로도 변수를 정의합니다.

let user = 'John',
  age = 25,
  message = 'Hello';

‘쉼표가 먼저 오는’ 방식으로 작성하는 사람도 있습니다.

let user = 'John'
  , age = 25
  , message = 'Hello';

위에서 소개한 방식들에 기술적인 차이가 있지는 않습니다. 개인의 취향과 미적 감각에 따라 원하는 방식으로 코드를 작성하세요.

var message = 'Hello';

현실 속의 비유

‘상자’ 안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어 있다고 상상해 봅시다. 이렇게 하면 '변수’를 좀 더 쉽게 이해할 수 있습니다.

예를 들어, 변수 message는 message라는 이름표가 붙어있는 상자에 "Hello!"라는 값을 저장한 것이라고 생각할 수 있습니다.

상자 속엔 어떤 값이든지 넣을 수 있습니다.

원하는 만큼 값을 변경할 수도 있습니다.

let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

alert(message);

값이 변경되면, 이전 데이터는 변수에서 제거됩니다.

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있습니다.

let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가집니다.
alert(Hello); // Hello world!
alert(message); // Hello world!

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared