[부트캠프] JavaScript 4일차

RedPanda·2022년 7월 22일
0

지난 수업과 추가 내용

  • 요구사항에 맞는 결과를 낼 수 있도록 요구사항을 잘 이해하는 것이 필요함!! -> 코테뿐만 아니라 고객의 요구사항을 잘 이해하여 프로그래밍을 하는 것이 무엇보다 중요!

  • 식별자 : 원하는 값을 식별해주는 역할. (변수 이름, 함수 이름...) // 생각이 안나서 적어놓음.

<프로토타입 예습>

  • 프로토타입(Prototype) : 인스턴스를 생성할 때 객체 원형의 값들을 할당해주기 위한 것.

  • 프로토타입은 생성자 함수가 실행될때 함께 생성된다. -> 인터페이스같은 개념이라 이해하면 좋을 것 같다.

  • 하나의 객체에서 생성된 다수의 인스턴스들은 모두 하나의 프로토타입에 상속받고 있다. -> person1과 person2의 생성자가 new Person()이면 두 인스턴스의 프로토타입은 같다.

필기 내용

<실행 컨텍스트>

  • 소스코드 평가(선언) -> 실행 컨텍스트 -> 소스코드의 실행(선언 이외의 것)

  • 실행 컨텍스트는 전역 실행 컨텍스트, 함수 실행 컨텍스트로 나누어진다.
    -> 전역 실행 컨텍스트{Binding Obj(var, function...), 전역 변수, thisBinding}, 함수 실행 컨텍스트(매개변수, 함수 내의 변수들(thisBinding)...) 순으로 진행되며, 함수 실행 컨텍스트가 끝나면 사라진다.

  • OutEnv.Ref란? : thisBinding 이후에 상위 스코프의 값들을 참조하는 것. (ex. 전역변수 a의 값을 메소드 내에서 사용하고자 할 때 메소드가 a를 참조할 수 있게 한다.)

<클로저>

  • 함수와 그 함수가 선언된 렉시컬 환경과의 조합.

  • 함수가 정의된 위치와 호출되는 위치가 다를 수 있음 -> 함수가 자신의 내부슬롯에서 자신이 정의된 상위 스코프의 참조를 저장한다.

  • 상태를 안전하게 변경, 유지하도록 하기 위해 값을 은닉하고 특정 함수에게만 상태 변경을 허용하도록 한다. (캡슐화, 정보 은닉)

  • 클로저의 조건에 맞지 않으면 중첩된 함수 내에 가지고 있는 값은 메모리에 낭비가 되므로 쓸모가 없어진다.

  • 클로저의 조건 :
    1) 외부에 있는 함수가 종료가 되어야 내부에 있는 함수가 상위 값을 가지게 된다!!
    2) 상위 스코프의 식별자를 참조하지 않으면 클로저라고 할 수 없다.

// 클로저 예시
const increase = (function(){
  let num = 0;
  function incFunc(){
    return ++num;
  }
  return {incFunc}; // 객체로 함수들을 리턴하여 캡슐화함.
})(); // 즉시 실행하여 클로저 가능하게 만듦.
console.log(increase.incFunc());
console.log(increase.incFunc());
console.log(increase.incFunc());
console.log(increase.incFunc());

-클로저의 한계 : 여러번 함수를 실행한다면 은닉하려 꺼내놓은 변수가 계속 변하게 된다. 클로저로는 완전한 은닉이 불가능하다. -> private가 나온 계기

const Person = (function(){
  let _age = 0;
  function Person(name, age){
    this.name = name;
    _age = age;
  }
  Person.prototype.sayHi = function(){
    console.log(`Hi! My name is ${this.name}. Im ${_age}`);
  }
  return Person;
})();

const me = new Person('Lee', 20);
me.sayHi();
const you = new Person('Kim', 30);
you.sayHi();
me.sayHi();

질문

  • Q1. const, let과 var의 할당 시기는?

: 선언 단계에서 var와 메소드가 먼저 선언되며 undefined로 초기화가 된다. 그 이후에 전역 변수(const, let)이 선언 된다. 런타임이 시작되면 var와 메소드 모두 우선적으로 할당되며 그 이후에 const와 let이 할당된다.
-> 값을 할당하는 것은 실행 컨텍스트의 일이 아니며, 컨텍스트 작업 이후에 할당이 시작된다.
++) var는 실행 컨텍스트 단계에서 선언과 초기화가 한번에 이루어진다. 함수도 마찬가지로 한번에 이루어지는데, 이것이 앞서 살펴보았던 호이스팅이다. <이해를 돕기 위한 링크>

여담

실행 컨텍스트의 개념부터 어려웠다. 선언, 초기화, 할당이 어느 시점에서 수행되는지 간과한 것이 큰 실수였다. JS와 C계열 언어의 초기화 의미가 다르다보니 상당히 어려웠다. 결국에 이해를 했으니 결과는 좋았다.ㅎㅎㅎ

클로저도 기본적으로 생각하는 코딩방법이 아니다보니 어려웠다. 새로운 키워드같은 것이 추가되기 보다 기존에 사용했던 것들을 가지고 캡슐화하려다보니 이해도 어려웠고 한계점도 있었던 것 같다.

어찌됐든 모르는게 잔뜩 나와서 머리가 열심히 돌아갔다. 앞으로 배울 것도 모르는게 태산일거라 걱정도 되지만 나름 재미도 있었다.

profile
끄적끄적 코딩일기

0개의 댓글