[JavaScript] return/ 스코프(scope) / 클로저(closure, 폐쇄)

※하나몬 님의 스코프 , 클로저 개념을 바탕으로 각색되었습니다! 자세한 내용은 아래에 첨부된 원문 링크를 통해서 참고하시길 바랍니다.

 

🍕return 명령문?

함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.  

function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}

console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0

구문

return [[expression]]; 

 

expression

반환할 값으로 사용할 표현식. 생략할 경우 undefined를 대신 반환한다.

 

함수의 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단된다.

값을 제공한 경우 함수를 호출한 곳에 그 값을 반환한다. 

 

다음 return 명령문은 모두 함수 실행을 끊습니다.

return;
return true;
return false;
return x;
return x + y / 3;

->그냥 return문을 만나면 함수 실행이 끊긴다고 생각하면 된다. 

 

return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다. 자동 세미콜론 삽입(ASI)의 영향을 받음 

return
a + b;
//위의 코드가 ASI로 인해 아래처럼 처리된다. 
return; 
a + b;
//문제를 해결하려면 아래처럼 괄호 ()를 사용하여 ASI를 방지해야 한다. 
return (
a + b 
);

 

함수 중단 

함수는 return을 호출하는 지점에서 즉시 실행을 멈춘다. 

function counter() {
  for (let count = 1; ; count++) {  // 무한 반복
    console.log(count + "A"); // 5까지
      if (count === 5) {
        return;
      }
      console.log(count + "B");  // 4까지
    } // 여기까기 for문
  console.log(count + "C");  //
}

counter();

// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

함수 반환하기 

*클로저에 대한 개념 숙지

function magic(x){
return function calc(x) {return x * 42};
}
let answer = magic();
answer(1442);

-> return 값으로 함수를 반환할수도 있음

---

🍕스코프란(Scope)? 

"식별자 접근 규칙에 따른 유효 범위"를 말한다. 

• 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 
• 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. 
• 그 범위를 스코프라고 부른다. 
• 그래서 각각을 Block Scope 와 Function Scope라고 부른다.

🍕스코프의 주요 규칙 

규칙1. 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능 하지만 반대로는 불가능하다. 

• 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하지만 역으로는 불가능하다.

규칙2. 스코프는 중첩이 가능하다.(마치 중첩된 울타리와도 같다.)

규칙3. 전역 스코프와 지역 스코프 

• 가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고 부름
• 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope)라고 부름

규칙4. 지역 변수는 전역 변수보다 우선순위가 높다.

• 전역 스코프에서 선언한 변수는 전역 변수다. 
• 지역 스코프에서 선언한 변수는 지역 변수다. 
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

🍕스코프의 종류

• 스코프의 두 가지 종류 블록 스코프와 함수 스코프가 있음 
• 화살표 함수(ES6)는 함수 스코프가 아니다! (화살표 함수는 블록 스코프로 취급된다.)

  ---

🍕스코프와 var. let. const 키워드

• 변수 선언 키워드 세 가지의 '차이점' 그리고 '스코프 유효 범위'를 알아보자

🌞const 키워드 

• 유효 범위: 블록/ 함수 스코프
• 값 재할당: 불가능
• 재선언: 불가능

🌞let 키워드

• 유효 범위: 블록/ 함수 스코프
• 값 재할당: 가능
• 재선언: 불가능

🌞var 키워드 (쓰지마라)

• 유효 범위: 함수 스코프
• 값 재할당: 가능
• 재선언: 가능

-> var 키워드로 선언한 변수는 오직 함수 스코프만을 따른다. 

 

🍕스코프 관련 변수 선언 시 주의점 

🌞전역 객체(window)의 이해

• Window 객체는 오직 브라우저에서만 존재하는 객체이다.
• 브라우저의 창(window)를 의미하는 객체이다
• 별개로 전역 영역을 담고 있기도 하다. 그래서 함수 선언식으로 함수를 선언하거나 var 키워드로 변수를 선언하게 되면 window객체에 속하게 된다.

//전역에 함수 선언식으로 등록한 함수, myFn()
function myFn() {
return 'myFn';
}
window.myFn(); // 'myFn'

🌞전역 변수는 최소화하기

• 가장 바깥 스코프에 정의한 변수가 전역 변수이다. -> 어디서든 접근이 가능하다.
• 전역 변수를 var로 선언해서 브라우저의 내장 기능을 못하게 만들 수도 있다.

🌞선언 없는 변수 할당 금지

• 선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다. 
• 실수를 방지하기 위해 Strict Mode를 사용하면 된다.
  • Strict Mode(키워드: 'use strict')는 브라우저가 보다 엄격하게 작동하도록 만들어준다. 
  • '선언 없는 변수 할당'의 경우도 에러로 판단한다.

