JavaScript Variables

1. 변수의 의미

변수(variable)는 데이터를 저장하는 공간이다. 자바스크립트에서 변수는 숫자, 문자열, 계산 결과와 같은 값을 담아 두었다가 나중에 다시 사용하기 위하여 사용한다. 변수는 값에 붙이는 이름이며, 프로그램 안에서 데이터를 기억하고 처리하는 기본 단위이다.

let x = 5;
let y = 6;
let z = x + y;

 

위 코드는 세 개의 변수를 사용한다.

x에는 숫자 5가 저장된다.
y에는 숫자 6이 저장된다.
z에는 x + y의 계산 결과가 저장된다.

따라서 z의 값은 11이 된다.

---

2. 변수를 선언하는 방법

자바스크립트에서 변수는 여러 방식으로 만들 수 있다. 현대 자바스크립트에서는 주로 let과 const를 사용한다. 과거에는 var를 많이 사용하였지만, 현재는 특별한 이유가 없으면 사용하지 않는 편이 좋다. 또한 변수를 선언하지 않고 자동으로 만들어지게 하는 방식도 가능하지만 권장되지 않는다.

대표적인 변수 선언 방식은 다음과 같다.

let name = "홍길동";
const age = 20;
var score = 90;

 

let은 값을 바꿀 수 있는 변수를 만들 때 사용한다.
const는 값을 바꾸지 않을 변수를 만들 때 사용한다.
var는 오래된 변수 선언 방식이다.

---

3. let을 사용한 변수 선언

let은 값을 나중에 변경할 수 있는 변수를 만들 때 사용한다.

let carName;

 

위 코드는 carName이라는 변수를 만든다. 그러나 아직 값은 저장하지 않았다. 이처럼 변수를 만들었지만 값이 없는 상태는 undefined가 된다.

값은 대입 연산자 =를 사용하여 저장한다.

carName = "Volvo";

변수를 만들면서 바로 값을 저장할 수도 있다.

let carName = "Volvo";

 

• 다음 예제는 변수 값을 변경하는 코드이다.

let score = 0;

score = 10;

console.log(score);

 

• 실행 결과는 다음과 같다.

10

 

score는 let으로 선언하였기 때문에 처음 값 0에서 나중 값 10으로 변경할 수 있다.

---

4. const를 사용한 변수 선언

const는 값을 다시 바꾸지 않을 변수를 만들 때 사용한다. 한 번 값을 저장하면 같은 변수에 다른 값을 다시 대입할 수 없다.

const carName = "Volvo";

 

다음 예제는 const와 let을 함께 사용한다.

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

console.log(total);

 

실행 결과는 다음과 같다.

11

 

price1과 price2는 변하지 않는 값이므로 const로 선언하였다.
total은 계산 결과를 저장하는 변수이며, 나중에 값이 바뀔 수 있으므로 let으로 선언하였다.

다음 코드는 오류가 발생한다.

const title = "JavaScript";
title = "HTML";

title은 const로 선언되었기 때문에 "HTML"이라는 새 값을 다시 저장할 수 없다.

---

5. 자동 변수 선언

자바스크립트에서는 변수를 선언하지 않고 값을 대입하면 자동으로 변수가 만들어질 수 있다. 그러나 이 방식은 권장되지 않는다. 변수의 선언 위치와 사용 범위가 불명확해져 오류를 만들기 쉽기 때문이다.

x = 5;
y = 6;
z = x + y;

 

위 코드는 실행될 수 있지만, 좋은 작성 방식은 아니다. 변수를 사용할 때는 let 또는 const를 사용하여 명확하게 선언하는 것이 좋다.

let x = 5;
let y = 6;
let z = x + y;

 

 

6. var를 사용한 변수 선언

var는 오래된 자바스크립트에서 사용하던 변수 선언 방식이다. 2015년 이후 현대 자바스크립트에서는 let과 const가 도입되었으며, 일반적인 코드에서는 var보다 let과 const를 사용하는 것이 좋다.

var x = 5;
var y = 6;
var z = x + y;

 

