Programing

JavaScript에서 로컬 함수 정의 : var 사용 여부?

lottogame 2020. 12. 26. 09:24
반응형

JavaScript에서 로컬 함수 정의 : var 사용 여부?

로컬 (내부) 함수가 JavaScript에서 선언 될 때 두 가지 옵션이 있습니다.

var키워드로 선언 하고 변수에 할당 :

(function() {
    var innerFunction1 = function() { ... };
    innerFunction1();
}());

function변수에 할당하지 않고 키워드 로만 선언 :

(function() {
    function innerFunction2() { ... };
    innerFunction2();
}());

두 번째 장점 중 하나를 볼 수 있습니다. 함수를 호출하는 코드 아래에서 선언 할 수 있으므로 실제로 실행되는 코드에서 개인 함수를 분리하는 것이 더 쉽습니다.

그들 중 어느 것이 더 낫고 그 이유 는 무엇 입니까?

실제로 함수를 선언하는 방법에는 세 가지가 있습니다.

  1. 함수 선언 : 함수 선언은 변수 할당없이 명명 된 함수 변수를 정의합니다. 함수 선언은 독립형 구조로 발생하며 비 기능 블록 내에 중첩 될 수 없습니다. 전의:function innerFunction1 () { };

  2. 함수 식 : : 함수 식은 더 큰 식 구문 (일반적으로 변수 할당)의 일부로 함수를 정의합니다. 함수 표현식을 통해 정의 된 함수는 이름이 지정되거나 익명이 될 수 있습니다.

    ㅏ. 익명 기능 사용-var innerFunction1 = function() { };

    비. 명명 된 함수 사용-var innerFunction1 = function myInnerFunction () { };

  3. 함수 생성자 : 함수 생성자는 Function () 생성자를 사용하여 동적으로 함수를 정의합니다. 함수 본문은 문자열 인수로 함수에 전달됩니다.var innerFunction1 = new Function (arg1, arg2, ... argN, functionBody)

세 번째 방법은 함수 본문을 문자열로 전달하면 일부 JS 엔진 최적화를 방지 할 수 있고 오류가 발생하기 쉽기 때문에 권장되지 않습니다.

함수 선언과 함수 표현식의 차이는 미묘하므로 요구 사항에 가장 적합한 방법을 선택해야합니다.

필요한 곳에 함수 표현식을 사용합니다.

  1. 싱글 톤 함수 또는
  2. 프로그래밍 방식으로 사용할 함수를 결정합니다 (명명 된 함수 표현식 사용).

함수 선언과 함수 표현식의 몇 가지 차이점은 다음과 같습니다.

  1. 함수 표현식을 사용하면 서로 다른 지점에서 동일한 변수에 서로 다른 함수를 할당 할 수 있습니다.
  2. 함수 선언에 의해 정의 된 함수는 함수 선언 자체 (또는 기본적으로 현재 범위의 모든 위치) 전에 사용할 수 있지만 함수 표현식으로 정의 된 함수는 정의 된 지점 이후에만 사용할 수 있습니다.

함수 선언 대 함수 표현식 대 함수 생성자 @MDN 의 자세한 비교 를 보려면 여기를 클릭하십시오.

참고 : 함수 선언은 var에 할당하여 쉽게 함수 표현식으로 변환 할 수 있습니다.

function foo() {}
alert(foo); // alerted string contains function name "foo"
var bar = foo;
alert(bar); // alerted string still contains function name "foo"

더 읽기 :

두 표기법은 기능적으로 동일합니다.

다음과 같이 가정 할 수 있습니다.

function a() {}
function b() {}

다음과 같이 해석됩니다.

var a, b;
a = function a() {};
b = function b() {};

이것이 사용하기 전에 선언 할 필요가없는 이유입니다. 변수를 사용하는 것처럼 함수를 정의한 후 다시 할당 할 수 있습니다. 함수 는 변수 이기 때문에 변수처럼 호이스트됩니다 (mind = blown? good!).

사용 전 선언

function a() { b(); } // using b before it's declared?
function b() {}

된다 :

var a, b;
a = function a() { b(); }; // nope! b is declared, we're good
b = function b() {};

함수 재정의

function a() { alert("a"); }
a = function b() { alert("b"); }; // that's weird!

된다 :

var a;
a = function a() { alert("a"); };
a = function b() { alert("b"); }; // oh, that looks normal

선언과 정의

선언 : var x. 영어 : "I will be using variable x" .

정의 : x = 5. 영어로 "변수는 x이제 값 을가 집니다 5" .

