자 바스 크 립 트 역할 영역 과 패키지 닫 기

역할 영역 과 패 키 지 는 자 바스 크 립 트 에서 매우 중요 합 니 다.하지만 내 가 자 바스 크 립 트 를 처음 배 웠 을 때 는 이해 하기 어 려 웠 다.이 문장 은 몇 가지 예 를 들 어 너 를 도와 그것들 을 이해 할 것 이다.
우 리 는 먼저 역할 영역 부터 시작한다.
역할 영역
JavaScript 의 역할 영역 은 어떤 변 수 를 방문 할 수 있 는 지 제한 합 니 다.두 가지 작용 역 이 있 는데 그것 이 바로 전역 작용 역,국부 작용 역 이다.
전역 적 역할 영역
모든 함수 성명 이나 대괄호 밖에서 정 의 된 변 수 는 전역 작용 역 에 있 습 니 다.
하지만 이 규칙 은 브 라 우 저 에서 실행 되 는 자바 스 크 립 트 에서 만 유효 합 니 다.만약 당신 이 Node.js 에 있다 면 전체 역할 영역 에서 의 변 수 는 다 릅 니 다.그러나 이 글 은 Node.js 를 토론 하지 않 습 니 다.

`const globalVariable = 'some value'`

전체 변 수 를 설명 하면 함수 내 부 를 포함 한 모든 곳 에서 사용 할 수 있 습 니 다.

const hello = 'Hello CSS-Tricks Reader!'

function sayHello () {
 console.log(hello)
}

console.log(hello) // 'Hello CSS-Tricks Reader!'
sayHello() // 'Hello CSS-Tricks Reader!'

비록 전역 역할 영역 에서 변 수 를 정의 할 수 있 지만,우 리 는 이렇게 하 는 것 을 추천 하지 않 습 니 다.이름 충돌 을 일 으 킬 수 있 기 때문에 두 개 이상 의 변 수 는 같은 변 수 를 사용 합 니 다.변 수 를 정의 할 때const또는let를 사용 하면 이름 이 충돌 할 때 오류 알림 을 받 을 수 있 습 니 다.이것 은 바람 직 하지 않다.

// Don't do this!
let thing = 'something'
let thing = 'something else' // Error, thing has already been declared

변 수 를 정의 할 때 사용 하 는 것 이var이 라면 두 번 째 정 의 는 첫 번 째 정 의 를 덮어 씁 니 다.이것 도 코드 를 디 버 깅 하기 어렵 고 바람 직 하지 않다.

// Don't do this!
var thing = 'something'
var thing = 'something else' // perhaps somewhere totally different in your code
console.log(thing) // 'something else'

따라서 전역 변수 가 아 닌 부분 변 수 를 사용 해 야 합 니 다.
국부 작용 역
코드 의 특정한 범위 에서 사용 하 는 변 수 는 부분 적 인 역할 영역 에서 정의 할 수 있 습 니 다.이것 이 바로 국부 변수 다.
JavaScript 에는 두 가지 부분 적 인 역할 영역 이 있 습 니 다.함수 역할 영역 과 블록 급 역할 영역 입 니 다.
우 리 는 함수 역할 영역 부터 시작한다.
함수 역할 영역
함수 에서 변 수 를 정의 할 때 함수 내 어느 곳 에서 든 사용 할 수 있 습 니 다.함수 외 에 너 는 그것 에 접근 할 수 없다.
예 를 들 어 아래 의 이 예 는sayHello함수 안의hello변수 입 니 다.

function sayHello () {
 const hello = 'Hello CSS-Tricks Reader!'
 console.log(hello)
}

sayHello() // 'Hello CSS-Tricks Reader!'
console.log(hello) // Error, hello is not defined

블록 급 역할 영역
대괄호 를 사용 할 때const또는let변 수 를 설명 할 때 대괄호 내부 에서 만 이 변 수 를 사용 할 수 있 습 니 다.
다음 예 에서hello는 대괄호 안에서 만 사용 할 수 있다.

{
 const hello = 'Hello CSS-Tricks Reader!'
 console.log(hello) // 'Hello CSS-Tricks Reader!'
}

console.log(hello) // Error, hello is not defined

블록 급 역할 도 메 인 은 함수 역할 도 메 인의 부분 집합 입 니 다.함 수 는 큰 괄호 로 정의 해 야 하기 때 문 입 니 다.(return 구문 과 화살표 함 수 를 명확 하 게 사용 하지 않 는 한)
함수 향상 과 역할 영역
function 정 의 를 사용 할 때 이 함 수 는 현재 역할 영역의 맨 위로 향 상 됩 니 다.따라서 아래 의 코드 는 같은 효 과 를 가진다.

// This is the same as the one below
sayHello()
function sayHello () {
 console.log('Hello CSS-Tricks Reader!')
}

