code 실습 / 2️⃣4️⃣

 

 

 

 

 

 

 

 

🔥 ES5 이하의 시절의 문제점을 잘 알아둔상태에서 ES6 이후 문법을 사용합시다 🔥

✏️ ES6이전에 사용된 var 변수의 문제점들은 어떤 것들이 있었나요?

: 지역화 안됨, 변수 선언 중복이 가능하고 덮어씌워져서 고립화가 불가능하다

 

 

✏️ var를 대체하기 위해 나온 키워드들은 무엇인가요?

: let(값의 재할당 가능) const(값의 재할당 불가능)

 

 

✏️ JS의 ‘class’는 내부적으로 ?????으로 동작한다

: funtion() 함수

 

 

✏️ spread operator
[tip] JS 배열 복사하기 

const nums = [1, 2, 3];

const copy = [...nums]; // nums !== copy

: ...붙이는거는 값만 복사하는 것이고 이것을 '깊은 복사'라고 표현한다

 

 

✏️ rest operator

: Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

 

 

✏️ template literal

: 표현법은 ` `이며 $와도 같이 쓴다..자세한 설명은

https://eblee-repo.tistory.com/38

[JavaScript] ES6 템플릿 리터럴에 대해 알아보자!!

 

 

 

 

다음 코드는 수업 진도에 맞게 짠 것이니 참고하세요~

import Box from "./Box.js";



export default class GameCanvas {

 /** @param {CanvasRenderingContext2D} ctx */

 constructor(ctx) {

   this.#ctx = ctx;

   this.#boxes = [

     new Box(30, 30, "yellow"),

     new Box(40 + 50 + 20, 30, "green"),

     new Box(40 + 50 + 20 + 50 + 20, 30 + 50, "blue"),

     new Box(40 + 50 + 20 + 50 + 20 + 50 + 20),

   ];

 }



 run() {

   for (let box of this.#boxes)

     box.draw();

 }



 pause() {}



 #ctx;

 /** @type {Box[]}  */

 #boxes;

}