자바스크립트로 배우는 프로그래밍 #1.2 변수

이번에는 자바스크립트의 변수 부분을 다뤄볼까 합니다.

본질 적인 질문으로 시작해보겠습니다.

변수란 무엇 일까요?

네, 변수는 말 그대로 "변하는 수" 입니다. 변하지 않는 숫자는 상수라고 하지요.

프로그래밍에서 변수는 매우 매우 중요하고 어느 언어를 쓰더라도 변수는 무조건 배우게 되고 또 계속해서 쓰게 됩니다.

그렇다면 왜 이렇게 중요하며 왜 무조건 써야 할까요?

먼저 변수는 어떤 데이터 값을 런타임 중에 저장하는 역할을 합니다. 

프로그램이 실행 되는 동안 계속 메모리의 특정 위치에 저장이 되어있죠.

쉽게 예를 들어 설명하면 어떤 사람의 나이값이 있다고 칩시다.

제 나이가 25살이니까 25라는 값이 있다고 가정합니다..

하지만 25, 그냥 just 숫자 이십오 일 뿐입니다.

하지만 이 값이 들어갈 공간을 만들고 그 공간에 이름을 지정하면 어떨까요?

25라는 숫자에 의미가 생기지 않을까요?

변수는 종이박스와도 비유할 수 있습니다.

"숫자" 라는 이름표가 붙어 있는 종이박스가 있다고 합시다.

이 박스는 크기가 "숫자"라는 물건만 넣을 수 있는 크기이며 

모양은 "숫자"라는 물건을 넣기에 적합한 모양 입니다.

이제 추상적인 얘기를 끝내고 다시 현실로 돌아와서 바라보겠습니다.

즉 25라는 제 나이 숫자 값을 넣는 변수도 '숫자'라는 박스(=변수)에 넣을 수 있습니다.

C언어로 표현하면 다음과 같습니다.

" int age = 25; "

하나씩 해부 해보죠.

'int'는 integer(정수)의 줄임말 입니다. 

'age'는 변수의 이름 입니다. 자신이 아무렇게나 지을 수 있습니다.

'=' 는 대입 연산자 라고 합니다. 오른쪽에 있는 25 라는 값을 왼쪽에 있는 age라는 변수에 넣습니다. 물건을 박스에 넣는 것 처럼요.

';'은 국어에서 문장의 끝에 점(.)을 붙히는 것처럼 마침표 입니다. 그냥 문법입니다.

이제 변수가 어떤 중요한 역할을 하는지 대충 감이 오시나요??

변수가 중요한 이유는 또 있습니다. 

위 내용에서 파생되는 느낌이긴 한데요.

변수는 재사용이 가능합니다. 

그리고 그 값을 가공할 수도 있습니다.

한번 선언해둔 변수는 특정 유효 범위 내에서 계속 재사용 가능합니다. 

변수는 말 그대로 변하는 수이니 그 값을 때에 따라 변경할 수도 있지요.

위에서 선언했던 'age' 변수를 예로 들면 1년이 지나서 제 나이가 26살이 된다면 

C언어에서 age = age + 1; 로 표현 할 수 있습니다.

기존에 age 에 25라는 값이 들어있었고 여기에 1을 더해서 다시 age 에 대입(=) 하는 것 입니다.

수학에서 말하는 같다(=)는 프로그래밍에서 '==' 이렇게 등호를 2번 적어서 표현합니다.

이렇게 변수는 프로그래밍을 직관적으로 볼 수 있게 하기도 합니다.

age 처럼 변수에 이름을 지정할 수 있어서 이 값이 그냥 숫자값에 의미를 두게 되어 코드만 봐도 대충 직감적으로 값의 흐름을 알 수 있죠.

C언어로 계속 예를 통해 설명했는데, 자바스크립트로 변수를 사용하는 실제 코드를 봐보겠습니다.

var a = 2;
var b = 3;

alert(a+b);

위 소스를 일단 대략적으로 설명하면

"2와 3을 더한 값인 5를 저번 시간에 언급한 alert() 으로 메시지를 띄워주는 소스 입니다."

그냥 단순히 alert(2+3)으로 해도 5가 출력되겠지만 2와 3이라는 값에 이름을 부여한 것입니다.

아까 C언어로 age 라는 숫자변수를 선언할 때 int 라는 키워드를 사용했었죠?

자바스크립트에서 변수의 선언은 var 키워드를 사용합니다.

var 키워드 하나면 박스의 모양에대해서 생각하지 않아도 됩니다.