// This is the same as the code above
function sayHello () {
 console.log('Hello CSS-Tricks Reader!')
}
sayHello()

함수 표현 식 정 의 를 사용 할 때 함 수 는 변수 역할 영역의 맨 위로 올 라 가지 않 습 니 다.

sayHello() // Error, sayHello is not defined
const sayHello = function () {
 console.log(aFunction)
}

여기에 두 개의 변수 가 있 기 때문에 함수 향상 은 혼란 을 초래 할 수 있 기 때문에 효력 이 발생 하지 않 습 니 다.그래서 반드시 함 수 를 사용 하기 전에 함 수 를 정의 해 야 한다.
함수 가 다른 함수 의 역할 영역 에 접근 할 수 없습니다.
서로 다른 함 수 를 각각 정의 할 때 한 함수 에서 함 수 를 호출 할 수 있 지만 한 함수 가 다른 함수 의 역할 영역 내 부 를 방문 할 수 없습니다.
다음 예 는second이 변수 에 접근 할 수 없습니다firstFunctionVariable.

function first () {
 const firstFunctionVariable = `I'm part of first`
}

function second () {
 first()
 console.log(firstFunctionVariable) // Error, firstFunctionVariable is not defined
}

내장 작용 영역
함수 내부 에서 함 수 를 정의 하면 내부 함 수 는 외부 함수 의 변 수 를 방문 할 수 있 지만 반대로 는 안 됩 니 다.이런 효 과 는 바로 어법 작용 역 이다.
외층 함 수 는 내부 함수 의 변 수 를 방문 할 수 없습니다.

function outerFunction () {
 const outer = `I'm the outer function!`

 function innerFunction() {
  const inner = `I'm the inner function!`
  console.log(outer) // I'm the outer function!
 }

 console.log(inner) // Error, inner is not defined
}

만약 작용 역 의 메커니즘 을 가시 화한 다 면,너 는 쌍방 향 거울(단면 투시 유리)이 있다 고 상상 할 수 있다.너 는 안에서 밖 을 볼 수 있 지만,밖 에 있 는 사람 은 너 를 볼 수 없다.

함수 작용 역 은 마치 쌍방 향 거울 과 같다.너 는 안에서 밖 을 볼 수 있 지만 밖 에는 너 를 볼 수 없다.
포 함 된 역할 영역 도 비슷 한 메커니즘 으로 더 많은 양 방향 거울 이 있 는 것 과 같다.

다 층 함 수 는 여러 개의 양 방향 경 을 의미한다.
앞의 역할 영역 에 관 한 부분 을 이해 하면 폐쇄 가 무엇 인지 이해 할 수 있다.
폐쇄 하 다
한 함수 에 다른 함 수 를 새로 만 들 때 닫 힌 패 키 지 를 만 드 는 것 과 같 습 니 다.내부 함 수 는 폐쇄 입 니 다.일반적으로 외부 함수 의 내부 변 수 를 접근 할 수 있 도록 이 패 키 지 를 되 돌려 줍 니 다.

function outerFunction () {
 const outer = `I see the outer variable!`

 function innerFunction() {
  console.log(outer)
 }

 return innerFunction
}

outerFunction()() // I see the outer variable!

내부 함 수 는 반환 값 이기 때문에 함수 성명 의 부분 을 간소화 할 수 있 습 니 다.

function outerFunction () {
 const outer = `I see the outer variable!`

 return function innerFunction() {
  console.log(outer)
 }
}

outerFunction()() // I see the outer variable!

패 킷 을 닫 으 면 외부 함수 의 변 수 를 방문 할 수 있 기 때문에 그들 은 보통 두 가지 용도 가 있 습 니 다.

부작용 감소

개인 변수 만 들 기

패 킷 제어 부작용 사용
함수 가 값 을 되 돌 릴 때 어떤 조작 을 수행 할 때 보통 부작용 이 발생 합 니 다.부작용 은 많은 상황 에서 발생 합 니 다.예 를 들 어 Ajax 호출,시간 초과 처리 또는console.log의 출력 문 구 를 사용 하 더 라 도:

function (x) {
 console.log('A console.log is a side effect!')
}

패 킷 을 닫 아 부작용 을 제어 할 때 실제 적 으로 코드 작업 절 차 를 헷 갈 릴 수 있 는 부분,예 를 들 어 Ajax 나 시간 초과 등 을 고려 해 야 합 니 다.
일 을 분명하게 말 하려 면 예 를 보 는 것 이 비교적 편리 하 다.
예 를 들 어 너 는 너의 친 구 를 위해 생일 을 축하 하고 케이크 를 만들어 야 한다.이 케이크 를 만 드 는 데 1 초 걸 릴 수 있 기 때문에 당신 은 함 수 를 써 서 1 초 후에 케이크 를 다 만 드 는 것 을 기록 하 였 습 니 다.
코드 가 짧 고 읽 기 쉬 울 수 있 도록 ES6 의 화살표 함 수 를 사 용 했 습 니 다.

