어제 배운 개념이 완벽하게 이해되지 않아 오늘 강의를 더 듣고 좀 더 공부한 후에 올려본당👊
Scope
참조할 수 있는 유효범위
- 전역 스코프
- 지역 스코프
실행 컨텍스트 (Execution Context)
실행 가능한 코드가 실행되기 위해 필요한 환경(객체 형태)
- 변수
- 함수
- 스코프
- this
코드를 형상화하고 구분하는 추상적 개념
코드가 실행 시 생성되고, 완료되면 소멸됨
//예시
"Context":{
variableObject:{
arguments:null,
variable:[...]
},
scopeChain:["해당되는 스코프"],
this:"함수가 호출된 형태에 따라 할당"
//컨텍스트가 만들어지는 상황에 따라 값이 바뀌어 들어감실행 컨텍스트는
1. 생성 단계
- Scope 정보 및 this 생성
- 메모리 공간을 확보 (선언)
- 실행 단계
- 실제 코드가 1줄씩 실행되는 단계
- 변수에 값을 할당
스택 구조
선입선출 구조 => 큐(que)
스택 구조는 나중에(안쪽에?) 실행된게 먼저 실행되고 사라짐
전역 실행 컨텍스트
자바스크립트가 실행될 때 전역실행컨텍스트(Global Execution Context)가 만들어진다.
함수 실행 컨텍스트
함수가 실행될 때 함수 실행 컨텍스트(Function Execution Context)가 만들어진다.
Eval 실행 컨텍스트
현재는 거의 쓰지 않음!!
Lexical Scope
함수 호출이 아닌 함수 선언한 곳을 기준으로 스코프를 결정
정적 스코프라고 불림
호이스팅(Hoisting)
코드 실행 전(생성 단계), 변수/함수 선언(메모리 공간 확보)이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상
//1. 함수 선언
function insertText(text){
document.write(text);
return "ok"
}
//2. 함수 표현식
let insertText = function(text){
document.write(text);
return "ok";
}호이스팅 개념에서는,
함수 선언 방식은 함수 내용까지 모두 메모리로 바로 할당이 되지만, 함수 표현식은 변수에 할당하는 것이기 때문에 함수는 호이스팅 되지 않는다.
dynamic binding
화살표 함수에서의 this
함수가 생성된 환경을 가리키도록 고정된다.
호출된 함수를 둘러싼 실행 컨텍스트
call, bind, apply를 사용해도 바뀌지 않고,
setTimeout등 this가 바뀌는 상황에서 유용하다.
일반 함수에서의 this
함수를 호출된 환경을 가리키며, this는 동적으로 바뀔 수 있다.
* 일반 함수는 객체의 메서드로 호출될 때 객체가 this로 할당된다.
새롭게 생성된 실행 컨텍스트를 가리킨다.
Closure
함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합
자신이 선언될 당시의 환경을 기억하는 함수
함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.
함수와 함수가 사용하는 변수들을 저장한 공간을 클로저(closure)라 한다.
함수는 일급 객체
일급객체: 다른 변수처럼 대상을 다룰 수 있다.
자바스크립트에서 함수는 일급 객체로, 변수처럼 다룰 수 있다.
Rest Operator
Spread Operator
배열의 필드 들을 객체에 spread operator로 합치면?
배열은 iterable성질을 가진 객체이므로, 객체에 spread operator로 합쳐도 에러가 발생하지 않는다. 배열의 각 index에 있는 값들이 '0':1, '1':2처럼 객체에 합쳐진다.
객체의 필드들을 배열에 spread operator로 합치면?
일반 객체는 iterable 성질이 없으므로, 배열 같은 iterable 객체에 합치려하면 에러가 발생한다. 단, iterable을 지원하는 객체는 spread operator로 합칠 수 있다.
spread operator로 객체를 복사하면, 객체나 배열 필드의 경우 reference만 복사 된다.
deep copy를 하고 싶다면 별도의 작업을 해줘야함!
고차원 함수
함수를 인자로 받거나 리턴하는 함수
map()
배열 중 각각 하나씩 따로 처리하고 다시 합칠 수 있음
원본 값을 변경하지 않음
새로운 배열 반환
forEach()
for문을 함수 형태로 사용할 수 있음
filter()
각 요소를 돌면서 조건 값이 true인 값만 새 배열에 담아서 반환
reduce()
각 요소를 돌며 누적으로 수행하는 함수
let nums = [1, 2, 3, 4, 5];
const initialValue = 0;
let result = nums.reduce(
(prevNum, nextNum) => prevNum + nextNum, initialValue
);
console.log(result); //15사실 이전까지의 수업은 생각보다 할만한데..? 싶은 생각이 들었는데 이번 수업 부터는 조금씩 이해가 안되는 문제를 마주치기 시작했다...!
어느정도 이해가 되고 있긴 하지만 아직 확실하게 안다고 말은 못할것같은 느낌...! ㅜㅠ
아자아자💪