위 코드는 동작하지만, 새로 작성하는 코드에서는 다음처럼 작성하는 편이 더 적절하다.

let x = 5;
let y = 6;
let z = x + y;

 

값이 변하지 않는 경우에는 const를 사용할 수 있다.

const x = 5;
const y = 6;
const z = x + y;

 

---

7. let, const, var 사용 기준

변수를 사용할 때는 다음 기준을 적용할 수 있다. 먼저 모든 변수는 명확하게 선언한다. 값이 바뀌지 않는 경우에는 const를 사용한다. 값이 바뀌어야 하는 경우에만 let을 사용한다. var는 가급적 사용하지 않는다.

const userName = "홍길동";
const birthYear = 2005;
let age = 20;

age = 21;

 

userName과 birthYear는 변하지 않는 값이므로 const로 선언하였다.
age는 시간이 지나거나 계산 과정에서 바뀔 수 있으므로 let으로 선언하였다.

---

8. 식별자

식별자(identifier)는 변수 이름을 의미한다. 변수 이름은 짧게 x, y, z처럼 작성할 수도 있고, age, sum, carName처럼 의미가 드러나게 작성할 수도 있다.

let x = 10;
let age = 20;
let carName = "Volvo";

 

식별자 작성 규칙은 다음과 같다.

첫째, 문자, 숫자, 밑줄 _, 달러 기호 $를 사용할 수 있다.
둘째, 첫 글자는 문자, _, $로 시작하여야 한다.
셋째, 첫 글자에 숫자를 사용할 수 없다.
넷째, 대소문자를 구분한다.
다섯째, 자바스크립트 예약어는 변수 이름으로 사용할 수 없다.

올바른 변수 이름은 다음과 같다.

let name;
let userName;
let _count;
let $price;
let score1;

 

올바르지 않은 변수 이름은 다음과 같다.

let 1score;     // 숫자로 시작
let user-name;  // 하이픈 사용
let let;        // 예약어 사용

 

---

9. 밑줄과 달러 기호

자바스크립트에서는 밑줄 _과 달러 기호 $도 변수 이름에 사용할 수 있다. 밑줄과 달러 기호는 식별자에서 문자처럼 처리된다.

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

 

달러 기호도 사용할 수 있다.

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

 

다만 일반적인 변수 이름은 의미가 분명한 단어를 사용하는 것이 좋다.

let userName = "홍길동";
let totalPrice = 30000;
let itemCount = 3;

 

---

10. 자료형과 변수

변수에는 여러 종류의 데이터를 저장할 수 있다. 기초 단계에서는 숫자(number)와 문자열(string)을 먼저 구분하면 된다. 문자열은 따옴표 안에 작성하고, 숫자는 따옴표 없이 작성한다. 숫자를 따옴표 안에 넣으면 숫자가 아니라 문자열로 처리된다.

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

 

한글 문자열도 같은 방식으로 작성한다.

let userName = "홍길동";
let message = '안녕하세요.';
let age = 20;

 

userName과 message는 문자열이다.
age는 숫자이다.

• 다음 코드는 숫자처럼 보이지만 문자열이다.

let score = "90";

90이 따옴표 안에 있으므로 숫자가 아니라 문자열로 저장된다.

---

---

11. 한 문장에서 여러 변수 선언하기

하나의 명령문 안에서 여러 개의 변수를 선언할 수 있다. 변수들은 쉼표로 구분한다.

let person = "John Doe", carName = "Volvo", price = 200;

 

여러 줄로 나누어 작성할 수도 있다.

let person = "John Doe",
    carName = "Volvo",
    price = 200;

 

여러 변수를 한 번에 선언할 수 있지만, 초급 단계에서는 한 줄에 하나의 변수를 선언하는 방식이 더 읽기 쉽다.

let person = "John Doe";
let carName = "Volvo";
let price = 200;

 

12. 대입 연산자

자바스크립트에서 =는 대입 연산자(assignment operator)이다. 수학에서 사용하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽 변수에 저장한다는 의미이다.

let x = 10;

 

