Javascript 객체

객체 지향 프로그래밍(OOP)

객체 지향 프로그래밍은 Java를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패러다임이다 이번 시간에는 OOP의 기본 개념이 되는 객체, 인스턴스, 생성자 를 알아보도록한다.

생성자 함수

생성자 함수는 객체를 생성하기 위한 함수이다 생성자는 다른 함수들과 달리 대문자로 시작한다

생성자 함수는 아래 두 조건을 만족해야 한다

• 함수 이름의 첫 글자는 대문자로 시작한다
• 반드시 new연산자를 붙여 실행한다

function human(name, age) {
  this.name = name
  this.age = age
  this.introduce = function() {
  console.log('이름 : ' + this.name + ' 나이: ' + this.age)
  }
}

객체

객체는 여러 속성(프로퍼티)을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value를 저장할 수 있는 구조이다

• 객체는 변수이다
• 객체는 중괄호 표기를 이용하여 만들 수 있다
• 객체는 각각의 key/value에 대한 정보를 나열할 수 있다
• Key는 문자열 또는 기호여야 한다

---

객체 생성 방법

객체를 생성하는 방법에는 크게 2가지가 존재한다

1. 객체 리터럴을 사용하여 단일 객체를 정의하고 만드는 방법
2. 생성자 함수와 new 키워드를 사용하여 객체를 정의하고 만드는 방법

---

객체 생성 방법 ( 객체 리터럴 ) 객체 리터럴 : 중괄호안에 key : value로 구성

var robot = {
  monster_name : "로봇",
  monster_level : 10 
}

console.log(typeof monster); // object 
console.log(monster.monster_name); // 로봇
console.log(monster.monster_level); // 10 

---

객체 생성 방법 ( 생성자 함수와 new키워드 )

// 생성자 함수 생성
funtion Monster(params_name, params_level){
  this.monster_name : params_name,
  this.monster_level : params_level
}

// new 키워드를 사용하여 위에서 만든 생성자 함수로 robot이라는 객체를 만듬 (인스턴스화)
const robot = new monster('로봇', 10); 

// robot 변수가 잘 생성되어 object 데이터타입을 갖은 객체라는것을 알 수 있음
console.log (typeof robot); // object

// robot 객체에 .(점) 접근자를 사용하여 속성(프로퍼티)에 접근할 수 있음
console.log (robot.monster_name) // 로봇
console.log (robot.monster_level) // 10

---

객체 리터럴을 안쓰고 생성자 함수로 객체를 생성하는 이유?

위처럼 객체 리터럴문법으로 객체를 생성할 수 있지만 아래와 같이 여러개의 객체를 생성해야하는 경우는 소스의 중복 및 가독성이 떨어진다

---

[객체 리터럴 방식으로 객체를 여러개 만든경우]

var robot1 = {
  monster_name : "로봇1",
  monster_level : 10 
}

var robot2 = {
  monster_name : "로봇2",
  monster_level : 20 
}

var robot3 = {
  monster_name : "로봇3",
  monster_level : 30 
}

---

[생성자 함수로 객체를 여러개 만든 경우]

funtion Monster(params_name, params_level){
  this.monster_name : params_name,
  this.monster_level : params_level
}

const robot1 = new Monster('로봇1', 10);
const robot2 = new Monster('로봇2', 20);
const robot3 = new Monster('로봇3', 30);