객체

자바스크립트는 객체 기반의 프로그래밍 언어이다.

이전에 배운 리터럴들인 숫자, 문자, 불리언 등의 타입은 단 하나의 값만 나타내지만

객체는 다양한 타입의 값을 하나의 단위로 구성하는 복합적인 자료구조이다.

원시 타입은 데이터 타입이 변경 불가능한 값이지만 객체 타입은 변경 가능한 값이다.

var person {
  'name' : 'kim',
  'age' : 17
}

객체는 name : 'kim' , age : 17이라는 프로퍼티 를 가지며 name , age 라는 프로퍼티키 , kim , 17 이라는 프로퍼티 값 을 갖는다.

자바스크립트에서 사용하는 모든 값은 프로퍼티 값이 될 수 있다.

자바스크립트의 함수 또한 일급 객체이므로 값으로 취급 할 수 있으며, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드(method) 라고 부른다.

일급 객체

다음과 같은 특징을 가진 객체를 일급 객체라고 한다
1. 변수에 할당 할 수 있다.

const myFunction = function() {
  console.log("Hello, World!");
};

2. 다른 함수에 인자로 전달 할 수 있다.

function executeFunction(func) {
  func();
}
executeFunction(myFunction);

3. 함수에서 반환 할 수 있다.

function returnFunction() {
  return function() {
    console.log("Returned function");
  };
}
const newFunction = returnFunction();
newFunction();

4. 객체의 프로퍼티로 사용 할 수 있다.

const obj = {
  myMethod: function() {
    console.log("Object method");
  }
};
obj.myMethod();

5. 동적으로 객체의 프로퍼티로 추가 할 수 있다.

const obj = {};
obj.myMethod = function() {
  console.log("Dynamically added method");
};
obj.myMethod();

객체 리터럴에 의한 객체 생성

instance
클래스에 의해 생성되어 메모리에 저장된 실체를 의미함
객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념으로 클래스는 인스턴스를 생성하기 위한 템플릿 역할이며, 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것

자바스크립트는 프로토타입 기반 객체 지향 언어로 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법을 지원한다.

클래스 기반 객체 지향 언어인 C , java 는 new 연산자로 클래스를 사전에 정의하고 생성자를 호출하여 인스턴스를 생성한다.

프로토타입 기반 객체 지향 언어 ?

프로토타입 기반 객체 지향 언어는 클래스가 아닌 프로토타입을 사용하여 객체를 생성하고 상속하는 방식을 강조하는 언어를 의미한다.

1. 프로토타입 : 객체의 원본을 나타내며 새로운 객체는 이 프로토타입을 기반으로 생성되며 속성과 메소드를 상속받는다.
2. 객체 지정과 상속 : 새로운 객체는 다른 객체를 기반으로 생성되며 , 다른 객체를 그 객체의 프로토타입으로 사용한다. 새로운 객체는 프로토타입의 속성과 메소드를 상속 받아 사용 할 수 있다.
3. 동적인 속성 및 메소드 추가 : 프로토타입 기반 언어에서는 객체의 프로톹아ㅣㅂ이 동적으로 변경 될 수 있다. 이는 실행 중에 속성과 메소드를 수정하거나 참조할 수 있다는 의미이다.
   프로토타입 기반 객체지향 언어의 장점 중 하나는 클래스 기반 언어와 달리 상속이 유연하며 동적으로 이뤄질 수 있다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메소드
• 클래스(ES6)

등의 방법으로 객체를 생성 할 수 있다.

이 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.

리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하는 표기법
객체 리터럴 : 객체를 생성하기 위한 표기법으로 중괄호 내에 0개 이상의 프로퍼티를 정의한다.

var person = {
  name: 'kim',
  sayHello: function () {
    console.log('whats up');
  },
};

console.log(typeof person); // object
console.log(person); // { name: 'kim', sayHello: [Function: sayHello] }

이전에 코드블록으로 사용된 중괄호 이후에는 세미클론을 붙이지 않는다 하였으나 객체 리터럴에 사용되는 중괄호는 코드블록이 아니기 때문에 세미클론을 붙인다. (객체 리터럴은 값으로 평가되는 표현식이니까)

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값 : 자바스크립트에서 모두 사용 할 수 있는 모든 값

프로퍼티 키는 특별한 네이밍 규칙이 존재하지 않으나 기존 식별자 네이밍 규칙을 지키지 않는 프로퍼티 키는 모두 '' 로 감싸주어야 한다.

