1.프로토타입

• 프로토 타입의 정의와 활용

  // 이런 방식은 객체에 새 속성을 추가할 수 있는데
  // 원형에 추가는 할 수가 없다.
  
  function Car(m, c, s) {
    this.model = m;
    this.color = c;
    this.speed = s;
  }

  • 이런 코드가 존재 할 때 우리는 생성자를 이용하여 객체에 직접 값을 주입할 수 있다.

    let temp = new Car("봉고", "검정", 100);
    
    // 객체에 추가 stop메서드를
    temp.stop = function () {
      this.speed = 0;
      return this.speed;
    };

  • 이 때 객체에 직접 할당하는 방식이라 만약 새로운 객체를 만든다면 stop이라는 함수는 사용할 수 없다.

  • 그러나 prototype을 이용하여 생성자 함수에 직접 주입 할 수 있다.

    let temp = new Car("봉고", "검정", 100);
    let temp2 = new Car("다마스", "검정", 100);
    
    Car.prototype.stop = function () {
      this.speed = 0;
      return this.speed;
    };
    console.log(temp.stop()); //0
    
    // temp2는 없으니까
    console.log(temp2.stop()); //0

  • 우리가 기존에 사용하는 문자열은 String생성자 함수의 객체이다. 즉 추가가 가능하다.

    String.prototype.replaceOf = function () {
      console.log("나는 프로토 타입으로 추가 됐어");
    };
    
    // 문자열의 원형은 String이고
    console.log("가,나".replace("가", "나")); //나,나

2.클로저

• for문과 var scope

  function fun() {
    for (var i = 0; i < 5; i++) {
      debugger;
      setTimeout(() => {
        console.log(i); //다 5가 나옴
      }, i * 1000);
    }

  • var는 함수 내에서 스코프가 정의되기 때문에 함수가 실행되는 순간 비동기 처리 함수가 돌아간다.
  • 즉, for문이 종료되고 함수가 실행되므로 전부증가한 i(5)가 나온다.
  • 5로 증가가 이미 되었고 함수 스코프로 접근이 가능하기 때문에 5가 나온다.
  • 참고로 debugger 를 쓰면 개발자도구에서 브레이크 포인트를 걸 수 있다.
• let의 scope

  function fun3(params) {
    let value = "";
    //   내부 함수에서 외부함수의 변수를 사용
    function fun4() {
      if (value == "") {
        value = "클로저";
        return value;
      }
    }
    return fun4;
  }
  let closure = fun3();
  
  let a = closure();
  console.log(a); //클로저

  • let의 scope는 블록 안이다.
  • 즉 내부함수에서 외부 함수의 변수를 사용해도 블록안이라며 불러올 수 있다.

3.즉시 실행함수

• 작성법과 사용법

  // 작성법
  
  // 즉시 실행 함수
  // 전역에 ()안에 익명함수처럼 생긴 구문.
  // 맨 뒤에 ()함수 실행식
  // 실행식 괄호에 매개변수를 전달하면 된다.
  (function () {
    console.log("즉시 실행 함수");
    let a = 5;
  })();
  let a = 4;
  
  function temp(b) {
    (function (c) {
      console.log("즉시 실행 함수");
      let a = 5;
      console.log(c);
    })(b);
  }
  temp("안뇽");

  • 즉시 실행이 된다.
  • 항상 마지막에 () 로 실행시키며 전달할 파라미터를 준다.
  • 익명함수는 그 값을 매개변수로 받는다.
• 언제씀? 💡 즉시 실행 함수 작성법즉시 실행 함수를 사용하는 이유는 한 번 실행시키고 사용하지 않을 것 같은 변수나 코드를 즉시 실행 함수로 만들고 호출 하는방식(변수나 함수명이 겹치지않게 충돌하지 않게

4.iterator,iterable,Symbol 그리고 reduce

• iterator,iterable,Symbol이 뭔데?

  • 이터러블과 이터레이터 ES6에 추가되었고 이터러블은 반복이 가능한 객체라는 뜻

  • 이터러블을 반복하는 반복문
    forEach:배열을 순회하면서 아이템을 반복 실행한다. 아이템의 갯수만큼
    for of: 이터러블의 아이템을 반복 실행한다.

    • symbol? Symbol:ES6에 추가된 원시타입
      값이 겹치지 않고 선언되고 변경이 불가능
      객체의 속성에 접근하기위해 사용
      

  • 반복자 Symbol.iterator: 이터러블 객체를 나타내는 메서드 이름으로 사용. 해당 객체가 이터러블 이라는 것, Symbol.iterator 메소드가 이터레이터 객체를 반환한다.

  • 이터레이터 객체의 next메소드가 있어요.
    next메소드를 사용하면 {value,done}객체를 반환한다.
    반복중인 아이템을 value에 done은 끝났는지를 알려준다.
    이터레이터는 이터러블(반복 가능한 객체)를 순차적으로 접근할 수 있는 기능

    💡 자바 스크립트의 배열이나 문자열 등등도 이터러블 이라는것
• 예시 코드

  const Arr = [1, 2, 3, 4, 5];
  const objIter = {
    index: 0,
    next: function () {
      if (this.index < Arr.length) {
        // done마지막 요소가 맞니?
        return { value: Arr[this.index++], done: false };
      } else {
        // done마지막 요소 끝
        return { done: true };
      }
    },
  };
  
  // console.log(objIter.next().value);
  // console.log(objIter.next().value);
  // console.log(objIter.next().value);
  // console.log(objIter.next().value);
  // console.log(objIter.next().value);
  // console.log(objIter.next().done);
  
  const Arr2 = [1, 2, 3, 4, 5];
  // Symbol은 객체의 속성에 접근하는데 사용한다 했음.
  // 객체에 속성으로 접근하는데 Symbol.iterator
  
  // Arr2[Symbol.iterator]() 이터레이터 객체를 반환해준다.
  const iter2 = Arr2[Symbol.iterator]();
  let result2 = iter2.next();
  
  console.log(result2); //{value: 1, done: false}
  result2 = iter2.next();
  console.log(result2);//{value: 2, done: false}
  result2 = iter2.next();
  console.log(result2);//{value: 3, done: false}
  result2 = iter2.next();
  console.log(result2);//{value: 4, done: false}
  result2 = iter2.next();
  console.log(result2);//{value: 5, done: false}
  result2 = iter2.next();
  console.log(result2);//{value: undefined, done: true}

  • next함수를 통해 요소를 순회하였다.
  • 즉 이터러블 객체는 순회가 가능하며 next()를 사용한다는 것을 알 수 있다.
• reduce?