JavaScript 정리 12

20 Feb 2019

Reading time ~6 minutes

JavaScript 정리 12 - JSON, closure, class, prototype

JSON

JavaScript Object Notation
JSONObject

{ 이름: 값, ... }

JSONArray
- JSONObject가 배열 형태로 사용되는 것
- 단독사용, JSONObject의 값으로도 사용될 수 있다.

// 1. 데이터 생성
var data = "[ {'이름':'값',... }, { '이름':'값', ... }, ... ]";

// 2. JSONArray 생성
var jason_arr = eval("("+data+")");

// 3. 사용
for(var i=0; i<jason_arr.length; i++) {
    jason_arr[i].이름; // 배열에서 JSONObject을 가져와 사용가능
}

JSONArray 사용 예1

<body>
<div id="output"></div>
<input type="button" value="클릭" class="inputBox" id="btn"/>
</body>

window.onload = () => {
     document.getElementById("btn").addEventListener("click",  useJsonArray);
}

function useJsonArray() {
     // 1. data 생성
     var data = "[  {'name':'박영민','age':27,'role':'조장-예매관리'},  {'name':'김정윤', 'age':31,'role':'얼굴-디자인,UI,스넥관리' },  {'name':'최지우', 'age':26,'role':'조원-로그인,정산관리'},  {'name':'노진경',  'age':32,'role':'조원-결석,휴가,상영관리,영화관리'},{'name':'김희철',  'age':26,'role':'조원-예매,업무부심'},{'name':'박소영',  'age':25,'role':'조원-스넥판매'},{'name':'이지수',  'age':30,'role':'조원-사용자 로그인,회원관리'} ]";
     
     // 2. JSONArray 생성
     var json_array = eval("("+data+")");
     console.log(json_array); // JSONObject 배열을 콘솔로 확인
     
     var output = "<table border='1'>";
     output+="<tr><th width='80'>이름</th><th  width='40'>나이</th><th width='300'>역할</th></tr>"

     for(var i=0; i<json_array.length; i++) {
          output+="<tr><td>"+json_array[i].name+"</td><td>"+json_array[i].age+"</td><td>"+json_array[i].role+"</td></tr>";
     }
     output+="</table>";     

     document.getElementById("output").innerHTML = output;
}

JSONArray 사용 예2

// data.js
var data = "{ 'class':4, 'pubDate':'2019-02-20', 'data':["
     + "{'name': '박영민', 'group':2, 'role':'영화예매  프로젝트, 예매관리' },"
     + "{'name': '김정윤', 'group':2, 'role':'디자인, UI,  회원관리, 스낵관리' },"
     + "{'name': '이재찬', 'group':1, 'role':'반장,PC방 관리  프로젝트, 주문관리, 통계' },"
     + "{'name': '김정운', 'group':1, 'role':'로그인,  회원관리' },"
     + "{'name': '공선의', 'group':3, 'role':'구인구직  프로젝트, 구직관리, 구직조회, 관심구인구직' },"
     + "{'name': '이재현', 'group':3, 'role':'관심구인구직,  지원현황관리' }]"
     + ", 'result':true }";
var json_obj = eval("("+data+")");

<!-- 외부파일 방식으로 JSONArray를 변수에 저장하여 가지고  있는 js를 연결 -->
<script type="text/javascript" src="data.js"></script>

<select id="selGroup">
     <option>----조를 선택해주세요----</option>
     <option value="1">봉현이의 1조</option>
     <option value="2">영민이의 2조</option>
     <option value="3">행운의 3조</option>
</select>

window.onload = () => {
     document.getElementById("selGroup").addEventListener("change",  useJson);
}

function useJson() {
     // 외부파일방식으로 연결한 js에서 제공하는 JSON을 사용.
     var sel = document.getElementById("selGroup");
     
     if (sel.selectedIndex != 0) {
           if(confirm(sel.value+"조를 조회하시겠습니까?")) {
                
                var divNode = document.getElementById("output");
                var output = "<table border='1'>";
                output+="<tr><th colspan='2'>"+sel.value+"조  조회 결과</th></tr>";
                output+="<tr><th width='100'>이름</th><th  width='300'>역할</th></tr>";
                
                var group_data = json_obj.data;
                for(var i=0; i<group_data.length; i++) {
                     if(group_data[i].group == sel.value) {
                          output+="<tr><td>"+group_data[i].name+"</td><td>"+group_data[i].role+"</td></tr>";
                     }
                }

                output+="<tr><td  colspan='2'>전체["+group_data.length
                     +"건] 중 조회 결과["+cnt+"건]이  조회되었습니다.</td></tr>"
                output+="<tr><td colspan='2'>데이터 생성일자 :  "+json_obj.pubDate+ "</td></tr>";
                output+="</table>";
                divNode.innerHTML = output;
           }
     }
}

