JavaScript에서 함수를 정의하기 위해 const 사용


183

constJavaScript에서 특정 유형의 값 , 특히 함수를 사용하여 설정할 수있는 값에 제한이 있는지 궁금 합니다. 이것이 유효합니까? 그것은 효과가 있지만 어떤 이유로 나쁜 습관으로 간주됩니까?

const doSomething = () => {
   ...
}

ES6에서 모든 기능을 이런 식으로 정의해야합니까? 그렇다면, 이것이 붙잡힌 것처럼 보이지 않습니다.

의견 주셔서 감사합니다!


1) "자바 스크립트에서 const를 사용하여 어떤 유형의 값을 설정할 수 있는가에 관심이 있습니까?" 2) "이것이 유효합니까?" 예. 3) "어떤 이유로 든 나쁜 관행으로 간주되고 있습니까?" 나는 그것에 대해 아무 말도 할 정도로 오래 가지 않았지만 이것이 왜 패드 연습이되어야하는지 모르겠습니다. 와 크게 다르지 않습니다 var doSomething = <function def>;. 4) "ES6에서 모든 기능을 이런 식으로 정의해야합니까?" 성가신 것 같습니다. 나는 함수 선언을 좋아한다. 모두 자신의.
Felix Kling

1
내가 보는 방식 (사실이 아니라 의견), 재정의 함수를 허용하지 않으려는 경우 의미가 있습니다. 제정신인지 또는 기능적 용도를 가지고 있는지 여부는 논쟁의 여지가 있습니다. 당신이 그것이 당신의 사용 시나리오에 적합하다고 생각한다면, 나는 누군가 당신의 결정을 주장하고 나쁜 습관으로 간주 할 수 있다고 생각 하지 않습니다 .
Mjh

4
질문은 당신이 달성하고자하는 것 같아요 const. 자신이 함수를 재정의하지 못하게 하시겠습니까? 어쨌든 이것을하지 않는 코드를 알고 있다고 가정합니다. 의 의도를 표현하고 싶 doSomething습니까? 즉, 함수를 보유하고 값을 변경하지 않습니까? 함수 선언 도이 의도를 명확하게 전달한다고 생각합니다. 따라서 재정의에서 "런타임 보호"가 필요한 경우이를 수행하십시오. 그렇지 않으면 나는 많은 이익을 보지 못합니다. 물론 당신이 주로 사용하는 경우 var foo = function() {};, const대신에 사용 합니다 var.
Felix Kling

5
@FelixKling, "어쨌든 이것을하지 않는 코드를 알고 있다고 가정합니다." -이것은 꽤 나쁜 주장입니다. 그렇지 않으면 전혀 의미가 없습니다 const.
meandre

답변:


253

수행 한 작업에는 문제가 없지만 함수 선언과 함수 표현식의 차이점을 기억해야합니다.

함수 선언 :

function doSomething () {}

범위의 상단에 완전히 빠진 (과 같다 letconst그들 블록도 범위이다).

이는 다음이 작동 함을 의미합니다.

doSomething() // works!
function doSomething() {}

함수 표현식은 다음과 같습니다.

