Coffee And Coding

변수(Variable)란?

변수는 영어로 variable이라고 하며, 쉽게 얘기해서 "데이터를 저장하는 공간"이라고 생각하시면 됩니다.

변수는 '변하는 수'라는 뜻입니다. 왜냐면 변수 안에 든 데이터들은 수시로 바뀔 수 있기 때문입니다. 예를 들어서 제가 이 블로그 포스팅의 제목을 수정할 수도 있고, 글 내용을 수정할 수도 있는 것처럼 말이죠. 변수를 선언할 땐
var 변수명 = 변수 안에 넣을 데이터 값;
이런식으로 쓰시면 됩니다. var은 변수를 선언하겠다는 것을 의미하며 생략해도 되지만 의미가 있기 때문에 일단 꼭 써주도록 합시다.

자료형(Data Type)이란?

데이터의 종류를 나타내는 것 입니다. 

 자바스크립트에는 이렇게 5가지의 데이터 타입이 있습니다.

• string 문자열
• number 숫자
• boolean 참, 거짓(true, false)값 ^[각주:1]

일단은 이렇게만 알아두시고 object(객체)와 function(함수)은 이후에 배워봅시다!

2. 실습

alert("hi");​

위 코드를 codesandbox에 적으시면 알람 창이 뜰 것입니다. alert는 그냥 그런 용도로 알아두시면 됩니다.

※hi와 같은 문자를 입력할 때는 꼭 "" 따옴표를 붙여주시고, 문장에 마침표를 찍듯 코드의 마지막에는 ; 를 붙여주시기 바랍니다.

var name = "김커피";

이는 name이라는 변수를 선언하고, 그 변수 안에 "김커피"라는 문자 데이터를 넣어줬습니다.

현재 name이라는 변수 안에는 "김커피"라는 데이터가 들어있는 것 입니다.

var name = "김커피";
alert(name);

이렇게 적어주면 이번엔 알람창 안에 김커피 라는 값이 뜨죠?

이유는 name이라는 변수 안에 "김커피"라는 데이터가 들어있기 때문입니다.

var name = "김커피";
name = "김커피2";
alert(name);

이런식으로 name변수 에 있는 데이터를 수정할 수 있습니다.

알람창에는 "김커피"가 아니라 "김커피2"가 뜰 것입니다. 왜냐면 name이라는 변수 안에 데이터값이 김커피->김커피2로 변화했기 때문입니다. 이처럼 변수 안에 있는 값은 바꿀 수 있습니다.

alert("김커피");

만약 이런식으로 썼다면 알람창 안의 메세지를 계속해서 지우고 다시  쓰는 작업을 반복해야할 것입니다.

그러나 name이라는 변수를 선언하고 그 안에 데이터를 넣어줬다면, 그냥 name = " "; 이런식으로 name안에 값을 바꿔서 넣어주면 됩니다.  

*이를 통해 실제 위의 코드 결과값을 확인해볼 수 있습니다. 

3. 응용(사칙연산)

이번엔 age라는 변수에 18이라는 숫자를 넣었습니다. 문자와 다르게 숫자는 ""따옴표가 필요하지 않습니다.

덧셈, 뺄셈, 곱셈, 나눗셈 이와 같은 사칙연산은 + - * / 기호를 통해 할 수 있고 위의 예제와 같이 작성하실 수 있습니다.

참고로 // 은 주석을 표시하는 것으로 코드에는 영향을 미치지 않고 '이해를 돕도록 코드를 설명' 할 때 쓰이는 것입니다. 

실제로 위 코드를 따라서 차분히 쳐보시고 알람창에 정말로 30이 뜨는지 꼭 확인해보세요!

4. 퀴즈

*퀴즈는 모바일버전은 지원하지 않습니다.

2과.변수와 자료형 퀴즈