[CodeStates] Pre Course 5주차 정리

이번 주에는 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에 연료를 공급합니다.

---

마무리

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