이번 주에는 Closer, 매개변수 다루기, 객체지향 프로그래밍, this 키워드에 대해 배웠보았다.

1. Closer

클로저는 외부 함수에 접근할 수 있는 내부 함수를 말한다.

function outerFn() {
  let outerVar = 'outer';
  console.log(outerVar);

  function innerFn() {       // 여기서는 innerFn 함수가 바로 클로저 함수이다.
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFn;
}

let globalVar = 'global';
let innerFn = outerFn();
innerFn();

클로저 함수 안에서는
지역변수(innerVar), 외부 함수의 변수(outerVar), 전역변수(globalVar)의 접근이 모두 가능하다.

클로저 함수를 배울 때 새로 알게 된 사실은, 함수가 리턴될 때의 동작 방법이다.

function outerFn() {
  let outerVar = 'outer';
  console.log(outerVar);

  function innerFn() {
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFn;
}

outerFn()(); // 외부 함수와 내부 함수를 연달아 호출하면 outer, inner가 각각 콘솔에 찍힌다.
let innerFn = outerFn(); // 외부 함수의 리턴값인 innerFn 함수를 변수 innerFn에 담는다.
innerFn(); // 내부 함수가 담긴 innerFn 함수를 호출하면 inner가 콘솔에 찍힌다.

2. 매개변수 다루기

  • 만약, 전달인자(arguments)의 길이가 유동적이라면?
    function getMaxNum(...nums) {
        return nums.reduce(function(acc,curr) {
          if(acc > curr) {
              return acc;
          } else {
              return curr;
          }
        });
    }
    getMaxNum(1, 2, 6, 8, 222); // 222
    getMaxNum(0, 4, 2, 7534, -29); // 7534

위처럼 전달인자의 길이가 유동적이라면 parameter를 (... + 변수) 형태의 매개변수로 지정해주면 된다.
그러면, 전달인자의 길이가 변하더라도 올바른 값을 잘 출력할 수 있다.

  • 매개변수에 기본값을 넣어주고 싶을 경우?

매개변수에 Default Parameter를 할당해줄 수 있다.
문자열/ 숫자/ 객체 등 어떠한 타입도 할당 가능하다.

function getRoute(departure, destination = 'CAN') {
  return '출발지: ' + departure + ', '
       + '도착지: ' + destination;
} 

getRoute('KOR'); // "출발지: KOR, 도착지: CAN"

중간에 기본 매개변수가 들어가는 경우에는, undefined로 인자를 넘겨주면 기본값으로 처리된다.

function getRoute(departure = 'KOR', destination) {
  return '출발지: ' + departure + ', '
       + '도착지: ' + destination;
} 

getRoute(undefined, 'CAN'); // "출발지: KOR, 도착지: CAN"

3. 객체지향 프로그래밍

하나의 모델이 되는 청사진(class)을 만들고, 그 청사진을 바탕으로 한 객체(instance)를 만드는 프로그래밍 패턴을 말한다.

  • class 만들기

    • ES5: 클래스는 함수로 정의할 수 있다.
      function Car(brand, name, color) {
      // 인스턴스가 만들어질 때 실행되는 코드
      }
    • ES6: class라는 키워드를 이용해 정의할 수 있다.
      class Car() {
        constructor(brand, name, color) {
      // 인스턴스가 만들어질 때 실행되는 코드
        }
      }
  • 인스턴스 만들기

    • new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.
      let avante = new Car('hyundai', 'avante', 'white');
      let mini = new Car('bmw', 'mini', 'white');
  • 속성과 메소드의 정의

    • 클래스: 속성의 정의

      // ES5
      function Car(brand, name, color) {
      this.brand = brand;
      this.name = name;
      this.color = color;
      }
      // ES6
      class Car() {
        constructor(brand, name, color) {
          this.brand = brand;
          this.name = name;
          this.color = color;
        }
      }
    • 클래스: 메소드의 정의

      // ES5
      function Car(brand, name, color) { /* 생략 */ }
      Car.prototype.refuel = function() {
      // 연료 공급을 구현하는 코드
      }
      Car.prototype.drive = function() {
      // 운전을 구현하는 코드
      }
      // ES6
      class Car() {
        constructor(brand, name, color) { /* 생략 */ }  
      
      refuel() {
        }
      
        drive() {
        }
      }
    • 인스턴스에서의 사용

      let avante = new Car('hyundai', 'avante', 'white');
      avante.color; // 'white'
      avante.drive(); // 아반떼가 운전을 시작합니다.
      let mini = new Car('bmw', 'mini', 'white');
      mini.brand; // 'bmw'
      mini.refuel(); // 미니에 연료를 공급합니다.
      class Car() {
        constructor(brand, name, color) {
            this.brand = brand;
          this.name = name;
          this.color = color;
      }
      refuel() {
          console.log(this.name + '에 연료를 공급합니다.');
        }
      }
      let mini = new Car('bmw', 'mini', 'white');
      mini.brand; // 'bmw'
      mini.refuel(); // 'mini에 연료를 공급합니다.

마무리

이번 주에 배운 내용은 나에게 상당히 어려운 수준의 내용이었다.
복습을 자주 하지 않으면 분명히 까먹을 법한 내용...!
더 깊이 있는 이해를 하기 위해 블로깅한 글을 반복해서 보며 복습, 또 복습해야겠다!