[엘리스 sw 엔지니어 트랙] 11일차 JavaScript

수업 11일차

3주차가 시작되었다. 객체와 클래스,상속 등을 배웠는데 수업을 들으면서 아리까리 한게 많았다. 내일은 더어렵다던데...

이론

• 컴포넌트 : 캡슐화를 통해여 재사용이 가능한 독립된 모듈
  export : 복사
  import : 붙여 넣기, 다른모듈에서 내보낸것을 가져올때 사용,"*"사용하면 모든값 가져옴
  Arrow function : 기존의 함수를 간단하게 사용할수 있음, this값이 바인딩되지 않음, 생성자 사용불가
  Truthy / Falsy : Boolean이 필요할때, 어떻게 판단하는지 정의된 값들, Truthy는 Falsy가 아닌 모든 값
  객체 : 데이터와 함수의 집합, 값을 가진것(프로퍼티), 함수를 가진것(메소드)
  const : 주소값을 넣는것
  JSON.stringify() : 객체를 스트링으로 변환
  JSON.parse() : 새로운 메모리 할당
  rest/spread : 반복 가능한 객체를 여러개 요소로 펼치거나(spread) 모아주는(rest) 방법
  Class : 객체를 생성하기 위한 템플릿
  constructor : 생성된 객체를 초기화 하기 위한 특수한 함수
  클래스 : 레시피
  인스턴스 : 레시피로 만들어진 요리
  같은 클래스로 만들어진 인스턴스는 모두 같은 프로퍼티와 메소드를 가짐
  this : 자기 객체를 가리키는 것
  상속 : 부모의 속성을 모두 가지고 올수 있음, super는 부모의 생성자 호출
  named export를 사용해야할때 : 한 파일에서 여러개 export할때 사용, 이름 동일해야함
  default export를 사용해야할때 : 한 파일당 한번만 사용가능, 이름을 자유롭게 사용
  템플릿 리터럴 : `(백틱)을 사용 변수를 ${}기호로 넣어 코드의 가독성 높임
  forEach() : 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정 생략
  map() : 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새 배열을 반환

실습

export와 import의 예제이다.

다른 예제 파일의 모듈을 사용하여

환율을 콘솔로 찍어보았다.

import { yuanToWon, yenToWon } from "./asia.js"
import { dollarToWon } from "./dollar.js"
import euroToWon from "euro.js"


console.log(euroToWon(100));
console.log(dollarToWon(200));
console.log(yuanToWon(300));
console.log(yenToWon(400));

Class를 활용하여 캐릭터와 몬스터의 객체를 만들어 사용한 예제이다. 슬라임의 체력이 0이되면 죽었다는 메세지를 콘솔로 찍어낸다.

class Character {
    constructor(name, ad, ap, hp) {
        this.name = name;
        this.ad = ad;
        this.ap = ap;
        this.hp = hp;
    }

    showInfo() {
        console.log(`직업: ${this.name}`);
        console.log(`공격력: ${this.ad}`);
        console.log(`주문력: ${this.ap}`);
        console.log(`체력: ${this.hp}`);
    }

    adAttack(monster) {
        console.log(`${this.name}가 ${monster.name}을 ${this.ad} 대미지로 공격하였습니다.
        ${monster.name}의 남은 체력: ${monster.hp} -> ${monster.hp - this.ad}`);
        monster.hp = monster.hp - this.ad;
        monster.checkHp();
    }

    magicAttack(monster) {
        console.log(`${this.name}가 ${monster.name}을 ${this.ap} 대미지로 마법 공격하였습니다.
        ${monster.name}의 남은 체력: ${monster.hp} -> ${monster.hp - this.ap}`);
        monster.hp = monster.hp - this.ap;
        monster.checkHp();
    }
}

class Warrior extends Character {
    constructor(name) {
        //직업, 공격력, 주문력, 체력
        super(name, 300, 0, 1000);
    }
}

class Wizard extends Character {
    constructor(name) {
        //직업, 공격력, 주문력, 체력
        super(name, 20, 700, 300);
    }
}

class Monster {
    constructor(name, hp) {
        this.name = name;
        this.hp = hp;
    }

    checkHp() {
        if (this.hp <= 0) {
            console.log(`${this.name}이 죽었습니다.`);
        }
    }
}

const slime = new Monster("슬라임", 700);
const pig = new Monster("맷돼지", 1500);

const warrior = new Warrior("전사");
const wizard = new Wizard("마법사");

warrior.showInfo();
warrior.magicAttack(slime);
warrior.magicAttack(slime);

wizard.magicAttack(slime);
wizard.magicAttack(pig);