Javascript 기초(변수)

네 안녕하세요 19살 IT 개발자 포돌이 입니다.

 

어제는 자바스크립트의 기초문법을 배웟죠? 오늘은 자바스크립트 기초 변수를 배울겁니다.

시작해보도록 하겠습니다.

 

변수

변수.. 변수(variables)라는게 뭘까요? 변수는 변하는 데이터(값)를 저장할 수 있는 메모리 공간이라고 생각하시면 됩니다.

데이터를 담을 수 있는 그릇이라 할 수 있죠.  변수에는 데이터가 오직 한 개만 저장됩니다. 기억해주시구요~

 

변수에 저장할 수 있는 데이터의 종류로는 문자열(String), 숫자형(Number), 논리형(Boolean) 그리고 빈(Null) 데이터가 있습니다.

 

변수선언

변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수명 앞에 붙입니다. 변수명에는 한글을 사용할 수 없으며,

영문과 숫자 그리고 일부 특수 문자( _, $ )만 포함할 수 있습니다. 변수명은 의미에 맞게 만드는 것이 좋습니다. 의미없이 그냥 ssss aa bb 이렇게 지정하면요 나중에 진짜 이게 뭐할 때 쓰는 변수였지? 하 뭐더라... 하면서 시간 계속 잡아먹고 나중에 고치지도 못하니까 의미에 맞게 쓰세요.

 

기본형

 

 

var 키워드를 잘 기억해주세요 이해가 안된다면 변수선언 부분을 두번 세번 읽어보세요. 그래도 이해가 안된다면 유튜브를 찾아보시면 됩니다.  기본형 잘 읽어보시고요 바로 기본형을 가지고 대입하면서 예제를 풀어나갈 겁니다.

 

자 변수를 선언하면 변수명으로 데이터를 저장할 수 있는 공간이 생성됩니다. 다음은 box라는 이름을 가진 변수에 100이라는 값을 대입한 예제입니다. 초기에는 값이 등록되지 않은 상태(undefined)입니다.

box에 100을 대입하면 다음 그림과 같이 변수에 100이 저장됩니다.

 

 

이렇게 변수를 지정했죠? 하셨다면 변수를 어떻게 지정하는지 이해가 되신겁니다^^ 근데 의문이 들을거에요 어? 난 그냥 이거보고 따라쳤는데 뭘 이해했다는거지? 난 이해가 안되는데? 라고 생각 하실 수 있어요 괜찮아요!! 저도 처음에 배웟을 때 이게 무슨 헛소리야 했습니다. 이제 var라는 키워드가 익숙해지는 단계이고 이해를 아직 못하셔도 됩니다. 

 

자 다시 돌아와서 처음에 변수라는게 뭐라고 했죠? 변하는 데이터를 저장하는 메모리라고 했고 변수는 단 한 개만 지정할 수 있다고 위에서 배웟습니다. 

 

그러면 여기서 이제 우리가 예제를 풀어볼거에요~ 괜찮아요~ 두려워 하지 말고 한번 천천히 해봐요

 

자.. 개발자A가 변수 box(이름)에 100이라는 값을 지정했습니다.

그런데 갑자기 개발자A가 마음을 바꿧어요 30이라는 새로운 값을 집어넣고 싶어해요.

어떻게 하면 될까요?

 

우리 1강에서 출력하는 법 배웟죠? 기억이 가물가물 document. 뭐시기..  ㅎㅎ

document.write();를 넣어서 한번 화면으로 출력해볼까요?

 

 

저는 이렇게 한번 해봣어요 어? 제가 하는거랑 살짝 다르다고요? 

이렇게 하지 않아도 됩니다 방법은 여러가지니까요.

 

이렇게 해도 되고요

 

 

 

 

 

이렇게 해도 됩니다.

 

 

 

코딩에 정답은 없어요 정확한 결과가 나오기만 하면 됩니다.

그럼 화면에 띄어보면

이렇게 30이 창에 떠 있어요. 3개 모두 다 똑같이 나옵니다. 이 예제 반드시 다시한번 공부하셔서 숙지하시기 바랍니다 안하면 또 까먹어요~

 

문자형

문자형(String) 데이터는 다음과 같이 문자나 숫자를 큰따음표("") 또는 작은따옴표('')로 감싸고 있습니다. 또한 문자형 데이터에 HTML, 테그를 포함하여 출력하면 테그로 인사합니다

 

기본형

 

 

숫자형

숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약"100"과 같이 큰 따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 가 있어요.

 

기본형

 

 

논리형

논리형(Boolean) 데이터는 true(참) 또는 false(거짓)가 있습니다, 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과입니다. 예를 들어 '100보다 10이 크다'는 잘못된 비교이므로 false라는 결과를 반환하게 됩니다. 논리형 데이터의 기본형은 다음과 같습니다.

 

기본형

 

 

논리형(Boolean)데이터는 솔직히 어려워요 이해하기가 힘듭니다. 알아만 두세요 나중에 비교문을 배울건데 이걸 잘 기억을 하셔야 이해가 될거에요. 꼭 보고 아 그렇구나 오케이 하고 지금은 넘어가시면 됩니다.

 

null & undefined 데이터

undefined는 다음과 같이 변수s에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null 인 경우를 가리킵니다. null은 변수에 저장된 데이터를 비우고자 할 때 사용하는 값이라고 생각하시면 될거 같습니다.

 

기본형

 

 

변수 선언시 주의 사항

 

 1. 변수명 첫 글자로는 $,_(언더바), 영문자만 올 수 있습니다.

 

var 1num = 10; (X)

var $num = 10; (O)

 

2. 변수명 첫 글자 다음은 영문자, 숫자, $,_(언더바), 영문자만 올 수 있습니다.

 

var 100num = 10; (X)

var num100 = 10; (O)

 

3. 변수명으로는 예약어(document, location, window 등)를 사용할 수 없습니다 예약어란 이미 자바스크립트 언어에서 사용 중인 단어를 말합니다 주의하시기 바랍니다.

 

var document = 10; (X)

var num = 10; (O)

 

4. 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋습니다.

 

var num ="hello" (X) (예시입니다)

var num = 10; (O) (에시입니다)

 

사실 어떻게 이름을 지어도 상관은 없습니다 제가 변수 이름을 num이라고 지었잖아요? num의 의미는 Number를 줄여서 num이라고 지정한거에요 Number의 의미는 번호 즉, 숫자의 의미죠? 그런데 숫자의 의미가 강한 변수 이름에 문자열을 집어넣으면 좀 그렇겠죠?;; 그래서 이름을 잘 부여해서 작성하라는 뜻으로 적은겁니다.

 

5. 변수명을 사용할 때는 대소문자를 구분해야합니다

 

var num = 10; document.write(Num) (X)

var num = 10; document.write(num) (O)

 

대소문자는 기본이겠죠? 변수 num으로 설정했는데 docunent에 Num을 넣어버리면 황당한 겁니다..

 

자 이렇게 해서 자바스크립트의 기초변수를 공부해보았습니다.

이제 조금씩 새로운 부분이 나오니까 긴장되기도 하고 이해하려고 노력하시는 분들이 있을거에요~ 끝까지 포기하지 않는 자세를 가지고 끝까지 완독할 수 있도록 노력해주세요!

 

지금까지 19살 개발자 포돌이였습니다.

 

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-