들어가기전

JSFlow시리즈는 인프런에 있는 강좌를 보고 공부한 내용입니다. 강좌의 모든 내용을 정리한것은 아닙니다.
Naver 프론트엔드 개발자이신 "정재남"님의 강좌입니다. 링크를 같이 올려두겠습니다. 작은 팁을 드리자면 자바스크립트의 기본개념을 알고나서 강의를 들어야 이해하는데 더 좋은 강좌입니다.

인프런 정재남님의 JSFlow: https://www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow/dashboard

[Hoisting]

Hoisting의 의미는 "끌어올리다"라는 의미이다.

변수를 선언하거나 함수를 선언한 경우에 상단으로 끌어올려지는 현상을 의미하며 할당은 적용되지 않는 점이 중요하다.

[함수표현식]

함수선언문

말그대로 함수를 선언하는 것을 의미한다. 이렇게 코드를 구성한 경우 호이스팅이 발생하기 쉽다.

function sum(a, b){
  return a + b;
}

함수표현식

함수표현식은 선언한 함수를 변수에 할당하는 것을 말한다. 이렇게 함수를 변수에 할당하면 호이스팅 발생시 변수는 호이스팅이 발생하지만 함수는 남아있게 된다.

let sum = function(a, b){
  return a + b;
}

협업시 함수선언문보다 함수표현식을 사용해야하는 이유?

실무에서 현업을 하면 다양한 방식의 코드가 모이게 된다. 이런 경우 호이스팅으로 엄청난 오류가 발생하지만 프로그램은 동작을 하기때문에 인지하지 못하고 오랜시간 방치되는 경우가 발생한다.

함수선언문을 이용하는 경우 다른 사람이 같은 함수명을 사용해서 선언을 했는데 방대한 코드양으로 이를 인지하지 못하고 이후에 내가 같은 함수명의 새로운 역할을 수행하는 함수를 선언했다고 가정하면 이해가 쉽다. 이런 경우 처음 선언된 함수는 가장 나중의 함수에 의해서 작동이 되지 않고 하나의 역할을 상실하게 됩니다.

이를 방지하기 위해서 함수표현식을 사용하면 호이스팅으로 인해발생할 오류를 줄여주는 안전하고 예측가능한 코드가 만들어지게 됩니다.