1. var, let, const
-
변수 선언은 1)선언 2)초기화 단계를 거쳐 수행된다. 각 단어의 정의는 다음과 같다.
- 선언 : 변수명을 등록하여 변수의 존재를 알림
- 초기화 : 값을 저장하기 위한 메모리 공간 확보, 암묵적으로 undefined를 할당 - 할당 : 변수는 텅빈 상자 상태이므로 그 상자 안에 어떤 값을 넣는 작업을 하는 것을 말한다. 변수에 값을 할당할때는 연산자 '='를 쓰고, '=' 뒤에 할당하고자 하는 값을 넣는다(할당연산자).
📌 var
- 재선언, 재할당 가능
- 유효범위 : 함수 레벨 스코프 - 함수 내부에 선언된 변수만 지역변수로 한정, 나머지는 전역변수
- 변수 호이스팅이 발생한다. 뒤에서 선언된 변수가 앞에서 참조되어도 에러가 발생하지 않는다.
- 코드 실행 전에 자바스크립트 엔진이 미리 변수를 선언하고 undefined로 초기화해둔다. 그래서 에러가 발생하지 않는 것. (선언과 초기화가 동시에 이뤄짐)
- var로 선언된 변수는 전역객체의 프로퍼티이다.
📌 let
- 재선언은 불가능, 재할당은 가능
- 함수 / 블록레벨 스코프 : 함수 내부는 물론, if문이나 for문 등의 코드 블록에서 선언된 변수도 지역변수로 취급
📌 const
- 재선언, 재할당 모두 불가능 => 상수 선언 시 사용
- 함수 / 블록레벨 스코프
-
블록 스코프 안에서 let과 const 키워드로 선언한 변수는 스코프 안에서만 참조 가능하다.
-
그런데 var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프 울타리 밖에서도 접근 가능하다. (var는 Only 함수 스코프만 따른다.)
-
let, const의 호이스팅 과정은 좀 다르다.
코드 실행 전에는 변수 선언만 해두고, 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행된다. -
변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간을 TDZ (Temporal Dead Zone)라고 한다.
-
let, const로 선언된 변수는 전역객체 프로퍼티가 아니다.
2. 호이스팅
- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
- 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
- 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
- 유효 범위: 함수 블록 {} 안에서 유효
- 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
- 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
- 실제 메모리에서는 변화가 없다.
- 자바스크립트는 코드를 실행하기 전, 일종의 ‘코드 평가 과정’을 거친다. 이 때 변수 선언문을 미리 실행해두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다. 이를 변수 호이스팅이라 함.
3. scope
- 스코프의 정의는 “식별자 접근 규칙에 따른 유효 범위”이다.
- 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.
- 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. 그 범위를 스코프라고 부른다.
- 그래서 각각을 block scope와 function scope라고 부른다.
- 스코프의 주요 규칙
- 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.
- 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다.
- 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다.
- 스코프는 중첩이 가능하다.
- 스코프는 마치 중첩된 울타리와도 같다.
- 전역 스코프와 지역 스코프
- 가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고 부른다.
- 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope)이다.
- 지역 변수는 전역 변수보다 우선순위가 더 높다.
- 전역 스코프에서 선언한 변수는 전역 변수이다.
- 지역 스코프에서 선언한 변수는 지역 변수이다.
- 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
- Scope의 종류
- 스코프의 두가지 종류 블록 스코프와 함수 스코프가 있다.
- 화살표 함수는 함수 스코프가 아니다. 화살표 함수는 블록 스코프로 취급된다.
4. 동기 / 비동기
📌 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있는 것
📌 비동기 방식은 요청을 보냈을 때 응답 상태와 상관 없이 다음 동작 수행 가능
- 비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환한다.
- 동기는 비동기보다 간단하고 직관적일수 있지만 결과가 주어질 때 까지 아무것도 못하고 대기해야하는 문제가 있다. 비동기는 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간동안 다른 작업을 할 수 있어서 보다 효율적일 수 있다.
5. 이벤트 버블링 / 캡쳐링
📌 버블링
- 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.
- 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있음.
- 이벤트가 발생한 가장 안쪽의 요소는 event.target을 사용해 접근할 수 있다.
- event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있다.
- event.target은 실제 이벤트가 시작된 ‘타깃’ 요소로, 버블링이 진행되어도 변하지 않음
- this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조
- 버블링을 중단하려면 event.stopPropagation()
📌 캡처링
- 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.
- 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
- 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달
8533283@naver.com