JSON File

JSON은 파일로도 만들어져 배포되기도 한다.
.JSON 확장자를 갖는다.
https://json.org/example.html

{
     "class" : 4,
     "data" :   [ {"name":"영근"} ]
}

closure

JS 함수의 기본 접근지정자는 priavte.
함수 내에 선언된 함수나 변수를 함수 외부에서 사용할 수 있도록 접근지정을 해제해 주는 것
JSONObject와 동일한 문법
함수 마지막 줄에서 return을 하여 사용한다.
무기명 함수로 만들고 업무를 구분지어 사용할 수 있다.
- 기명함수로 쓰면 class
library를 제작하는 개발자들이 주로 사용
사용법

{ 외부에서 사용할 이름 : 변수명, ... 외부에서 사용할 이름:함수명, ... }

무기명 함수로 사용
- new로 생성하여 사용하지 않음
- 작업별 업무를 묶어서 개발할 수 있다.

var 변수명 = function(매개변수, ...) {
    var 변수명;
    function 기명함수() {
         ...
    }

    // closure
    return { 외부명:내부명, ..., 외부명:내부명 };
} (매개변수값, ... );

// 외부에서 사용
변수명.외부명; // 함수면 외부명()

// 변수사용
// -무기명 함수를 저장한 변수명.외부명 = 값;
// 함수
// -무기명 함수를 저장한 변수명.외부명(값, .... );

closure 사용 예

<body>
<div id="output"></div>
<input type="button" value="매개변수 없는 무기명 함수"  id="btn1" class="btn"/>
<input type="button" value="매개변수 있는 무기명 함수"  id="btn2" class="btn"/>
</body>

window.onload = function() {
     document.getElementById("btn1").addEventListener("click",useNonParam);
     document.getElementById("btn2").addEventListener("click",usePram);
}

// 매개변수 없는 무기명 함수
function useNonParam() {
     var val = function() {
           var name="김정윤";  
           
           function getAddr() {
                return "서울시 강남구 역삼동";
           }
           
           // closure
           // 함수 내의 변수나, 함수를 외부에서  사용할 수 있도록 접근 권한을 변경해주는 것
           // { 외부명 : 내부명 }
           return { na:name, addr:getAddr };
     }(); // val(); - 선언과 동시에 호출
     
     // 무기명 함수안에 있는 변수는 외부에서 사용할 수  없다. (Java의 private)
     // closure를 해주면 밖에서 사용 가능해짐

     var divNode = document.getElementById("output");
     divNode.innerHTML = "이름 : "+val.na+", 주소 :  "+val.addr();
}

// 매개변수 있는 무기명 함수
function useParam() {
     
     var name="최지우";
     var addr="경기도 분당";
     var age=26;
     
     //  세가지 함수(일)을 무기명 함수로 묶을 수 있다.
     var personalData = function(i_name, i_addr, i_age) { 
           function getName() {
                return i_name+"님";
           }
           
           function getAddr() {
                return "거주지 : "+i_addr;
           }
           
           function birth() {
                var date = new Date();
                return date.getFullYear()-i_age+1;
           }
           
           // closure
           return { getName: getName, addr: getAddr, bir:birth }
     }(name, addr, age);
     
     document.getElementById("output").innerHTML =  "이름:"+personalData.getName()
           +", 주소:"+personalData.addr()+",  태어난해:"+personalData.bir();
     
}

class

JavaScript는 class를 만들 수 없다.
클래스 비슷한 형태를 만들어 사용 != class
- 생성자 오버로딩 X, 함수에 대해서만 overloading이 됨
- 매개변수의 개수에 따라 overloading가능
new로 객체를 생성하여 사용
클래스를 만드는 이유
- 업무를 처리하는 함수를 묶어서 관리하기 위해 클래스를 사용
내부에 정의되는 변수나 함수는 closure를 사용하여 외부에서 사용한다.
prototype을 사용하면 상속의 기능을 사용할 수 있다.
작성법

