[7주차] 4. Javascript의 객체와 클래스

Javascript

객체/개체 object

• 함수 혹은 클래스로 틀을 만드는 것으로 틀에서 객체를 하나씩 찍어내게 된다.
• 개발자가 자유롭게 틀을 만들고 그 틀로부터 객체(instance)를 만들어내서 사용하게 된다.객체 만드는 방법

생성자 함수

• 생성자 함수: 객체를 만들어 내는 틀의 역할을 하는 함수(함수를 만들어서 틀을 만들고 그 틀로부터 new 키워드 이용해서 객체 instance 생성)
• 생성자 함수를 통해서 객체를 생성하면서 객체 내부로 데이터 넣을 수 있도록 밖에서 생성자 함수를 생성시 인자를 넣어줘야 한다.

Object로 객체 만들기

• new Object()
• object 는 javascript 내에서 가장 기초 객체로 내장되어 있는 것이다.
• 별로 권장되는 방법은 아님

---

객체에 속성 추가하기 property

• 중괄호로 객체가 만들어지는 데 그 안에 사용할 데이터 혹은 함수 같은 것들을 넣을 수 있다. 그 넣어져 있는 하나하나의 이름은 property라 하고 그 property가 특정 값(일반 자료형, primitive value, 개체, 함수 등)을 갖고 있는 것이다.
• 중괄호 안 객체를 의미하는 영역은 생성자 함수 블록 속에서는 this라고 얘기한다. 그래서 this.객체 = 값;으로 설정
• new Function( )은 생성자 함수는 표준내장객체로 객체를 만드는 것이라고 할 수 있다.

---

.prototype

프로토타입 체인

• 자바스크립트는 프로토타입으로 모든 객체들을 연결해서 표현할 수 있다. 이것을 프로토타입 체인이라 말한다.
• 생성자함수이름.prototype. 뒤에 달려 있는 어떤 변수(prototype의 property)도 설정해놓으면 new로 생성자함수를 생성할 때 어떤 본관이 있다는 것이다.
• 보통 클래스 개념을 이용해서 객체를 확장할 수 있는 형태로 작업하는데 이 자바스크립트는 태생적으로 프로토타입을 이용한 상속 방식을 채택하고 사용하고 있다(프로토 타입 개념 이해 필수)

프로토타입을 이용한 객체 확장

• prototype 상속
• 자바스크립트에서 객체는 프로토타입 형식으로 체이닝되서 확장된 함수들을 사용할 수 있는 형태

객체 리터럴

• 객체를 만들 때 마치 숫자형, true/false 값으로 객체를 중괄호로 직접 써서 만드는 것. 중괄호를 포함한 문자 그대로 객체로 만드는 기능을 객체 리터럴을 사용한 객체 생성 방법
• 직접 literal : 괄호 안에 중괄호로 변수이름 : 값 형태로 작성, 즉 문자 그대로 작성한 객체

표준 내장 객체

• 객체가 이미 런타임 환경에 만들어져 있는 것
• 기초 객체(Object, Function, Boolean 등), new Function(), Array 등이 해당
• Array의 경우 프로토타입 함수(프로토타입 체인에 들어있는) slice(순서, 개수) 등을 갖고 있다.
• 표준 내장 객체를 활용해서 코딩을 하는 일이 많기 때문에 여러가지 표준 내장 객체에 대해서 학습을 해두시는 게 좋다. 프로그래밍 하는데 훨씬 도움이 될 것이다.

---

클래스 class

• es6에 새로 추가된 문법
• 자바스크립트는 객체 지향을 지원하기 위해서 프로토타입 기반의 방식을 지원하는 데 새로 추가된 클래스라는 키워드를 통해 좀 더 강력한 객체 지향 프로그래밍을 지원하게 됨
• 새로운 객체 지향 상속 모델을 제공하는 것은 아님. 기존의 프로토타입 기반의 방식을 좀 더 명료하게 사용할 수 있도록 돕는 도우미라고 생각하면 된다.
• 보통 바벨을 사용하거나 클래스를 사용할 수 있는 런타임 환경에서 작업을 할 것이기 때문에 클래스에 대해 정확히 학습하고 활용할 수 있도록 정확히 이해하기!

---

클래스 만드는 방식

• 함수 같은 경우에는 호이스팅이 일어날 수 있지만 클래스는 호이스팅이 없는 방향으로 설계됨

선언적 방식

• 마치 함수처럼 함수에서 function 키워드를 앞에 쓴 것처럼 선언적 방식으로 만들 수 있음
• class 클래스이름 { }
• 호출 시 console.log(new 클래스 이름());

class 표현식을 변수에 할당

• class 표현식을 변수에 할당하는 것처럼 처리
• const 변수이름 = class {};
• 호출 시 console.log(new 변수이름());

---

constructor 생성자

• 함수를 통해서 객체를 만들 대도 함수에 인자를 넣어서 외부에서 객체를 생성시 안으로 넣어줄 수 있는 기능이 있는 데 클래스에도 이런 기능이 있다.
• constructor를 이용해서 최초 초기값을 객체 안으로 넣어 줄 수 있는 기능 제공
• constructor 함수를 만들어 놓고 호출 시 별다른 인자를 넣지 않고 부르면 constructor 함수 내 인자들은 undefined가 뜨게 된다.
• 자바스크립트 특성상 스크립트를 한 줄 한 줄 읽으면서 실행하게 되는데 의도치않게 함수 호출 시 인수가 빠진 경우 undefined로 출력되게 된다.

