24.02.05

오늘은 타입, This, 객체지향 프로그래밍에 대해 정리해 보겠습니다.

 

타입 (Type)

변수의 타입일 경우 다양한 데이터를 용도에 맞게 쓰기 위해 사용함

원시타입 : 단순 데이터 저장

참조타입 : 객체로서 저장

으로 크게 두 가지 타입으로 구별할 수 있음

String str = "Java"; // Java의 변수 선언식
System.out.println(str);

 

원시타입 (Primitive Types)

값이 변경 불가능함

값을 변수에 저장하거나 전달할 때 값에 의한 전달함

다른 변수에 원시 값을 할당할 때 값의 참조가 저장되는 것이 아닌 값 자체가 복사되어 저장

(가리키고 있는 값을 따라가기에 실제 메모리에 저장된 주소)

let str1 = 'hello';
let str2 = str1;
console.log(str2); // 'hello'
str1 = 'world';
console.log(str2); // str2에 할당된 값은 여전히 'hello' 

+ string / number / bigint / boolean / undefined / symbol / null 등 원시타입에 속함

 

객체타입 (Object Types)

객체는 프로퍼티로 값과 메서드를 가짐

(각각 객체의 상태와 동작을 나타냄)

값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨

(객체 값을 다른 변수에 할당할 때는 값 자체가 복사되어 저장되는 것이 아닌 값의 참조, 즉 위치가 저장됨)

let arr1 = [1, 2, 3];
let arr2 = arr1;
console.log(arr2);
arr1[0] = 10;
// arr1 = [10, 20];
console.log(arr2);
// 비교
let value1 = 10;
let value2 = value1;
console.log(value2);
value1 = 20;
console.log(value2);

 

+ 원시타입을 객체타입처럼 사용할 수 있도록 autoboxing 과정 거침

= 일관적인 사용 경험을 사용자에게 제공하기 위해서

let val = 'hello!';
console.log(val.toUpperCase());
// 위의 코드가 내부적으로는 아래처럼 실행, autoboxing
let val = 'hello!';
let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;

 

배열 (Array)

데이터를 순서대로 저장하는 객체

하나의 데이터를 표현하는 원시타입과 달리 여러 데이터를 한 변수에 저장할 수 있음

데이터 추가, 제거, 정렬, 검색 등 다양한 작업 수행을 위해 메서드 제공

 

1. 빈 배열로 생성하거나 요소가 포함된 배열로 생성 가능

const arr = [];
const arr = [1, 2, 3];
const arr2 = new Array(4, 5, 6);
const arr2 = new Array(3);

2. 숫자를 사용하여 접근

숫자는 값의 순서를 의미함, 순서를 인덱스 (Index)라 칭함

배열 안에 존재하는 값을 원소 (elements)라 칭함, 존재하지 않는 원소에도 접근 가능

const arr = [1, 2, 3];
// 배열 안의 원소에 접근하기 위해서는 인덱스 번호를 이용
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // ??

3. 원소의 길이를 나타내는 Length 프로퍼티

const myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 5

4. 배열 안에 다른 배열을 포함 가능 (다차원 배열)

const arr2 = [
    [1, 2],
    [3, 4],
    [5, 6]
];
console.log(arr[0][0]);
console.log(arr[2][1]);

 

배열 메서드

1. push()와 pop()

push() 메서드는 배열의 끝에 요소를 추가하고 길이를 반환

pop() 메서드는 배열의 마지막 요소를 꺼내어 반환

(꺼낸 요소는 배열에서 제외됨)

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
arr.pop();
console.log(arr); // [1, 2, 3]

2. shift()와 unshift()

shift() 메서드는 배열에서 첫 번째 요소를 꺼내고 반환

unshift() 메서드는 배열의 첫 번째 요소로 새로운 요소를 추가

const myArray = ["사과", "바나나", "수박"];
myArray.shift();
console.log(myArray); 
myArray.unshift("오이", "배");
console.log(myArray);

3. splice()

splice() 메서드는 배열의 요소를 추가, 제거 또는 교체

= 메서드는 3개의 전달인자를 받음

첫 번째 : 삭제나 추가를 시작할 인덱스