// 1. 클래스 선언
function Class명(매개변수, ... ) { // 클래스명==생성자명

    var 변수명;
    
    function 함수명(매개변수, ... ) {
         ...
    }

    // closure
    return { 외부명:내부명, ...  };
}

// 2. 객체화
var 객체명 = new 생성자(값, ... );

// 3. 사용
객체명.변수명
객체명.함수명(값, ... );

class 사용 예

<body>
<input type="button" value="클래스1" id="class1" class="btn"/>
<input type="button" value="클래스2" id="class2" class="btn"/>
</body>

window.onload = function() {
     document.getElementById("class1").addEventListener("click",useClass1);
     document.getElementById("class2").addEventListener("click",useClass2);
}    

function useClass1() {
     // 기본 생성자를 사용하는 클래스
     
     // 1. 클래스 선언
     function DataVO() { // 클래스명이면서 생성자명
           var name;

           function setName(i_name) {
                name = i_name;
           }
           
           function getName() {
                return name;
           }
           
           // closure
           return { setName:setName, getName:getName };
     }
     
     // 2. 클래스는 함수와 다르게 객체를 생성하여 사용
     var vo = new DataVO();
     
     vo.setName("영근");
     alert(vo.getName());
}

function useClass2() {
     // 매개변수 있는 생성자를 사용하는 클래스
     
     // 1. 클래스 선언
     function DataVO(i_name) {
           
           var name = i_name;
           
           function setName(i_name) {
                name = i_name;
           }
           
           function getName() {
                return name;
           }
           
           return { setName:setName, getName:getName };
     }
     
     // 2. 객체 생성
     var vo = new DataVO("오영");
     
     alert(vo.getName());
     
     vo.setName("오근");
     
     alert(vo.getName());
}

prototype

상속을 할 때 부모 클래스의 자원을 등록시키기 위해 사용
부모클래스 선언

function Parent() {
    ...
}

자식클래스 선언(내용은 기술하지 않음)

function Child() {}

자식클래스에 부모를 등록(상속 처리)

// 자식클래스명.prototype = new 부모클래스명();
Child.prototype = new Parent();

자식클래스의 요소를 등록

// 변수 등록
// 자식클래스명.prototype.변수명 = 값;
Child.prototype.age = 30;

// 함수 등록
// 함수는 무기명 함수의 형태로만 등록된다.
/* 자식클래스명.prototype.변수명 = function()(매개변수, ... ) {
    ...
}; */
Child.prototype.printAge = function() {
     // 등록된 변수는 클래스안에 등록되므로 this를  사용하여 접근
     alert(this.age+"살");
};

사용

// 자식클래스 생성
// var 객체명 = new 자식클래스명();
var c = new Child();

// 자식클래스객체명.변수명;
// 자식클래스객체명.함수명(매개변수, ... );
c.age;
c.printAge();

prototype 사용 예

<body>
<input type="button" value="상속" id="class3" class="btn"/>
</body>

window.onload = function() {
     document.getElementById("class3").addEventListener("click",useInheritance);
}    

function useInheritance() {
     // 1. 부모클래스 생성
     function Parent() {
           var name;
           
           function printName() {
                // 상속관계에서 클래스의 변수를 사용할 때에는  this.을 붙여서 변수를 사용
                // 객체에 생성된 변수임을 명시하여 사용
                alert("부모 함수 : "+this.name);
           }
           
           // closure
           return { name:name, printName:printName };
     }
     
     // 2. 자식클래스 생성
     function Child() {}
     
     // 3. 상속 처리
     Child.prototype = new Parent();
     
     // 4. 자식 클래스의 변수나 함수를 등록하여 사용
     Child.prototype.age;
     Child.prototype.printAge = function() {
           // 등록된 변수는 클래스안에 등록되므로 this를  사용하여 접근
           alert(this.age+"살");
     };
     Child.prototype.birthYear = function(age) {
           var date = new Date();
           alert((date.getFullYear() - age + 1) +"년생");
     }

     // 5. 사용
     var c_obj = new Child();
     
     c_obj.name = "김정윤";
     c_obj.printName();
     
     // 등록된 변수의 사용
     c_obj.age = 20;
     c_obj.printAge();
     c_obj.birthYear(32);
}

JavaScript