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

3-3. 변수

변수에 대해서 계속해서 살펴 보겠습니다.
변수를 익히는 이유는 모든 데이터를 값으로만 표현하면 사람이 나중에 알아볼 수 없기 때문에 알아볼 수 있는 단어를 사용하여 표현하는 것이 가장 주요한 목적입니다.
변수를 사용하는법은 아래의 자바스크립트 문법을 따랴아합니다.
"var 변수명 = 값"

변수에 선언된 값은 서로 계산도 가능하고 출력도 가능하였습니다.
그러면 이제 변수의 종류에 대해서 살펴 보겠습니다.

아래 내용을 파이어폭스를 실행한 뒤에 F12키를 눌러 콘솔탭을 클릭한 뒤 붙여넣습니다.

콤마로 구분지어보았습니다.

계속해서 사용 해 왔던 console.log라는 명령어가 조금 다르게 사용된 것을 볼 수 있습니다.
console.log에서 소괄호 안에 콤마(,) 표시를 통해서 원하는 내용을 이어서 출력 할 수 있습니다.

우리가 배웠던 것은 변수는 var로 선언해야 사용 가능하다는 점 이였습니다.
그런데 const라는 처음보는 기호가 등장 하였습니다.

const는 상수를 의미합니다.
상수는 변하지 않는 값을 의미하며 변수와 반대되는 개념입니다.
변수는 변하는 값이지만 상수는 바뀌지 않습니다. 
한번 선언한 상수값은 대입연산자(=)를 통해서 바뀌지 않는 것 입니다. 
이해를 위해 아래내용을 실행하여 봅니다.

var texts1 = 'ABCDEFG';
const texts2 = 'GGGGG';
console.log(texts1, texts2);
texts1 = '변하는값, 변수입니다.';
texts2 = '상수입니다. 대입연산자를 넣어도 바뀌지 않습니다.';

 

texts2에서 빨강색 글씨와함께 오류가 나타났습니다.

texts2라는 상수에서 에러가 발생 한 것을 볼 수 있습니다.
우리가 실행하는 파이어폭스의 콘솔이라는 기능은 자바스크립트의 문법에 어긋나는 명령어가 들어오면 위 사진처럼 빨강색 오류를 나타내 줍니다.
이러한 오류로 인하여 프로그래머는 해당 오류를 수정 할 수 있습니다.
texts2의 값은 상수입니다. 상수는 한번만 선언하고 바꿀수 없는 값으로 사용됩니다.

아직 소개하지않는 let이라는 지역변수가 존재합니다.
해당내용은 나중에 소개하도록 하겠습니다.

const라는 상수는 대입연산자만 사용할 수 없을뿐이며, 다른 변수에서 연산자(더하기, 빼기 등등)를 통해서 사용가능합니다.
아래 내용을 실행하여봅니다.

const number = 10;
var number2 = 20;
number2 = number2 * number;
console.log(number2);

 

 

number2라는 값을 number와 곱한뒤에 다시 number2로 대입하였습니다.
여태껏 보지못한 패턴이라 조금 어색할 수 있지만, 자바스크립트의 문법을 보면 가능 한 일입니다.
몇개의 예제를 살펴보겠습니다.

const first = 'test';
const second = 'text';
var third = first + ' plus ' + second;
console.log(third);
console.log(third + ' => all text');

third = 'all changed';
console.log(third);

변수를 더하기 연산자를 통해서 대입하고 값을 정해주는 모습입니다.
위 내용처럼 변수는 다양하게 사용될 수 있으며, 변수에 변수를 대입 할 수 있습니다.

상수는 변하지 않는 값 입니다. 한번 선언한 상수값은 바꿀 수 없습니다.
이러한 상수는 나중에 프로그래밍에서 유용하게 쓰이는데, 특정 데이터가 변하면 안될 경우에 대해서 사용됩니다.
예를 들어, 네이버라는 주소를 가진 상수값이 있습니다.
해당 주소에 요청하여 특정 데이터를 가져온다고 하면, 해당 주소값은 절대 바뀌어서는 안됩니다.
위 내용을 예제로 만들어보겠습니다.

const address = 'www.naver.com';
console.log(address);
address = 'www.daum.net';

console.log를 네이버에서 요청하여 데이터를 가져오는 기능이라고 가정하여 봅니다.
그런데 누군가 실수로 address 값을 바꾼다고 하면, 데이터를 가져오는 장소가 바뀌게 됩니다.
이러한 경우를 방지하기 위해서 상수(const)가 사용됩니다.

이번시간에는 변수에 대해서 조금 더 깊게 살펴보았습니다.
변수와 상수에 대해서 꼭 이해하여야 합니다.

다음시간에는, 이러한 변수와 상수에 대입할 수 있는 데이터의 종류에 대해서 살펴보겠습니다.
이미 우리는 대표적인 값 3개에 대해서 알고 있습니다.
 - 숫자(Number)형 : 일반 숫자형태로 입력 합니다.
 - 문자(String)형 : 쌍따옴표 또는 홑따옴표를 앞/뒤로 문자에 붙여 줍니다.
 - 논리(Boolean)형 : true와 false라는 값을 가질 수 있습니다. (고유값, 예약어)

해당 값을 다루는 자세한 방법과, 3가지 값 이외의 데이터에 대해서도 살펴 보겠습니다.

 

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

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

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

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