----- 자바스크립트
- var let const 차이
--재선언 재할당 관련
var 재선언 재할당 가능
let 재선언 불가, 재할당 가능
const 재선언, 재할당 불가
--호이스팅, 스코프 관련
var => function scope
let const => block scope
- 스코프
어느 범위까지 참조하는지
변수, 매개변수의 참조 가능한 범위
// 접근성과 생존기간
- 호이스팅
함수 안에 있는 선언들을 모두 끌어올려서
해당 함수 유효 범위의 최상단에 선언하는것
함수 선언식은 호이스팅 됨
함수 표현식은 호이스팅 되지 않는다.
//
var 변수, 함수 선언만 위로 끌어 올려지며
할당은 끌어올려지지 않는다.
- 클로저
독립적인 변수를 가리키는 함수
클로저 안에 정의된 함수는 만들어진 환경을 기억한다
- 프로토타입
함수가 생성될시 프로토타입이라는 객체가 생성됨
함수의 기능, 속성들이 들어있음
--instance
생성자 함수를 통해서 만든 새로운 객체
--프로토타입 체인
자신의 생성에 관여한 함수 (생성자함수)의
프로토타입 오브젝트에서 속성을 찾는것
- OOP
객체의 관점에서 프로그래밍 하는것
객체들이 서로 유기적으로 동작
클래스와 객체를 조립하는 형태로 프로그램 설계하는 것입니다.
코드의 재사용성과 중복 제거가 주 목적
특징으로 추상화, 캡슐화, 상속 ,다형성이 있다
--추상화
공통적인 속성이나 기능을 묶어서 정의하는것
--캡슐화
내부 동작이 어떻게 돌아가는지 몰라도 사용법만 알면 쓸 수 있도록 클래스 내부를 감추는 기법
--객체
하나하나의 독립된 대상을 나타내는 단어
- this
1. 일반함수 실행방식
--비엄격 모드
this => 글로벌 객체를 가리킴
--엄격한 모드 this (strict mode)
this => undefined 가리킴
2. 점 방식
객체.요소 실행시
. 앞에있는 객체가 주체 (this)가 됩니다.
3. explicit binding
함수에 있는 메소드 call, apply, bind 사용해서 함수를 실행
this의 값을 한 문맥에서 다른 문액을 넘길시 call, aplly 사용
-- call 인자
-- apply 인자가 배열
-- bind
함수의 this가 내가 지정한 객체로 바뀐값을 저장한다.
4. 'new' keyword
new 사용해서 함수를 호출
빈 객체 생성 => this에 객체값이 들어간 식 실행 => 빈 객체에 값이 담김
- 이벤트루프
함수를 실행시 언제 실행 될것인지 순서를 조율해주는 관제탑
callstack, callback queue가 비었는지 수시로 확인
call stack이 비었으면 callback queue의 첫번째 콜백이
들어가서 실행됨
--마이크로 태스크
일반 태스크보다 더 높은 우선 순위를 갖는 태스크 ( 프로미스 )
- 일반함수 화살표 함수 차이
1. this
--일반함수
this 동적으로 결정
--화살표함수
상위 스코프 this 가리킴
화살표 함수
this 통해서 데이터를 가질 수 없음
생성자함수로 생성 불가
arguments 사용 불가
- callback, promise, async/ await
callback
함수의 인자로 콜백을 넘겨주고 비동기 작업 끝나고 콜백함수 실행
단점: 콜백함수의 중첩으로 인한 가독성 저하
promise
비동기 흐름을 관리해주는 객체를 만드는것
리턴, 매개변수 넘기기, 추가기능 넣기,
에러 핸들링 js 네이티브 try, catch 비슷하게 처리 가능
기존의 비동기 흐름인 콜백을 넘겨주고 기다리는 형태에서
프로미스를 사용함으로써 비동기의 주도권을 어느정도 가져오게 되었음
async / awiat
프라미스를 편하게 사용 가능 문법
함수 앞에 async 붙이면 프라미스를 반환
awiat 사용시 프라미스가 처리될때까지 함수 실행을 기다리게 만듬
- 자바스크립트 1급 객체
다른 객체들에 적용 가능한 연산을 모두 지원하는 객체
함수 또한 객체로 표현하기 때문에 자바스크립트 함수를
일급 객체, 일급 함수라고 말함
--조건
변수에 담을 수 있고
인자로 전달 가능
리턴할 수 있다.
- 고차함수 ( Higher Order Function )
함수를 인자로 전달 받거나 함수를 결과로 반환하는 함수
=> 함수를 다루는 함수
- ES5, ES6 뭘 써봤는지, 차이점 ?
es6 이후에 추가된 문법 ?
ES 15 (16 17 18 19 )
--ES5
'use strict'
Array 메소드 ( forEach, map, filter, reduce, every, some, indexOf )
JSON.parse, stringify
--ES 2015 (ES6)
const, let
백틱
화살표 함수
클래스
모듈
구조분해할당 destructuring
Spread 연산자
feth
promise
--ES6 이후 추가 문법
ES2016: Array includes,
ES2017: Async-awiat
ES2018
객체에도 rest, spread 문법 도입
for of -> 비동기문 반복 작업
finally
ES2020
Optional Chaining
- 실행 컨텍스트
코드가 실행되기위해 필요한 환경
실행할 코드에 제공할 환경정보를 모아놓은 객체
// 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 관리가 필요
// 전역 컨텍스트, 함수 컨텍스트, 함수 스코프
자바스크립트의 스코프, 호이스팅, 디스 ,함수 ,클로저 등
동작원리가 적용되어 식별자를 등록하고 관리하는 스코프와
코드 실행 순서를 관리하는 해줌
- 스코프 체인
식별자 중에서 객체의 프로퍼티가 아닌
변수를 검색하는 메커니즘
// 내부 -> 외부 함수 접근 가능
// 외부 -> 내부 함수 접근 불가
- 렉시컬 스코프
스코프는 함수를 선언할때 생긴다
함수를 처음 선언시 함수 내부의 변수는
자기 스코프에서 가장 가까운 상위 범위의
변수를 계속 참조하는것