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

3-4. 변수

앞 시간에서 우리는 변수와 상수에 대해 살펴 보았습니다.
변수는 변하는 값을 의미하며 대입연산자(=)를 통해서 값을 대입 할 수 있습니다.
상수는 변하지 않는 값을 의미하며 대입연산자(=)를 통해서 최초 1회만 선언 할 수 있습니다.
변수는 최초 선언시에 var를 붙여 주어야하며, 이후에 값을 변경하고자 할 때는 var를 생략 합니다.

위 내용이 3-1부터 3-3까지 배운 내용의 핵심 입니다.
변수에 대한 개념을 반드시 정리하고 다음단계로 넘어가야 합니다.


4-1. 데이터(자료)

이번 시간부터는 데이터에 대해서 살펴보겠습니다.
이미 우리는 숫자는 숫자끼리 연산(덧셈, 곱셈, 나눗셈 등)이 가능하다는 것을 알 수 있었으며,
문자는 더하기 연산자(+)를 통해서 문자를 붙일 수 있다는 것을 알고 있습니다.

변수는 값을 담는 일종의 비닐봉투입니다.
실제로 우리는 비닐봉투안에는 다양한 내용을 담을 수 있습니다. 
음식, 옷, 물건등등.. 여러가지 내용물을 담을 수 있습니다.
그러한 비닐봉투안의 물건을 우리는 꺼내어 먹거나, 쓰거나, 입거나 아니면 버리거나 할 수 있습니다.

지금 우리가 공부하고있는 Javascript에서도 변수에 값을 대입하는 행위는 비닐봉투에 넣는 것과 동일합니다.
비닐봉투의 내용물이 다양한 것 처럼 변수에 담는 다양한 데이터(자료)가 존재 합니다.

첫번재로 살펴볼 데이터는 숫자(Number)입니다.
아래 내용을 파이어폭스의 개발도구(F12)를 켠 뒤에 콘솔에 붙여넣어봅니다.

var number = 1234;
var number2 = 1010;
console.log(number + number2);
var sum = number + number2; 
console.log(sum);

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

숫자는 위 내용과 같이 서로 수학적 연산을 통해서 계산되어집니다.
이러한 숫자는 실제 언제 사용되는 것 일까요?
우리가 네이버쇼핑, 다음쇼핑 등등 여러 쇼핑몰에서 물건을 사거나 팔 때 가격의 단위로 쓰이는 데이터(자료)가 바로 숫자(Number)입니다.

조금 더 재미있는 기능을 만들어 보겠습니다.
여태껏 주로 쓰고있던 console.log 명령어 이외의 명령어를 한번 사용하여 보겠습니다.
아래내용을 복사하여 붙여넣어 봅니다.

var number = prompt( '숫자를 입력하여주세요, 기본값은 0 입니다.', 0);
console.log(number);
console.log(number * 10);

가운데 아무숫자나 써 봅니다.

내용을 입력 할 수 있는 창이 실행되었습니다.
아무 숫자를 입력하여봅니다.
반드시 숫자만 입력하여야 합니다.

곱하기 10이 실행 되었습니다.

입력한 숫자가 출력이 되었고, 마찬가지로 입력한 숫자에 곱하기 10이 되어 출력 되었습니다.
prompt 라는 명령어는 자바스크립트에서 제공하는 입력을 위한 기본 명령어 입니다.
prompt 첫번째에 입력된 값은 문자(String)형태의 데이터(자료)를 입력하였으며, 콤마(,)를 붙인뒤에 기본값 0을 지정하였습니다.
만약 아무런 값을 입력하지 않았다면 입력된 기본값 0이 출력되었을 것 입니다.

해당 내용을 우리가 앞서 공부한 변수의 개념을 조금 활용하여 수정하여 보겠습니다.

var text = '숫자를 입력하여주세요.';
var number = prompt( text, 0);
console.log('첫번째 출력 : ', number);
console.log('두번째 출력 : ', number * 10);

var sum = number + 1000;
console.log('세번째 출력 : ', sum);

세번째 출력값이 조금 이상해 보입니다.

마지막에 입력한 sum에서 분명 1000을 더했는데 이상하게 숫자가 뒤에 1000이 붙어서 나왔습니다.
number값이 "두번째 출력" 부분에서 곱하기가 된 것으로 보아 숫자(Number)의 자료라 생각 되는데 왜 문자로 나오는 것 일까요?
이를 이해하기 위해 아래내용을 실행하여 봅니다.

var text = '숫자를 입력하여주세요.';
var number = prompt( text, 0);
console.log('입력한 숫자는 : ' + number,'자료형은 무엇 입니까?', typeof number);

숫자를 입력했는데 문자(String)라고 나옵니다.

