개발_TIL | 2022-07-26 (68)

Local Scope

밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다. - 드림코딩 엘리

Block Level Scope : 중괄호({ })를 사용하여 만든 블럭 내부에 있는 변수
Global Level Scope: 블럭 외부에 있는 변수

let globalMessage = 'global';

function printMessage() {
    let message = 'hello'; // local variable
    console.log(message); 
    console.log(globalMessage);
    function printAnother() {
        console.log(message);
        let childMessage = 'babo';
        console.log(childMessage);
    }
  printAnother()
}
printMessage()

블럭 안에서 사용된 변수는 밖에서는 사용할 수 없다.
함수 내부의 함수에서 바깥에서 사용한 변수는 참조 가능하지만
부모 함수에서는 자식 함수에서 사용한 변수를 사용할 수 없다

Return

함수에서 파라미터를 받아 계산된 값을 리턴할 수 있음

function sum(num1, num2) {
    return num1 + num2
}
let result = sum(1,2);

Early Return

조건이 많아 여러 블럭 안에 로직을 많이 작성해 많은 분기를 처리하게 된다면 가독성이 떨어진다
따라서 특정 조건에 맞는 값을 빨리 리턴해버리는 Early Return을 사용하면 여러 블럭을 만들 필요 없이 조건문을 짧게 작성할 수 있다

function 공룡등장(내일배움캠퍼) {
    if (내일배움캠퍼 == "입실체크완료") {
        return "잘했어요^^";
    }
    console.log("저를 화나게 하지 마세요!");
}

let 황영상 = "입실체크완료";
공룡등장(황영상);

Function Expression

Javascript에서 function은 First-class(1급시민)
- 변수에 function을 할당 가능
- function의 parameter에 function을 할당 가능
- 다른 function의 return에 function 할당 가능
function expression은 이러한 first-class 를 표현하는 방식

Function Declaration

함수를 변수에 할당하는 것을 Function Declaration 이라고 한다
변수에 함수를 지정하면 함수의 기본 선언형태를 따르지만,
이름을 적어주지 않아도 변수 이름을 함수이름으로 인식하여 변수이름() 의 형태로만 호출이 가능하다 → Anonymous Function
변수에 함수를 선언한 변수를 초기화하여 재사용할 수 있다.
함수를 일일이 선언하고 호출하고 값에 담는 일련의 줄이 길어지는 과정을 단축시킨다

const print = function(){console.log('프린트');} // anonymous function
const print = function print_sentences(){console.log('프린트');} // named function

print();
const print_again = print;
print_again();

// 우리끼리 적어본 식
const source_sum = [1,2]
const result_sum = function(source_sum){return source_sum[0] + source_sum[1]}

const result_sul = (source_sum) => source_sum[0] + source_sum[1]

function declaration은 function hoisting 기능을 여전히 가지고 있다
- 함수를 선언한 순간, 스크립트는 함수부터 읽는다.(함수가 코드 맨 위로 올라감)
- 따라서 함수코드가 밑에 있어도, 위에서 함수를 실행할 수가 있게 된다!

Callback Function

함수 안의 parameter는 value를 받지만, function도 받을 수 있다
인자로 함수를 받아 호출한 함수를 Callback Function이라고 한다

function 쓰레기(고철, 버리자, 버리지말자){
    if (고철 === '깡통'){
        버리자();    
    } else {
        버리지말자();
    }
}
const 버리자 = function () {
    console.log('갖다버려 그냥 쓰레기야')
};
const 버리지말자 = function () {
    console.log('버리지말자 쓰레기 아닌거같애')
};
쓰레기('깡통', 버리자, 버리지말자)

Arrow Function

함수를 간결하게 만들어주는 expression
Arrow Function은 항상 Anonymous Function 이다
변수 = (parameter) ⇒ return; 형식으로 Arrow Function을 사용한다
내용이 추가적으로 필요해 블럭을 사용한다면 평소처럼 return 키워드를 작성해줘야 return이 된다
왜 쓰느냐? 라고 물어본다면 → 기존의 선언, 호출을 통한 절차를 줄여주고, 코드 길이를 줄여주어 가독성과 효율을 늘리기 위해서!

// 블럭은 열고 리턴은 없는 버전
const 버스카드찍기 = (age) => {
    if (age > 20){console.log("감사합니다");}
    else {console.log("안녕하세요");}
}
버스카드찍기(21);

