[TIL] 23.04.11

오늘의 나는 무엇을 잘했을까?

잠을 잘 자지 못해서 피곤한 하루였지만, 최대한 열심히 공부를 했다. 너무 피곤하면 중간에 잠시 눈을 붙이고 일어나 집중할 수 있는 컨디션을 만들자.

오늘의 나는 무엇을 배웠을까?

JS

1. 객체 (Object)

const obj = {
  a: 10, // 프로퍼티
  b: 20,
  ex1() {
    //...
  }, // 메소드
};

• 객체의 상태를 나타내는 프로퍼티(변수)와
• 객체의 행동을 나타내는 메소드(함수)로 구성

1-1. 객체 지향 프로그래밍

• 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것

1-2. 객체 생성 방법

• 객체 리터럴 (Object Literal)

const obj = {
  name: value,
  ex2() {
    //
  },
};

• Factory Function
  - 객체를 생성해서 반환하는 함수
  - 프로퍼티와 매개변수의 이름이 같을 경우 값을 대입하는 부분을 생략 가능

function createObj(value1, value2...) {
  const obj = {
    property1: value1,
    property2: value2,
    ex1() {
      //
    },
  };
  return obj
}

const obj1 = createObj(a, b);

• 생성자 함수 (Constructor Function)
  - 유사한 객체를 여러개 만들고 싶을 때 사용
  - 함수명 첫글자를 대문자로 표현
  - new 연산자를 붙여 호출
  - this 는 생성자 함수로 생성되는 해당 객체를 가리킴
  

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User('MK');

console.log(user.name); // MK
console.log(user.isAdmin); // false

• 클래스 (Class)
  - class 키워드 사용
  - new 연산자를 붙여 객체 생성
  - constructor 메소드는 객체가 생성될 때 실행
  - this 는 생성되는 해당 객체를 가리킴
  - 프로퍼티를 constructor 안에, 메소드는 밖에 분리하여 작성

class User {
  constructor(name) {
    this.name = name;
    this.isAdmin = false;
  }
  
  ex1() {
    console.log(`Is ${this.name} admin? : ${this.isAdmin}`);
  }
}

const user = new User('MK');

console.log(user.name); // MK
user.ex1(); // Is MK admin? : false

2. 추상화

• 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것
• 추상화를 통해 만든 class 를 잘 이해할 수 있도록 적절한 이름을 붙여줘야 함
• 변수명 등을 이해하기 쉽게 붙여줘야 함

3. 캡슐화

• 객체의 특정 프로퍼티에 미리 정해진 메소드를 통해서만 접근할 수 있도록 하는 것
• 사용자가 객체 내부의 프로퍼티 값을 이상하게 설정하는 것을 막아 프로그램 안정성을 높임

3-1. 접근자 프로퍼티 (accessor property)

• getter 와 setter 메소드로 표현

let obj = {
  get propName() {
    // getter, obj.propName 을 실행할 때 실행되는 코드
  },
  
  set propName(value) {
    // setter, obj.propName = value 를 실행할 때 실행되는 코드
  }
};

• getter 메소드는 obj.propName 을 통해 프로퍼티를 읽으려고 할 때,
• setter 메소드는 obj.propName = value 로 프로퍼티에 값을 할당하려 할 때 실행

4. 상속

• 하나의 객체가 다른 객체의 프로퍼티와 메소드를 물려 받는 것
• 상속을 할 때 베이스가 되는 클래스 : 부모 클래스
• 상속을 받는 클래스 : 자식 클래스
• 코드의 재사용성이 좋아짐

class Class2 extends Class1 {
  constructor(a, b, c) {
    super(a, b); // 부모 class의 생성자 실행
    this.c = c;
  }
  
  ex1() {
    //
  }
}

5. 다형성

• 많은 형태를 가지고 있는 성질
• 하나의 변수가 다양한 종류의 객체를 가리킬 수 있는 것
• 자식 클래스에서 부모 클래스의 메소드를 오버라이딩 하고 다형성을 활용하는 경우가 많음
• 오버라이딩(overriding) : 덮어쓰는 것

class Class1 {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
  
  print() {
    console.log('Hi');
  }
}

class Class2 extends Class1 {
  constructor(a, b, c) {
    super(a, b);
    this.c = c;
  }
  
  print() {
    super.print(); // 부모 class의 메소드를 실행
    console.log('Hello'); // 오버라이딩
  }
}
    

• instanceof 연산자
  - 객체가 특정 클래스에 속하는지 아닌지를 true false 값으로 반환
  - 자식 클래스로 만든 객체도 부모 클래스에 속하는 것으로 인정
  

6. 정적(static) 프로퍼티 / 메소드

• 클래스에 직접적으로 딸려있는 프로퍼티와 메소드
• 객체가 아닌 클래스 자체로 접근하고 싶을 때 사용

class Math {
  static PI = 3.14;

  static getCircleArea(r) {
    return Math.PI * r * r;
  }
}

Math.PI = 3.141592; // 값을 수정하거나
Math.newFunction = function() {
  console.log('Hi');
} // 새로운 것을 추가하는 것도 가능

console.log(Math.PI); // 3.14
console.log(Math.getCirclArea(5)); // 78.5

내일의 나는 무엇을 해야할까?

• 팀 멘토링
• 1~4주차 내용 복습
• 데일리 미션 정리
• week3 코드리뷰 수정사항 반영