코드스테이츠 프리코스 5주차 후기(1)

*코드스테이츠 프리코스 33기를 수강하면서 2019년 5월 28일(화)에 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. Closure

코드 스테이츠 Pre course 33기 5주차 화요일(2019-05-28)에는 ① closure, ② parameter, ③ 객체지향에 대해서 배웠다.

 

• Closure : 외부 함수의 변수에 접근할 수 있는 내부 함수(또는 이러한 작동원리를 일컫는 용어)
• 클로저 함수 내에서는, ① 지역변수, ② 외부함수의 변수, ③ 전역변수 모두에 접근이 가능하다.
• 유용한 클로저 함수의 예제
  • 커링 : 함수 하나가 n개의 인자를 받는 것 대신, 1개의 인자를 받는 함수를 n개 만든다. 함수형 프로그래밍의 대표적인 프로그래밍 기법이다.

function htmlMaker(tag) {
  let startTag = '<' + tag + '>';
  let endTag = '</' + tag + '>';
  return function(content) {
    return startTag + content + endTag;}}

let divmaker = htmlMaker(div);
divmaker("code states"); // <div>code states</div>

 

• 클로저 모듈 패턴 : 변수를 스코프 안 쪽에 가두어서 함수 밖으로 노출시키지 않는 패턴

function makeCounter() {
  let privateCounter = 0;
  
  return {
    increment : function() {
      privateCounter++;
    },
    decrement : function() {
      privateCounter--;
    },
    getValue : function() {
      return privateCounter;}}}

let counter1 = makeCounter();
counter1.increment(); // privateCounter++를 수행하는 함수를 실행시킨 것과 같은 의미
counter1.increment();
counter1.getValue(); // 2 : privateCounter를 return시키는 함수를 실행시킨 것과 같은 의미

let counter2 = makeCounter();
counter2.increment();
counter2.decrement();
counter2.increment();
counter2.getValue(); // 1
// counter1, 2 모두 각기 다른 makeCounter라는 함수를 다루면서 privateCounter를 밖으로 노출시키지 않음(?)

 

2. parameter

• 어떤 함수를 만들 때, parameter의 길이가 유동적일 경우에는 어떻게 해야할까?

1. Rest Parameter 활용한다. 이 경우, 매개변수는 배열의 형태로 전달된다. [ES6]

function getMaxNum(...nums) {
  return(nums);}
let arr = getMaxNum(3, 123, 6, 10);
console.log(arr); // [3, 123, 6, 10]

 

2. arguments라는 키워드를 활용할 수도 있다. [ES5]

function getMaxNum() {
  return arguments;}
let arr2 = getMaxNum(3, 1, 15, 590); /* {0:3, 1:1, 2:15, 3:590}
                    이 argument 객체는 배열같지만 배열이 아니다. 이를 유사배열이라고 한다. */

 

• 매개변수에 기본값을 default로 지정해주고 싶은 경우에는 Default Parameter를 할당할 수 있다. [ES6]
  • 마지막 매개변수를 default로 지정하고자 할 경우, argument를 받을 때 default에 해당되는 argument는 생략 가능
  • default 지정하고자 하는 매개변수가 중간에 들어올 경우, undefined를 argument로 받아야 default로 처리한다.

// case1 : 끝에 default 매개변수가 있을 경우
"function getRoute(destination, departure = "ICN") {
  return `출발지 : ${departure}, 도착지 : ${destination}`;}
getRoute('PEK'); // "출발지 : ICN, 도착지 : PEK"

// case2 : default 매개변수가 중간에 들어갈 경우
"function getRoute(departure = "ICN", destination) {
  return `출발지 : ${departure}, 도착지 : ${destination}`;}
getRoute(undefined, 'PEK'); // "출발지 : ICN, 도착지 : PEK"

 

3. 객체지향

객체지향 프로그래밍이란?
하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴

- <span style="color:blue">청사진 : class</span>
- <span style="color:red">객체 : instance</span>

 

• [ES5] 클래스는 함수로 정의될 수 있다.

function Car(brand, name, color) { // 함수이름의 첫글자를 대문자로! car가 아니라 Car
  // 인스턴스가 만들어질 때 실행되는 코드
}

 

• [ES6] 에서는 class 키워드를 통해 정의할 수도 있다.

class Car() { // 마찬가지로 첫 글자를 대문자로!
  constructor(brand, name, color) {
    // 인스턴스가 만들어질 때 실행되는 코드
  }

 

• new 키워드를 통해 클래스의 인스턴스를 만들 수 있다.

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');

console.log(avante) // Car {} : Car라는 객체의 인스턴스라는 것을 알려주는 것

 

• 속성과 메소드 : 클래스에서 속성과 메소드를 정의하고, _인스턴스에서 이용_한다.
  • 예를 들어, Car라는 클래스의 속성으로는 brand, name, color, currentFuel, maxSpeed 등이 있을 수 있고,
  • 메소드로는(즉 Car가 할 일) refuel(), setSpeed(), drive() 등을 정의할 수 있다.
    

1) 클래스에서 속성과 메소드 정의하기

​1. 클래스에서 속성 정의하기 [ES5]

function Car(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}

 

2. 클래스에서 속성 정의하기 [ES6]

class Car() {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

 

3. 클래스에서 메소드 정의하기 [ES5]

function Car(brand, name, color) {
  Car.prototype.refuel = function () {
    // 연료 공급을 구현하는 코드
  }
  car.prototype.drive = function () {
    // 운전을 구현하는 코드
  }
}

 

4. 클래스에서 메소드 정의하기 [ES6]

class Car() {
  constructor(brand, name, color) {
    refuel() {
      // 연료 공급을 구현하는 코드
    }
    drive() {
      //운전을 구현하는 코드
      console.log(`${brand}의 ${color}색 ${name}의 운행을 시작합니다.`)
    }
  }
}

 

2) 클래스에서 정의한 속성과 메소드를 인스턴스에서 사용하기

let avante = new Car('hyundai', 'avante', 'red');
avante.brand; // 'hyundai'
avante.color; // 'red'
avante.drive(); // 'hyundai의 red색 avante의 운행을 시작합니다.'

 

• prototype, constructor, this란?
  • prototype : 모델의 청사진(class)를 만들 때 사용하는 원형 객체(original form)이다.
  • constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수
  • this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context). new 키워드로 인스턴스를 생성했을 때, 해당 인스턴스가 바로 this의 값이 된다.