티스토리 뷰

Programming/JavaScript, jQuery

[javascript 3강] 변수와 자료형

국브 2019. 2. 9. 14:15

 [javascript 3강] 변수와 자료형



이번글에서는 변수와 자료형에 대해서 알아보겠습니다.

다른 프로그래밍 언어를 사용하고 계시다면 쉽게 이해할수 있고

만약 처음 접하시는분들또한 다른언어에 비해 유연하여 쉽게 습득하실수 있습니다.

우선 변수는 모든 자료형을 담을수 있는 그릇 입니다.

자바스크립트 변수에는 문자, 숫자, 불린, 리스트, 함수, 객체, undefined 을 담을수 있습니다.

이번글에 들어가기전 자바스크립트 개요,개발환경, 기본문법등을 잘모르신다면 이전글을 확인 부탁드립니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정


2019/02/09 - [분류 전체보기] - [javascript 2강] 입출력 및 기본문법




 1. 변수


변수는 모든 자료형을 담고 상황에따라 값을 변환할수 있는 그릇입니다.

변수의 선언은 다음과 같습니다.


 사용법 


선언후 변수값 할당


var 변수명;

변수명 = 값;


선언 및 변수값 할당 동시에


var 변수명 = 값; 



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            //선언 할당 따로
            var st1;
            st1= "변수의 값";
            
            //선언 할당 동시에
            var st2= "변수의 값2";
            
            console.log(st1);
            console.log(st2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 해석 

 


            //선언 할당 따로
            var st1;
            st1= "변수의 값";


선언및 할당을 따로해도 변수에는 값이 들어가 브라우저 개발자도구 콘솔창에 "변수의 값" 이 출력되는것을 확인할수 있습니다.


            //선언 할당 동시에
            var st2= "변수의 값2";


선언과 할당을 동시에 해도 값이들어가 브라우저 개발자도구 콘솔창에 "변수의 값2" 이 출력되는것을 확인할수 있습니다.




 2. 자료형 및 typeof() 연산자


자바스크립트의 변수는 자료형을 선언하지 않고 변수에 들어가는 값에 의해 선택됩니다.

변수에 들어갈수 있는 자료형은 문자, 숫자, 불린, 리스트, 함수, 객체, undefined 이 있습니다.

또한 자료형을 확인할수있는 내장함수인 typeof() 연산자를 통해 자료형을 확인할수 있습니다.

(typeof 는 6가지(undefined, boolean, number, string, object, function) 자료형만 구분합니다.)


 사용법 


문자형


var 변수명 = "";


숫자형


var 변수명 = 숫자;


불린형


var 변수명 = true/false;


리스트 및 array


var 변수명 = []; 또는 var 변수명 = new new Array();


함수 


var 변수명 = function(){};


객체


var 변수명 ={};


undefined


var 변수명;


typeof 사용법


typeof(변수); 



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            //문자형    
            var str = "";
            
            //숫자형
            var it = 123;
 
            //불린형
            var bl = true;
    
            //리스트
            var list = []; 
            var list2 = [1,2,3]; 
            var array1 = new Array();
            var array2 = new Array(1,2,3);
    
            //함수 
            var fn = function(){};
    
            //객체
            var oj ={};
    
            //undefined
            var df;
            
            //typeof() 연산자를 통한 형태 확인
            console.log(typeof(str));
            console.log(typeof(it));
            console.log(typeof(bl));
            console.log(typeof(list));
            console.log(typeof(list2));
            console.log(typeof(array1));
            console.log(typeof(array2));
            console.log(typeof(fn));
            console.log(typeof(oj));
            console.log(typeof(df));
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 해석 

 


var str = "";  는 변수 str 에 문자형 값을 넣어준후 console.log(typeof(str)); 출력한결과 브라우저 개발자 도구 콘솔창에 string 이라고 출력된것을 확인할수 있습니다.


var it = 123; 는 변수 it 에 숫자형 값을 넣어준후 console.log(typeof(it)); 출력한결과 브라우저 개발자 도구 콘솔창에 number 라고 출력된것을 확인할수 있습니다.


var bl = true;  는 변수 bl에 true 라는 boolean 값을 넣어준후 console.log(typeof(bl)); 출력한결과 브라우저 개발자 도구 콘솔창에 boolean 이라고 출력된것을 확인할수 있습니다.

 

            //리스트
            var list = []; 
            var list2 = [1,2,3]; 
            var array1 = new Array();
            var array2 = new Array(1,2,3);


리스트형태의 변수를 생성하기 위해 [] 를 넣어주거나 [1,2,3] 과 같이 값을 같이 넣어 선언과 동시에 값을 넣어줄수도 있습니다.

또한 array 를 생성하기 위해서는 new Array(); 라고 생성하여 넣어주거나

생성과 동시에 값을넣어 new Array(1,2,3); 과같이 변수의 값을 할당해줄수도 있습니다.


            console.log(typeof(list));
            console.log(typeof(list2));
            console.log(typeof(array1));
            console.log(typeof(array2));


콘솔로그를 통해 출력한결과..

어랏? list 나 array 가 아닌 object 라고 나오는것을 확인할수 있습니다.

그이유는.. typeof() 연산자가 list 타입이나 array 타입을 분별하지 못하기 때문에 object 타입이라고 나오는것 입니다.

하지만! object 타입이 아니고 list 타입 또는 array 타입 입니다.

이것은 자바스크립트를 사용하다보면 다르다는것을 확인할수 있습니다.


자바크스립가 유연한 언어인 이유가 바로 이 부분에서 나옵니다.  var fn = function(){}; 변수에 함수를 담을수 있는것입니다.

함수는 변수에 담지않고 사용할때는 function 함수명(){}; 이렇게도 사용할수 있지만..

변수에 담을때는 함수명을 제거한후에 담으시면 됩니다.

console.log(typeof(fn)); 출력한결과 브라우저 개발자 도구 콘솔창에 function 이라고 출력된것을 확인할수 있습니다.


 

var oj ={}; 는 변수에 객체를 담는것입니다.

자바스크립트 또한 객체를 다룰수 있으며 객체에는 여러가지 형태의 값들을 담을수있습니다.

console.log(typeof(oj)); 출력한결과 브라우저 개발자 도구 콘솔창에 object 라고 출력된것을 확인할수 있습니다.

 

var df; 는 변수를 선언하고 값을 할당하지 않으면 undefined 형태의 변수를 만들수 있습니다.

console.log(typeof(df)); 출력한결과 브라우저 개발자 도구 콘솔창에 undefined 이라고 출력된것을 확인할수 있습니다.

 




 글을 마치며..


이번글에서는 변수와 변수의 자료형에 대해서 알아보았습니다.

모두 수고하세요!



도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 5강] 배열  (0) 2019.02.10
[javascript 4강] 연산자  (0) 2019.02.10
[javascript 2강] 입출력 및 기본문법  (0) 2019.02.09
[javascript 1강] 자바스크립트 개요 및 개발환경설정  (0) 2019.02.07
자바스크립란 무엇인가요?(javaScript)  (2) 2016.01.13
댓글