TIL - 21.07.19 👨‍💻 - Js, OOP

26589 단어 TIL JavaScript OOP 객체지향 프로그래밍 JavaScript

TIL - 21.07.19 👨‍💻

Set 객체
객체지향 프로그래밍

Set 객체

Set 객체는 배열과 유사한 객체로 프로퍼티 키로 0부터 시작하는 숫자를 가지며, 객체의 프로퍼티 값으로 유일한 값들만 가진다는 특징을 가지고 있다. ( 물론 참조 자료형의 특성에 예외는 없다. )
원래 NaN !== NaN 이지만, Set 객체 안에서는 유일한 값으로 객체의 프로퍼티로 하나의 NaN만 가질 수 있다.

여러 메소드가 있는데 대표적인 메소드 세 개를 소개하자면,
.add() - Set 객체에 프로퍼티 추가한다.
.has() - Set 객체에 괄호 안의 인자가 있는지 불리언 타입으로 반환한다.
.size - Set 객체의 프로퍼티 수를 숫자로 반환한다.

let arr = [1, 2, 3, 3, 4]
let set = new Set([...arr]) // set { 1, 2, 3, 4 }; 중복되는 프로퍼티 3 하나 제거.
set.add(5) // set { 1, 2, 3, 4, 5 }
set.add(3) // set { 1, 2, 3, 4, 5 }; 3은 이미 있으므로 추가되지 않는다.
set.add([1, 2]) // set { 1, 2, 3, 4, 5, [1, 2] } 
set.add([1, 2]) // set { 1, 2, 3, 4, 5, [1, 2], [1, 2] }; 참조 자료형 이기에
set.has(2) // true;
set.has([1, 2]) // false; 역시 참조 자료형 이기에.
set.size // 7; 숫자열로 반환한다.

객체지향 프로그래밍 ( Object Orient Programming )

객체지향 프로그래밍은 절차지향 프로그래밍과 다르게 데이터와 기능을 묶어서 처리한다.
속성과 메소드가 하나의 객체라는 개열에 조합되며 이를 class라 한다.

주의할 점

객체지향 프로그래밍에서 메소드 호출시 화살표 함수를 사용하지 않는다.
클로저와 비슷한 방식으로 객체를 반환하는 함수를 만들고 그 함수를 변수에 할당하면 변수를 별개의 독립된 객체로 사용할 수 있다.

// 객체를 이용해 만든 카운터
const counter = {
    value: 0,
    increase: function(){
    this.value++
    },
    decrease: function(){
    this.value--
    },
    getValue: function(){
    return this.value
    }
}

// 클로저를 이용해 만든 카운터
const makeCounter = () => {
  return {
    value: 0,
    increase: function(){
    this.value++
    },
    decrease: function(){
    this.value--
    },
    getValue: function(){
    return this.value
    }
  }
}

let counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.increase();
counter1.getValue(); // 3 

let counter2 = makeCounter();
counter2.decrease();
counter2.decrease();
counter2.decrease();
counter2.getValue(); // -3; 클로저의 특성을 따라 각각 다른 value를 가진다.

class 와 instance

예를 들어, 어떤 물건을 만들때 하나의 청사진(blue print)을 만들고 그 청사진에 따라 물건을 만들면 각각의 독립된 물건이 만들어진다.
여기서 청사진을 class라고 하고, 물건을 instance Object, 줄여서 instance라고 한다.

여기서 instance를 만들때, 즉 변수에 class를 할당할때, 일반 함수 할당하듯 할당하는 것이 아니라 new키워드를 사용하고 함수의 첫 글자를 대문자로 작성한다.
ES5까지 클래스를 만들땐 일반 함수 만들듯 function을 사용하되, 함수 이름의 첫 글자를 대문자로 표기해 구분했다면, 비교적 최신인 ES6문법에선 class라는 키워드를 사용해 클래스를 생성한다.
이 class 내 instance가 만들어질때 실행될 생성자 함수(constructor)를 만든다.
생성자 함수는 반환 값을 가지지 않으며 객체에 할당할 프로퍼티 정보가 들어있지만, 객체가 아니라 함수이기에 콤마를 사용하지 않는다.
객체지향 프로그래밍에서 this는 instance 객체를 뜻한다.
프로퍼티 값을 호출할땐 instance.key; 와 같이 호출하면 되지만 메소드를 호출할땐 다른 내장 메소드와 같이 instance.method(); 와 같이 소괄호를 적어준다.

// ES5
function Developer(name, gender, age){
  // 생성자 함수
  this.name = name;
  this.gender = gender;
  this.age = age;
}

// 메소드 생성, className.prototype 에 메소드를 생성한다.
Developer.prototype.coding = function(){
  console.log(this.name + '이/가 코딩을 시작합니다!')
}