---

멤버 변수

• 객체의 프로퍼티
• 보통 function으로 객체를 만들 때도 this.변수이름을 만들고 값을 넣어서 설정하는 데 이것을 클래스에서는 명확하고 쉽게 할 수 있다. 그 중 한가지
• constructor에서 객체의 프로퍼티를 할당해주는 방법도 있고 더 쉽게 제공되는 방식이 있다.
• class에 field를 직접 입력해주는 방식은 문법을 이해 못하는 런타임환경 때문에 문법적인 오류가 발생할 수 있다. 보통 chrome 72, node 12버전(nvm use 12.11.1 작성해서 버전 변경) 이상부터 사용 가능
• 보통 상위 문법을 이해할 수 있는 문법으로 바꿔주는 역할을 하는 중간단계인 바벨 같은 것을 많이 사용할 텐데 이문법이 안되는 경우에는 이것을 지원하는 런타임 환경인지 체크해보는 것이 좋다.

---

멤버 함수

• 함수의 이름과 괄호 그리고 중괄호를 이용해서 설정하는 방법
  • 호출시 함수이름 클래스이름 { [클래스로 만든 객체] }
• 멤버변수 처럼 변수이름에 함수 할당하는 방법
• 호출시 변수이름 클래스이름 { [클래스로 만든 객체] }
• 함수를 만들고 함수에서 그객체가 가지고 있는 자원을 활용해서 로직을 만들어 낼 수 있다.

---

get, set

• 게터와 세터 만들기
• 변수.get와 set함수에 쓰인 인수 는 게터와 세터 동작하는 방법
• _는 내부적으로 쓰일 경우 변수이름 앞에 붙여 멤버 변수로 사용(게터 세터가 외부에서 접근할 수 있는 퍼블릭한 접근 제어자가 됨)
• 게터와 세터를 통해서만 멤버변수를 바꾸는 것으로 보통 사용
• 게터만 두게 되면(세터함수가 없을 때) 마치 read only 처럼 작동(멤버 변수를 외부에서 바꾸지 말자는 약속이 돼있는 경우에 의미가 생김)

---

Static 변수, 함수 (class 변수와 함수)

• 객체가 아니고 클래스의 변수와 함수
• static 키워드를 이용해서 static 변수와 함수 설정
• class를 new class명으로 해서 객체를 생성 후 사용하는 변수나 함수가 아닌 직접적으로 class를 통해서 변수와 함수 사용
• static 함수는 객체에 속해있는 함수가 아니다.
• static 변수에 할당한 값은 class 이름을 뜻한다.

---

클래스 상속

extends

• 이미 만들어져 있는 방법 중 하나인 상속
• 클래스의 상속 기본
• 상속 할 때는 extends 키워드 사용
• class 자식 extends 부모 {} ->부모에 있는 멤버변수와 멤버 함수가 자식이 instance로 만들어질 때 같이 만들어지게 됨
• 부모의 멤버 변수와 멤버 함수를 자식이 그대로 상속 받음
• 자식에서 부모의 this.변수의 값을 바꾼다음 함수 출력하면 바뀐 값으로 출력

override

• 상속을 할 때 중요한 요소
• 부모에서 구현된 함수나 변수가 자식에게서 똑같이 같은 이름으로 구현을 시키면 이것을 override한다라고 함
• 자식이 만들어놓은 함수가 부모의 함수를 덮어씌우는 결과를 가짐
• 자식이 덮어씌운 것 중에 부모가 갖고있지 않은 게 있는 경우에는 자식이 추가를 하게 된다.
• 부모가 가지고 있는 함수가 그대로 실행됐는데 부모가 가지고 있는 함수와 똑 같은 이름의 함수를 자식이 구현할 경우 자식이 호출 때는 자식이 구현한 것을 호출하게 됨

super

• 자식이 constructor에서 뭔가를 추가하고자 할 때 super 키워드를 꼭 추가해야함
• 부모에서 하는 constructor를 실행하고 자식에서의 constructor를 실행할 수 있도록 this로 변수 선언 전 super(부모요소의 constructor 인자); 호출
• super는 부모요소의 constructor과 같음을 의미한다.

클래스 안의 static 변수 상속

• static 변수도 정상적으로 상속 됨
• 부모의 class를 자식 class가 상속 받고 부모의 class가 new 키워드를 통해서 instance로 만들어지고 자식 class도 new를 통해서 instance가 만들어지는데 이렇게 sta tic변수, static 함수는 부모로부터 자식으로 내려오고 멤버 변수, 멤버함수 또한 부모 instance와 자식 instance가 상속 받을 수 있는 구조로 되어 있다.

---

Tips

• instanceof : 변수가 어떤 것으로부터 instance인지 확인하는 키워드
• this는 상황에 맞게 잘 사용 ex) arrow function에서는 사용 불가능