객체
객체란, 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용한 데이터를 가져오게 되는 것이 객체이다.
생성 방법
객체의 선언
var object = {'one': 1, 'two':2, 'three': '3'} // Object {one: 1, two: 2, three: "3"}
객체의 호출
var object = {'one': 1, 'two':2, 'three': '3'} // 객체 선언 for(key in object){ document.write(key + " "+ object +"</br>") } /* one [object Object] two [object Object] three [object Object] */
객체와 함수
객체는 배열과는 달리 객체 안에 함수를 넣을 수 있다.
var object = { 'number' : {'one': 1, 'two':2, 'three': '3'}, 'show' : function() { document.write('obj func') } } // 객체 선언 object.show() // obj func
모듈
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장 되기에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있다. (브라우저에만 해당)
사용 방법
먼저 필요한 기능을 입력 할 JS 파일을 생성한다.
var print print = function(){ document.write("print 함수가 호출 되었습니다."); }
임의의 파일명 “printf_func.js”으로 저장한다.
기능을 사용할 파일에서 head에서 JS파일을 호출한다.
만약 메인 파일과 동일한 위치에 있을 경우는 src = “” 안에 파일명만 적어주면 된다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="print_func.js"></script> </head> <body> <script type="text/javascript"> print(); // print함수가 호출 되었습니다. </script> </body> </html>
라이브러리
라이브러리란 모듈과 비슷한 개념으로 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다.
사용 방법
모듈과 같이 유명한 jquery등의 라이브러리를 다운 받아 head에 추가하여 사용한다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="jquery.js"></script> </head> <body> <script type="text/javascript"> $(/*commend*/) //jquery와 같은 경우에는 $표시를 이용해 라이브러리 안에 함수를 호출 한다. </script> </body> </html>