[TIL] 07. Javascript 6

1. Class

객체지향 프로그램은 프로그램을 객체들로 구성 / 객체들 간 서로 상호작용하도록 작성하는 방법
클래스는 객체지향 프로그래밍의 핵심

'객체지향 프로그래밍'에서 '객체'는 { num: 1 }의 데이터 타입을 말하는 것이 아니라
object, 말그대로 사물을 뜻한다.

클래스는 결국 { num: 1 } 처럼 생긴 객체(object)를 잘 설계하기 위한 틀은 맞다.
이때 객체는 특정로직을 갖고 있는 행동(method)와 변경 가능한 상태(멤버 변수)를 갖는다.

원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 만들 수 있다.
객체를 매번 만들어 사용할 수 있지만, class라는 설계도를 통해 만들 수 있다.

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

const rayPriceByPropertyName = ray.price;
console.log('프로퍼티명으로 접근 => '+ rayPriceByPropertyName); 
// 프로퍼티명으로 접근 => 2000000

const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' + rayPriceByFunction);
// 함수로 접근 => 2000000

객체 내부에서 해당 객체의 프로퍼티에 접근하려면 'this'라는 키워드를 사용한다.
그래서 getPrice 메서드에서 this.price로 price키에 접근하고, 값 2000000을 가져올 수 있다.

객체를 추가하는데 프로퍼티는 똑같이 구성되어야 할 때, 필요한 정보를 담은 Car라는 클래스(class)를 생성하여 관리할 수 있다.

생성자 (Constructor)

객체(object)의 설계도인 클래스(class)는 문법이 비슷한데, 가장 큰 차이는 constructor 라는 생성자 함수

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
    this.salesAmount = 0;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const morning = new Car('Morning', 2000000); 
// class를 통해 객체 생성, class로 객체 생성하는 과정 '인스턴스화'

class를 통해 생성된 객체: 인스턴스
class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• Car: class이름 / 항상 대문자로 시작, CamelCase로 작성
• Car class의 instance 생성할때마다 constructor메서드 호출
• constructor()메서드는 name, price 2개 argument(인자)를 받음
• constructor()메서드에 this 키워드 사용 / class 실행범위(context)에서 this는 해당 instance를 의미
• constructor()에서 인자로 넘어오는 name과 price를 사용 / Car instance의 name, price 프로퍼티에 값을 할당
• 멤버 변수: 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수 / 멤버 변수는 'this' 키워드로 접근

2. 객체 (Object)

객체는 다른 데이터 타입 (텍스트, 숫자, 배열 등..)처럼 변수에 저장할 수 있다.
{}를 사용 / {}으로 생긴 모양의 객체 - object literal(객체 리터럴)
객체는 배열과 달리 순서가 없다 / 키(key) - 값(value) 쌍으로 된 데이터 모음

프로퍼티 접근

• dat(.)으로 접근하는 방법
  바로 접근할 때 사용 / 다옴표 없이 바로 키 사용

  console.log(difficult.color); 

• 대괄호[ ] 로 접근하는 방법
  키 이름을 다옴표로 감싸서 작성

  console.log(difficult['color']); 
  console.log(difficult['my name']);
  console.log(difficult['33']);

변수로 프로퍼티 접근

변수에 키 이름이 저장되어 있는 경우, 변수로도 프로퍼티에 접근 가능
변수로 접근할 때는 항상 [ ] 대괄호로 접근

let name = '키';
console.log(difficult[name]);

프로퍼티 할당

difficult[name] = '값 바꾼다';
console.log(difficult[name]);

difficult.color = '색깔';
console.log(difficult.color);

console.log('생성전: ' + difficult.new);
difficult.new = '새로 추가된 프로퍼티';
console.log('생성후: ' + difficult.new);

객체에 이미 존재하는 키에 다시 할당하면 값이 수정 된다.
전에 없던 키로 접근하면 새로운 프로퍼티가 추가 된다.
아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되었지만, 값이 없는 상태

객체에서의 const

const로 선언된 변수는 값 수정 불가
const로 선언된 변수에 객체를 다시 할당하면 -> 에러
그 객체에 프로퍼티를 추가하거나 수정 -> 가능

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
} // 변수 mutableObj 자체에 객체를 재할당 하는 것은 불가능

mutableObj.name = '수정';
mutableObj.type = 'Object 타입';
// 프로퍼티에 접근하여 내용 수정, 프로퍼티 추가는 가능

메서드 (Methods)

객체에 저장된 값이 함수

console.log();
console도 객체 / 자바스크립트 어디에나 접근 가능하기 때문에 global 객체
console ekdmadp dot('.')으로 프로퍼티에 접근 / log는 키 값은 함수
log는 console이라는 객체의 매서드

중첩된 객체 (Nested Object)

객체는 중첩되어 있는 형태가 많은데 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있다.

let nestedObj = {
  type: {
    year: '2019',
    'comment-type': [{
      name: 'simple'
    }]
  }
}
console.log(nestedObj.type['comment-type'][0].name); // simple

• estedObj.type은 year, comment-type이 있는 객체
• nestedObj.type['comment-type']은 요소 1개인 배열
• nestedObj.type['comment-type'][0] 첫 번째 요소인 객체를 가져온다.
• nestedObj.type['comment-type'][0].name 'simple'에 접근

객체는 reference로 저장된다.

객체를 변수에 저장하면 객체 리터럴 자체를 저장하는 것이 아닌 reference를 저장
객체가 담긴 메모리의 reference

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj); 
// false, 객체를 담은 변수를 비교하면 같지 않다.
console.log('객체값비교 =>', hiObj.name === helloObj.name); 
// true, 객체 내부의 프로퍼티 값이 텍스트일 경우 텍스트를 비교하여 같다.

const mutableObj = {
  name: '객체'
};
mutableObj = {
   name: '수정'
}
mutableObj.name = '수정 됩니다!';

const로 선언된 변수 mutableObj에 새로운 객체를 할당하면 오류가 난다.
새로운 메모리 주소(reference)로 수정을 시도하기 때문

하지만 mutableObj.name로 프로퍼티를 접근하면 수정 가능
mutableObj가 저장된 reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되기 때문