Почему не работает код?

Question

[lowsentmy]

var circle = function() {
	ctx.beginPath()
	ctx.arc(100,100,5,0,Math.PI*2,false)
	ctx.stroke()
}
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
circle()

Почему этот код рисует окружность, если в функции ctx еще не известен.

Comments

[Dima Polos]

ctx виден по замыканию, функция вызывается после появления ctx

[Dima Polos]

Что в коде НЕ работает?

[lowsentmy]

Dima Polos, спасибо! Я уже понял

[Dima Polos]

lowsentmy, написали вопрос, "почему не работает", так вроде бы работает)

[lowsentmy]

Dima Polos, извините, вопрос, "почему работает?")

[Dima Polos]

lowsentmy, это классика вопросов по программированию: почему не работает и почему работает)))

[Strannyk]

lowsentmy, Замените var на let - увидите, что будет.

Answer 1

[Константин Китманов]

Потому что в JS есть "поднятие переменных". Вот как на самом деле работает ваш код:

var circle;
var canvas;
var ctx;

circle = function() {
  ctx.beginPath()
  ctx.arc(100,100,5,0,Math.PI*2,false)
  ctx.stroke()
}
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
circle();