// 블럭을 안열고 리턴이 있는 버전
const 입실체크 = (했니) => console.log(했니);
const 했니 = "했어";
입실체크(했니);

// 블럭을 열고 내용과 리턴이 있는 버전
const 복약관리 = (질병) => {
    let 약;
    if (질병 == "피로") {약="피로회복제";}
    else if (질병 == "고혈압") {약="혈압약";}
    else {약="당신은 건강하시네요!"}
    return 약
}
console.log(복약관리("고혈압"));

const simple = () => console.log('simplesimple');
simple()

const 나머지 = (a, b) => {
    return a % b;
};
나머지(10,3)

const mix =()=>리턴 값;
// 정답을 보고 썻네.......
const add = (a, b) => a + b;

퀴즈. command, num1, num2를 인자로 받는 계산기 함수를 작성해보시오. Arrow Function을 사용하시오.

const calculator = (command, num1, num2) => {
    switch(command) {
        case 'add':
            return num1 + num2;
        case 'substract':
            return num1 - num2;
        case 'multifly':
            return num1 * num2;
        case 'divide':
            return num1 / num2;
        case 'remainder':
            return num1 % num2;
        default:
            throw Error('unkown command')
    }
}
caculator("add", 1,2);

IIFE

함수를 선언하고 괄호를 묶고, 뒤에 괄호를 써주면 바로 함수를 실행할 수 있다

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

📌 Class

자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)

What is Class?

클래스는 조금 더 연관있는 데이터를 묶어놓은 일종의 컨테이너
만약 클래스가 없었다면, 규모있는 프로젝트를 진행하기가 힘들었을 것이다
클래스는 캡슐화, 상속 등을 통해서 객체지향적 프로그래밍을 지향한다

클래스

- 클래스는 붕어빵틀이다
- 클래스는 여러 번 재사용 가능하게 하는 템플릿과 같은 역할을 수행한다
- 클래스는 단 한 번 선언하면 된다
- 클래스 자체에는 데이터가 들어있지 않다

오브젝트

- 클래스를 이용해서 데이터를 넣은 것을 오브젝트라고 한다
- 클래스는 메모리에 들어가지 않지만, 인스턴스로 생성한 오브젝트는 데이터 메모리에 할당된다
- 붕어빵 틀에 내용물을 넣고 만들어낸 붕어빵이 오브젝트에 해당한다

Class Declaration

클래스는 템플릿이며, 클래스의 인스턴스를 오브젝트라고 한다

클래스 선언

클래스는 키워드 , 이름, 생성자, 필드, 메서드를 선언하여 작성한다

class 클래스{
    생성자(필드1, 필드2){
        this.필드1 = 필드1;
        this.필드2 = 필드2;
    }
    메서드(){
        메서드 내용
    }
}

오브젝트 선언

오브젝트를 선언하기 위해서는 변수 = new 클래스(필드) 를 사용하여 선언한다

// class declaration
class Person {
    // 생성자
    constructor(name, age) {
    // 필드
    this.name= name;
    this.age= age;
    }
    // 메서드
    speak() {
        console.log(`${this.name}: hello!`);
    }
}class Person {
    // 생성자
    constructor(name, age) {
    // 필드
    this.name= name;
    this.age= age;
    }
    // 메서드
    speak() {
        console.log(`${this.name}: hello!`);
    }
}

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

Getter & Setter

클래스 내부에서 값을 방어적으로 변경해주기 위해 세팅하는 메서드
값을 변경하기 위해서는 getter, setter가 동시에 사용되어야 합니다
일반적으로 변수를 초기화하는 작업을 내부에서 변경하기 위해서는 getter&setter가 그 과정을 수행하게 됨
getter는 필드 값을 호출하기 위해 필요한 메서드
setter는 필드 값의 밸류를 새로 할당하기 위해 필요한 메서드

