본문 바로가기

프론트엔드/javascript

제2강 javascript 변수

이제 자바스크립트를 본격적으로 배워보도록 하자.

코딩의 코자도 모르는 우리 코린이들이 코딩을 시작하게 되면 무엇이 가장 어려울까라고 생각해봤을때

나는 이 '변수' 라는 녀석이 가장 까다롭다고 생각했어. 코린이들에게 뭔가 추상적인 느낌으로 다가오지 않을까? 중고등학교 수학시간에 배운 변수의 어려움 때문일까? 뭔가 가까이 가기 꺼려지는 녀석일꺼야. 먼저 너가 알고 있는 수학에서의 변수는 모두 날려서 휘발시키고 아무것도 모르는 백지상태에서 시작하자!

 

변수는 어떠한 액체를 담는 컵이라고 생각하면 좋을꺼 같아.

어느 빈컵에 내가 콜라를 담으면 이 컵은 콜라가 되는거고, 거기에 내가 커피를 담으면 커피가 되는거야.

이게 단순화시킨 변수의 전부야. 정말 쉽지? 코드를 보자

 

const 변수 = 1;

const 변수2 = "hello world";

 

여기 컵이 두개 있어. 각 컵의 이름 변수와 변수2라는 이름을 가지고 있어.

 

내가 변수라는 이름을 가진 컵에 1을 채우게 되면 변수라는 컵은 그때부터 1이라는 액체를 담고 있는거지. 

변수2라는 컵에는 hello world 라는 액체를 담았어. 그때 변수2라는 컵은 hello world가 되는거야. 그래서 변수를 확인하면 1이라는 숫자가 나오게 되고 변수2를 확인하면 hello world 라는 글이 나오게 되는 아주 단순한 결과야.

 

const num = 1;

const num2 = 3;

const num3 = num + num2;

 

이코드를 보게 되면 num 이라는 컵에 1을 담았고 num2 라는 컵에 3을 담았어. 저 그러면 num3 이라는 컵은 무슨 값을 담고 있을까? num 변수와 num2 를 합친 바로 4라는 값을 담게 되는거야. 아주 쉽지?

 

그러면 위에 코드에서 앞에 붙은 const 라는 건 무엇일까? 이건 변수선언이라고 해. 우리가 컵들을 사용하기 위해서는 컴퓨터에게 나는 이 컵을 사용할께 라고 알려줘야해. 그래서 어떤 컵을 사용하기 전에는 저렇게 선언을 해주어야 컴퓨터가 아! 이제부터 num 이라는 컵을 사용하겠구나! 라고 인식할수 있어. 

 

자바스크립트는 크게 3가지의 변수선언방식이 있어. 한번 봐보자

 

var num;

const num;

let num;

 

먼저 var 은 그동안 자바스크립트에서 아주아주 많이 써오던 변수선언 방식이야. 문제는 지금은 깊게 알필요는 없지만 호이스팅같은 문제가 있어서 요즘 자바스크립트 시장에서는 지양하는 선언방식이야. 코드해결을 위해 구글링을 하게되면 아주 많은 코드들이 var 을 사용하고 있지만 이 글을 읽는 코린이들은 var 은 사용하지 않도록 하자. 시대에 뒤떨어질수 없잖아?

 

const  

const 로 변수선언을 하게 되면 값(액체)을 변경시킬수가 없어.  예를 들게 되면

 

const num = 1;

num = 2;

 

이러한 코드는 에러를 뿜어내고 정상적으로 실행될수가 없어. 한번 num 이라는 컵에 1이라는 값을 담았다면 그 컵에 다른 2라는 값을 다시 담는게 불가능하다는 이야기야. 이런 값을 상수라고도 해

 

let

 

let 으로 변수선언을 하게 되면 값(액체)을 언제든 바꿀수 있어.

 

let num = 2;

num = 3;

 

위에같은 코드가 가능하다는 이야기야. num 이라는 컵에 2를 담았다가 나중에 다시 2라는걸 버리고 3이라는걸 다시 담을수 있다는 이야기지. 어때 아주 간단하지? 

 

 

변수는 js 를 하기 위해 아주 기본중의 기본인 개념이야! 최대한 쉽게 설명했는데 좀더 알고 쉽다면 MDN 사이트를 참고해서 더 공부해도록 해!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types

 

'프론트엔드 > javascript' 카테고리의 다른 글

자바스크립트에 대한 이해  (0) 2021.12.11