객체
객체란, 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용한 데이터를 가져오게 되는 것이 객체이다.
생성 방법
객체의 선언
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>