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

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

이전 개발자는 함수를 선언하는 두 가지 방법을 사용했는데 그 이유가 있는지 아닌지 알 수 없습니다.

두 가지 방법은:

var functionOne = function() {

// Some code

};

그리고,

function functionTwo() {

// Some code

}

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

답변 1

차이점은 functionOne가 함수 표현식이므로 그 줄에 도달할 때만 정의되는 반면, functionTwo는 함수 선언이므로 둘러싸인 함수 또는 스크립트가 실행되는 즉시 정의됩니다(이유는 hoisting 때문입니다).

예를 들어, 함수 표현식:

// TypeError: functionOne is not a function

functionOne();

var functionOne = function() {

console.log(Hello!);

};

그리고, 함수 선언식:

// Outputs: Hello!

functionTwo();

function functionTwo() {

console.log(Hello!);

}

과거에는 브라우저마다 블록 내에서 정의된 함수 선언이 일관성 없이 처리되었습니다. ES5에 도입된 strict mode는 이를 해결하여 함수 선언을 포함하는 블록으로 스코핑합니다.

'use strict';

{ // note this block!

function functionThree() {

console.log(Hello!);

}

}

functionThree(); // ReferenceError

답변 2

변수로 함수를 만들 때 var functionName = function() {}와 function functionName() {} 방법이 있는데, 이 둘의 차이는 무엇일까요? 각 방법의 장단점을 비교해보고 검색 엔진 최적화(SEO)에 어떤 영향을 미치는지 알아보겠습니다.

먼저 var functionName = function() {} 방법은 변수에 함수를 할당하는 방식입니다. 이 방법은 익명 함수를 사용하기 때문에 함수 이름을 적어주지 않아도 됩니다. 이렇게 함수를 변수에 할당하는 방법은 함수 표현식(function expression)이라고도 합니다. 이 방식은 코드를 읽는 동안 함수가 실행되지 않기 때문에 함수를 먼저 정의할 필요가 없다는 장점이 있습니다. 또한 함수의 스코프(scope)를 제어할 수 있기 때문에 함수 내부의 변수나 매개변수가 전역 스코프(global scope)에서 충돌하지 않도록 할 수 있습니다.

반면 function functionName() {} 방법은 함수 선언문(function declaration)입니다. 이 방법은 함수를 정의할 때 함수 이름을 적어줘야 합니다. 이렇게 함수를 선언하는 방식은 코드를 읽는 동안 함수가 실행되기 때문에 함수를 먼저 정의해야 하는 단점이 있습니다. 그러나 함수 선언문은 코드를 좀 더 간결하고 읽기 쉽게 만들어 줍니다.

두 방법 중 어떤 방법을 선택하느냐에 따라 SEO에 영향을 미칩니다. 일반적으로 검색 엔진은 웹 페이지의 HTML 구조를 파싱하면서 JavaScript 코드도 분석합니다. 만약 JavaScript 코드에 함수 선언문이 많이 사용되어 있다면 HTML 구조가 복잡해지므로 검색 엔진에서 인식되기 어렵습니다. 때문에 코드의 간결성과 가독성이 중요합니다. 이를 해결하기 위해 함수 선언문 대신 함수 표현식을 사용하는 것이 더 좋습니다.

결론적으로 var functionName = function() {}과 function functionName() {} 방법은 각자의 장단점이 있으며 사용하는 상황에 따라 적절히 선택해야 합니다. 또한 코드의 간결성과 가독성을 고려하여 함수 표현식을 사용하는 것이 SEO에 유리할 수 있습니다.