JavaScript의 기본

JS

• 함수형 프로그래밍 기반으로 객체지향의 기반을 얹었다
• Zod: 이후에 추가할 내용
• 함수형 프로그래밍의 페러다임: 일급 함수 & 순수 함수

일급함수

• 함수 변수 할당 = 함수 표현식
• var expression = function() { console.log('') } expression()
• 함수 파라미터
• var array = [1,2,3,4,5] var parameter = (elemet) => { return element * 10 } var calcarray = array.map(parameter) console.log(calcarray)
• 함수 반환
• function returnvalue(unit){ return (paratmer) => { console.log(parameter * unit) } } var returned = returnvalue(10) returned(1230)

순수함수

• Thread-safe, no side-effects(부수효과 없음), 참조 투명성
  • Multi-Thread 환경에서 매우 중요하다
    • MT는 병렬적으로 수행되기에
  • 참조 투명성: 함수가 외부 상태에 의존하지 않는다
    • 같은 Parameter를 넣으면 같은 결과가 나와야한다
    • 외부에 영향을 받지 않는다
      • ex.) Global Variable에 의존하지 않는다
  • 부수 효과 없음: 함수가 외부 상태를 변경하지 않는다
    • 했던 어떤 행위가 예상하지 못한 결과를 가져오면 안된다
    • ex.) MT에서 외부 상태를 서로 바꾸는 상황
    • ex.) Global Variable을 바꾸지 않는다
      • 몰래 declare로 변경하지 말고 반환을 해라
  • 장점:
    • Testability (테스트 가능): Debugging 가능
    • Memoization 가능: 중간에 값을 캐싱할 수 있다
  • 비순수함수의 단점:
    • Side Effect 발생
    • Unpredictable Outcome
    • Difficult to Reason (디버깅 및 흐름 분석이 어려워진다) = 문제가 발생한 원인을 찾을 수 없다

---

Immutability (불변성)

• Parameter은 외부 상태 이기때문에 변경이 있으면 안된다
  • 즉, 무조건 새로운 값이 반환되어야 한다는 의미이다
• 특히 React에서 더욱 중요하다
  • React가 Rerender를 위한 상태 변경 기준을 "객체 주소의 변경"으로 인지하기 때문이다

JS 변수 선언 방법

• var: 재선언 가능 + 재할당 가능 + 함수레벨 스코프
  • 호이스팅 발생 with initialization
• let: 재선언 불가 + 재할당 가능 + 함수레벨 스코프
  • 호이스팅 발생 without initialization (Reference Error)
• const: 재선언 불가 + 재할당 불가 + 블록레벨 스코프
  • 호이스팅 발생 without initialization (Reference Error)

Hoisting (선 선언): 말려올라간다, 그래서 var, const, let, function이 먼저 declare 된다

JS Engine의 구성

• 실행: 싱글 스레드
• 메모리: Stack + Heap 두개만 기억하면 된다
  • Stack: 함수 실행 순서대로 적재 및 수행
    • "함수 실행할때 필요한 영역"
  • Heap: 선언 및 할당된 변수 및 함수 저장
    • "여러 변수 및 함수를 담는 영역"

JS Engine의 동작 원리

• 함수 실행을 위한 메모리 영역 = 실행 Context + Lexical 환경
• Stack: 실행 Context = 함수 실행 환경
  • 실행 Context
    • 프로세스: 프로그램에 CPU와 Memory의 자원이 할당된 상태
    • 모든 함수의 구동은 그 함수 구동을 위한 메모리 영역을 확보하는 것 부터 시작한다
    • 함수가 실행될 때 실행 Context가 한개 생성된다
      • 함수 한개당 실행 Context 한개
• Heap: Lexcial Environment = 변수 함수 저장소
  • Lexical Environment에는 let, const, 함수가 저장된다 (Block Level)
  • Variable Environment에는 var 변수가 저장된다 (Functional Level)

JS Engine의 수행 방식

• 변수는 두가지 작동 방식을 가지고 있다: 선언 (declare)와 할당 (assign)
  • 사이에 초기화가 필요하다
• 함수는 두가지 작동 방식을 가지고 있다: 선언 (declare)와 실행 (execute)
  • 사이에 초기화가 필요하다
• 변수 함수 선언은 Creation Phase (Compile Phase, Pre-parsing Phase)에서 정의된다
  • var vs const vs let
    • var: 선언과 동시에 초기화
    • const & let: 선언되었을 때 초기화가 되지 않는다
      • Execution Phase에서 초기화가 된다
        • TDZ (Temporal Dead Zone): const & let 선언과 초기화 사이의 영역이다
• 변수 할당, 함수 실행은 Execution Phase에서 실행된다

Scope

• Lexical Scope = 박제 (Static)
  • 함수를 호출한 시점을 기준으로 변수를 반환한다
  • "함수가 참조하는 변수의 scope영역이 선언 시점에서 접근한다"
  • 함수가 선언된 곳
• Dynamic Scope
  • 함수가 호출된 곳
  • "수행 시점에서 접근 한다"
  • 어디서든 호출이 될 수 있기 때문에 Dynamic 이다
• Scope Chaining: Execution Phase 시 변수 선언이 안되어있을때, 호출 순서로 이전 실행 Context에서 검색을 한다
  • 없다면 계속 거슬러 올라가면서 탐색을 한다
  • 그래도 없다면 그 자리에 var 선언 및 할당을 한다

Function 작성 방법

• 함수 선언문 (declartion) + 함수 표현식 (expression)
  • 선언문 = 함수 선언 + 정으;
    • Hoisting된다
    • 함수의 이름이 있다 (기명 함수)

      function hello() {
      console.log("Hello World")
      }
      hello()

• 함수 표현식 = 식별자(변수) + 연산자 (=) + 리터럴(함수)
  • Hoisting되지 않는다
    • 변수 Hoisting만 발생한다
  • const와 let과 같은 성질을 가졌다

 const hello = function() {
     console.log("Hello World")
 }

 hello()

• 화살표 함수
  • 단순히 표현만 간략해지는게 아니다!
  • 선언문 함수는 그 자체로 this, argument, super, new.target 같은 함수가 내부에 바인딩 되어 있다
    • 정확히는 숨겨져 있다
      • ex.) 일반 함수에서는 this는 동적 바인딩 (Dynamic Scope)이다
    • 하지만 화살표 함수는 이것들을 가지고 있지 않다
      • this를 사용한다면 선언되어있지 않기에 Scope Chaining을 통해 Lexical Scope로부터 가져온다