[Hanaro] 10일차 / JavaScript 기초 (연산자, 제어문, destructuring, scope, 실행 컨텍스트)

JavaScript - 연산자와 제어문, 디스트럭처링

연산자

• 할당
  • ex) let x, y;
    • x = y = 9;
    • x +=y; x %= y; x &= y; x ^= y;
  • object
    • ex) const u = {id: 1, name: ‘hong’, age: 29};
      • let {id, name, addr} = u;
      • let {id, …info} = u;
      • ({id, name} = u);
    • const arr = [1, 2, 3, 4, 5];
      • let [a, b, …c] = arr;
      • [a, b] = [b, a];
• 구조 분해 할당(destructuring)
  • Object Destructuring
    • const {id, name} = {id:1, name:’Hong’};
  • Array / Iterator Destructuring
    • const [a, b] = [1, 2];
  • Default Value Destructuring
    • const {id, name, addr = ‘Seoul’} = {id:1, name:’Hong’, add:’Busan’};
  • Arguments Destructuring
    • function fn({a, b}) {…}
    • fn({a:1, b:2});
  • Class Destructuring
    • const x = new A(1, 2);
    • const {a, b} = x;
  • Array To Object Destructuring
    • const {’0’:a1, ‘1’:a2} = [1, 2];
  • ex) const fn = ({age}) => age;
    • ⇒ (화살표)는 return을 품고 있다.
• 객체/배열 특화 연산자
  • 점(.) 연산자
    • u.name ↔ u[’name’]
  • 대괄호([]) 연산자
    • [1, 2, 3]
  • in 연산자
    • ‘id’ in u ↔ u.hasOwnProperty(’id’) ↔ Reflect.has(u, ‘id’)
  • new 연산자
    • const d = new Dog()
  • instanceof 연산자
    • d instanceof Dog
  • rest(…) 연산자
    • function ff(a, b, …c) { } ⇒ f = (…args)
  • delete 연산자
    • delete u.addr
  • arr?.length 연산자
    • optional chaining (undefined)

 

제어문

• 조건문
  • if … else …
  • switch … case …
• 반복문
  • while(조건 {}
  • do {} while(조건)
  • for(let i = 0; i< 10; i += 1) { }

 

 

JavaScript - 스코프와 실행컨텍스트

• Scope & Lexical Scope Chain
  • scope
    • 각 식별자들의 유효 범위
    • Global, Function(var/function), Block(const/let)
  • Lexical Scope Chain
    • 각 scope 별 Lexical Enviroment 생성되고 이들 hierarchy는 단방향으로 연결되어 있다.
    • 함수는 어디에서 정의했는지에 따라 상위 scope가 결정된다.
      • Static Scope: 정의된 위치 기반
      • Dynamic scope: 어디서 호출, 호출된 시간 기반
      • 동일 scope의 변수는 실행 시간이 가장 늦은 곳의 값이 최종 할당된다.
  • identifier resolution
    • 식별자를 찾아 떠나는 여행
    • local (function, block), scope(inner → outer) → global
      • 오른쪽으로 갈수록 변수의 생명주기는 길어진다. 전역변수 사용 자제하기
• Global Object (전역 객체)
  • JS engine process 생성(시작) 시 맨 먼저 생성
  • BuiltIn(standard) propertoes & functions
  • host object(browser, node API) 및 var/function object도 보유
  • 전역 변수는 전역 객체에 영원히(process 종료시까지) 존재한다.
  • 직접 생성(컨트롤) 못하고 window(globalThis) 키워드 생략 가능
  • const/let은 전역 객체가 아닌 Declarative Enviroment Record에 별도 생성
  • 선언이 없는 식별자는 암묵적 전역으로 전역 객체에 등록된다. (ex. ig = 1;)
• encode/decode URI
  • encodeURI(), decodeURI()
    • 서버가 인식할 수 있는 문자를 제외하고 encoding/decoding
  • encodeURIComponent(), decodeURIComponent()
    • 서버가 인식할 수 있는 문자까지 모조리 encoding/decoding
• 렉시컬(Lexical) 스코프
  • Lexical Scope
    • Global Scope
    • Function Scope
    • Block Scope
  • Module Scope
  • eval(string)
• JS Execution Context
  • ExecutionContext(실행 컨텍스트)를 생성하는 Code의 분류
    • 전역, 함수, eval, module 코드는 각각의 실행 컨텍스트를 생성한다. 이들은 CallStack에 생성되므로 이를 Execution Context Stack이라 부른다.
  • LexicalEnvironment(렉시컬 환경)
    • 실행 컨텍스트가 참조하는 자료구조
  • Global
  • Function
  • ExecutionContext - LexicalEnvironment - EnvRec