Strength & Honor

클래스와 오브젝트의 차이점 및 객체지향 언어 클래스

자, 이번에도 역시 유튜버 엘리님의 강의를 요약하면서 공부 해 보자.
클래스와 오브젝트의 차이점을 간략히 설명하면 클래스는 틀이고 오브젝트는 그 틀에 넣어서 생성시키는 객체를 말한다.

예를들어, 아이스크림 콘을 클래스라고 한다면 그 안에 바닐라를 넣으면 바닐라 아이스크림이 되고 쵸콜렛을 넣으면 쵸콜렛 아이스크림이 되듯이 여기서 바닐라 나 쵸콜렛 아이스크림을 오브젝트라 정의한다.

1. 클래스 선언

처음부터 난관이다.
똑같이 코딩했는데 엘리님은 ellie, 20 이라는 결과값이 제대로 출력이 되는데 나의 경우는 age 가 정의가 되지 않았다고 하면서 에러가 뜬다.
일단 넘어가고 나중에 문제점을 찾아보기로 하겠다.

그 다음 ellie.speack 이라는 함수를 불러보면 ellie: hello! 라고 잘 출력이 된다.
이렇게 출력이 잘되는 것을 보면 오타는 없어 보인다.

            
    'use strict';

    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();

드디어 어디서 오류가 났는지를 찾았다.
위의 함수에서 console.log(ellie, name); 이라고 했는데 콤마아 아닌 . 을 넣어야 제대로 실행이 된다.
위의 함수는 이미 수정을 한 상태이다.
허나 왜 name 이 정의되어 있지 않다가 아닌 유독 age 만이 정의되지 않았다고 에러 메세지가 뜨는 것은 잘 모르겠다.

2. Getter and Setter

아래는 사람 이름과 나이를 입력받아 출력하는 함수이다.
일반적으로 나이는 음수라는 개념이 없으므로 조건을 줘서 음수 입력시 자동으로 0 을 출력하도록 한다.
즉 get 으로 입력을 받고 set 으로 오류를 수정한다는 개념이다.

set 에 적혀있는 조건문을 해석해 보면 this._age 에 만일 age(value) 가 0 보다 적은 값이 들어왔느냐?
만일 그렇다면 0 을 출력하고 그렇지 않으면 입력했던 나이를 출력하라 라는 뜻이다.

그래서 아래 함수에서 나이가 -1 이라는 음수를 입력 받았으나 0 을 출력한다.

        
    class User {
        constructor(firstName, lastName, age) {
            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', 'Jobs', -1);
    console.log(user1.age);

지금까지 JavaScript 의 강의를 따라해서 공부를 해 보았으나 솔직히 CSS 와는 다르게 어디에 어떻게 응용이 되는지 모르기에 강의의 이해나 활용도가 낮은 것 같다.

내가 JavaScript 를 공부하는 이유는 바로 Web 을 살아 움직이게 할 수 있기 때문이다.
파이썬을 공부하고 있으나 솔직히 Web 이라는 존재가 나에게는 매우 매력적인 아이이다.
이에따라 JavaScript 강의는 여기서 그만하고 실전 예제등을 통해서 공부를 하도록 하겠다.

JavaScript

Wizzen2801