//ES6
class Developer(){
  // 생성자 함수
  constructor(name, gender, age){
    this.name = name;
    this.gender = gender;
    this.age = age;
  }
  // 메소드 생성
  coding(){
    console.log(this.name + '이/가 코딩을 시작합니다!')
  }

  let newDev = new Developer('sunghoon', 'male', '26') 
  // 인스턴스 생성법 차이는 없다.

  newDev.name // 'sunghoon';
  newDev.coding() // 'sunghoon이/가 코딩을 시작합니다!'

중간 용어 정리

prototype - 모델의 청사진을 만들때 쓰는 원형 객체(original form)
constructor - instance가 초기화될때 실행하는 생성자 함수
this - 함수 실행시 해당 scope 마다 생성되는 고유한 실행(execution) context.
new키워드로 instance 생성시 해당 instance가 this 값이 됨.

객체지향 프로그래밍의 4가지 특징

캡슐화 ( Encapsulation )
코드가 복잡하지 않게하고 재 사용성을 높힘
추상화 ( Abtraction )
역시 코드를 복잡하지 않게하고, 단순화된 사용으로 변화의 영향을 최소화함.
상속 ( Inheritance )
재사용성을 높힘.
다형성 ( Polymorphism )
동일한 메소드에 대해 if/else if 와 같은 조건문 대신 객체의 특성에 맞게 작성하는 것이 가능해짐.

캡슐화

캡슐화의 요점은 데이터(프로퍼티)와 기능(메소드)을 하나의 단위로 묶는 것이라는 것이다.
이 말은 데이터와 기능이 느슨하게 결합되는 것을 뜻한다.

느슨한 결합이란?
코드 실행 순서에 따른 절차적 코드 작성이 아닌 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것

캡슐화 특징으로 파생되는 기능이 한가지 더 있는데, 바로 은닉화이다.

은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것을 뜻하고, 쉽게 말해 구현은 숨기고, 동작은 노출시키는 것을 말한다.

은닉화로 디테일한 구현이나 데이터를 숨기고 객체 외부에서 필요한 동작만 노출시킬 수 있다.

고로 언제든 구현을 수정할 수 있으므로 느슨한 결합에 유리하다.

추상화

추상화는 내부 구현은 아주 복잡하지만 노출되는 부분은 단순하게 만든다는 개념이다.
클래스 정의시 메소드와 속성만 정의한 것을 인터페이스라고하고, 이 인터페이스가 곧 추상화의 본질이다.

캡슐화 vs 추상화

캡슐화는 코드와 데이터의 은닉에 초점이 맞춰진 반면에,
추상화는 클래스를 사용하는 입장에서 필요치 않은 것을 노출하지 않고 단순 이름으로 정의하는 것에 요점이 있다.

상속

상속은 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 물려 받는 것을 뜻한다.

상속을 받을땐 클래스 이름 뒤에 extends 키워드를 넣어서 상속 받을 클래스를 명기해준다.
그리고 생성자 함수 내부에 super 키워드를 이용해서 상속 받을 클래스에서 상속받을 속성을 명기한다.

super 키워드는 인자가 있든 없든 상관없이 base class에서 모든 속성을 상속 받는다.
다만, 파생 클래스에서 상속 받은 프로퍼티를 재할당하고 싶을때는 super의 인자에 명기해줘야 한다.

메소드의 경우는 super키워드에서 따로 명기하지 않더라도 extends 해올때 받아온다.

class Human {
  constructor(name, age){
  	this.name = name;
    this.age = age;
    this.gender = 'male';
  }
}

class Student extends Human {
  constructor(name, age, gender, grade){
    super();
    this.grade = grade;
  }
}
 
let student1 = new Student('sunghoon', 10, 'female', 'A');
console.log(student1) 
//  Student {name: undefined, age: undefined, gender: "male", grade: "A"}
// 상속받은 값 그대로 사용했기에 student1의 gender 값에 female을 넣어도 
// male을 값으로 가진 인스턴스가 생성됐다.

class Student extends Human {
  constructor(name, age, gender, grade){
    super(name, age, gender);
    this.grade = grade;
  }
}
let student1 = new Student('sunghoon', 10, 'female', 'A');
console.log(student1) 
// Student {name: "sunghoon", age: 10, gender: "male", grade: "A"}
// 이번엔 제대로 적용되었으나 gender의 경우 애초에 base class에서 값을 고정을 시켜놓고 
// 매개변수 자리를 만들어 놓지 않았기에 derive class에서 생성자 함수에 gender의 
// 매개변수 자리를 만들어도 적용이 안되었다.

class Student extends Human {
  constructor(name, age, gender, grade){
    super(name, age);
    this.grade = grade;
    this.gender = gender;
  }
}
let student1 = new Student('sunghoon', 10, 'female', 'A');
console.log(student1)
// Student {name: "sunghoon", age: 10, gender: "female", grade: "A"}
// this를 사용해서 매개변수와 연결해주는 것으로 드디어 성훈이가 여자가 되었다.