typeof라는 명령어는 해당 데이터의 자료형이 무엇인지를 알려주는 자바스크립트의 명령어 입니다.
typeof 명령어 뒤에 한칸 띄고 변수명을 넣어주면 해당 데이터가 어떠한 데이터(자료)인지 알려줍니다.
사진처럼 number라는 자료형은 문자로 나타났습니다.

즉, number라는 변수는 문자인데 곱하기 연산자가 실행 된 것입니다. 
이해를 위해 아래코드를 살펴봅니다.

var number = '1234';
console.log(number * 10);
console.log(number + 1000);

첫번째 곱셉은 잘 실행되었는데, 두번째는 값이 서로 붙여졌습니다.

 

자바스크립트는 매우 똑똑합니다. 
number라는 변수는 홑따옴표를 통해서 문자로 선언하였습니다. 
하지만 문자임에도 불구하고 곱하기 연산자(*)를 만나서 스스로 문자를 숫자로 바꾸어 준 다음 곱셈을 해 준 것입니다.

그러나 더하기 연산자(+)를 만나서는 원래의 데이터(자료)가 문자(String)이므로 내용을 덧셈하는 것이 아닌 붙여서 출력을 해 주는 것 입니다.
만약 number에 숫자형태의 문자가 아닌 일반문자가 들어왔다면 알 수 없는 계산으로 인하여 정상적인 값이 출력되지 않았을 것 입니다.
그렇다면 아래의 내용은 서로 같은 값 일까요?

var number1 = '1234';
var number2 = "1234";
var number3 = 1234;

number1와 number2는 서로 홑따옴표, 쌍따옴표를 사용하여 문자(String)로 사용하였습니다.
하지만 number3은 따옴표가 없는, 숫자(Number)로 사용하였습니다.

number1과 number2의 값은 서로 같지만 엄현히 number3과는 다릅니다.

그러므로 반드시 데이터형태를 항상 확인하는 습관을 길러야 합니다.

그러면 문자를 숫자로 바꾸는 기능은 없을까요?
아주 간단합니다. 
자바스크립트에서 제공하는 Number라는 명령어인 함수(Function)를 사용하면 됩니다.
조금 어렵겠지만 아래 내용을 복사해 실행하여봅니다.

var text = '숫자를 입력하여주세요.';
var number = prompt( text, 0);
number = Number(number);  // 숫자로 변환 합니다.
console.log('첫번째 출력', number);   //첫번째 출력
console.log('두번째 출력', number + 1000);   //두번째 출력
console.log('데이터 형태', typeof number);   //자료형은?

1234를 입력하여 보았습니다.

변수로 선언한 number는 앞의 글자가 소문자입니다.
하지만 자바스크립트에서 제공하는 명령어인 Number를 사용하면 문자를 숫자로 바꾸어줍니다.
같은 내용의 영어단어이지만 앞의 글자가 소문자와 대문자 차이로 서로 분명하게 다른 기능입니다.
아까는 string으로 나온 number의 값이 number로 바뀐 것을 볼 수 있습니다.
숫자로 바뀌면서 붙여진 모습이 아니라 덧셈이 제대로 실행된 것을 볼 수 있습니다.

재미있는 부호가 한개 더 보입니다.
바로 주석(//) 이라는 기호입니다.
주석은 아무런 기능을 발휘하지는 않습니다. 단지 설명을 위해서 사용합니다.

숫자(Number)에 대해서 많은내용을 다루어 보았습니다.
정리가 필요하네요.

1. 자바스크립트에서 숫자(number)는 연산이 가능한 데이터(자료)입니다.
2. 숫자는 문자와 확연히 구분이 됩니다. 문자는 쌍따옴표 또는 홑따옴표로 선언합니다.
 예) 1234, '1234'는 다른 값 입니다. 
3. 연산을 할 때는 반드시 데이터 형식을 확인 해 주어야 합니다. 
4. 형식을 확인하는 방법은 typeof 라는 명령어(함수)를 사용합니다.
  예) typeof 변수
5. 숫자 값 형태를 지닌 문자(String)를 숫자로 변환하는 것은 Number라는 함수를 사용합니다.
  예) var number = Number('12345678');
6. 주석은 설명을 위해 사용됩니다.
  예) //내용

많은 양의 내용이 지나갔습니다.
여기서 기억해야되는 점은 문자와 숫자의 사용방법입니다.
또한 "함수"라는 표현이 나왔습니다.
이 "함수"에 대해서는 일종의 명령어라 생각하면 되겠습니다.

정리한 6가지 항목에 대해서는 반드시 숙달하여야 합니다.
숫자를 활용하여 다양한 연산을 해 보도록 하세요!
연습을 통해서 숫자활용에 친숙해져야 합니다.

다음시간에는 문자에 대해서 살펴보도록 하겠습니다.