[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 5강(2) ~6강 (1)

함수의 선언과 표현, class VS object

오늘 내가 배운 것

클래스 안에는 속성(field)과 행동 (method)가 있다.

클래스는 조금 더 연관이 있는 데이터들끼리(속성 + 행동) 묶어 놓은 것을 말한다. (관련이 있는 변수나 함수들을 묶어 놓은 것.)

간혹 속성(field)만 있는 경우 가 있는데 그것을 데이터 클래스라고 부른다.

Class
데이터가 들어있지 않고 틀, 템플릿만 정해놓은 것
-template
-declare once
-no data in
Object
-instance of a class
-created many times
-data in
클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다.
오브젝트는 클래스를 이용해서 굉장히 많이 만들 수 있다.

클래스는 정의만 한 것이기 때문에 메모리에 올라가지 않지만 오브젝트는 실제를 데이터를 가지고 있기 때문에 메모리에 올라간다.

Getter & Setter

Age라는 getter을 정의하면 this.age 는 getter 을 호출하게 된다. 그리고 setter을 정의하면 =age; 가 setter을 호출하게 된다.

Setter에서 value 값을 this.age에 전달하려 할 때 this.age 에 할당되는 것이 아니라 setter의 처음으로 돌아가서 다시 setter을 호출하게 된다. 그러면 다시 돌아와서 setter 호출을 반복하게 되어서 Call stack이 닫혔다는 error가 발생한다.


이것을 방지하기 위해서 getter과 setter안에서 사용되는 변수의 이름을 다른걸로 바꿔주면 된다.( Ex.. age2, agePrivite.. 등등..)
보통은 _를 추가하여 바꾼다.( _age )

---

동영상 보면서 따라 적어보기

5-2

// 1. Function expresstion
// a function declaration can be called earlier than it is defiend. (hoisted)
// afuction expression is created when the execution reaches it.
const print = function() {   //함수에 이름이 없이 있는 것을 anonymous function
    console.log('print');
};
print();
const printAgain = print ;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));  

// 2. Callback function using function expression
function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you') {
        printYes();
    } else{
        printNo();
    }
}

//anonymous function
const printYes = function(){
    console.log('yes!');
};

//named function
//better debugging in debugger's stack traces
//recursions (반복)
/* 

const printNo = function print() {
    console.log('no!');
print();
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);     /무한반복 & 콜스택이 꽉 찼다는 error를 띄움

*/


//Arrow function
//always anonymous function

/*
const simplePrint = function(){
    console.log(`simplePrint!`);
};                               //이 코드를
*/ 

const simplePrint = () => console.log('simplePrint!');   
//function 지우고 블럭지워서 한줄에 표현

const add = (a, b) => a+b;
//한줄로 간단하게 표현이 불가능하고 많은 일을 해야해서 블럭이 필요하다면
const simpleMultiply = (a,b) =>{
    // do somthing more
    return a*b;   // 블럭을 쓰게 되면 return 잊지말기!
};

// IIFE : Immediately Invoked Function Expression

/*
function hello(){
    console.log('IIFE');
}
hello();
*/   // 위에 function을 function 앞부터 ()로 선언함과 동시에 호출 할 수 있다. 
    //뒤에 hello를 출력하는 함수가 필요 없어짐.

(function hello() {
    console.log('IIFE');
})();

---

6-1

'use strict'
//Object-oriendted programming
//class : template
//object : instance of a class
//JavaScript classes
//  -introduced in ES6  // ES6에 처음 소개됨
//syntactical sugar over prototype-based inheritance

// 1. Class declarations
class Person{
    //constructor   //생성자
    constructor (name, age) {
        //fields
        this.name = name;
        this.age = age;
    } 
    //methods
    speak() {
        console.log(`${this.name} : hello!`);
    }
}

const ellie= new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

// 2. Getter and setters
class User {      
    constructor (firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get age (){
        return this._age;
    }
    set age(value) {
        if(value <0) {
            throw Error('age cna not be negative')
        }
        this._age=value; 
        //또는 this._age = value < 0 ? 0 : value;  로 표현가능
    }
}

 const user1 = new User ('Steve', 'job', '-1');
 console.log(user1.age); 
 //user안에 3개의 field가 있다. 
 //firstName, lastName, _age