목차
- JS 객체 종류 ★
- JS 기초값
- 객체는 변수임.
- 객체 속성 (Object Property)
- 객체 메서드 (Object Method)
- 객체 생성 구문 ★
- JS 객체는 변경 가능.
- JS 객체 관련 주소
- JS에서 객체는 왕임. 즉, 객체를 이해하면, JS 이해하는 것임.
- 객체 : 복합적인 정보를 담고 있는 어떤 대상. (예) 여자친구
- (예) 여자친구 : 여자, 나이, 미모, 성격, 직업, 재력, 집안...
JS 객체 종류 ★
[new 키워드로 정의시 객체인 것들]
- Boolean (참거짓)
- Number (숫자)
- Strings (문자열)
[항상 객체인 것들]
- Date (날짜)
- Math (산수)
- Regular expression (정규표현식)
- Array (배열)
- Function (함수)
- Object (객체)
JS 기초값
속성이나 메서드가 없는 값.
1. primitive data type은 기초값을 갖는 데이터임. (JS는 5종류 지원)
- string
- number
- boolean
- null
- undefined
2. 기초값은 변경 불가.
- x = 3.14 경우, x의 값은 변경 가능하나, 3.14의 값을 변경하는 것은 불가능.
- "Hello" (string 타입) : "Hello"는 항상 "Hello"임.
- 3.14 (number 타입) : 3.14는 항상 3.14임.
- true (boolean 타입) : true는 항상 true임.
- false (boolean 타입) : false는 항상 false임.
- null (null (object) 타입) : null은 항상 null임.
- undefined (undefined 타입) : undefined는 항상 undefined임.
객체는 변수임.
1. JS 변수는 단일값을 담음.
<script>
var site = "홈짱닷컴 Homzzang.com";
document.getElementById("demo").innerHTML = site;
</script>
2. 객체도 변수이나, 객체는 name:value 쌍의 여러 값을 담을 수 있음. (즉, JS 객체는 명명된 값의 모음임.)
<p id="demo"></p>
<script>
var hz = {
site : "홈짱닷컴 Homzzang.com",
code : "HTML CSS JS JQ PHP SQL",
open : 2012
};
var txt = hz.site + "<br>" + hz.code+ "<br>" + hz.open;
document.getElementById("demo").innerHTML = txt;
</script>
객체 속성 (Object Property)
1. JS 객체에서 명명된 값은 속성 (property)이라 불림.
위 예제 경우,
- site (속성) - 홈짱닷컴 Homzzang.com (속성값)
- code (속성) - HTML CSS JS JQ PHP SQL (속성값)
- open (속성) - 2012 (속성값)
2. name value 쌍은 아래 개념들과 유사.
- 연관배열 (Associative arrays) - (PHP)
- 딕셔너리즈 (Dictionaries) - (Python)
- 해시테이블 (Hash tables) - (C)
- 해시맵 (Hash maps) - (Java)
- 해시즈 (Hashes) -(Ruby, Perl)
객체 메서드 (Object Method)
1.
메서드는 객체에서 실행될 수 있은 행위임.
2.
객체 속성은 기초값, 다른 객체, 함수가 될 수 있음.
3.
객체 메서드는 함수 정의를 포함하고 있는 객체 속성임.
- site (속성) - 홈짱닷컴 Homzzang.com (속성값)
- code (속성) - HTML CSS JS JQ PHP SQL (속성값)
- open (속성) - 2012 (속성값)
- homzzang (속성) - function() {return this.site + " " + this.code + " " + this.open;}
4.
JS 객체는 속성 및 메서드라 불리는 값을 담는 그릇임.
객체 생성 구문 ★
※ JS 사용하면 고유한 객체를 정의하고 생성 가능. (4가지 방법 가능)
- 키:값 쌍의 객체 문자열 구문 사용해 단일 객체를 정의하고 생성.
- new 키워드 사용해 단일 객체를 정의하고 생성.
- 객체 생성자를 정의한 후, 생성 된 유형의 객체를 생성.
- ECMAScript 5 경우, 함수 사용해 객체 생성 가능. Object.create()
객체 생성법1 - {name:value, ...} 객체 문자열 구문 사용. (권장)
※ 중괄호 안에 name:value 쌍을 쉼표로 연결.
<p id="demo"></p>
<script>
var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012};
document.getElementById("demo").innerHTML =
hz.site + " " + hz.host + " " + hz.open;
</script>
결과보기
[참고] - 공백 주거나 줄바꿈 해도 상관없음.
<p id="demo"></p>
<script>
var hz = {
site:"홈짱닷컴",
host:"Homzzang.com",
open:2012
};
document.getElementById("demo").innerHTML =
hz.site + " " + hz.host + " " + hz.open;
</script>
결과보기
객체 생성법2 - new 키워드 사용 (비권장)
이 방법은 객체생성법1과 동일한 결과가 나오지만,
단순성, 가독성, 실행속도 상 객체생성법1 사용 권장.
<p id="demo"></p>
<script>
var hz = new Object();
hz.site = "홈짱닷컴";
hz.host = "Homzzang.com";
hz.open = 2012;
var txt = hz.site + " " + hz.host + " " + hz.open;
document.getElementById("demo").innerHTML = txt;
</script>
결과보기
JS 객체는 변경 가능.
객체는 변경 가능함. (즉, 값이 아니라 참조로 처리됨.)
(예) hz이 객체인 경우 다음 명령문은 hz의 복사본을 생성 안 함.
var x = hz; // hz의 복사본을 생성 안 함.
즉,
객체 x는 hz의 복사본이 아님. x가 hz임. x와 hz은 같은 객체임.
x가 바뀌면 hz도 바뀜. 왜냐면, x와 hz는 같은 객체이기 때문임.
[예제]
<p id="demo"></p>
<script>
var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012}
var x = hz;
x.open = "2012년";
var txt = hz.site + " " + hz.host + " " + hz.open;
document.getElementById("demo").innerHTML = txt;
</script>
결과보기
JS 객체 관련 주소