초보 개발자가 중급이 되려면 반드시 이해해야 하는 Scope와 Closure!!
closure 이해하니까 굉장히 매력적이다. 관련된 문제 많이 풀어보고 싶다!

Scope

• 변수와 그 값이, 어디서부터 어디까지 유효한지 판단하는 범위
• Scope 는 하나의 언덕이라고 비유할 수 있다.
  • 안쪽 Scope는 언덕 위에 있기에 바깥 Scope를 볼 수 있다.
• Scope는 중첩이 가능하다. 즉 함수 안에 함수를 넣을 수 있다.
• 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선 순위를 가진다.
• Block: 중괄호로 시작하고 끝나는 단위

    if (1) {
      ...
    }

    for(let i = 0; i < 5; i++) {
      ...
    }

    {
      console.log('Hi!');
    }

• var vs let
  • var는 Function 단위로 자신만의 Scope를 가진다. 재선언할 수 있기에 사용을 지양한다.
  • let은 Block 단위로 구분했을 때에 예측하기 쉬운 코드를 작성할 수 있다.
• const
  • 값이 변하지 않는 변수, 상수를 정의할 때 사용하는 키워드
  • let과 마찬가지로 Block 단위 범위이다.
• window는 전역 범위를 대표하는 객체
• 전역 범위에서 선언된 함수, 그리고 var 키워드로 선언한 변수는 window 객체와 연결된다.
• 전역 범위에 최소한의 변수만 선언하기
• 키워드 없이 변수를 선언하는 것을 방지하고 싶다면 'use strict' 를 사용합니다.

Closure

• 외부 함수의 변수에 접근할 수 있는 내부 함수
• 클로저 함수는 지역 변수, 외부 함수의 변수, 전역 변수의 접근이 전부 가능하다.

function inputName(name) {
  let yourName = name;
  console.log('외부 함수입니다. 이름을 입력하셨습니다!');
	
  function outputName() {
    console.log(name + '님 안녕하세요. 내부 함수, Closure 입니다!');
  }
  return outputName;
}

let say = inputName('Chan'); // '외부 함수입니다. 이름을 입력하셨습니다!'
say(); // 'Chan님 안녕하세요. 내부 함수, Closure 입니다!'

Closure을 이용한 예

• 커링(Currying) : 어느 함수를 호출할 때 하나의 Argument를 고정시켜 각기 다른 Argument와 연산하는 방법입니다.

    function rectArea (horizontal) {
      let horizonValue = horizontal;
      console.log('고정시킬 가로 길이 : ' + horizontal);
      function calculation(verticalValue) {
        return '사각형의 넓이 : ' + horizonValue * verticalValue;
      }
      return calculation;
    }

    let rect = rectArea(50); // '고정시킬 가로 길이 : 50'
    rect(10); // 사각형의 넓이 : 500

    function add(x, y) {
      let oldX = x, oldY = y;
      if (oldY === undefined) {
        function newYValue(newY) {
          return oldX + newY;
        }
        return newYValue;
      } else {
        return oldX + oldY;
      }
    }

전개 구문(Spread syntax)

• 배열이나 문자열, 객체 등과 같이 반복 가능한 데이터 타입에서 ...을 붙여 사용한다.

//배열
const arr = [5, 50];
const spreadArr = [0, ...arr, 5, 49]; // [ 0, 5, 50, 5, 49 ]

//객체
const obj1 = { fruit: 'apple', price: 5940 }
const obj1Clone = { ...obj1 }; // { fruit: 'apple', price: 5940 }

• Rest Parameter
  • 함수의 파라미터를 spread syntax를 사용한 형태를 말한다.
  • Rest Parameter로 된 값들은 배열로 전달된다.

const arr = [1, 2, 59, 49, 100, 8];

function print(...restParameter) {
  console.log(restParameter); // [ [ 1, 2, 59, 49, 100, 8 ] ]
}

//또는 개별로 분리할 수 있다.

function print2(num1, num2, ...otherNums) {
  console.log(`${num1},${num2}, ...${otherNums}`);
} // 1,2, ...3,4,5,6 
print2('1', '2', '3', '4', '5', '6');

Object

• 객체 property의 값이 function이면 method 처럼 작동한다.

let sellApples = {
  fruit : '사과',
  price : 100,
  sell : function(count) {
    return `${this.fruit} ${count} 개 팔아서 ${this.price * count}원을 얻었습니다!`;
  }
}
let revenue = sellApples.sell(50); // 사과 50개를 팔아서 5000원을 얻었습니다!

• this 의 값은 함수를 호출한 방법에 의해 결정된다.

  • 또한 엄격 모드와 비엄격 모드에 따라 값이 달라질 수 있다.

  • 함수 내부에서 this의 값은 호출한 방법에 따라 달라질 수 있다.

    function func() {
    	return this;
    }
    
    func() === window // true
    
    function func2() {
      'use strict';
    	return this; // undefined
    }
    
    func2() ===  window // false.. 

• in 연산자는 속성이 객체에 존재하면 true를 반환합니다.

  • 여기서 속성은 배열의 인덱스나 속성의 이름을 뜻합니다.

const fruitsOrigin = { 
  'apple' : 'balkan Peninsula',
  'banana' : 'asia'
  'peach' : 'china'
};

console.log('apple' in fruitsOrigin); // true
console.log('melon' in fruitsOrigin); // false