사용 전 선언은 필수이며 "use strict". 사용 전 정의가 필요하지 않습니다. 변수가 런타임에 정의되어 있으면 좋습니다.

그래서 var x = 5인 두 선언과 정의,있는 그대로 function a() {}.

기존 변수를 재정의하지 않도록 함수 이름을 지정할 때주의하십시오.

var a = function () { alert("a"); };
var b = function a() { alert("b"); };
a(); // prints "b"

보푸라기 도구가이를 감지합니다.

어떤 표기법을 사용해야합니까?

나중에 var a = function () {}값을 다시 할당 할 때만 함수 식 표기법 ( )을 사용하는 것이 좋습니다 a. 그런 다음 함수 표현식 a은 재 할당 될 것이며 의도적임을 독자에게 신호를 보냅니다 .

함수 표현식 표기법에 대한 또 다른 (사소한) 인수는 JSLint와 같은 Lint 도구로, 함수를 사용하기 전에 함수를 선언 (정의하지 않음)해야 할 수 있습니다. 재귀 정의가있는 함수가있는 경우, 즉. a호출 b및 b호출 a, 함수 선언 표기법을 사용하여 다른 하나를 선언 할 수 없습니다.

메모 편집 : 명명 된 익명 함수에 대해 약간 수정했습니다. 스택 트레이스를 볼 때 익명 함수의 이름을 지정하는 것이 유용 할 수 있습니다. 명명 된 함수는 '익명'으로 기록되지 않도록 더 많은 컨텍스트를 제공합니다.

차이점은 함수 VAR가 런타임에 정의 된다는 것입니다 .

VAR이없는 function () 은 스크립트 블록의 구문 분석 시간 에 정의됩니다 .

그것이 유일한 큰 차이점입니다 ..

따라서 사용자는 요구 사항 기준, 사용할 사항 및 요구 사항에 맞는 것을 결정합니다.

출력에는 차이가 없습니다. 둘 다 여전히 호출 할 수 있으며 둘 다 이름으로 프로토 타입에 액세스 할 수 있습니다.

실제 차이점은 두 가지뿐입니다.

1) 가독성 및 선호도

어떤 사람들은 다른 사람들보다 한 가지 방법을 더 쉽게 읽을 수 있으며, 그 스타일에 따라 관습을 따를 것입니다. 규칙을 따르는 것이 중요합니다.

2) 약간의 공간 절약

축약 적 스크립트에 대한 관련성되고, 당신은 그것의 사용을 요구하지 않는 한이 두 번째 방법을 사용하는 것이 유리할 수있다 방법을 볼 수 있습니다 var또는 =어떤이 축소 된 스크립트에 공간이 기본적으로 중요하지 않은 4 개 문자를 저장합니다.

요약

그것은 모두 선호도에 달려 있습니다. 어떤게 더 좋아? 말해봐. 개인적 var으로 객체를 만들려는 경우 사용 new하고 Person과 같은 첫 글자를 대문자로 표시합니다. 그렇지 않으면 나는 camelCase를 사용하고 var.

  • var 함수 이름없이

    • 변수 선언을 마스터하면 더 좋습니다. 특히 선언 할 때 더 좋습니다 .


  • 이름이없는 함수 var:

    • 현재 범위의 시작 부분에 이름이 지정된 변수 선언을 의미하며 일부 오류를 방지 할 수 있습니다.
    • 하지만 : 이런 식으로 함수를 선언하는 것은 클로저 변수가 선언 var되기 전에이 함수가 호출되면로 선언 된 클로저 변수를 사용하는 것은 실패합니다. 그래서 당신은 당신이 무엇을하는지 알아야합니다.


  • 이름이 있거나없는 함수 var

    • 클래스 선언에 좋습니다.
    • 예를 들어 프로파일 링 원인의 경우 Chrome 개발 프로파일 링 도구는 함수가 익명이 아닌 경우 더 명시 적입니다. 명시적인 이름이 있고 코드의 느린 부분이 어디에 있는지 알 수 있습니다.


  • 이름이 지정된 함수 var

    • 선언 된 변수를 클로저로 사용하지 않고 함수를 명명 된 범위로 사용하는 방법입니다.
    • 변수 선언 순서의 마스터 링을 유지하면서.

지역 선언은 항상 var를 사용해야합니다.

글쎄, 나는 그것이 로컬 범위이고 더 이상 사용되지 않는 기호 후에 메모리를 지울 수 있기 때문에 첫 번째가 더 낫다고 말할 수 있습니다.

두 번째 양식은 표준의 일부가 아니므로 사용해서는 안된다는 Google 자바 스크립트 스타일 가이드에 대한 메모도 있습니다.

