웹 프로그래머(웹 개발자)가 되어보자 - 4

3-2. 변수

저번시간에는 변수가 무엇인지 간단하게 살펴 보았습니다.
복습하는 차원에서 간단하게 다시 정리를 해 보겠습니다.

변수는 원하는 데이터를 표현하기위한 기호로 아래와 같은 형식으로 구성됩니다.

var 원하는변수명 = 데이터

여기서 =(는) 표현은 대입연산자를 의미하며 변수의 값, 적용시킬 데이터를 의미합니다.
또한 console.log라는 명령어는 소괄호() 안에 내용을 출력해주는 역할로 사용 되었습니다.
변수명 앞에 사용된 var 라는 기호는 변수를 의미합니다.
그리고 언급되어있지는 않았지만 마지막에 사용된 세미콜론(;)  표현은 해당 내용의 종료를 의미합니다.
세미콜론(;)  표현은 생략해도 무방합니다.

"var 변수명" 으로 변수를 선언하는 것은 자바스크립트의 문법이며, 한번 선언한 변수에 다른데이터를 대입하는 경우 생략 해야 합니다.

var number =1234;
number = 5678;

var라는 기호는 바꾸어 쓸 수 없지만 변수명은 내가 원하는데로 선언하여 사용 할 수 있었습니다.
그러면 이제 변수를 가지고 조금 더 재미있는 내용을 살펴 보겠습니다.

파이어폭스를 실행하고 F12키를 누른다음 콘솔 탭을 클릭합니다.
아래 내용을 복사하여 파이어폭스에 붙여넣어줍니다.

var number1 = 1111;
var number2 = 2222;
console.log(number1 + number2);

값이 서로 더해졌습니다.

해당 내용을 출력하면 3333이라는 값이 출력됨을 알 수 있습니다.
더하기를 통해서 데이터가 계산되어 나오는 것을 볼 수 있습니다.
그렇다면 아래 내용은 어떻게 될 까요?

var number1 = 1111;
var number2 = 2222;
console.log(number1 + number2);
console.log(number2 - number1);
console.log(number1 * number2);
console.log(number1 / number2);

변수의 값이 계산이 되는 것을 볼 수 있습니다.

흔히 알고있는 수학에서의 덧셈, 뺄셈, 곱셈 및 나눗셈을 실행시킨 결과 입니다.
변수로 선언한 숫자들이 정상적으로 계산되는 것을 볼 수 있습니다.
위 내용을 다르게 표현하여 보겠습니다.

console.log(1111 + 2222);
console.log(2222 - 1111);
console.log(1111 * 2222);
console.log(1111 / 2222);

 

동일한 결과 입니다.

출력한 결과가 동일한 것을 알 수 있습니다.
그렇다면 굳이 변수를 왜 쓰는 것 일까요?

지금의 데이터는 우리가 연습, 테스트를 위해서 사용된 데이터 입니다. 
그러나 앞으로 만들 프로그램에서의 데이터는 이보다 훨씬 복잡하고 방대한 규모가 될 것 입니다.
그러한 데이터를 단순히 수치(숫자, 문자 등)로만 표현한다면 아무도 알아 볼 수 없는 프로그램이 될 것 입니다.
이렇게 변수를 사용하므로써 조금 더 직관적으로 어떠한 뜻 인지 알수 있게 하기 위해서 변수가 사용 됩니다.

자바스크립트에서 변수를 조금 더 다양하게 사용하여 보겠습니다.

var number = 1234;
var text = "한글입력";
var data = 5678;

console.log(number + data);
console.log(text + data);
console.log(data + text);

숫자와 문자는 서로 결합이 되는군요!

숫자 형식의 number 변수와 data 변수는 서로 덧셈 연산자를 통해서 계산이 된 것을 볼 수 있습니다.
그런데 문자형식의 text를 만나면 해당 내용이 서로 붙어서 출력되는 것을 볼 수 있습니다.
여기서 알 수 있는 것은 자바스크립트에서 변수에 담을 수 있는 값의 종류입니다.

자바스크립트에서 변수에 대입할 수 있는 값은 대표적으로 숫자(Number)형, 문자(String)형, 논리(Boolean)형이 있습니다.  
 * 물론 나중에 다른 자료형도 살펴볼 예정 입니다.
