JadeCode

[리뷰] Scope & Closure, 화살표함수 본문

개발/웹

[리뷰] Scope & Closure, 화살표함수

z-zero 2022. 5. 13. 20:00

스코프: 자신이 가지고있는 유효범위(전역스코프, 지역스코프)

closure : 자신이 선언 될 때의 맥락을 기억하는 함수

lexical scope : 함수를 어디에 선언하였는지에 따라 결정되는 상위 스코프

let age = 24;

function getAge() {
  return `I am ${age} years old`; 
//전역으로 선언 된 age:24
}

function getOtherAge(age) {
  return `I am ${age} years old`; 
//파라미터로 받은 age
}

function getAge2() {
  let age = 20;
  return `I am ${age} years old`; 
//지역스코프 내에 선언된 age 20
//선언을 내부에 했기 때문에 내부의 변수 값을 따른다
}

function changeAge() {
  age = 30;
  return `I am ${age} years old`; 
//전역스코프에 선언된 age 재할당
}

console.log(getAge()); 
console.log(getOtherAge(17));
console.log(getAge2());
console.log(changeAge());
console.log(age);

스코프 정의와 규칙

  • 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능하다.
  • 스코프는 중첩이 가능하다.
  • 가장 바깥의 스코프는 특별히 전역스코프(global scope)라고 부른다.
  • 전역스코프가 아닌 다른 스코프는 지역스코프(local scope)라고 부른다.
  • 지역변수는 전역변수와는 다른 변수며 지역변수가 더 높은 우선순위를 가진다. (변수 명이 같으면 지역변수를 우선적으로 생각한다.)
  • 중괄호로 둘러싼 범위를 블록스코프(block scope)라고 부른다.
  • 함수로 둘러싼 범위는 함수스코프 (function scope)라고 부른다.
  • 화살표함수로 둘러싼 범위는 블록스코프로 취급된다.

var,let,const

  • var키워드는 블록스코프를 무시하고 (화살표함수 제외) 함수스코프를 따른다.
  • var선언은 함수 스코프 최상단에 선언된다. 선언 키워드 없는 선언은 최고 스코프에 선언된다.
  • 함수 내에서 선언 키워드 없는 선언은 함수의 실행 전까지 선언되지 않은 것으로 취급된다.
  • 많은 사람들이 블록스코프를 기준으로 코드를 작성하기 때문에 var는 권장하지 않는다.
  • let 키워드는 재선언을 방지한다.(재할당은 가능)
let const var
유효 범위 블록 스코프 및 함수 스코프 블록 스코프 및 함수 스코프 함수 스코프
값 재할당 가능 불가능 가능
재선언 불가능 불가능 가능

closure : 내부함수가 외부 함수의 지역 변수에 접근할 수 있음

클로저함수의 특징

  • 함수를 리턴하는 함수

  • 함수와 함수가 선언된 어휘적 환경의 조합

  • 내부함수에서 외부함수의 변수에 접근이 가능함(반대는 불가능)

  • 일반적인 함수와는 다르게 클로저는 외부함수의 실행이 끝나더라도 외부함수 내 변수가 메모리 상에 저장된다.

    • const adder = function(x){
       return function(y){
          return x+y;
       }
      }
      
      const add5 = adder(5); // 외부함수 adder의 실행이 끝나더라도, 외부함수 내 변수(x)를 사용 가능
      add5(7); // 따라서 이 함수도 실행이 가능. 5라는 외부함수의 변수 x가 남아있기 때문

실습

function introduceMyfriend(outerName) {
  return function (innerName) {
    return `${outerName}의 친구 ${innerName}`;
  };
}

const introduce = introduceMyfriend("지영");

console.log(introduce("소영"));

console.log(introduce("민영"));

console.log(introduceMyfriend("가영")("나영"));

클로저를 활용하여 HTML문자열 만들기

클로저 모듈 패턴

  • 정보의 접근 제한(캡슐화) 가능

화살표함수

  • 화살표 함수는 function 키워드를 생략하고 => 를 붙인다.
  • 리턴을 생략 할 수 있으며, 중괄호도 같이 생략된다. 중괄호가 있으면 return 필수!
  • return과 중괄호 없이 필요에 따라 소괄호를 붙일 수도 있다.
  • 파라미터가 하나일 경우 소괄호 생략이 가능하다.
  • 위의 클로저 함수를 화살표함수 형태로 나타낸 것은 다음과 같다.
const introduceMyfriend = (outerName) => (innerName) => {
  return `${outerName}의 친구 ${innerName}`;
};

'개발 > ' 카테고리의 다른 글

[리뷰] DOM  (0) 2022.05.23
[리뷰] spread, rest, 구조분해할당  (0) 2022.05.13
[리뷰] 원시자료형, 참조자료형  (0) 2022.05.11
[리뷰] 배열,객체  (0) 2022.05.10
[리뷰] Linux와 Node  (0) 2022.05.09
Comments