var functionName = function() {} vs function functionName() {}

나는 최근에 다른 사람의 JavaScript 코드를 유지 관리하기 시작했습니다. 버그를 수정하고 기능을 추가하며, 코드를 정리하고 일관성을 높이려고 노력하고 있습니다.

이전 개발자는 함수 선언 방법을 두 가지로 사용했는데, 그 이유가 있는지 아닌지 알아내기 힘듭니다.

두 가지 방법은 다음과 같습니다:

var functionOne = function() {
    // Some code
};

그리고,

function functionTwo() {
    // Some code
}

두 가지 다른 방법을 사용하는 이유는 무엇이며, 각각의 장단점은 무엇인가요? 한 방법으로 할 수 있는 것 중 다른 방법으로 할 수 없는 것은 있을까요?

답변 1

차이점은 functionOne이 함수 표현식이므로 해당 줄에 도달했을 때에만 정의되는 반면, functionTwo는 함수 선언문이므로 주위 함수 또는 스크립트가 실행될 때즉시 정의된다(호이스팅 때문).

예를 들어, 함수 표현식:

// TypeError: functionOne is not a function
functionOne();
var functionOne = function() {
  console.log(Hello!);
};

그리고 함수 선언:

// 출력: 안녕하세요!
functionTwo();
function functionTwo() {
  console.log(안녕하세요!);
}

과거에는 블록 내에서 정의된 함수 선언이 브라우저 간에 일관된 방식으로 처리되지 않았습니다. ES5에서 도입된 엄격 모드는 이 문제를 해결하여 함수 선언을 해당 블록에로 범위를 한정시켰습니다.

'use strict';    
{ // 이 블록에 주목하세요!
  function functionThree() {
    console.log(안녕하세요!);
  }
}
functionThree(); // ReferenceError

답변 2

변수로 선언된 함수와 일반적으로 선언된 함수는 자바스크립트에서 함수를 정의하는 두 가지 방법입니다. 이 두 가지 방법은 SEO에 영향을 미칠 수 있습니다.
첫째, 변수로 선언된 함수는 일반적으로 함수 표현식이라고 불립니다. 함수 표현식은 변수에 할당된 함수이기 때문에 변수의 범위에 영향을 받습니다. 이는 검색 엔진이 해당 함수를 식별하는 데 어려움을 초래할 수 있습니다. 검색 엔진은 함수들을 식별하여 페이지의 콘텐츠를 분석하므로 함수가 정확히 식별되어야 합니다. 따라서 변수로 선언된 함수를 사용할 경우, 검색 엔진이 정확히 함수를 식별하고 색인화할 수 있도록 함수의 명확한 이름과 설명이 필요합니다. 또한, 함수를 코드 상단에 정의하는 것이 좋습니다. 이렇게 하면 검색 엔진이 함수를 더 빨리 찾아서 분석할 수 있습니다.
둘째, 일반적으로 선언된 함수는 함수 선언식이라고 불립니다. 함수 선언식은 전역 범위 또는 상위 함수 범위에 올려져 있어서 검색 엔진이 이를 쉽게 식별할 수 있습니다. 따라서 함수 선언식은 함수의 이름과 설명으로 검색 엔진이 콘텐츠를 정확히 파악할 수 있도록 해야 합니다. 또한, 함수 선언식은 코드 상의 어디에서든 사용할 수 있으므로 검색 엔진이 함수를 더 쉽게 찾을 수 있습니다.
이 두 가지 함수 정의 방식은 SEO에 영향을 미칠 수 있지만, 모든 경우에 대해서 일반화할 수는 없습니다. 검색 엔진은 다양한 요소를 고려하여 페이지를 평가하므로, 함수 정의 방식 자체보다는 페이지의 콘텐츠와 구조에 더 중점을 두어야 합니다. 따라서 적절한 함수 정의 방식을 선택하고, 함수의 이름과 설명이 검색 엔진이 웹 페이지를 이해하는 데 도움을 줄 수 있도록 작성해야 합니다. 이를 통해 검색 엔진은 웹 페이지를 더 잘 인식하여 쉽게 색인화하고, 이를 통해 사용자의 검색 결과에 포함될 수 있습니다.