두 번째 : 삭제할 요소의 개수

세 번째 : 추가할 요소들

추가할 요소가 없다면 생략이 가능하며 이때는 요소를 삭제만 함

const arr = [1, 2, 3];
arr.splice(1, 0, 4);
console.log(arr); // [1, 4, 2, 3]
arr.splice(2, 1, 5);
console.log(arr); // [1, 4, 5, 3]

4. slice()

slice() 메서드는 배열에서 요소들을 추출하여 새로운 배열로 반환

= 메서드는 2개의 전달인자를 받음

첫 번째 : 추출을 시작할 인덱스

두 번째 : 추출을 끝낼 인덱스

추출할 요소는 첫 번째 인자에서 시작하며 두 번째 인자에서 바로 이전 요소까지

두 번째 인자는 생략 가능

생략하거나 배열의 길이보다 큰 값을 전달하면 배열의 끝까지 추출

slice() 메서드는 배열에서 요소들을 추출하여 새로운 배열로 반환

const myArray = ["apple", "banana", "cherry", "durian", "elderberry"];
console.log(myArray.slice(1, 4)); 
console.log(myArray.slice()); 
console.log(myArray.slice(0, 10));

5. sort()

sort() 메서드는 배열의 요소를 정렬하는 데 사용

메서드를 호출하면 배열을 변경하고 정렬된 배열을 반환함

const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
console.log(avengers.sort());

 

+ 원소의 값을 숫자형으로 변경 시

const nums = [3, 1, 8, 6];
console.log(nums.sort());
const nums2 = [23, 5, 1000, 42];
console.log(nums2.sort());

숫자를 정렬하려고 하면 의도와는 다르게 정렬되는 것을 확인

= 정렬 방식은 원소를 문자열로 전환 후 유니코드 포인트의 순서대로 변환하기 때문

숫자형 데이터 정렬의 이런 단점을 해결하기 위해 비교 함수(compareFunction)를 사용

비교 함수가 제공되면 원소의 순서는 비교 함수의 반환 값에 따라 정렬됨

const num3 = [13, 9, 10];
num3.sort(function (a, b) {
    console.log('a: ' + a, 'b: ' + b);
    return a - b;
});
/*
"a: 9"
"b: 13" // a - b는 음수임으로 a를 앞으로 => [9, 13, 10]
"a: 10"
"b: 9" // a - b는 양수임으로 b를 앞으로 => [9, 13, 10]
"a: 10"
"b: 13" // a - b는 음수임으로 a를 앞으로 => [9, 10, 13]
"a: 10"
"b: 9" // a - b는 양수임으로 b를 앞으로 => [9, 10, 13]
*/

비교 함수가 제공되지 않으면 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 문자열을 비교하여 정렬됨

 

+ Tim sort 알고리즘

JavaScript의 sort 메서드가 원소를 정렬하는 방법

합병 정렬(Merge sort)과 삽입 정렬(Insertion sort)의 아이디어를 결합한 알고리즘 (매우 안정적으로 동작함)

데이터를 여러 개로 분할 후 삽입 정렬 알고리즘으로 정렬함 그 후에 합병 정렬 알고리즘을 이용해 정렬된 데이터들을 하나로 합침

분할하고 정렬하는 과정에서 이미 정렬된 데이터를 인식하고 이를 활용함으로 평균적인 수행 시간을 크게 줄일 수 있음

참고 : https://d2.naver.com/helloworld/0315536

 

6. forEach()

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행

함수는 인자로 배열 요소, 인덱스를 받음

배열의 요소를 순환하면서 해당 요소를 함수로 전달하며 함수가 각 요소에 대해 실행됨

const arr = ['참외', '키위', '감귤'];
arr.forEach(function(item, index) {
    console.log(item, index);
arr[index] = index;
});
// 참외 0
// 키위 1
// 감귤 2

forEach() 메서드는 배열의 각 요소에 대해 특정 작업을 수행할 때 사용

배열의 각 요소를 이용하여 다른 배열을 만들거나 요소를 삭제 혹은 값을 변경하는 등 작업을 수행할 수 있음