위에서 박스라는 예제로 설명을 드렸을 때 숫자라는 물건을 넣으려면 그 모양에 맞는 박스를 찾아야 한다고 했죠?

그래서 int age 라고 선언을 했었구요, 하지만 자바스크립트에서는 박스(변수)의 모양에 대해서는 신경 쓸 필요가 없습니다.

그저 var 키워드 하나면 대입 되는 값을 보고 모양을 알아서 결정해주죠. 

똑똑하죠?

var 를 사용하지 않아도 됩니다.

그럼 변수의 선언은 되지만 그럼 전역변수가 되버립니다.

전역변수와 관련된 변수의 유효범위에 대해서는 나중에 필요할 때 설명 해볼게요. 

아직은 몰라도 되요.

지금은 변수란 무엇인지, 변수는 어떻게 만드는지만 신경 쓰면 됩니다.

아무튼 자바스크립트는 동적인 언어라서 변수 선언이 되게 간편합니다. 

저게 다입니다. 값에는 숫자, 문자 등이 있는데 자바스크립트는 var 하나면 끝!

문자를 선언할 때도 var a = 'a'; 라고 하면 알아서 char 형 변수로 선언 됩니다. 

이렇게 타입이 자유자재로 값에 따라 변경되는 언어를 동적인 언어라고 합니다.

이렇게 결정된 변수의 타입(종류)에 따라 위 소스에서 처럼 + 를 할 경우 결과 값이 달라 집니다.

위에선 a와 b가 각각 2와 3이라는 숫자 값이 들어가 있어서 두 변수를 더했을 때 5가 나왔었죠? 

만약 var a = 'a'; var b = 'b'; 라고 a, b에 각각 'a', 'b'라는 문자가 들어가있다면 두개를 더하면 무엇이 출력 될까요?

만약 문자 끼리 더한다면 +는 그 문자들을 이어주는 역할을 하게 됩니다.  즉 'ab' 라는 문자열이 만들어지게 되죠.

변수를 좀 더 제대로 쓰고싶다! 하시는 분들은 이런 생각도 하실 수 있을 겁니다.

a와 b를 더한 "결과" 도 변수에 넣는게 좋겠다!

네 맞아요. 모든 값을 변수화 시키면 좋습니다. 

결과라는 영어단어인 result로 결과값을 넣어보죠.

var result = a + b;

일단 변수에 대한 이야기는 여기까지 했으면 충분히 이해되셨으리라 봅니다. 

처음 프로그래밍 시작하시는 분은 너무 깊게 들어가려 하지 않는게 좋으실 수도 있어요~ 

C언어 같은 엄격한 언어로 시작하지 않고 자바스크립트로 시작한 이유가 있으실테니까요.

아무튼 한가지 다른 팁으로 변수를 출력하는 다른 방법에 대해 알려드릴게요!

어떤 값을 출력하는 행위는 디버깅에 있어서 매우 중요합니다.

나중에 좀 큰 프로젝트를 하다보면 값을 중간중간 출력해보면서 디버깅(에러를 찾는 행위)을 할 때가 있는데요~

지금까지 보여드렸던 예제 소스 처럼 alert 으로 값을 출력시켜서 확인할 수 있긴 합니다.

하지만 출력 시키고 싶을 때마다 alert으로 메시지를 띄우면 메시지 창이 떠버리니까 거슬리고 확인버튼 눌러서 꺼야하고 좀 귀찮겠죠

그래서 다른 출력 방법으로 개발자 콘솔에서 확인하는  방법이 있습니다.

var a = 2;
var b = 3;
console.log(a+b);

이렇게 console.log 를 사용하는 방법이 있습니다.

console.log 는 개발자콘솔에 출력되게 되는데요, 확인하는 방법은 크롬의 개발자콘솔을 여시면 바로 확인 가능합니다.

크롬 브라우저에서 단축키 Command + Option + I(맥), F12(윈도우)를 누르시게 되면 콘솔이 뜨게 되고

아래 사진 처럼 출력 값을 확인할 수 있게 됩니다.

오늘 변수가 뭔지, 왜 필요한지, 어떻게 사용하는지 예를 들어 설명도 해보고 그리고 어떻게 확인할 수 있는지에 대해 전반적으로 포스팅 해봤습니다.

앞으로 계속 공부를 진행하시면서 변수의 유효범위 등에 대해 더 자세하게 아시게 될거예요. 

일단 변수의 기본 개념은 이정도로 하고 넘어가도 되실거예요!

공감이 되셨다면 아래 공감 버튼을 눌러주세요~

▼▼▼▼▼▼