자바스크립트 변수 선언과 변수값 및 수학 등호와의 차이 예제


자바스크립트 변수는 저장 공간 이름이고, 변수안에 변수값이 삽입됩니다. 변수명 선언은 var 키워드를 사용합니다. 변수값 대입은 등호를 사용하며, 프로그래밍의 등호는 우변의 값을 좌변에 대입하라는 의미입니다.

자바스크립트 변수

자바스크립트에서 변수는 변수명과 변수값으로 구성됩니다. 저장 공간의 이름을 변수명이라 부르고, 저장 공간에 들어가는 데이터를 변수값이라 부릅니다.


변수명 선언

변수명 선언 또는 변수 선언은 변수의 이름을 지정하는 의미입니다. 즉 저장 공간의 이름을 지정하는 작업입니다.

예를 들어 수학에서 미지수 x를 작성했을 경우 해당 미지수의 이름은 x입니다.

자바스크립트에서는 미지수의 이름을 지정할 때 앞에 기호를 붙이는데 var, let 등의 기호를 사용합니다. var는 변수를 나타내는 variable의 약자입니다.

var 변수명;

예를 들어 x라는 변수명을 만들려면 아래와 같은 코드를 입력합니다.


var x;

x라는 이름의 변수 저장 공간이 생성되었습니다.

변수명에 변수값 대입

수학에서 x = 1의 의미는 미지수 x1을 대입한 것입니다. 마찬가지로 자바스크립트에서는 변수에는 변수값을 대입할 수 있습니다.

변수 x에 변수값 1을 대입한 상황입니다. 프로그래밍에서 = 기호는 등호 우변의 값을 좌변에 대입하라는 뜻입니다.

var x;
x = 1;

변수 출력

자바스크립트에서 변수를 출력한다는 것은 어떤 의미일까요? 수학에서 x = 1이라는 식에서 x에 들어있는 값을 출력하라는 것과 동일합니다.

자바스크립트에서는 변수 x에 들어있는 변수값 1을 출력하라는 의미입니다. document.write() 함수를 사용해서 변수 x의 값을 간단하게 출력해볼 수 있습니다.

var x;
x = 1;
document.write(x);


변수값의 변경

변수값의 변경이란 변수에 다른 변수값을 계속 대입한다는 의미입니다. 애초에 변수란 변할 수 있는 숫자(variable)라는 의미이고, 계속 값이 바뀔 때 필요한 기능입니다.

헷갈리는 이유는 수학에서 쓰는 등호 = 와 프로그래밍에서 쓰는 등호 = 는 서로 기능이 다른데 모양이 같기 때문입니다.

수학에서 등호란 등호를 중심으로 좌변과 우변이 같다는 의미입니다.

아래 예제의 경우 수학으로 생각하면 x = 1 = 2 = 3 이라는 결과가 나옵니다.

var x;
x = 1;
x = 2;
x = 3;

document.write(x);


하지만 프로그래밍 언어에서 등호란 = 기호를 중심으로 우변의 값을 좌변에 대입하라는 의미입니다.

  • x = 1의 의미는 좌변 x에 우변 1을 대입하라는 의미입니다.
  • x = 2의 의미는 좌변 x에 우변 2를 대입하라는 의미입니다. 원래있던 1은 사라집니다.
  • x = 3의 의미는 좌변 x에 우변 3을 대입하라는 의미입니다. 원래있던 2는 사라집니다.

따라서 최종 출력을 하면 변수 x = 3으로 브라우저에 표시됩니다.

변수명과 변수값 한 줄 표시

변수명 선언과 변수값 대입을 한 줄에 일괄 처리 할 수 있습니다.

var x = 1;

여러 변수 한 줄 선언

여러 변수를 동시에 선언할 경우 쉼표를 사용해서 var를 생략하고 한 줄에 모두 작성할 수 있습니다. 아래 두 예제는 서로 같은 변수 선언입니다.

var x = 1;
var y = 2;
var z = 3;
var x = 1, y = 2, z = 3;

단, 쉼표가 빠지면 var와 같은 변수 선언 키워드를 붙여야 하므로 유의합니다.