const avengers = ['spiderman', 'ironman', 'hulk', 'thor'];
const newAvengers = [];
avengers.forEach(function (item) {
    newAvengers.push('💖' + item + '💖');
});

7. map()

map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고 그 결과를 새로운 배열로 반환

const arr = [1, 2, 3];
const newArr = arr.map(function(item, index) {
    return item * index;
});
console.log(newArr);

첫 번째 : 배열의 각 요소를 처리할 함수

두 번째 : 요소의 인덱스를 전달

= 배열의 각 요소를 매개변수로 받아 처리한 후 그 결과를 반환

 

+ forEach()와 map()

forEach()와 map()은 둘 다 배열의 각 요소에 대해 주어진 함수를 실행

forEach() 메서드의 경우 반환값이 없지만 map() 메서드는 새로운 배열을 반환한다는 차이가 있음

const data = [
    {
        "_id": "642ba3980785cecff3f39a8d",
        "index": 0,
        "age": 28,
        "eyeColor": "green",
        "name": "Annette Middleton",
        "gender": "female",
        "company": "KINETICA"
    },
    {
        "_id": "642ba398d0fed6e17f2f50c9",
        "index": 1,
        "age": 37,
        "eyeColor": "green",
        "name": "Kidd Roman",
        "gender": "male",
        "company": "AUSTECH"
    },
    {
        "_id": "642ba39827d809511d00dd8d",
        "index": 2,
        "age": 39,
        "eyeColor": "brown",
        "name": "Best Ratliff",
        "gender": "male",
        "company": "PRISMATIC"
    }
];
const ages = data.map((item) => item.age);

 

8. filter()

filter() 메서드는 기존의 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열 생성

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArr = arr.filter(function(el) {
  return el % 2 === 0;
});
console.log(newArr);

// or

const arr11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArr = arr11.filter(el => el % 2 === 0);
console.log(newArr);

= 배열에서 특정한 숫자나 날짜 등의 필요한 정보를 가진 원소만 추출할 때 매우 유용

9. includes()

includes() 메서드는 요소가 포함되어 있으면 true 아니면 false 반환

const arr1 = ['hello', 'world', 'hojun']
arr1.includes('world')
const arr1 = ['hello', 'world', 'hojun']
arr1.includes('leehojun')
const arr1 = ['hello', 'world', 'hojun']
arr1.includes('jun')

 

객체 (Object)

여러 개의 데이터를 한 변수에 저장할 수 있는 자료형

(차이점으로 배열이 값에 접근하기 위해서는 배열 생성 시 자동으로 부여되는 인덱스 번호를 이용함)

객체는 특별한 키(key)를 통해 원하는 값(value)에 접근할 수 있는 키와 값 쌍으로 이루어짐

 

1. 객체의 리터럴 표현은 중괄호 ({})를 사용하여 생성

(각 key와 value는 콜론(:)으로 구분)

키와 값 쌍을 합쳐서 자산(properties)이라 표현 (만약 프로퍼티 값이 함수인 경우에는 메서드라고 함)

const babaYaga = {
    name: "John Wick",
    age: 53,
    from: "벨라루스",
askingHim: function(){
console.log("Yeah, I'm thinking I'm back!");
    }
};

+ 최신 문법을 사용하면 function 키워드 없이 메서드를 등록할 수 있음

const babaYaga = {
    name: "John Wick",
    age: 53,
    from: "벨라루스",
askingHim(){
console.log("Yeah, I'm thinking I'm back!");
    }
};

2. 객체의 속성값에 접근하기 위해서는 객체 이름 + 점 연산자 + 접근하고자 하는 값의 key를 입력

= 객체의 속성 이름이 변수명 규칙을 지켰다면 대괄호([])를 사용하여 속성에 접근할 수도 있음

console.log(`${babaYaga.name} from ${babaYaga.from}`);
console.log(`${babaYaga['name']} from ${babaYaga['from']}`);

3. 객체 속성 추가는 객체 이름 뒤에 점(.)과 새로운 속성 이름 입력 후 값 할당

babaYaga.job = "Killer";

+ 속성을 삭제하려면 delete 키워드를 사용

delete babaYaga.job;

+ in 연산자를 이용해 특정 프로퍼티가 객체 안에 존재하는지 확인 가능

