객체

uoayop·2021년 2월 27일

JavaScript

목록 보기

11/24

Javascript

객체

🔧 한글로 개체라고 말하기도 한다.

함수 혹은 클래스로 틀을 만들고, 객체/개체 같은 인스턴스를 찍어내는 방식으로 사용한다.

객체를 만드는 방식

0. 선언해서 만들어주기

const doggy = {
  name:'멍멍이',
  age:2,
  sound:'멍멍',
};

console.log(typeof doggy);
console.log(Object.keys(doggy));
console.log(Object.values(doggy));
console.log(Object.entries(doggy));

출력:

Object.keys(객체): 객체의 key들이 리스트 형태로 반환된다.
Object.values(객체): 객체의 value들이 리스트 형태로 반환된다.
Object.entries(객체): 객체의 모든 key-value가 리스트 형태로 묶여서 반환된다.

1. 생성자 함수로 객체 만들기

🔧 function 틀 () {} => new 틀 ()

function A() {};

const a = new A();
console.log(a, typeof a);
//출력 : A{} 'object'

console.log(A());
//출력 : undefined

//생성하면서 데이터 넣기
function B(name,age){
  console.log(name,age);
}

const b = new B();
//출력 : undefined undefined
const c = new B('doyeon',23);
//출력 : doyeon 23
console.log(B());
// name, age , return 값이 출력된다.
//출력 : 
//undefined undefined
//undefined

2. 객체에 속성 추가하기

🔧 객체의 중괄호 안에 특정 프로퍼티를 추가한다.

function A() {
  this.name = 'doyeon';
}

const a = new A();
console.log(a);
// 출력 : A {name:'doyeon'}

function B() {
  this.hello = function(){
    console.log('hello');
  }
}

new B.hello();
// 출력 : hello

3. new Object()

🔧 내장 객체로 들어있다.

🔧 Object는 가장 기초가 되는 객체다.

별로 권장되는 방법은 아니다.

const a = new Object();

console.log(a,typeof a);
// 출력 : {} object

const b = new Object(true);

console.log(b, typeof b);
// 출력 : {Boolean: true} object

const c = new Object({name:'doyeon'});

console.log(c, typeof c);
// 출력 : {name: 'doyeon'} object

4. 프로토타입 체인

🔧 JS는 프로토타입으로 모든 객체를 연결해서 체인으로 나타낼 수 있다.

🔧 프로토타입을 이용해 상속을 받는 개념이다.

function Person(name,age){
  this.name=name;
  this.age=age;
  this.hello = function() {
   	console.log('hello',this.name,this.age);
  };
}

Person.prototype.hello = function() {
  console.log('hello',this.name,this.age);
}

const p = new Person('doyeon',24);
p.hello();
//출력: hello doyeon 24

console.log(p.toString());
//출력 : Object Object

console.log(Person.prototype);
//출력 : Person {}

console.log(Person.prototype.toString);
//출력 : [Function: toString]
            
console.log(Person.prototype.constructor);
//constructor 는 함수 자체를 의미함
//출력 : [Function: Person]

function Person(name,age){
  this.name=name;
  this.age=age;
}

Person.prototype.hello = function() {
  console.log('hello',this.name,this.age);
}

const p = new Person('doyeon',24);
p.hello();
//출력: hello doyeon 24

console.log(p.toString());
//출력 : Object Object

console.log(Person.prototype);
//출력 : Person {}

console.log(Person.prototype.toString);
//출력 : [Function: toString]
            
console.log(Person.prototype.constructor);
//출력 : [Function: Person]

console.log(Person.prototype.hello);
//출력 : [Function]


/* Object */
console.log(Object.prototype);
//출력 : {}

console.log(Object.prototype.toString);
//출력 : [Function: toString]

console.log(Object.prototype.constructor);
//출력 : [Function: Object]


/* p는 어디에서 나온 instance인가 */

console.log(p instanceof Person);
//출력 : true
console.log(p instanceof Object);
//출력 : true

P 객체는 Person 생성자로부터 나왔다.
Person 은 Object로부터 prototype chain을 받아와서 내가 설정한 hello 라는 함수와 property (name, age) 를 가지고 있는 형태가 된다.

+ 프로토타입을 이용한 객체 확장

🔧 부모의 객체를 자식의 객체 어딘가 프로퍼티로 할당해서 사용 가능하다.

function Person() {}

Person.prototype.hello = function(){
  console.log('hello');
}

function Korean(region){
  this.region = region;
  this.where = function(){
    console.log('where',this.region);
  }
}

Korean.prototype = Person.prototype;

const k = new Korean('Seoul');
k.hello();
k.where();
// 출력:
// hello
// where Seoul

console.log(k instance of Korean);
console.log(k instance of Person);
console.log(k instance of Object);
// 출력: true true true

k 와 가장 가까이에 있는 것은 Korean,
Korean의 프로토타입을 가지고 있는 프로토 타입 체인은 Person이다.
Person의 toString, .. 여러가지 Object를 가지고 있는 것들을 프로토타입으로 가지고 있다.

🔧 JS에서 객체는 프로토타입 형식으로 체이닝 되어서 확장 가능하고, 이용 가능한 형식으로 되어있다.

5. 객체 리터럴

🔧 객체를 만들 때 중괄호를 직접 이용해서, 객체로 만들어지는 방식이다.

const a = {};

console.log(a, typeof a);
// {} 'Object'

const b = {
  name: 'doyeon'
};

console.log(b, typeof b);
// {name:'doyeon'} 'Object'

const c = {
  name: 'doyeon'
  hello1(){
    console.log('hello1',this.name);
  },
  hello2: function(){
    console.log('hello2',this.name);
  },
  hello3: () => {
    console.log('hello3',this.name);
  }
}

c.hello1()
// 출력:
// hello1 doyeon
c.hello2()
// 출력:
// hello2 doyeon
c.hello3()
// 출력:
// hello3 undefined

arrow function : 화살표 함수는 this bind가 되지 않기 때문에 출력이 되지 않는다.

6. 표준 내장 객체

🔧 객체가 이미 런타임 환경에 만들어져 있다.

기초 객체 : Object, Function, Boolean, Symbol, ...
대표적인 표준 내장 객체인 Array를 이용해보자

const a = new Array('red','black','white');

console.log(a, typeof a);
// ['red,'black','white'] 'object'

console.log(a instanceof Array);
console.log(a instanceof Object);
// true true

// 리터럴로 할당 가능
const b = ['red','green','yellow'];

// Array 프로토타입 체인에 들어있는 slice 함수 사용
console.log(b.slice(0,1));
// ['red']
console.log(Array.prototype.slice, Object.prototype.slice);
// [Function:slice] Undefined
// Onject를 프로토타입 체인으로 받아온 Array 에서 정의한 함수이기 때문에~