선생님 호이스팅 질문있습니다.

[정중식]

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;

var dino = {
  x: 10,
  y: 200,
  width: 50,
  height: 50,
  draw() {
    ctx.fillStyle = 'green';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  },
};

// 클래스로 만드는게 일반적임
class Cactus {
  constructor() {
    this.x = 500;
    this.y = 200;
    this.width = 50;
    this.height = 50;
  }
  draw() {
    ctx.fillStyle = 'red';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

var timer = 0;
var cactusArray = [];
var jumpTimer = 0;

function 프레밍마다실행할거() {
  requestAnimationFrame(프레밍마다실행할거);
  timer++;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if (timer % 120 === 0) {
    var cactus = new Cactus();
    cactusArray.push(cactus);
  }

  cactusArray.forEach((item, index, all) => {
    // x좌표가 0미만이면 제거
    if (item.x < 0) {
      all.splice(index, 1);
    }
    item.x--;
    item.draw();
  });

  if (jumping) {
    dino.y--;
    jumpTimer++;
  }

  if (!jumping) {
    dino.y++;
  }

  if (jumpTimer > 100) {
    jumping = false;
  }

  dino.draw();
}

프레밍마다실행할거();

var jumping = false;

document.addEventListener('keydown', function (e) {
  if (e.code === 'Space') {
    jumping = true;
  }
});

class로 게임만들기 2 코드중 일부인데요,
굵은색으로 표시한 부분 질문있습니다.

자바스크립트는 위에서부터 차례로 읽지만 예외로 호이스팅현상이라는게 있다고 배웠습니다.
호이스팅 현상이란, 변수나 함수의 선언부분을 범위 맨 위로 강제로 끌고가서 해석해주는데, 이것을 호이스팅이라고 배웠는데유

잠깐! 여기서 변수,함수의 선언은,
변수의 선언 : var 이름; let 나이; const 성별;
변수의 할당 : var 이름 = 'kim';
함수의 선언 : function 함수 (){ ... }

이라고 배웠습니다.

그러면 위의 코드에서 var jumping= false는; 변수의 선언과 변수의 할당이 같이일어난거로써 var jumping; 이 변수가 먼저 올라가고, 값 할당
 jumping = false는 나중에 일어난거잖아유? 그렇기때문에 프레밍마다실행할거() 이 함수 안에서 jumping을 if문으로 조건을 걸 수 있는건가요?
ㄱ그러니깐.. 프레밍마다실행할거()함수 안에서의 jumping은 아직까지는 true나 false도 아닌, 언디파인 혹은 null인거죠?

호이스팅 덕분에 var jumping;이 맨위에서 먼저 선언된걸로 자바스크립트는 읽었으니까 프레임마다실행할거()함수 안에서 jumpiunb를 명시해줄수있는거죠?



질문이 좀 글로작성하다보니까 난잡한거같은데 제 질문의 요지가 잘 전달되었을지 걱정스럽네요...

[codingapple]

호이스팅 덕분에 var jumping;이 맨위에서 먼저 선언된걸로 자바스크립트는 읽었으니까 
프레임마다실행할거()함수 안에서 jumping를 명시해줄수있는거죠?
- 맞는말입니다 
var jumping = false;를 더 위에 적는게 좋을수도요 

[정중식]

감사합니다

[글쓴이]

글