function makeCake() {
 setTimeout(_ => console.log(`Made a cake`, 1000)
 )
}

보시 다시 피 케이크 를 만 드 는 것 은 부작용 을 가 져 왔 습 니 다.한 번 의 지연 입 니 다.
더 나 아가,예 를 들 어 당신 의 친구 가 케이크 의 맛 을 선택 할 수 있 도록 하고 싶다.그럼 케이크makeCake를 만 드 는 함수 에 인 자 를 추가 하 세 요.

function makeCake(flavor) {
 setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
}

그래서 이 함 수 를 호출 할 때 1 초 후에 이 새로운 맛의 케이크 가 만들어 집 니 다.

makeCake('banana')
// Made a banana cake!

하지만 문 제 는 케이크 의 맛 을 당장 알 고 싶 지 않다 는 점 이다.너 는 시간 이 다 되 었 다 는 것 만 알 고 케이크 를 다 만 들 면 된다.
이 문 제 를 해결 하려 면 케이크 의 맛 을 보존 하 는 기능prepareCake을 써 도 된다.그리고 내부 호출prepareCake의 패 킷makeCake을 되 돌려 줍 니 다.
여기 서부 터 당신 이 필요 로 할 때 호출 할 수 있 고 케이크 도 1 초 후에 바로 만 들 수 있 습 니 다.

function prepareCake (flavor) {
 return function () {
  setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
 }
}

const makeCakeLater = prepareCake('banana')

// And later in your code...
makeCakeLater()
// Made a banana cake!

이것 은 바로 패 킷 을 사용 하여 부작용 을 줄 이 는 것 이다.당신 이 움 직 이 는 내부 패 킷 을 만 들 수 있다.
개인 변수 와 패키지
앞에서 말 했 듯 이 함수 내의 변 수 는 함수 외부 에서 접근 할 수 없습니다.접근 할 수 없 으 면 개인 변수 라 고 할 수 있 습 니 다.
그러나 때때로 개인 변 수 를 방문 해 야 할 때 가 있다.이 럴 때 는 폐쇄 적 인 도움 이 필요 하 다.

function secret (secretCode) {
 return {
  saySecretCode () {
   console.log(secretCode)
  }
 }
}

const theSecret = secret('CSS Tricks is amazing')
theSecret.saySecretCode()
// 'CSS Tricks is amazing'

이 예 에서saySecretCode함 수 는 원 함수 밖에서secretCode이라는 변 수 를 드 러 냈 다.그래서 그것 도 특권 함수 가 되 었 다.
개발 자 도구 디 버 깅 사용
Chrome 과 Firefox 의 개발 자 도 구 는 현재 역할 영역 에서 접근 할 수 있 는 여러 변 수 를 편리 하 게 디 버 깅 할 수 있 도록 해 줍 니 다.일반적으로 두 가지 방법 이 있 습 니 다.
첫 번 째 방법 은 코드 에서debugger키 워드 를 사용 하 는 것 이다.디 버 깅 을 위해 브 라 우 저 에서 실행 중인 자 바스 크 립 트 를 일시 정지 시 킬 수 있 습 니 다.
다음은prepareCake의 예 이다.

function prepareCake (flavor) {
 // Adding debugger
 debugger
 return function () {
  setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
 }
}

const makeCakeLater = prepareCake('banana')

Chrome 개발 자 도 구 를 열 고 Source 페이지(또는 Firefox 의 Debugger 페이지)로 이동 하면 접근 할 수 있 는 변 수 를 볼 수 있 습 니 다.

debugger 디 버 깅prepareCake의 역할 영역 을 사용 합 니 다.
너 도debugger키 워드 를 폐쇄 내부 에 두 어도 된다.대비 변수의 역할 영역:

function prepareCake (flavor) {
 return function () {
  // Adding debugger
  debugger
  setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
 }
}

const makeCakeLater = prepareCake('banana')

디 버 깅 패 킷 내부 역할 영역
두 번 째 방식 은 코드 의 해당 위치 에 정지점 을 추가 하고 해당 하 는 줄 수 를 클릭 하면 된다.

정지점 디 버 깅 역할 영역 통과
총괄 하 다
폐쇄 와 역할 영역 은 그리 어렵 지 않다.일단 쌍방 향 렌즈 의 사 고 를 이용 하여 이해 하면 그것들 은 매우 간단 하 다.
함수 에서 변 수 를 설명 할 때 함수 내 에서 만 접근 할 수 있 습 니 다.이 변수의 역할 영역 은 함수 에 제한 되 어 있다.
만약 당신 이 한 함수 안에서 내부 함 수 를 또 정의 한다 면,이 내부 함 수 는 패키지 라 고 불 린 다.그것 은 여전히 외부 함수 의 역할 영역 에 접근 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.