console.log('age' in babaYaga);
console.log('mercy' in babaYaga);

 

객체 메서드

1. hasOwnProperty()

hasOwnProperty() 메서드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환

const aespa = {
    members: ['카리나', '윈터', '지젤', '닝닝'],
    from: '광야',
    sing: function(){
        return "적대적인 고난과 슬픔은 널 더 popping 진화시켜!"
    }
};
console.log(aespa.hasOwnProperty('itzy'));
console.log(aespa.hasOwnProperty('from'));

2. for … in

객체의 반복을 위해 만들어진 기능

객체 안의 프로퍼티들에 접근하여 어떠한 키와 값을 가지는지 살피거나 조건에 따라 값을 수정해야 할 경우 사용

for (const variable in object) {
    // ...
}

in 앞의 값에는 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정됨

in 뒤의 값에는 반복작업을 수행할 객체를 지정

const person = {
    name: '수현',
    age: 23,
    gender: 'male'
};
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

+ for … in 문 안에서 처리되는 프로퍼티들은 반드시 순서대로 반복되지 않음

처리 과정에 순서가 중요할 경우 일반적인 반복문을 이용해 처리하는 것을 권장함

3. keys(), values()

Object.keys() 메서드는 객체의 속성 이름(key)들을 Object.values() 메서드는 객체의 속성 값(value)들을 배열로 반환

keys 메서드는 IE9 버전부터 지원하며 values 메서드는 IE를 지원하지 않음

console.log(Object.keys(aespa));
console.log(Object.values(aespa));

 

This

객체를 가리키는 참조 변수

호출되는 위치에 따라 다른 값을 출력함

ex) 1 코드는 window를 출력하고 ex) 2 코드는 myObj를 출력

// ex) 1

function a(){ console.log(this) }
a();

// ex) 2

let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}
myObj.func1();

+ window 객체는 브라우저 환경의 전역공간을 의미함

Node.js 환경에서의 전역공간은 global 이란 이름을 가짐

function b(){
    console.log('hello world')
}
b()
window.b()

= 어떤 객체의 메서드가 아닌 단독 호출되는 함수의 this는 전역공간을 참조하게 됨

 

ex)

let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}
let test = myObj.func1;
test()

= 위 경우도 this가 달라짐, 함수를 호출한 객체가 달라졌기 때문에

 

ex) 버튼

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title></title>
    </head>
    <body>
        <button id="btn1">클릭해봐요!</button>
        <button id="btn2">클릭해봐요!</button>
        <script>
            let myObj = {
                val1: 100,
                func1: function () {
                    console.log(this);
                },
            };
            let test = myObj.func1;
            let button1 = document.getElementById("btn1");
            button1.addEventListener("click", myObj.func1);
            let button2 = document.getElementById("btn2");
            button2.addEventListener("click", test);
        </script>
    </body>
</html>

 

This 특징

= 함수가 만들어질 때가 아닌 실행될 때 그 값이 결정됨

function sayName(){
    console.log(this.name);
}
var name = 'Hero';
let peter = {
    name : 'Peter Parker',
    sayName : sayName
};
let bruce = {
    name : 'Bruce Wayne',
    sayName : peter.sayName
};
bruce.sayName();

 

객체지향 프로그래밍

프로그램을 작성할 때 객체들을 만들어 서로 소통하도록 하는 방법

= 객체지향의 객체는 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것으로 볼 수 있음

 

피카소의 추상화 과정

= 추상화란 필요한 최소한의 정보로 대상을 표현

 

ex) 나 자신을 추상적인 객체로 표현

const me = {
    name : '이수현',
    address : '서울특별시',
    phoneNum : '010-0000-0000',
    canWalk : function(){
        console.log('수현이가 글을 적는다.');
    }
}

+ 객체는 행동과 상태를 가짐

행동은 메서드, 상태는 프로퍼티로 이해

 

ex) 나에게 새로운 능력을 추가

const me = {
    name : '이수현',
    address : '서울특별시',
    phoneNum : '010-0000-0000',
    canWalk : function(){
        console.log('수현이가 글을 적는다.');
    },
    teaching : function(student){
        student.levelUp();
    }
}

