객체

객체란 ==변수와 함수를 그룹화한 것==을 말한다.

  • 객체는 데이터와 함수의 집합이다. 객체는 일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부른다. 결국 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이란 뜻이다.

  • 이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

  • 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

    • 객체의 일부로서 선언된 변수. 속성은 객체에 대한 정보를 제공한다.

    • 속성 값은 문자열, 숫자, 불리언, 배열 또는 객체가 될 수 있다. 반면 메서드 값은 무조건 함수여야 한다.

  • 변수나 명명된 함수와 마찬가지로 속성과 메서드 역시 이름과 값을 가진다. 객체는 이름key과 값value의 쌍으로 구성된다.
    객체와 함수는 객체 내에서 새로운 이름으로 불린다.

  • 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

  • 배열은 순서를 가지고 있다. 그런데 객체 안에 저장된 값은 순서가 없고 key: value가 있다.

  • 객체에는 객체를 담을수도 있고 함수를 담을 수도 있다.

  • 자바스크립트는 null과 undefined를 제외한 모든 것을 객체로 다룰 수 있다.


프로퍼티와 메소드

프로퍼티는 key: value pair이다.

key === 빈 문자열을 포함하는 모든 문자열 또는 symbol값

value === 모든 값

프로피티 키에 문자열이나 symbol값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이된다.

method

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부린다. 즉 메소드는 객체에 제한되어 있는 함수를 의미한다.

객체 생성 3가지 방법

  1. 객체 리터럴 방식

{} 사용해 객체 생성하는 가장 일반적인 방식.

// 빈 객체
var emptyObject = {};
console.log(typeof emptyObject); // object

var monster = {
  name: 'Wazowski'
  friends: 'Sullivan'
}
  1. Object 생성자 함수

new 연산자와 Object생성자 함수를 호출해 빈 객체 만들고, 프로퍼티 또는 메소드 추가해 객체를 완성시키는 방법.

constructor 생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화 하는 함수.

생성자 함수를 통해 생성된 객체를 instance라 한다. 일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 PascalCase를 사용한다.

// 1. 빈 객체의 생성
var person = new Object();
// 2. 프로퍼티키에 값을 할당해준다.
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}

person.sayHello(); // Hi! My name is Lee

거의 사용 안한다.

  1. 생성자 함수

앞서 설명한 객체 리터럴 방식과 Object 생성자 함수로 객체 생성하면,

프로퍼티 값만 다른 여러 개 객체를 생성할 때 불편하다. 하지만 생성자 함수를 사용한다면 마치 객체를 생성하기 위한 template처럼 사용해 프로퍼티가 동일한 객체를 여러개 생성할 수 있다!

// 생성자 함수. 함수 선언해서 프로퍼티를 인자로 갖는다.
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1);
console.log('person2: ', typeof person2);
console.log('person1: ', person1);
console.log('person2: ', person2);

person1.sayHello();
person2.sayHello();

객체의 프로퍼티 값에 접근하고 싶을 때

객체이름.프로퍼티이름 || 객체이름['프로퍼티이름']

객체지향프로그래밍

객체 안에 데이터와 함수를 그룹핑한 것.
서로 연관되어있는 값과 연관되어있는 처리를 하나의 그릇안에 모아서 그룹핑해놓은것.

중요

instance 의미 - 생성자 함수를 통해 생성된 객체

참고

인사이드 자바스크립트

https://poiemaweb.com/js-object