[JavaScript] 자바스크립트 객체(object) (1) : 참조 및 생성

2021. 8. 3. 19:01·JavaScript
728x90

 


자바스크립트 객체

- JS의 기본 타입은 객체(object)

- 객체 : 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합

- 함수가 객체의 프로퍼티의 값으로 오면, 메소드(method0라고 부른다

 

- 객체의 프로퍼티 및 메소드 참조

객체이름.프로퍼티이름
객체이름["프로퍼티이름"]

객체이름.메소드이름()
var person = {
    name: "홍길동",
    birthday: "030219",
    pId: "1234567",
    fullId: function() {
        return this.birthday + this.pId;
    }
};

person.name    // 홍길동
person["name"] // 홍길동
person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

- 메소드를 참조할 때 괄호를 붙이지 않으면, 메소드 그 자체를 참조하여 메소드 정의 그 자체가 반환된다

 

 

 

 

 


객체 생성

 

1. 리터럴 표기(literal notation)를 이용한 방법

var 객체이름 = {
    프로퍼티1이름 : 프로퍼티1의값,
    프로퍼티2이름 : 프로퍼티2의값,
    ...
};

 

 

 

2. 생성자 함수(constructor function)를 이용한 방법

- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있다

- 이 때 사용되는 메소드를 생성자(constructor)라고 하며, 새롭게 생성되는 객체를 초기화하는 역할을 한다

- JS는 원시 타입을 위한 생성자를 미리 정의하여 제공한다

- (예) 자바스크립트에서 제공하는 생성자를 사용

var day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
document.write("올해는 " + day.getFullYear() + "년입니다.");

- 사용자가 직접 객체 생성자 함수를 작성하여 사용할 수도 있다

 

 

 

3. Object.create() 메소드를 이용한 방법

- Object.create() 메소드 : 지정된 프로토타입 객체와 프로퍼티를 가지고 새로운 객체로 만든다

- 사용자가 프로토타입 객체를 직접 명시할 수 있다는 점에서 유용하다

Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);
var obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고
    x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와
    y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
});
obj.x;                      // x좌표
obj.y;                      // y좌표 
Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.

 

 

 

 

 

 

 

[참고자료] http://tcpschool.com/javascript/intro

 

728x90
저작자표시 비영리 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 객체(object) (3) : Object 객체와 Object.prototype 객체의 메소드  (0) 2021.08.03
[JavaScript] 자바스크립트 객체(object) (2) : 상속, 프로토타입, this 키워드, 삭제, 순회, 비교  (0) 2021.08.03
[JavaScript] 자바스크립트 함수(function) (2) : 미리 정의된 전역 함수  (0) 2021.08.03
[JavaScript] 자바스크립트 함수(function) (1) : 정의, 유효범위, 호이스팅, arguments, 디폴트 매개변수  (0) 2021.08.03
[JavaScript] 자바스크립트 배열(array) : 생성 및 활용  (1) 2021.08.03
'JavaScript' 카테고리의 다른 글
  • [JavaScript] 자바스크립트 객체(object) (3) : Object 객체와 Object.prototype 객체의 메소드
  • [JavaScript] 자바스크립트 객체(object) (2) : 상속, 프로토타입, this 키워드, 삭제, 순회, 비교
  • [JavaScript] 자바스크립트 함수(function) (2) : 미리 정의된 전역 함수
  • [JavaScript] 자바스크립트 함수(function) (1) : 정의, 유효범위, 호이스팅, arguments, 디폴트 매개변수
s_ih_yun
s_ih_yun
  • s_ih_yun
    CODESYUN
    s_ih_yun
  • 전체
    오늘
    어제
    • 분류 전체보기 (339)
      • Web (8)
      • Java (7)
      • Spring (19)
      • Git (16)
      • MyBatis (1)
      • HTML & CSS (14)
      • JavaScript (11)
      • DevOps (4)
      • Cloud (8)
      • Lanuage (13)
        • C++ (3)
        • Python (10)
      • DB (1)
        • MySQL (1)
        • Oracle (2)
      • Computer Science (26)
        • Concept (3)
        • Algorithm (23)
      • Baekjoon (104)
        • 단계별로 풀어보기 (78)
      • CodeUp (98)
        • Python 기초 100제 (98)
      • Programmers (2)
      • Books (3)
      • etc (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • Syun's Pages
  • 인기 글

  • 태그

    BOJ
    Python
    CodeUp 기초 100제
    c++
    Tistory
    codeup
    git
    Cloud
    aws
    C
    단계별로 풀어보기
    Programmers
    HTML
    SourceTree
    oracle
    알고리즘
    github
    VS Code
    CSS
    spring
    web
    MySQL
    java
    db
    clean code
    웹
    JavaScript
    myBatis
    자료구조
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
s_ih_yun
[JavaScript] 자바스크립트 객체(object) (1) : 참조 및 생성
상단으로

티스토리툴바