+ 새로운 객체 생성

const student = {
    level: 1,
    levelUp : function(){
        this.level++;
    }
}

+ 능력 발휘

me.teaching(student);

= 객체와 객체가 서로 메서드를 향해 상호작용 하는 것을 객체지향 프로그래밍이라 표현

 

생성자 (constructor)

객체를 만들 때 new 연산자와 함께 사용하는 함수

let myArr = new Array(1,2,3);

= 내장 생성자

 

+ 생성자를 사용하는 이유

생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있음

let myArr = new Array(1,2,3);
let myArr2 = new Array(4,5,6);
myArr2.length
myArr.length
myArr.forEach(item=>{
    console.log(item);
})
myArr2.forEach(item => {
    console.log(item);
})

 

ex) 커스텀 생성자 (생성자 함수는 암묵적으로 대문자로 시작하는 이름을 가지도록 함)

function Factory(){}

+ new 키워드를 통해 객체 생성

function Factory(){}
let robot1 = new Factory();

= Factory 생성자 함수는 따로 return 값을 가지지 않음

하지만 new키워드가 앞에 붙게 되면 실행되었을 때 자동적으로 객체를 생성하고 반환

반환되어 만들어진 객체를 인스턴스 (instance)라 함

= 생성자 함수와 객체의 관계는 instanceof로 확인할 할 수 있음

robot1 instanceof Factory

+ 자신만의 프로퍼티와 메서드를 가진 로봇 객체 생성

function NewFactory(name){
    this.name = name;
    this.sayYourName = function(){
        console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
    }
}

원래 함수 안에서의 this는 함수를 호출한 객체를 참조함

하지만 생성자 함수 앞에 new 연산자가 사용되면 함수 안의 this는 생성자가 만들어낸 객체 (인스턴스)를 참조

+ 인스턴스 생성

let robot1 = new NewFactory('브랜든');

 

+ 문제점 : 100개의 객체를 생성할 경우 100개의 함수를 새로 생성해야 함

자원 낭비 해결을 위해 프로토타입을 활용

this.sayYourName = function(){
    console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
}

 

프로토타입 (prototype)

특정 객체에 대한 참조 (어떤 공간을 가리키고 있음)

생성자 함수가 인스턴스를 생성하게 되면 그 안에는 숨겨진 프로퍼티인 [[Prototype]] 이 존재

코드 상에서 __proto__로 표현됨

__proto__ 프로퍼터는 자신을 만든 생성자의 함수 prototype을 참조하는 역할

= new 키워드를 통해 생성자 함수의 prototype과 인스턴스의  __proto__가 연결

function Test(){};
const obj = new Test();
obj.__proto__ === Test.prototype

 

+ prototype과 __proto__

prototype은 오직 function안에 존재하는 참조값

__proto__는 객체 안에 존재하는 숨겨진 프로퍼티로 서로 다름

인스턴스는 __proto__를 통해 생성자 함수의 prototype에 접근하여 필요한 여러 가지 값과 메서드를 사용할 수 있음

function Test(){};
const obj = new Test();
console.log(obj.prototype); // undefined
console.log(obj.__proto__ === Test.prototype);  // true 

 

객체 상속

기본적으로 prototype을 통해 사용

const obj = {
    name: 'test'
}
console.log(obj.hasOwnProperty('name'));
const arr = [1,2,3];
console.log(arr.hasOwnProperty('name'));

 

프로토타입 체이닝

배열 arr의 __proto__ 가 Array함수의 __proto__를 참조하고

Array함수의 __proto__ 가 Object 함수의 __proto__ 를 참조하고 있기 때문에

= Array의 prototype에 존재하지 않는 Object 객체의 프로퍼티와 메서드를 사용할 수 있음

자기 자신에게 존재하지 않는 프로퍼티나 메서드를 프로토타입을 통해 추적하는 과정

+ 기본적으로 Object 타입을 상속받음

console.log(Array.prototype.__proto__ === Object.prototype);
console.log(Number.prototype.__proto__ === Object.prototype);
console.log(String.prototype.__proto__ === Object.prototype);
console.log(Math.__proto__ === Object.prototype);

 

ex) 직접 생성한 생성자 함수를 통해 상속받기