블록 내 함수 선언

이렇게하지 마십시오 :

if (x) {function foo () {}} 대부분의 스크립트 엔진은 블록 내에서 함수 선언을 지원하지만 ECMAScript의 일부가 아닙니다 (ECMA-262, 13 및 14 절 참조). 더 나쁜 구현은 서로 및 향후 EcmaScript 제안과 일치하지 않습니다. ECMAScript는 스크립트 또는 함수의 루트 명령문 목록에서만 함수 선언을 허용합니다. 대신 함수 표현식으로 초기화 된 변수를 사용하여 블록 내에서 함수를 정의하십시오.

if (x) {

var foo = function () {}

}

소스 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml .

@MarmiK와 동의합니다. 또한 두 가지 방법의 차이점은 범위입니다. 함수 선언은 기본적으로 로컬 범위를 할당하지만 변수에 할당 된 함수의 범위는 변수의 범위에 따라 다릅니다.

var a;
(function() {
    var innerFunction1 = function() { ... };//local scope
    a=innerFunction1;//assigning to a global variable
}());

전 세계적으로 액세스 할 수 있습니다. 범위를 변경할 필요가 없으면 함수 선언을 사용하십시오. https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

편집하다:

var a;
(function() {
    function innerFunction1() { ... };//local scope
    a=innerFunction1;//It works too(Don't know why it should though)
}());

따라서 @Frits가 지적했듯이 한 유형을 다른 유형에 비해 사용하는 데 범위 이점이없는 것 같습니다.

Zakas는 "함수를 사용하기 전에 항상 함수를 정의하는 한 함수 선언이나 함수 표현식을 자유롭게 사용할 수 있습니다."라고 말합니다.

즉, 언젠가 모르는 다른 사람에 의해 내일 코드가 변경되고 개발자가 함수가 선언 된 위치를 찾을 수없는 큰 프로젝트 인 경우 함수 선언을 사용해야합니다 (내 말은 함수 x () {} ) 또는 어쨌든 함수를 먼저 선언하면 표현식을 사용할 수 있습니다.

자바 스크립트로 프로그래밍을 시작하는 모든 사람들이 조만간 스스로에게 질문을한다고 생각합니다. 귀하의 질문을 다음과 같이 재구성합니다.

함수 선언 ( function statement ) 또는 함수 표현식 ( var version) 을 사용해야합니까 (사용 선호 )?

대부분의 경우 구조 중 하나만 사용하여 좋은 JavaScript 코드를 작성할 수 있습니다. 의미론에 몇 가지 중요한 차이점이 있다는 것은 분명하지만, 제 생각에 질문에 대한 대답은 대부분 프로그램 스타일에 대한 대답이라는 점을 강조하고 싶습니다 . 그래서 나는 대부분의 실제 사례 에서 선택은 맛의 문제 라고 대답 할 것입니다 .

function 문 사용 을 선호하는 사람들은 읽기 전용 함수 변수를 정의해야 할 때 사용하지 않고 사용하기 전에 선언하고 싶지 않은 이유가 아닙니다. 제 생각 에는 양식을 좋아 하기 때문에 주로 사용합니다 .

그래서 나는 당신의 질문에 객관적으로 정답 이 없다고 생각합니다 . 선택은 주관적 입니다. 그래서 나는 내가 개인적으로 선호 하는 구조 와 상황에 대한 답을 씁니다 .

나의 첫 번째 언어는 Pascal, C, Fortran, C ++ 등이었습니다. 저는 지금 C #을 사용했습니다. 그래서 JavaScript 프로그램을 작성하기 시작했을 때 처음 에는 다른 언어로 프로그램을 작성 하는 기존 스타일 을 사용했습니다. 나중에 특정 언어에 해당하는 JavaScript 코드의 스타일을 변경했습니다.

저는 개인적으로 함수 표현 스타일을 선호 하며 외부 함수의 첫 번째 문장에서 모든 함수를 선언합니다. 함수 이름이 변수 인 JavaScript 의미론에 대부분 명확한 형식 에 함수 값이 포함되어 있습니다. 함수의 이름은 다른 변수와 마찬가지로 호이스트의 영향을받습니다 . 예를 들어 내 코드는 다음과 같습니다.

(function() {
    "use strict";
    var myFunc1 = function (x) {
            // body where I can use x and this
            alert("x=" + x + ", this.foo=" + this.foo);
        },
        localVar1 = {foo: "bar"};

    myFunc1.call(localVar1, 1);
}());