class Person {
    constructor(firstName, lastName) {
        this.firstName= firstName;
      this.lastName = lastName;
        this.age= age;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        this._age = value < 0 ? 0 : value;
    }
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

Public & Private Field

생성자를 쓰지 않고 필드를 사용할 수 있음
#privateField 처럼 해시태그를 사용해서 내부에서만 쓰거나 변경할 수 있도록 작성할 수 있음

class Experiment {
    publicField = 2;
    #privateField = 0;
}

Static Field, Method

인스턴스를 이용해서 생성한 오브젝트와 상관없이 클래스 자체에 연결되어 있는 공통적으로 자주 사용하는 필드를 활용할 수 있음

class Article {
    static publisher = 'Dram Coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();

상속 & 다양성

하나의 객체를 다양하게 표현하기 위해서는 무엇이 필요한가?
예) 삼각형, 사각형, 원을 클래스를 사용한 오브젝트로 어떻게 표현할까?
- 너비와 높이 같은 반복되어지는 것을 계속 따로 만들어 반복해야 할까?
- Shape이라는 속성을 한 번 만들어서 각 개체가 가져가 쓴다면 효율적이겠다!

class MarvelCinematicUniverse {
    constructor(name, hero, villian) {
        this.name = name;
        this.hero = hero;
        this.villian = villian;
    }

    명대사() {
        console.log(`이 영화에서 명대사를 말한 인물은 ${this.villian}입니다!`) 
    }
}

class Ironman extends MarvelCinematicUniverse {}
class Spiderman extends MarvelCinematicUniverse {} 
const rdj = new Ironman('ironman2', '토니 스타크', '울트론');
rdj.명대사()
const 토비맥과이어 = new Spiderman('spiderman3', '피터 파커', '그린 고블린');

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 width * this.height;
    }

// 사각형이라는 클래스에 쉐이프 클래스 상속
class Rectangle extends Shape {}
class Triangle extends Shape {
    draw() {
        super.draw();
        console.log('⚠')
    }
    getArea() {
        return (this.width * this.height) / 2;
    }
}
const rectangle = new Rectangle(20,20,'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20,20,'red');
triangle.draw();
console.log(triangle.getArea());

상속은 자식 클래스를 선언할 때 extends 부모클래스 라고 추가로 작성하는 것으로, 부모클래스를 자식클래스가 상속하게 된다
부모클래스를 상속받은 자식클래스는 동일한 필드와 메서드를 작성한 셈이 되며, 그대로 사용할 수가 있게 된다.
물론 오브젝트를 선언할 때에 부모 클래스가 요구하는 필드 값을 작성해주어야 한다

Overriding

부모 클래스의 메서드를 덮고 다른 내용으로 해당 메서드를 작성하고 싶을 때 사용한다
자식 클래스에서 동일한 메서드를 선언하고, 내용을 작성하게 되면 부모클래스의 메서드는 출력하지 않는다.
부모 클래스의 메서드 또한 사용하고 싶다면, super.메서드() 를 사용하여 둘 다 사용할 수 있다

InstanceOF

인스턴스와 클래스가 서로 상관관계가 있는지 체크하는 메서드 (true, false로 반환한다)
인스턴스 instanceof 클래스 형태로 사용한다

console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true

'개발_TIL' 카테고리의 다른 글

개발_TIL \| 2022-07-28 (70) (0)	2022.07.31
개발_TIL \| 2022-07-27 (69) (0)	2022.07.27
개발_TIL \| 2022-07-25 (67) (0)	2022.07.26
개발_TIL \| 2022-07-22 (66) (0)	2022.07.22
개발_TIL \| 2022-07-21 (65) (0)	2022.07.21

Hee

개발_TIL | 2022-07-26 (68)

Local Scope

Return

Early Return

Function Expression

Function Declaration

Callback Function

Arrow Function

퀴즈. command, num1, num2를 인자로 받는 계산기 함수를 작성해보시오. Arrow Function을 사용하시오.

IIFE

📌 Class

What is Class?

Class Declaration

Getter & Setter

Public & Private Field

Static Field, Method

상속 & 다양성

InstanceOF

'개발_TIL' 카테고리의 다른 글

티스토리툴바

개발_TIL | 2022-07-26 (68)

Local Scope

Return

Early Return

Function Expression

Function Declaration

Callback Function

Arrow Function

퀴즈. command, num1, num2를 인자로 받는 계산기 함수를 작성해보시오. Arrow Function을 사용하시오.

IIFE

📌 Class

What is Class?

Class Declaration

Getter & Setter

Public & Private Field

Static Field, Method

상속 & 다양성

InstanceOF

'개발_TIL' 카테고리의 다른 글

관련글

티스토리툴바