---

🍕클로저(Closures, n.폐쇄)

-선수 지식: 스코프

 

🍕클로저 함수의 장점 (활용)

장점1. 데이터를 보존할 수 있다.

• 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
• 클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다. 

 

장점2. 정보의 접근 제한(캡슐화)

• '클로저 모듈 패턴'을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.
• 이러한 정보의 접근을 제한하는 것을 캡슐화

장점3. 모듈화에 유리하다.

• 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다. 
• '함수의 재사용성 극대화하여 함수 하나를 독립적인 부품의 형태로 분리하는 것'을 모듈화라고 한다.
• 클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다. 

🍕클로저 정의

함수와 함수가 선언된 어휘적(lexical)환경의 조합이다.

• 클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계라는 개념이 합쳐진 것
• 위에서 '함수'란 반환된 내부함수를 의미하고 '그 함수가 선언될 때의 렉시컬 환경'이란 내부 함수가 선언됐을 때의 스코프를 의미한다. 
• 클로저는 자신이 생성될 때의 환경(lexical environment)을 기억하는 함수이다. 

클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(e.g. 스칼라, 하스켈, 리스프 등)에서 사용되는 중요한 특성입니다. 

스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는 지에 따라 결정된다. 
이를 렉시컬 스코핑(Lexical scoping)이라 한다. 

클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(폐쇄) 것에 있다. 

 

함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경(어휘적 환경)을 기준으로 변수를 조회한다.

• 외부함수가 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프 = 함수가 선언된 어휘적 환경에 접근할 수 있음
• 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있다. 
• 따라서 클로저를 남발할 경우 성능 저하가 발생할 수 있다. (단점) 

상위 스코프의 식별자를 포함하여 쓰여있는 내부 함수 코드 자체를(lexical environment)라고 부를 수 있다.

 

🍕클로저의 정의2

클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킨다? 

-중첩함수 뿐만 아니라 내부함수가 외부 스코프에 접근할 수 있는 형태의 클로저도 존재한다.

 

// 클로저를 만드는 형태 1. - 중첩함수
function outerFn() {
  let x = 10;
  return function innerFn(y) { // innerFn 함수는 클로저다.
    return x = x + y;
  }
}
let a = outerFn(); // 외부함수 호출은 한번만. 이제 a 변수는 innerFn 함수를 참조한다.
a(5); // 15;
a(5); // 20;
a(5); // 25;

// 클로저를 만드는 형태 2. - 전역에 선언한 변수를 박스 안에서 함수로 정의하고 전역에서 호출
let globalFunc;
{
  let x = 10;
  globalFunc = function(y) { // globalFunc 함수는 클로저다.
    return x = x + y;
  }
}
globalFunc(5); // 15;
globalFunc(5); // 20;
globalFunc(5); // 25;

//박스 예제2 
let a;
{
 let x = 10;
 a = function(y) {
  return x + y;
 	}
 }
 let b = a;
 
 b(5); //15
}

클로저는 함수를 리턴하는 함수이다?

• 함수를 리턴하는 함수가 아니라 내부함수가 상위 스코프의 식별자를 참조하고 있고 상위 스코프 바깥에서 사용했을 때 해당 상위 스코프의 식별자를 수정할 수 없는 형태이다. 
• 클로저가 언제나 함수를 리턴하는 것은 아니다 -> '외부로 전달'이 항상 return을 의미하는 것은 아니다.

클로저의 외부함수와 내부함수에 의해서 스코프가 분리된다? 

• '외부함수와 내부함수에 의해 스코프가 분리된 클로저도 있다' 가 맞다.
• 박스와 내부함수에 의해 스코프가 분리된 클로저도 있다. 

클로저는 특정 상황에서 발생하는 '현상'이고 함수는 이 현상을 나타내기 위한 '조건'에 해당한다.

---

all ref: 

https://hanamon.kr/javascript-%ED%81%B4%EB%A1%9C%EC%A0%80/

[JavaScript] 클로저(Closures)란 무엇일까? - 하나몬

https://hanamon.kr/javascript-%ec%8a%a4%ec%bd%94%ed%94%84%ec%99%80-%eb%b3%80%ec%88%98%ec%84%a0%ec%96%b8%ed%82%a4%ec%9b%8c%eb%93%9c-%ec%b0%a8%ec%9d%b4%ec%a0%90/

[JavaScript] 스코프(Scope)와 변수 선언 (var, let, const 키워드 차이점) - 하나몬

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

return - JavaScript | MDN