[Object] JS - Object - 객체개념(=객체의미=객체정의) ★

목차

1. JS 객체 종류 ★
2. JS 기초값
3. 객체는 변수임.
4. 객체 속성 (Object Property)
5. 객체 메서드 (Object Method)
6. 객체 생성 구문 ★
7. JS 객체는 변경 가능.
8. 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가지 방법 가능)

1. 키:값 쌍의 객체 문자열 구문 사용해 단일 객체를 정의하고 생성.
2. new 키워드 사용해 단일 객체를 정의하고 생성.
3. 객체 생성자를 정의한 후, 생성 된 유형의 객체를 생성.
4. 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 객체 관련 주소

 

• 엘리 님 강의 (6. class vs object) 개념 이해 - https://youtu.be/_DLhUBWsRtw
• 엘리 님 (7. object) 심화 강의 - https://youtu.be/1Lbr29tzAA8
• 모질라 JS 내장 object 소개 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
• 코딩읽어주는누나(OOP 의미) - https://youtu.be/fECCYukfVok