함수 문을 거의 사용 하지 않고 클래스 생성자를 다음과 같이 선언하는 경우에만 사용 합니다 .

(function() {
    "use strict";
    function MyClass(x) {
        // the code of constructor
        this.abc = x;
    }
    var myInstance = new MyClass("xyz");
    alert(myInstance.abc);
}());

세 번째 형식은 사용하지 않습니다.

(function() {
    "use strict";
    var myFunc1 = function myFunc2(x) {
            ...
        };
    ...    
}());

어디를 myFunc2추가로 선언된다 myFunc1. 이러한 양식의 구현은 웹 브라우저에 따라 다릅니다. 재귀 함수를 사용하는 경우 아마도 의미가 있습니다.

자바 스크립트 함수 정의

Vega에서 언급했듯이 함수를 정의하는 세 가지 방법이 있습니다.

  1. 함수 생성자
  2. 함수 선언
  3. 함수 표현

함수 생성자의 단점 :

함수 생성자는 다음과 같은 문자열로 함수 본문이 필요합니다.

  • 일부 JS 엔진 최적화를 방해 할 수 있습니다.

  • 구문을 작성하기가 엄청나게 어렵게 만듭니다. 특수 문자 및 기타 광기를 이스케이프해야합니다. 아래 참조

    var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();

    foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.

함수 선언의 단점 :

It can be invoked before the function declaration itself, this actually introduces complexity:

Pros of Function expression:

Function expressions are simpler:

  • you "just know" what variable it is assigned to
  • you cannot invoke/reference the variable to which the function is assigned to before its definition, which is a consistent behavior with the rest of the javascript definitions

More about: Converting function declarations into function expressions

Danger: As mentioned in "Cons of Function declaration" this can lead to many issues, below are more details about this.

It is very easy to convert function declarations into function expressions.

"A function declaration ceases to be one when it either: becomes part of an expression is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Examples_2

"function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of the scope in which it is defined. This relaxes the requirement that functions should be declared before used, which I think leads to sloppiness. It also prohibits the use of function statements in if statements. It turns out that most browsers allow function statements in if statements, but they vary in how that should be interpreted. That creates portability problems." - from the book: Javascript The Good Parts

More about function expressions

Syntax is such as:

 var varName = function [name]([param] [, param] [..., param]) {    /* function expression */
      statements
 }

Things to note about [name] (just after "function" in Syntax):

  • The function name can be omitted, in which case the function becomes known as an anonymous function.
  • "A function name cannot be changed, while the variable the function is assigned to can be reassigned."
  • "The function name can be used only within the function's body." , you can use this feature to let the function call itself recursively.

Then using [name] you can do strange/funny things such as below. Note that I do not recommend doing this if you are new to function definitions.

var count = 0;

var varName = function funcName() {    /* function expression */
  console.log('count is: ' + count );
  if(count<1){
    count++;
    funcName();   /* calls function funcName another time  */
  }
};

varName();    // invokes function funcName via variable varName
funcName();   // throws an error as funcName is not reachable

see live demo on jsbin.com/gijamepesu/1/edit?js,console

A typical implementation & usage would be such as below.

 var myCoolFunc = function ( username, firstName, lastName ) {    /* function expression */
      console.log('user ' + username + ' has the real full name ' + firstName + ' ' + lastName);
 }

 myCoolFunc();

Another thing to note: function expressions can be immediately invoked, vs function declarations cannot. This feature is used in IIFE, read more on What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

Resources

Short answer: It doesn't matter in the code, but you should put var to make it more readable.

Long answer: Local variables in JavaScript, just like global variables in JavaScript, can be defined with or without var. Therefore, the function of the program will not be interfered by the lack or presence of the word var. Because it is easier to read code with var, it is suggested that you do put var before variables when they are first declared. But if you want it to be unreadable, then you should not put var before defining a variable.

ReferenceURL : https://stackoverflow.com/questions/16439949/define-local-function-in-javascript-use-var-or-not

반응형

'Programing' 카테고리의 다른 글

ASP.NET MVC에 JSON 데이터 게시  (0) 2020.12.26
Cordova는 무엇이며 PhoneGap과 어떤 관련이 있습니까?  (0) 2020.12.26
기사 페이지의 H1-사이트 제목 또는 기사 제목?  (0) 2020.12.26
Ninject는 무엇이며 언제 사용합니까?  (0) 2020.12.25
문자열과 문자의 연결  (0) 2020.12.25

'Programing'의 다른글

  • 현재글JavaScript에서 로컬 함수 정의 : var 사용 여부?

관련글

댓글

티스토리툴바