자바스크립트 ES6 블록 스코프 함수 사용하는 방법

Last Modified : 2019-08-07 / Created : 2017-08-10

2,387
View Count

주소 복사하기

자바스크립트 ECMAScript 6에서 블록 스코프의 함수를 사용하는 방법입니다.

자바스크립트의 변수가 ES6에서 let 또는 const 선언이 블록 스코프(Block scope)로 동작하는 것처럼 ES6에서는 함수 역시 {} 블록에서 블록 스코프를 사용할 수 있습니다.

! 블록 스코프란?

간단하게 블록 스코프는 선언된 블록 영역에서만 제한되어 접근 할 수 있음을 의미합니다. 즉 다른 스코프 영역인 블록을 벗어난 경우 해당 변수나 함수를 참조할 수 없게되는 것이죠. ES6 이전에는 블록스코프가 존재하지 않아 어려움이 많았으나 ES6부터는 가능해졌습니다.

그럼 함수를 사용한 블록스코프를 구현하여 간단한 예제로 아래에서 알아봅니다.

# 함수의 블록 스코프 예제보기

만약 두 개의 함수가 동일한 이름 myFunc()으로 존재하는 경우 아래와 같이 코드를 작성해봅니다.

function myFunc() {
return 'web'
}

function myFunc() {
return 'is'
}

result = myFunc();

위 수행의 결과로 result가 실행 후 가지게 되는 값은 'is'입니다. 즉 두 번 선언되었지만 뒤의 하나만 사용이 됩니다. 하지만 ES6에서는 아래 방법으로 함수에 블록 스코프를 적용하여 사용하는 것이 가능합니다.

{
  function myFunc() {
    return 'web'
  }

  {
    function myFunc() {
      return 'is'
    }
  }

result = myFunc();
}

이제 result의 값은 어떻게 될까요? result가 선언된 블록의 함수 myFunc()을 참조하게 되고 결과는 'web'으로 나타나게됩니다. 즉 뒤에 사용된 myFunc() 함수는 동일 스코프(블록 영역)에 해당하지 않으므로 앞에 선언된 함수가 참조 되는 것입니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트 클립보드로 복사하기, clipboard

[Javascript]이미지 업로드시 base64로 변환하는 방법