객체

학습 키워드

• 객체

• 생성자 함수

  • 프로토타입

  • Wrapper Object

• Class

객체

• 데이터를 하나로 관리해주는 데이터 형태

• 배열과의 차이점이 있다면 객체는 key-value 존재한다.

객체 프로퍼티 (객체 속성)

• key : value

• value : 문자열, 숫자, boolean, 함수, 객체, 배열 타입 사용 가능

let objValue = {
  str: 'string', // 👈🏻 객체 프로퍼티 key : value
  num: 27,
  bol: true,
  obj: {},
  arr: [],
  func: function () {},
};

객체 프로퍼티를 다루는 방법

1. 특정 프로퍼티에 접근하는 방법

• 점 표기법

let str = objValue.str;
console.log(str); // string

• 괄호 표기법 ['문자열']

  • '' 없으면 변수로 인식해서 Error

  • 동적으로 생성시 유용

let num = objValue['num'];
console.log(num); // 27

2. 새로운 프로퍼티 추가하는 방법

objValue.newType1 = '점 표기법으로 생성';
objValue['newType2'] = '괄호 표기법으로 생성';

3.프로퍼티를 삭제하는 방법 delete

delete objValue.newType1;
delete objValue['newType2'];
console.log(objValue);

객체 반복문

• 객체 데이터를 하나씩 접근하기 위한 반복문 for-in

let obj = { name: '철수', age: 20 };
for (let key in obj) {
  console.log(obj[key]);
}

상수 객체

• 상수로 키워드로 생성한 객체의 프로퍼티는 수정이 가능하다.

  • 실제로 객체의 값을 저장하는게 아니라 (메모리)주소를 저장하기 때문에

const obj = { name: '철수', age: 20 };

obj.year = 2005;
console.log(obj); // { name: '철수', age: 20, year : 2005 }

메서드

• 객체의 value 값으로 사용되는 함수 → 다른 용어로 메서드(method)

const obj = {
  speak: function () {
    console.log('객체 입니다.');
  },
};

// ✅ 단축 문법 : ES6문법 변경 사항
const obj = {
  speak() {
    console.log('객체 입니다.');
  },
};

생성자 함수

• 객체를 생성하는 함수

• 유사한 객체를 여러개 만들어야 할 때 경우 사용

  • 함수의 이름은 첫글자는 대문자로 시작

  • new 연사나를 붙여 함께 호출 인스턴스 객체 생성

  • 함수의 매개변수를 활용 할 수 있다는 특징

function User(name) {
  // this = {}; (빈객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this; (this가 암시적으로 반환)
}

let user = new User('보라'); // 인스턴스 객체

console.log(user.name); // 보라
console.log(user.isAdmin); // false

프로토타입(prototype)

• 생성자 함수를 만들게 되면 1:1로 매칭되는 함수 멤버로 prototype 속성이 있다.

• prototype 객체의 멤버인 constructor 속성은 함수를 참조하는 내부구조를 가진다.

Wrapper Object

• 래퍼 객체란 이름처럼 원시 타입의 값을 감싸는 형태의 객체이다. number, string, boolean, symbol 데이터 타입에 각각 대응하는 Number, String, Boolean, Symbol이 제공된다.

const str = 'apple';

console.log(str.length); // 5

🤔 해당 코드가 실행되는 원리는?

해당 코드를 실행하면 결과값은 5가 나온다. 여기서 이상한 점이 발견된다. str은 문자열인 원시타입이다. 객체의 프로퍼티를 접근가능하는 .length를 어떻게 사용할 수 있는 것일까?

자바스크립트의 문자열은 원시타입으로 존재한다. 우리가 문자열의 프로퍼티에 접근하려고 할 때, 자바스크립트는 new String을 호출한 것처럼 문자열 값을 객체로 변환한다. 이 객체를 래퍼객체 라고 한다. 래퍼 객체는 프로퍼티를 참조할 때 생성되며 프로퍼티 참조가 끝나면 사라진다.

const str = 'apple';

// 👇🏻 해당 코드를 실행하기 위해
console.log(str.length); // const str = new String('apple') → 일시적으로 객체로 변환

Class

📖 Class 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의 하기 위한 상태(멤버변수)와 메서드(함수)로 구성된다.

자바스크립트는 class 에 대한 개념이 있지 않았다. 따라서 생성자 함수를 사용해서 정의하곤 했다. ES6에서 class문법이 도입되면서 객체 지향 프로그맹에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다.

기본문법

• class 키워드를 사용

• constructor() : 기본 상태를 설정해주는 생성자 메서드 new에 의해 자동으로 호출 된다.

class User {
  // 꼭 해당 메서드가 존재해야 한다.
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    return `Hello! ${this.name}`;
  }
}

const user = new User('홍길동');
user.sayHi();

상속

• extends 키워드를 사용해서 상속 받을 수 있다.

• 상속을 받는다면 constructor() 내부에 super() 함수가 존재해야 한다.

class Shape {
  // 상속을 하든, 상속을 하지 않든, 반드시 constructor를 가지고 있어야 한다.
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }
}

class Rectangle extends Shape {
  constructor(color, width, height) {
    super(color); // 상속받는다면 무조건 super 함수 있어야함.
    this.width = width;
    this.height = height;
  }
  getArea() {
    return this.width * this.height;
  }
  getColor() {
    return `사각형의 색상은 ${this.color}`; // 👈🏻 오버라이딩
  }
}

📖 메서드 오버라이딩 상속한 상위 클래스의 메서드를 수정하고 싶거나 더 확장하기 위해 상속 받은 class 내에서 메서드를 재정의하는 행위

get & set

• set : 값을 설정하는 키워드

• get : 값을 가져오는 키워드

class Car {
  constructor(speed) {
    this.speed = speed;
  }

  get speed() {
    return this._speed;
  }

  set speed(value) {
    this._speed = value < 0 ? 0 : value;
  }

  getSpeed() {
    return this.speed;
  }

  // 가정... 수많은 함수들이 구현되어 있다.
  // 가정... 그 수많은 함수에서 speed를 사용하고 있다.
}
const car1 = new Car(-100);
console.log(car1.getSpeed());

private

• 2020년 최신 문법

• 순수 웹브라우저에서는 #private 속성은 get&set를 제어 할 수 없다. (컴파일러 사용 해야한다.)

• 외부에서 값의 변경을 막고자 할 때 private 속성을 사용한다.

class Car {
  #speed;
  constructor(speed) {
    this.#speed = speed;
  }
  getSpeed() {
    return this.#speed;
  }
}
const car1 = new Car(100);
console.log(car1.getSpeed());
// car1.#speed = 100; // 🚨 바꿀수 없다는 error 출력

static

• static으로 정의된 것들은 인스턴스화 되지 않는다.

class MathUtils {
  static APP_NAME = 'Math Utils';
  static PI = 3.14;
  constructor(number) {
    this.number = number;
  }

  static add(a, b) {
    return a + b;
  }
}
const mathUtils = new MathUtils(10);
console.dir(mathUtils);

console.log(MathUtils.PI); // 👈🏻 static은 인스턴스화 되지 않아서 생성자 함수 식별자를 사용해서 접근한다.
console.log(MathUtils.add(2, 4));

🔗 참고

• new 연산자와 생성자 함수

• 자바스크립트 : prototype 이해

• wrapper object

• 래퍼 객체 (wrapper object)

• 클래스와 기본 문법

• 클래스 상속