숫자는 대입연산자(=) 뒤에 숫자를 입력하면 됩니다.
문자는 대입연산자(=) 뒤에 쌍따옴표 또는 홑따옴표를 앞/뒤로 써 주고 입력하면 됩니다.
논리형은 영문으로 true와 false를 입력하여 주면 됩니다.

내용이 조금 복잡하므로 예제를 한개 더 살펴보겠습니다.

var 숫자 = 1234;
var 문자 = "문자입니다.";
var 논리 =  true;

console.log(숫자);
console.log(문자);
console.log(논리);

문자 = '문자를 변경합니다.';
논리 =  false;
console.log(문자);
console.log(논리);

 

변수명이 한글로 쓰여져도 상관 없습니다.

변수명을 한글로 입력하여 보았습니다. 
변수명은 다양하게 지정 할 수 있습니다. 물론 변수명으로 쓸 수 없는 명칭도 존재합니다. (나중에 살펴볼 예정 입니다)
변수 "문자"는 쌍따옴표화 홑따옴표를 활용해서 출력 해 보았습니다. 
정상적으로 내용이 나오는 것을 볼 수 있습니다.

변수 "논리" 는 true와 false 라는 값을 갖을 수 있습니다. 해당 값은 변수명에 쓸 수 없는 고유 값 입니다.
true라는 값은 "참"을 의미하며 false라는 값은 "거짓"을 의미 합니다.
해당 값은 나중에 아주 요긴하게 사용됩니다.
일단 여기서는 true와 false라는 형태의 값이 존재한다는 것만 기억하면 됩니다.

숫자(Number)형태의 값은 덧셈, 뺄셈, 나눗셈, 곱셈 등 다양한 수학적 계산이 가능합니다.
문자(String)형태의 값은 덧셈을 통해서 내용을 서로 붙일 수 있으며 뺄셈, 나눗셈, 곱셈등 수학적 계산을 지원하지 않습니다. 
예외적으로 덧셈기호를 통해서 문자를 붙여주는 것만 허용 합니다.
논리(Boolean)형태의 값은 어떠한 수학적 계산도 허용되지 않습니다.

정리를 한번 해 보겠습니다.

1. 변수는 "var 변수명" 형태로 사용할 수 있습니다.
2. 변수에 데이터를 주는 것은 대입연산자(=)를 통해 가능 합니다.
3. 변수명은 다양하게 지정 할 수 있습니다.    * 변수명으로 쓸 수 없는 명칭도 존재합니다(나중에 살펴볼 예정 입니다)
4. 변수에 대입할 수 있는 대표적인 값은 3가지 입니다.
  - 숫자(Number)형 : 일반 숫자형태로 입력 합니다.
  - 문자(String)형 : 쌍따옴표 또는 홑따옴표를 앞/뒤로 문자에 붙여 줍니다.
  - 논리(Boolean)형 : true와 false라는 값을 가질 수 있습니다. (고유값, 예약어)
5. 변수는 연산자를 통해서 계산을 할 수 있습니다.
  - 숫자(Number)형 : 덧셈, 뺄셈, 곱셈, 나눗셈 등 다양한 수학적 계산이 가능 합니다.
  - 문자(String)형 : 덧셈 연산자만 허용하여 문자를 붙여주며 나머지는 지원하지 않습니다.
  - 논리(Boolean)형 : 수학적 계산을 허용하지 않습니다.

여기까지 변수에 대해서 조금 더 알아보았습니다.
다양한 방법으로 변수를 선언하고 사용 해 보아야 합니다! 
다음시간에도 변수에 대해서 계속 살펴보겠습니다.

 

* 콘솔창에서 입력하는 방법 입니다.

1. 복사 붙여넣기로도 할 수 있습니다.

2. 메모장을 실행해서 내용을 작성한 뒤에 붙여넣기를 할 수 있습니다.

3. 직접 입력 할 수 있습니다. 직접 입력 할 때 개행(다음칸에 쓰는 행위)을 하려면 쉬프트(Shift)키와 엔터(Enter)키를 같이 눌러줍니다.