JavaScript | 객체 [객체 리터럴, 생성자 함수]

yuni·2022년 9월 26일

JavaScript 객체 리터럴(object literal)객체(Object)생성자 함수

javascript

목록 보기

6/16

❔ 객체(object) ❔

⇒ JavaScript 변수 부분의 데이터 타입 원시(단일데이터)와 객체(복합데이터)를 배울때 객체에서도 배웠었다.
객체는 여러 데이터를 {key: value} 형태로 저장하고, 연관된 데이터를 그룹화하는 복합 데이터이다. 또한 참조의 의한 전달 을 한다.
이처럼 서로 연관되어있는 데이터(propertie)와 함수(method)를 객체로 묶어준다.

프로퍼티(property): 객체 상태
메소드(method): 프로퍼티를 참조하고 조작할 수 있는 동작

📌 객체 리터럴(object literal)

객체를 생성 할 수 있는 방법은 기본적으로 2가지가 있는데 그 중 객체 리터럴이 가장 일반적이다.

중괄호 { } 부분이 객체 리터럴이다.
프로퍼티를 나열할 때는 쉼표( , )로 구분한다.

//object literal
let melon = {
  color : 'Green',
  emoji : '🍈',
};  //{}블록을 의미X, 값으로 평가되기 때문에 ; 붙인다.

console.log(melon); //Green, 🍈

🙌 객체의 프로퍼티 접근방법

마침표 표기법(dot notation) : .을 사용
대괄호 표기법(bracket notation) : [ ]을 사용 단, 내부에 반드시 따옴표''로 감싸야 한다.

동적으로 접근
→ 동적으로 속성에 접근할때는 대괄호 표기법을 사용

let melon = {
  color : 'Green',
  emoji : '🍈',
}; 

console.log(melon.color); //Green <- 마침표 표기법
console.log(melon.emoji); //🍈
console.log(melon.['color']); //Green <- 대괄호 표기법

✔ 프로퍼티 추가

없는 값을 할당하면 동적으로 생성되어 추가된다.

//dynamic property
let melon = {
  color : 'Green',
  emoji : '🍈',
}; 

//추가
melon.taste = 'sweet';


console.log(melon); 
//{ color: 'Green', emoji: '🍈', taste: 'sweet' }

✔ 프로퍼티 삭제

delete 사용해 삭제한다.

//delete property
let melon = {
  color : 'Green',
  emoji : '🍈',
}; 

//삭제
delete melon.emoji;

console.log(melon) //Green

👁‍🗨 객체 축약

키(key)이름과 참조한 변수이름이 동일할 경우 생략가능

function obj(id, name){
  return{
    //id: id,
    //name: name,
    id,
    name,
  };
}

🙌 객체안의 함수(Object method)

상태와 행동 객체

const name = {
  first: 'Kim',
  last: 'yena',
  display: function () {
    console.log(`myname is ${this.last} ${this.first}`);
  },
};

name.display(); // myname is yena Kim

* this
⇨ 일반(Normal) 함수는 호출 방법에서 따라 this정의
⇨ 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this정의
⇨ 객체 안에서 자신의 데이터(속성)에 접근할려면 this사용

📌 생성자 함수

const obj = new Function();
인스턴스 : new키워드로 생성자함수를 실행한 반환되서 할당된 변수
PascalCase로 표기

//생성자 함수
function User(first, last) {
  this.firstName = first;
  this.lastName = last;
  this.display = () => {
    console.log(`myname is ${this.last} ${this.first}`);
  };
  //return this //생략가능
}

//User : 생성자함수
const kim = new User('kim', 'yena');
const amy = new User('Amy', 'Clarke');

console.log(kim);
console.log(amy);