• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 객체 관련 주소

 

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-12-14 (화) 18:19 2년전
21-12-14 읽음 확인,

관리자님 호오오옥시 읽었던 페이지인지 표시되게 해주실 수 있나요ㅠㅠ 매일 들어와서 읽었던 곳 찾느라 살짝의 시간이...ㅎ
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-12-14 (화) 18:31 2년전
회원이 글 열람한 사실을 DB에 넣는 작업은 살짝 귀찮아서 그렇고,
크롬 스타일봇 확장 프로그램 설치 후, 아래 코드 적용해 보세요.
#mw_basic .mw_basic_list_subject a:visited {
  color:gray;
}
주소
          
          
no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-12-14 (화) 18:36 2년전
오 꿀팁 감사합니다!! 복받으세요!
주소
분류 제목
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Object JS - Object Constructor - 객체생성자종류 ★
Object JS - Object Prototypes - 객체프로토타입 (= 객체원형) ★
Object JS - object ECMAScript 5 - 객체혁명
Object JS - Object Display - 객체 표시(=출력)
Object JS - Object Classes - 객체 클래스
목록
찾아주셔서 감사합니다. Since 2012