웹풀스택 공부 중
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 (디버깅 및 흐름 분석이 어려워진다) = 문제가 발생한 원인을 찾을 수 없다
- Multi-Thread 환경에서 매우 중요하다
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: 선언 및 할당된 변수 및 함수 저장
- "여러 변수 및 함수를 담는 영역"
- Stack: 함수 실행 순서대로 적재 및 수행
JS Engine의 동작 원리
- 함수 실행을 위한 메모리 영역 = 실행 Context + Lexical 환경
- Stack: 실행 Context = 함수 실행 환경
- 실행 Context
- 프로세스: 프로그램에 CPU와 Memory의 자원이 할당된 상태
- 모든 함수의 구동은 그 함수 구동을 위한 메모리 영역을 확보하는 것 부터 시작한다
- 함수가 실행될 때 실행 Context가 한개 생성된다
- 함수 한개당 실행 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에서 초기화가 된다
- var vs const vs 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과 같은 성질을 가졌다
- Hoisting되지 않는다
const hello = function() {
console.log("Hello World")
}
hello()
- 화살표 함수
- 단순히 표현만 간략해지는게 아니다!
- 선언문 함수는 그 자체로 this, argument, super, new.target 같은 함수가 내부에 바인딩 되어 있다
- 정확히는 숨겨져 있다
- ex.) 일반 함수에서는 this는 동적 바인딩 (Dynamic Scope)이다
- 하지만 화살표 함수는 이것들을 가지고 있지 않다
- this를 사용한다면 선언되어있지 않기에 Scope Chaining을 통해 Lexical Scope로부터 가져온다
- 정확히는 숨겨져 있다
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
13 - 1. JavaScript 심화 문법 (2) | 2024.10.10 |
---|---|
10 - 2. Module System (4) | 2024.10.10 |
10 - 1. JS 객체 정의 및 사용 (2) | 2024.10.08 |
JavaScript의 기본 - 2 (0) | 2024.09.10 |