위 코드는 x와 10이 같다는 뜻이 아니다.
숫자 10을 변수 x에 저장한다는 뜻이다.

다음 코드도 자바스크립트에서는 올바른 코드이다.

let x = 5;

x = x + 5;

console.log(x);

 

실행 결과는 다음과 같다.

10

 

x = x + 5는 기존 x의 값 5에 5를 더하여 다시 x에 저장한다는 뜻이다.

---

13. 변수와 산술 연산

변수는 숫자를 저장하고 계산하는 데 사용할 수 있다. +, -, *, /와 같은 산술 연산자를 사용하여 계산할 수 있다.

let x = 5 + 2 + 3;

console.log(x);

 

실행 결과는 다음과 같다.

10

 

상품 금액을 계산하는 예제는 다음과 같다.

let price = 10000;
let count = 3;
let total = price * count;

console.log(total);

 

실행 결과는 다음과 같다.

30000

 

---

14. 변수와 문자열 연결

+ 연산자는 숫자에서는 더하기를 의미하지만, 문자열에서는 문자열을 이어 붙이는 역할을 한다.

let fullName = "John" + " " + "Doe";

console.log(fullName);

 

실행 결과는 다음과 같다.

John Doe

 

한글 문자열도 같은 방식으로 연결할 수 있다.

let lastName = "홍";
let firstName = "길동";
let fullName = lastName + firstName;

console.log(fullName);

 

실행 결과는 다음과 같다.

홍길동

 

숫자를 따옴표 안에 넣으면 문자열로 처리된다.

let result = "5" + 2 + 3;

console.log(result);

 

실행 결과는 다음과 같다.

523

"5"가 문자열이므로 뒤의 2와 3도 문자열처럼 이어 붙여진다.

• 다음 코드는 먼저 숫자 계산이 이루어진 뒤 문자열이 이어진다.

let result = 2 + 3 + "5";

console.log(result);

실행 결과는 다음과 같다.

55

먼저 2 + 3이 계산되어 5가 되고, 그 다음 문자열 "5"와 연결되어 "55"가 된다.

---

15. 종합 예제

다음 예제는 변수 선언, 값 저장, 계산, 문자열 연결, HTML 출력까지 함께 사용한 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Variables</title>
</head>
<body>
  <h1>JavaScript Variables</h1>
  <p id="result"></p>

  <script>
    const productName = "노트북";
    const price = 1200000;
    let count = 2;
    let totalPrice = price * count;

    document.getElementById("result").innerHTML =
      productName + " " + count + "개의 총 금액은 " + totalPrice + "원입니다.";
  </script>
</body>
</html>

 

코드의 흐름은 다음과 같다.

productName에는 상품 이름 "노트북"을 저장한다.
price에는 상품 가격 1200000을 저장한다.
count에는 상품 수량 2를 저장한다.
totalPrice에는 price * count의 계산 결과를 저장한다.
innerHTML을 사용하여 결과 문장을 웹페이지에 출력한다.

실행 결과는 다음과 같다.

노트북 2개의 총 금액은 2400000원입니다.

 

---

16. 핵심 정리

변수(variable)는 데이터를 저장하는 공간이다. 자바스크립트에서는 let, const, var를 사용하여 변수를 선언할 수 있다. 현대 자바스크립트에서는 값이 바뀌지 않으면 const, 값이 바뀌어야 하면 let을 사용한다. var는 오래된 방식이므로 새 코드에서는 가급적 사용하지 않는다.

변수 이름은 식별자(identifier)라고 하며, 문자, 숫자, _, $를 사용할 수 있다. 단, 숫자로 시작할 수 없고, 예약어를 사용할 수 없으며, 대소문자를 구분한다.

=는 오른쪽 값을 왼쪽 변수에 저장하는 대입 연산자이다. 변수에는 숫자와 문자열을 저장할 수 있으며, 숫자는 따옴표 없이 작성하고 문자열은 따옴표 안에 작성한다. + 연산자는 숫자에서는 덧셈을 수행하고, 문자열에서는 문자열을 이어 붙인다.