기술면접_JavaScript_11_13
## 프론트엔드 개발자 입문(비동기처리) | Callback,Promise,Async,Await ### Contents 1...
프론트엔드 개발자 입문 | Class,Object
Contents
- Class/Object란?
- Getter and Setters
- Fields
- Static
- 상속과 다양성
- Class checking
- 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
- 영상에서 언급되지 않은 내용이 포함되어 있음
-
Tutorial Video_06
Class/Object란?
Class
- 관련있는 변수와 함수를 묶어놓은 것으로 fields와 method로 이루어져 있음
- Data class: fields로만 이루어진 클래스
- 클래스 자체에는 데이터가 포함되어 있지 않고, 해당 class에 들어올 수 있는 데이터 타입만을 명시(template 역할)
- class는 정의만을 한 것으로 메모리 영역을 할당받지 않음
- added in ES6
Object
- class라는 template에 데이터를 입력하여 만든 Instance
- 메모리 영역을 할당받음
//1. Class declarations
class Person {
//constructor
constructor (name, age){
//field
this.name = name;
this.age = age;
}
//method
speak() {
console.log(`${this.name} : hello!`)
//this : 생성될 오브젝트
}
//2. Object
const ellie = new Person('ellie', 20)
}
Getter and Setters
Getter(획득자)
- 프로퍼티를 읽고자 할 때 실행
- ex. 자판기에서 음료수의 개수
Setter(설정자)
- 프로퍼티에 값을 할당하고자 할 때 실행
-
ex. 자판기에서 음료수의 개수가 -1로 오기입 되었을 때 이를 수정하거나 오류임을 알려주는 대체값
-
JavaScript Property란?
- private property: 외부에서 접근 및 변경할 수 없는 프로퍼티 (ex. 자판기에서 음료의 개수는 소비자가 임의로 수정할 수 없으므로 private설정해야 하며 이를 Encapsulation(캡슐화)이라 함)
class User{
constructor(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
//Getter
get age() {
return this._age;
}
//Setter
set age(value) {
if (value <0) {
throw Error ('age can not be negative');
}
this._age = value;
//value : user가 age에 입력한 값
//age property사 오기입 되었을 때, 위와 같이 오류메시지를 출력하지 않고 아래와 같이 대체값으로 자동수정할 수도 있음
//this._age = value < 0? 0 : value
}
/*
Getter, Setter의 age변수를 _age로 설정하는 이유 :
1. Getter/Setter가 정의되면, this.age = age;는 메모리 데이터를 읽어오지 않고 Getter/Setter를 호출함
2. 1번과 같은 과정을 거치기 때문에 Setter안 this._age = value; 코드 또한 메모리의 값을 읽어오지 않고 Setter를 호출함
3. Getter, Setter의 age변수를 _age로 변경하지 않으면, Setter안에서 코드가 무한루프에 빠지게 됨
*/
const user1 = new User('Steve', 'Job', -1); // age오기입
Fields (public, private)
puclie: 외부에서 접근가능
private: 클래스 내부에서만 접근가능
class Experiment {
publicField = 2;
#privateField = 0;
}
Static properties and methods
데이터와 무관하게 반복적으로 사용될 값이나 method의 경우, static을 통해 고정
class Article{
static publisher = 'Dream Coding';
contructor(articleNumber) {
this.articleNumber = altercleNumber;
}
static printPublisher() {
console.log(Article.publisher);
}
}
const article1 = new Article(1);
console.log(article1.publisher); //static은 object가 아닌 class에 할당된 것이므로 해당 코드는 오류출력
console.log(Article.publisher);
}
상속과 다양성
Inheritance(상속)
- a way for one class to extend another class
- 두 개 이상의 클래스에서 공통되는 내용이 있을 경우, extends를 통해 상속하여 반복사용
- 오류발생 시 수정이 용이하다는 장점이 있음
OverWriting(다양성)
- 상속 후 필요한 함수만 재 정의하여 사용할 수 있음
class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color of`)
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {}
//Inheritance : extends를 통해 새로운 Rectangle클래스에 기존 Shape클래스 내용을 포함
class Trianle extends Shape {
getArea() {
return (this.width * this.height / 2);
}
}
//OverWriting : 필요한 함수만 재 정의해서 사용할 수 있음.
//extends를 통해 Shape클래스 내용을 포함 후 getArea함수에서 /2 추가하여 재정의 (기존 getArea함수의 내용은 사라짐. 만약 기존 함수의 내용도 유지하고 싶다면, getArea()안에 super.getArea()를 작성하면 됨)
}
Class checking: instanceOf
instanceOf를 통해 오브젝트가 특정 클래스의 인스턴스인지 확인
console.log(rectangle instanceof Rectangle);
//rectangle이 Rectangle class의 instance인지 확인
Appendix
Procedural language(절차지향):
- 정의: 일련의 처리 절차를 정해진 문법에 따라 순서대로 기술하는 프로그래밍 방법
- 특징: TOP-DOWN 접근방식 / 전체의 기능을 하나의 함수로 구현하여 프로그램의 시작부터 순차적으로 코드실행
- 사용언어: C언어
- 장점 : 빠른 실행속도 / 적은 개발 비용 및 시간
- 단점 : 버그 발생 시 디버깅의 어려움 / 순서변경 시 실행의 어려움
Object-Oreiented language(객체지향):
- 정의: 프로그램을 다수의 독립적인 객체로 만든 후 서로 상호작용하도록 하응 방법
- 특징:
- 추상화: 공통의 속성 및 기능을 묶어 이름을 붙이는 것
- 캡슐화: 객체의 변수 및 Method를 외부에서 수정할 수 없도록 하는 것
- 상속: 부모클래스의 변수와 Method를 자식이 상속받는 것
- 다형성: 하나의 객체가 여러 개의 Type을 가질 수 있는 것
- 추상화: 공통의 속성 및 기능을 묶어 이름을 붙이는 것
- 사용언어: JavaScript, Phthon
- 장점 : 생산성 향상 / 높은 코드 재사용성 / 유지보수 용이
-
단점: 느린 실행속도(다수의 객체를 합한 뒤 실행해야 하므로) / 높은 개발 비용 및 시간
- JavaScript Reference