220822(월)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 데이터 타입(remind)

• 원시형: 숫자형, 문자형, 불린형, null, undefined, Symbol
• 참조형: Object(객체)

원시형의 불변성: 데이터 영역에서 한번 저장된 데이터의 값 자체는 변경되지 않기 때문
참조형의 가변성: 객체 내의 프로퍼티(변수) 영역은 참조하는 데이터값의 주소가 바뀔 수 있기 때문

불변객체: 객체이면서 불변성을 갖게 하는 방법, 즉 복사하였을 때 깊은 복사가 가능하게 하는 방법

var cloneDeep = function (target) {
  result = {};

  if (typeof target === 'targetect' && target !== null) {
    for (var prop in target) {
      result[prop] = cloneDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
};

JavaScript 실행 컨텍스트(remind)

실행 컨텍스트: 코드가 실행되기 위한 환경 정보를 담은 객체로, 함수가 호출될 때 만들어진다.

1. VariableEnvironment

• EnvironmentRecord(초기값)
• OuterEnvironmentReference(초기값)

2. LexicalEnvironment

• EnvironmentRecord
• OuterEnvironmentReference

3. Thisbinding

EnvironmentRecord: 호이스팅과 관련 OuterEnvironmentReference: 스코프 체이닝과 관련

JavaScript This(remind)

This: 특정 실행 컨텍스트가 형성될 때, 특정 객체를 가리키는 특별한 객체

그냥 함수로서 호출될 때는 전역객체(window)를 가리키며, 어떤 객체의 메소드로서 호출될 때는 해당 객체를 가리킴
또한, 생성자 함수에서 인스턴스를 형성 시 해당 인스턴스를 가리킴

콜백함수에서는 콜백함수마다 지정하는 this가 제각각

특정 객체를 this로 지정하기 위한 방법으로는 call, apply, bind가 있음

ES6에서 추가된 화살표 함수는 함수를 호출 시 this binding 과정이 빠져있음

var obj = {
  name: 'jay',
  do: function () {
    console.log(this);
    var arrow = () => {
      console.log(this);
    };
    arrow(); // 함수로서 호출했음에도 this가 window가 아닌 obj를 가리킴(스코프 체이닝처럼)
  },
};

JavaScript 콜백함수(remind)

콜백함수: 다른 함수의 인자로 작용하는 함수로 그 제어권을 특정 함수에게 넘기게 됨

보통 비동기 함수가 콜백함수를 인자로 받음 ex) setTimeout, addEventListener 등

🌟 비동기 처리 관련 생각해보면 좋은 사항

• 자바스크립트는 단일 쓰레드로 동기처리만 가능한데 어떻게 비동기 처리가 가능할까?

  자바스크립트 코드가 돌아가는 환경(Web, Node 등등)에서 제공하는 API들이 비동기 처리를 가능하게 하며 비동기 처리 후 일정 조건에 따라 Task Queue로 콜백함수가 이동하고 자바스크립트 엔진의 콜 스택이 모두 비어졌을 때 이벤트루프가 테스크 큐의 함수를 콜 스택으로 넘겨주어 비동기 처리가 가능하다.

JavaScript 클로저(remind)

클로저: 함수의 변수를 참조하는 내부함수가 외부로 전달되어 호출될 때, 그 변수가 G.C(Garbage Collector)에 의해 수거되지 않고 남아있게 되는 현상
외부로 전달: return 뿐만 아니라 비동기 함수 등을 통한 콜백함수 전달 또한 포함된다.

클로저는 하나의 현상이지만, 수거되어야할 메모리가 계속 남아있기 때문에 따로 메모리 관리를 해주는 것도 필요합니다.

대표적인 고차함수(함수를 인자로 받거나 함수를 리턴하는 함수)를 이용한 클로저 활용법

var outer = function (value) {
  return function () {
    console.log(value + 'hi, there'); // return되는 함수가 outer의 value를 참조하므로 클로저 현상
  };
};

클로저 활용

• 접근 권한 제어(정보 은닉)

// 직접 a, b, c에 접근할 수 있는 방법이 없음(보안 강화)
var security = function () {
  var a = 123;
  var b = 234;
  var c = 345;
  return {
    a_ref: a + 111;
    b_ref: b + 222;
    c_ref: c + 333;
  }
}

• 부분 적용 함수
• 커링 함수

var curry = function (func) {
  return function (a) {
    return function (b) {
      return function (c) {
        return func(a, b, c);
      };
    };
  };
};

var curryArrow = (func) => (a) => (b) => (c) => func(a, b, c);