[const | let | var] = function () {} (or () =>

익명 함수 ( function () {})를 만들고 변수를 만든 다음 해당 익명 함수를 해당 변수에 할당합니다.

따라서 범위 내 변수 호이 스팅에 대한 일반적인 규칙-블록 범위 변수 ( letconst)는 undefined해당 블록 범위의 맨 위로 호이스트하지 않습니다 .

이것은 다음을 의미합니다.

if (true) {
    doSomething() // will fail
    const doSomething = function () {}
}

doSomething정의되지 않았으므로 실패 합니다. (을 던질 것이다 ReferenceError)

사용으로 전환 var하면 변수를 게양하지만 undefined위의 코드 블록이 여전히 작동하지 않도록 초기화됩니다 . (이것은 호출 할 때 함수가 아니기 TypeError때문에 throw doSomething합니다)

표준 관행에 따라 작업에 적합한 도구를 항상 사용해야합니다.

Axel Rauschmayer는 es6 의미론 : ES6의 변수 및 범위 지정을 포함하여 범위 및 호이 스팅에 대한 훌륭한 게시물을 보유하고 있습니다.


7
es6 클래스가 내부적으로 const를 사용하여 클래스 이름이 클래스 내에서 재 할당되지 않도록 보호하고 싶습니다.
user2342460

2
사이에 하나 개의 미묘한 차이 와 b를 당신처럼 호출하는 경우입니다 에, ,이 인쇄됩니다 에, B ,이 인쇄됩니다 . function a(){console.log(this);} const a=_=>{console.log(this);}a.call(someVar);someVarwindow
키안 첸

100

const함수를 정의하는 데 사용 하는 것은 해킹처럼 보이지만 (제 의견으로는) 우월하게 만드는 몇 가지 장점이 있습니다.

  1. 함수를 변경할 수 없으므로 다른 코드 조각으로 해당 함수가 변경되는 것에 대해 걱정할 필요가 없습니다.

  2. 짧고 깔끔한 팻 화살표 구문을 사용할 수 있습니다.

  3. 화살표 기능을 사용하면 this바인딩 이 처리 됩니다.

예를 들어 function

// define a function
function add(x, y) { return x + y; }

// use it
console.log(add(1, 2)); // 3

// oops, someone mutated your function
add = function (x, y) { return x - y; };

// now this is not what you expected
console.log(add(1, 2)); // -1

같은 예 const

// define a function (wow! that is 8 chars shorter)
const add = (x, y) => x + y;

// use it
console.log(add(1, 2)); // 3

// someone tries to mutate the function
add = (x, y) => x - y; // Uncaught TypeError: Assignment to constant variable.
// the intruder fails and your function remains unchanged


1
그리고 함수 add (x, y)를 두 번 선언 할 수 있지만 두 번 선언 할 수는 없습니다 const add = ...
TatianaP

33
1. 불변성은 실질적인 이점이지만 누군가가 실제로 함수를 덮어 쓰는 것은 매우 드 rare니다. 2. 함수가 표현식이 될 수 없다면 팻 화살표 구문은 더 짧지 않습니다. function f(x, y) {18 자, const f = (x, y) => {21 자이므로 3 자 더 깁니다. 3.이 바인딩을 유지하는 것은 함수가 메소드 (또는 이것을 의미하는 다른 함수) 내에 정의 된 경우에만 중요합니다. 최상위 스크립트에서는 의미가 없습니다. 나는 당신이 틀렸다고 말하는 것이 아니라 단지 당신이 언급 한 이유가별로 관련이 없다는 것입니다.
Nakedible

@Nakedible 그래서 다른 유효한 이유는 무엇입니까?
Anish Ramaswamy

13
구식 함수 구문의 장점 중 하나는 디버깅 중에 이름이 있습니다.
user949300

3
linter를 사용하여 함수 선언을 다시 바인딩하지 못하게합니다.
Franklin Yu

32

이 질문을받은 지 3 년이 지났지 만 지금 막 질문을하게되었습니다. 이 답변은 지금까지 스택 아래에 있으므로 반복 할 수 있습니다.

Q : JavaScript의 const (특히 함수)를 사용하여 설정할 수있는 값 유형에 대한 제한이 있는지 궁금합니다. 이것이 유효합니까? 그것은 효과가 있지만 어떤 이유로 나쁜 습관으로 간주됩니까?

명백한 이유 / 혜택이없는 경우에도 항상const for 문을 사용 하는 많은 JavaScript 코더를 관찰 한 후 약간의 연구를하게되었습니다 functions.

" 어떤 이유로 든 나쁜 관행으로 간주됩니까? "에 대한 대답으로 , IMO는 그렇습니다. 또는 적어도 진술 을 사용하면 이점 이 있습니다 function.

이것은 주로 선호와 스타일의 문제인 것 같습니다. 위에 제시된 몇 가지 좋은 주장이 있지만이 기사에서

언급 한 것만 큼 명확하지는 않습니다. 지속적인 혼란 : 왜 medium.freecodecamp.org/Bill Sourour, JavaScript 전문가, 컨설턴트 및 교사가 JavaScript 함수 명령문 을 사용합니까?

이미 결정을 내렸다고해도 모든 사람이 해당 기사를 읽도록 권장합니다.

요점은 다음과 같습니다.

함수 문장은 [const] 함수 표현식에 비해 두 가지 분명한 장점이 있습니다.

장점 # 1 : 의도의 명확성

하루에 수천 줄의 코드를 스캔 할 때 가능한 한 빠르고 쉽게 프로그래머의 의도를 파악할 수 있습니다.

장점 # 2 : 선언 순서 == 실행 순서

이상적으로는 코드가 실행 될 것으로 예상되는 순서대로 코드를 선언하고 싶습니다.

이것은 나를위한 showtopper입니다 : const 키워드를 사용하여 선언 된 모든 값은 실행에 도달 할 때까지 액세스 할 수 없습니다.

위에서 방금 설명한 내용은 거꾸로 보이는 코드를 작성해야합니다. 우리는 가장 낮은 수준의 기능으로 시작하여 발전해야합니다.

내 두뇌는 그런 식으로 작동하지 않습니다. 세부 사항보다 컨텍스트를 원합니다.

대부분의 코드는 인간이 작성합니다. 따라서 대부분의 사람들이 이해하는 순서는 대부분의 코드 실행 순서를 거의 따르는 것이 합리적입니다.


1
의도의 명확성에 대해 약간 더 언급 할 수 있습니까? 나는 # 2를 얻지 만 # 1에게 말할 수있는 한 # 2의 (사전?) 반복입니다. 나는 사건, 즉 자신의 defaultErrorHandlerconst가 익명 함수로 할당 된 함수를 약속 핸들러에서 호출 할 수 있다고 생각할 수 있습니다. 이를 통해 필요한 경우 함수 내 에서이 기본 오류 처리기를 선택적으로 '재정의'할 수 있습니다. 일부는 오류 객체를 반환하고 다른 일부는 다양한 수준의 세부 정보를 표시하는 http 응답을 반환해야합니다. 그러나 코드 구조는 관계없이 익숙한 패턴이 될 수 있습니다.
Jake T.

어쩌면 내 생각은 너무 복잡합니다! 새로운 관행에 머리를 감아 서 아직 구현하는 데 많은 시간을 소비하지 않았습니다. 단지 내가 .then( res.success, res.error )호출하기로 선언 한 익명 함수보다 훨씬 더 좋아 하는 것을 발견했습니다 res.success(value);. .then( ..., defaultErrorHandler)최상위 수준의 defaultErrorHandler 함수 로 공통 패턴 을 사용하는 것이 좋으며 선택적 const defaultErrorHandler = error => { ... }으로 함수 범위 내에서 원하는대로 선언 할 수 있습니다.
Jake T.

1
@JakeT. RE "의도의 명확성에 대해 약간 더 언급 할 수 있습니까?". 글쎄, 우선, 그 진술은 저를 만든 것이 아니라 그 기사의 저자 인 freecodecamp.org/Bill Sourour에 의해 이루어졌습니다. 그러나 그것은 나에게 진정한 상식입니다. "function tomorrow ()"를 읽으면 즉시 함수라는 것을 알게됩니다. 그러나 "const tomorrow = () =>"를 읽으면 잠시 멈추고 머릿속의 구문을 분석하여 마침내 결정합니다. 예, 그것은 함수입니다.
JMichaelTX

1
다른 사람이 작성한 긴 스크립트가 있고 모든 기능을 보려면 "기능"을 빠르게 검색하여 찾을 수 있습니다. 또는 모든 기능을 추출하는 빠른 JS RegEx를 작성할 수 있습니다. "const"문인 IMO는 변경되지 않는 데이터 (함수가 아님)를위한 것입니다.
JMichaelTX

10

사용에 매우 중요한 이점이 있으며 const, 일부는 그것이 의도적이고 표시 적이므로 가능하면 어디에서나 사용해야한다고 말합니다.

내가 알 수있는 한, JavaScript에서 변수를 가장 명확하고 예측 가능하게 선언하고, 그것이 얼마나 제한되어 있는지에 대한 가장 유용한 변수 중 하나입니다. 왜? 사용 가능한 일부 선언 varlet선언 을 제거하기 때문 입니다.

읽을 때 무엇을 추론 할 수 const있습니까? const선언문 을 읽고 해당 변수에 대한 다른 참조를 스캔하지 않고 다음 사항을 모두 알고 있습니다 .

  • 값은 해당 변수에 바인딩됩니다 (기본 객체는 변경할 수 없지만)
  • 즉시 포함하는 블록 외부에 액세스 할 수 없습니다
  • TDZ (Temporal Dead Zone) 규칙으로 인해 선언 전에 바인딩에 액세스 할 수 없습니다.

다음 인용문은 및 의 장점을 주장 하는 기사 에서 인용 한 것입니다 . 또한 키워드의 제약 조건 / 한계에 대한 질문에보다 직접적으로 답변합니다.letconst

등이 제공하는 것과 같은 제약 let하고 const이해하기 쉬운 코드를 만드는 강력한 방법입니다. 작성하는 코드에서 이러한 제약 조건을 최대한 많이 적용하십시오. 코드가 의미 할 수있는 것을 제한하는 선언적 제약이 많을수록 사람들이 미래에 코드를 읽고 구문 분석하고 이해하는 것이 더 쉽고 빠릅니다.

물론 const선언보다 선언에 더 많은 규칙이 있습니다 var. 블록 범위, TDZ, 선언시 할당, 재 할당 없음. 반면 var명령문은 함수 범위 만 신호합니다. 그러나 규칙 계산은 많은 통찰력을 제공하지 않습니다. 복잡성 측면에서 이러한 규칙을 평가하는 것이 좋습니다. 규칙이 복잡성을 더하거나 뺍니까? 의 경우 const블록 범위 지정은 함수 범위보다 좁은 범위를 의미하고 TDZ는 선언 전에 사용을 파악하기 위해 선언에서 범위를 뒤로 스캔 할 필요가 없으며 할당 규칙은 바인딩이 항상 동일한 참조.

제한적인 문장 일수록 코드가 단순 해집니다. 명령문의 의미에 제약을 추가하면 코드를 예측하기가 더 어려워집니다. 이것이 정적 유형 프로그램이 일반적으로 동적 유형 프로그램보다 읽기 쉬운 가장 큰 이유 중 하나입니다. 정적 타이핑은 프로그램 작성기에 큰 제약을 가하지 만 프로그램을 해석하는 방법에 큰 제약을 가해 코드를 이해하기 쉽게 만듭니다.

이러한 주장을 염두에두고 const생각할 가능성이 가장 적은 문장이므로 가능한 한 사용 하는 것이 좋습니다 .

출처 : https://ponyfoo.com/articles/var-let-const

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.