var person = {
  name: 'kim',
};
console.log(person); // { name: 'kim' }
var age = 16;
// 프로퍼티 키 동적 생성
person[age] = 23;

console.log(person); // { name: 'kim' , age : 23}

다음처럼 객체 리터럴로 생성한 객체를 다른 객체의 프로퍼티로 넣는 것도 가능하다. ([] 를 이용해 지정해준다)

프로퍼티 키로는 문자열과 심볼값만 가능하다고 하였기 때문에, 키 값에 만약 문자열과 심볼값이 아닌 값을 지정하면 암묵적 타입 변환으로 문자열로 변경된다.

메소드

메소드는 객체에 묶여있는 함수를 의미한다.

var circle = {
  radius: 5,
  getDiamter: function () {
    return 2 * this.radius;
  },
};

console.log(circle.getDiamter()); 10

this 는 다음에 알아보고 가볍게 넘어가자

프로퍼티 접근

var circle = {
  radius: 5,
  getDiamter: function () {
    return 2 * this.radius;
  },
};

console.log(circle.radius); // 5
console.log(circle['radius']); // 5
console.log(circle[radius]); // ReferenceError

프로퍼티의 키값에 접근 할 때에는 . 연산자나 [] 연산자를 이용해 접근 할 수 있다.

대괄호를 이용 할 때에는 '' 로 감싸줘야 한다. 문자열로 키값에 접근해야 하는 이유는 따옴표가 없는 경우엔 해당 코드를 식별자로 인식하기 때문이다.

객체에 존재하지 않는 프로퍼티에 접근하면 undefined 를 반환한다

프로퍼티 키가 네이밍 규칙을 준수하지 않는 이름에는 무조건 대괄호를 이용해 접근해야 한다

프로퍼티 키 값 변경

var person = {
  name: 'kim',
};

console.log(person); // kim
person.name = 'lee';
console.log(person); // lee

프로퍼티 값 삭제

var person = {
  name: 'kim',
  age: 16,
};

console.log(person); // { name: 'kim', age: 16 }
delete person.age;
console.log(person); // { name: 'kim'}
delete person.gender; // 아무일도 일어나지 않음

delete 연산자를 이용해서 프로퍼티 키를 삭제할 수 있으며 존재하지 않는 프로퍼티를 삭제해도

오류가 일어나지 않고 아무런 일도 일어나지 않는다.

ES6 에서 추가된 객체 리터럴의 확장 기능

프로퍼티 축약 표현

ES6 에서 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티가 동일한 이름일 때 프로퍼티 키를 생략 할 수 있다.

이 때 프로퍼티 키는 변수 이름으로 자동 생성된다.

var x = 'x',
  y = 'y';

var obj1 = {
  x: 'x',
  y: 'y',
};
var obj2 = {
  x,
  y,
};
console.log(obj1); // { x: 'x', y: 'y' }
console.log(obj2); // { x: 'x', y: 'y' }

var name = 'kim',
  age = 16;

var person = {
  name,
  age,
};
console.log(person);

person 의 프로퍼티 키인 name , age 는 이미 name , age 라는 이름을 가진 식별자가 존재하기 때문에

프로퍼키로는 식별자 , 프로퍼티 값으론 식별자에 담긴 값이 자동으로 들어간다.

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변환이 가능한 값은 표현식을 이용해 프로퍼티 키를 동적으로 생성 할 수 있다.

단 프로퍼티 키로 사용할 표현식을 [] 로 묶어줘야 한다.

var score = {};

var prefix = 'test';
var i = 0;

score[prefix + '-' + ++i] = 65;
score[prefix + '-' + ++i] = 75;
score[prefix + '-' + ++i] = 85;

console.log(score); // { 'test-1': 65, 'test-2': 75, 'test-3': 85 }

메소드 축약 표현

메소드를 저의하려면 프로퍼티 값으로 함수를 할당한다.

메소드는 객체 내에 존재하는 함수를 의미한다.

var person = {
  name: 'lee',
  sayHello: function () {
    console.log('Hello' + this.name);
  },
};

console.log(person); // { name: 'lee', sayHello: [Function: sayHello] }

다음처럼 프로퍼티 키와 함수를 이용해 메소드를 정의 할 수 있다.

축약 표현으로

var person = {
  name: 'lee',
  sayHello() {
    console.log('Hello' + this.name);
  },
};

console.log(person); // { name: 'lee', sayHello: [Function: sayHello] }

함수명을 지정한 후 자동으로 프로퍼티 키에 할당해주는 축약 표현을 사용 할 수도 있다.