// 부모 역할 생성자 함수

function Parent() {
    this.name = '수현';
}
Parent.prototype.rename = function (name) {
    this.name = name;
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

// 자식 역할 생성자 함수

function Child() {
    Parent.call(this);
}
Child.prototype = Object.create(Parent.prototype);

// 지정된 프로토타입 객체를 갖는 새 객체를 만듦

Child.prototype.canWalk = function () {
    console.log('now i can walk!!');
}

+ call 함수는 Child 함수의 this가 Parent 생성자 함수의 this를 바라보게 함

= Child를 통해 생성된 인스턴스의 this 가 Parent 함수 안의 프로퍼티에 접근할 수 있도록 함

+ Object.create 함수는 주어진 인자를 Child.prototype에 연결하는 역할

= Parent 객체의 프로토타입을 Child 객체의 프로토타입이 참조하도록 함

두 가지 과정을 통해 Child 객체는 Parent 객체의 모든 것을 상속받게 됨

 

이 코드의 단점

1. 객체 안에 존재하던 메서드가 prototype이라는 키워드와 함께 외부로 빠져나옴

= 코드가 좋아 보이지 않음, 중괄호 안에 모든 것이 옹기종기 모여있던 객체의 모습과 거리가 멀어지게 됨

2. 보편적인 객체지향 코드의 모습과 차이가 있음

= JavaScript를 잘 모르는 프로그래머들, prototype은 보통 함수에서 별 의미가 없음

오직 생성자 함수에서만 의미가 있음

C++이나 Java 혹은 Python을 전공한 프로그래머들은 class 키워드는 없고 prototype 키워드만 보이기에 혼란스러울 수 있음

 

Classes

ES6부터 class라는 키워드를 사용할 수 있음

class 키워드 + 이름 + 중괄호({})로 이루어짐

클래스의 결과물은 인스턴스를 생성하는 것

생성자를 이용한 타입 생성과 그 결과가 정확하게 일치함

class Robot {

    // 클래스의 생성자 함수

    // 하나의 클래스는 하나의 생성자만 정의할 수 있음

    // 그리고 생성자 함수는 new 키워드가 호출될 때 자동으로 실행

    constructor(name) {

        this.name = name;

    }

    // 메서드를 정의

    // 메서드는 클래스가 생성한 인스턴스를 통해 사용할 수 있음

    sayYourName() {

        console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);

    }

}

classes : 사용자 정의 타입 생성 (객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것

인캡슐레이션 (Encapsulation) : 객체 지향 프로그래밍(OOP)의 개념

= 데이터와 해당 데이터를 조작하는 메서드들을 하나의 단위로 묶는 것

+ 슈가신텍스 (Syntactic sugar)

내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법

 

Class 상속받기

extends 키워드를 사용

상속받는 클래스는 파생 클래스 (derived classes)라고 함

부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용 (super는 부모 생성자를 참조)

+ super 사용 주의점

1. 파생 클래스에 생성자 함수를 사용하고 싶다면 반드시 super 함수를 사용해야 함

2. 파생클래스에 생성자 함수가 없다면 super 함수가 자동으로 호출되어 부모 클래스의 프로퍼티를 상속받도록 함

3. 생성자 함수에서 this 값을 사용할 경우 super 함수는 반드시 this 보다 먼저 실행되어야 함

4. 파생 클래스가 아닌 클래스에서 사용하려고 해도 에러가 발생

class BabyRobot extends Robot {
    constructor(name) {
        super(name);
        this.ownName = '아이크';
    }
    sayBabyName() {
// 또한 상속을 받게 되면 부모 클래스의 메서드를 사용할 수 있게 됩니다. 때문에 this로 접근할 수 있습니다.
        this.sayYourName();
        console.log('Suceeding you, Father!');
    }
}

 

으로 정리 마무리 하겠습니다.

최근 카타르 아시안컵을 보는 관계로 패턴이 완전히 깨져버렸네요 x.x

설 연휴 때 다시 재정비해서 열심히 달려야겠습니다.

관련 파일은 제 GitHub에서 확인하시면 됩니다.

https://github.com/soohyun020812/ormcamp

GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리