객체 종류

객체란?

여러 개의 속성(property)과 메서드를 포함하는 데이터 구조

 - 자바스크립트 객체는 프로그램에서 모두 인식할 수 있는 대상

 - 속성(프로퍼티) : 객체의 특성이나 속성 

 - 메서드(함수) : 객체에서 할 수 있는 동작

 

객체의 구조

key : 객체의 속성(property)또는 메서드(method) 이름

value : 이름에 대응되는 값 또는 함수

이름과 값은 세미콜론 (:) 한쌍이고 여러 쌍들은 (,)콤마로 구분

• 파이썬의 딕셔너리형은 key를 작은따옴표(')나 큰따옴표(")로 묶어주지만,
  자바스크립트의 객체는 이름(key)를 따옴표로 감싸주지 않아도 된다.

 

객체 생성

중괄호{}를 사용한 객체 리터럴 객체 생성방법

생성자 함수를 정의하여 생성자 함수를 사용하고 객체 생성 하는법

 

객체 리터럴(중괄호{}) 사용한 객체 생성

기본문법

var/let/const 객체명 ={

      key1 : vlaue1, //프로퍼티

      key2 : vlaue2,

      key3 : function(){ //메서드

}

}

 

예시

var person ={

     name : "json",

     age : 25,

     gender : "woman",

    fullName : function(){

    return this.name;

}

};

- name,age,gender person객체의 속성(property)

-getFullName() person객체의 메서드(method)

 

생성자 함수를 사용한 객체 생성

 

기본문법

function 객체명(){

   this.key1 = value1;

   this.key2 = value2;

   this.key3 = function(){};//메서드

   

}

객체 생성자 함수선언

function person(){

 this.name = name;

 this.age = age;

 this.gender = gender;

this.fullName =function(){

   return this.name;

};

};

 

생성자 함수로 객체생성

var ball = new person("json",25,"woman");

 

여러가지 자료형을 갖는 객체예시

let pearl ={

   name : "jsan" //문자열 속성

   age : 25 //숫자 속성

   wearGlasses : "false" //논리형 속성

   smaple : function(){ //메서드

   console.log('화이팅');
}

 favorite :{
  food : 'noddle',

  drink : "ade"

},

settime : ['jsa','row','run'] //배열 속성

}

 

객체접근

객체 자체 접근

- 객체를 참조하는 변수를 사용하여 접근

객체변수명 : 객체 자체의 접근

 

예시 

console.log(person);

객체 속성 접근

- 객체 속성 접근하는 방법은 2가지가 있다

온점(.)접근 하는 방법 대괄호([])로 접근 방법

 

온점 표기법

객체변수명.key :온점(.)으로 객체 자체 접근 

console.log(person.name); //john

console.log(person.age); //25

 

대괄호 표기법

객체변수명["key"]:대괄호([])로 객체 속성의 접근

변수나 계산된 속성 이름을 사용할 수 있는 장점 존재

console.log(person["name"]);

console.log(person["age"]);

name을 변수에 저장하여 대괄호에서 넣어 객체의 속성 접근

var samsung = "name";

console.log(person[samsung]) //객체의 속성 접근

 

참고사항
객체의 속성으로 또 다른 객체를 가지는 경우
객체변수명.key1.key2 : 객체의 이름이 key1인 객체속성의 key2인 속성 접근
객체의 속성으로 배열을 가지는 경우
객체변수명.key[index] : 객체의 배열속성의 특정 인덱스의 요소 접근

 

객체 속성 변경/추가
객체변수명.key = value
객체변수명["key"] = value

객체 메서드 접근

온점(.), 해당 메서드 이름, 호출 연산자인 ()와 함께 사용
객체변수명.key() : 온점(.)으로 객체의 속성 접근

person.getFullName(); // "minjee"

 

◉ 자바스크립트에서 사용하는 객체

1. 내장 객체 (Built-in Objects)
   : 자바스크립트에서 기본적으로 제공되는 객체
   • Object: 모든 객체의 기본이 되는 내장 객체
   • Array: 배열 데이터를 다루는 내장 객체
   • String: 문자열을 다루는 내장 객체
   • Number: 숫자를 다루는 내장 객체
   • Boolean: 논리값을 다루는 내장 객체
   • Math: 수학적인 연산을 수행하는 함수와 상수를 제공하는 내장 객체
   • Date: 날짜와 시간을 다루는 내장 객체
2. 브라우저 객체 (Browser Objects)
   : 웹 페이지와 상호작용하는 데 사용되는 객체
   • Window: 웹 브라우저 창을 나타내는 객체 (전역 객체)
   • Document: 웹 페이지의 문서 객체
     • 웹 페이지의 요소에 접근하고 조작하는 메서드와 속성을 제공
   • DOM (Document Object Model) 객체들: 웹 페이지의 요소들을 나타내는 객체들
3. 사용자 정의 객체 (User-defined Objects)
   : 개발자가 직접 정의한 객체
   • 객체 리터럴을 사용하여 객체를 생성하거나, 생성자 함수를 사용하여 객체를 생성

[JavaScript] 객체 (velog.io)

[JavaScript] 객체