TIL-24.04.19

 

 

 

문제점

프레임워크의 도움없이 순수 자바스크립트로만 작성하는 프로젝트 하나를 구상중이다. 내 깃허브를 봤을때 모든 프로젝트들이 리액트를 사용한 프로젝트였기에, 순수 바닐라로 작성된 프로젝트가 있으면 좋겠다는 생각에서이다.

물론 막상 JS로만 코딩을 하면, 리액트의 위대함과 편리함을 더 크게 느끼겠지만... 하지만 결국 리액트도 JS라는 프로그래밍 언어를 기반으로 한 프레임워크이고, 프론트엔드 개발자로서 근본인 JS를 더 능숙하게 , 더 깊게 다룰수있다면 좋지 않을 이유가 없다.

어찌됐든 오늘도 JS파일을 작성 중,

함수를 선언하고 선언한 함수를 이곳저곳에서 실행하고, 변수도 선언하고 이곳저곳에서 사용하고, 클래스도 선언하고 이곳저곳에서 인스턴스를 생성하고 등등 지금껏 해왔던 습관대로 코드들을 작성했다.

작성한 코드를 살펴보니 함수의 선언문 전에 해당 함수를 실행하는 구간이 필요에 의해 있기도했다.

 

print();
function print() {
  console.log('hello');
}

 

예를 들어 이런식으로 말이다. 분명히 함수의 실행명령이 선언보다 이전에 발생했음에도 코드는 아무런 에러없이 진행된다.

선언도 안했는데 실행이되네? 물론 이미 이유는 알고있긴하다. 호이스팅(Hoisting)때문이다. 되도록이면 이유도 모르고 코드를 작성하기는  싫기에 이걸 리마인드하려고한다.

JS엔진은 코드를 실행하기 전 함수,변수,클래스의 선언문을 위로 끌어올린다. 그래서 위의 코드처럼 함수의 선언 전에도 실행이 가능한것이다. 하지만 주의할점이 있다.

console.log(hi);
let hi = 'Hello World!';

const dog = new Dog();
class Dog {}

 

변수와 클래스는 선언만 호이스팅되고, 초기화는 호이스팅이 안된다는 것이다. 함수가 선언전에도 실행이 된다하여 , 변수와 클래스에도 동일하게 시도하면 에러만 날 뿐이다. 뿐만 아니라 함수를 사용함에도 주의할점이 있다. 함수를 선언할때 함수표현식으로 선언하게 되면 선언 전에 접근이 불가능하다

func1();
let func1 = function () {};

이 점도 주의해야한다. 순간 함수니까 되겠지라며 코드를 주르륵 작성하다가 나중에 실행하면 반드시 에러가 나기때문이다.

 

 

 

 

 

알게 된점

이유를 모르고 코딩을 하지말자