22.11.27 일
DAY 14 - javascript (기초다지기)
📌 나머지 매개변수와 스프레드 문법
- 배열과 객체의 복사본 만들기
let arr = [1, 2, 3];
let arrCopy = [...arr];// 스프레드 문법을 사용해 배열을 복사할 수 있다!
📌 변수의 유효범위와 클로저
- 중첩 함수
function sayHiBye(firstName, lastName) {
function getFullName() {
return firstName + " " + lastName;
}
console.log("Hello, " + getFullName());
console.log("Bye, " + getFullName());
}
sayHiBye("yeonju", "jeong");
예시코드를 따라쳐봤다
코딩테스트를 풀면서 중첩함수가 필요했는데, 항상 변수선언을 해서 사용했던거 같다
🌟🌟🌟🌟 본문에서 어렵다고 미리 말할 정도였다 🌟🌟🌟🌟
그치만 자바스크립트의 이해를 위해선 꼭 알아야하는 내용!!!!!!!
- 렉시컬환경
1단계 - 변수
렉시컬환경(Lexical Environment)이라 불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖는다.
렉시컬 환경은 두 부분으로 구성된다.
- 환경 레코드(Environment Record) : 모든 지역 변수를 프로퍼티로 저장 하고 있는 객체.
this값과 같은 기타 정보도 여기에 저장된다.
let phrase = "Hello";
console.log(phrase)phrase 변수에 'Hello'를 할당시킴
여기서 렉시컬 환경에 phrase가 'Hello'가 존재한다.
let 변수로 지정한 저 값은 전역에서 사용 가능하니까, 전역 렉시컬 환경에 저장되어있다
let phrase // 렉시컬환경에 phrase : undefined
phrase = 'Hello' // 렉시컬환경 변화 phrase : 'Hello'
phrase = 'Bye' // 렉시컬환경 변화 phrase : 'Bye'
변수의 할당에 따라 렉시컬환경은 변화한다!
- 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조 : 외부 코드와 연관됨
2단계 - 함수 선언문
함수 선언문(function declaration)으로 선언된 함수는 일반 변수와는 달리 바로 초기화된다는 점에서 차이가 있습니다.
함수 선언문으로 선언한 함수는 렉시컬 환경이 만들어지는 즉시 사용할 수 있다.
// 여기서 함수 선언문과 함수 표현식이란?
함수 선언문 function 함수이름()
함수 표현식 let 함수이름 = function()
// phrase: <uninitialized> say: function
// 전역 렉시컬 환경 초기 상태
pharse는 초기화 전, say는 함수
let phrase = 'Hello'
function say(name) {
console.log(`${phrase}, ${name}`)
}3단계 - 내부와 외부 렉시컬 환경
함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어진다.
이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역변수가 저장된다.
let phrase = 'Hello'
function say(name) {
console.log(`${phrase}, ${name}`);
}
say("Jhon")
// Hello, Jhon먼저, 함수 호출 name = 'John'
내부 렉시컬 환경엔 함수 say가 호출이 되었으니,
name = 'John' 이라는 값이 들어있음
위 예시에서는
외부 렉시컬 환경 === 전역 렉시컬 환경
외부 렉시컬 환경에는, phrase 와
함수 say도 프로퍼티에 있음
// 여기서 phrase가 있는 줄은 알았는데, 함수 say도 여기에 속하네!!
결론은 say 함수의 인자로 Jhon을 줄때,
1번 내부렉시컬환경보고, 그 다음 필요한 phrase를 외부 렉시컬 환경에서 찾는다.
4단계 - 함수를 반환하는 함수
function makeCounter() {
let count = 0;
return function() {
return count++;
};
}
let counter = makeCounter();makeCounter()를 호출하면 호출 할때마다 새로운 렉시컬 환경 객체가 만들어지고 여기에 makecounter를 실행하는데 필요한 변수들이 저장됩니다.
1번 let counter로 인해 makeCounter()가 실행된다.
그래서, 내부 렉시컬 환경에 count = 0 이 저장된다.
2. 전역 렉시컬 환경에는 makeCounter : 함수,
counter : undefined가 있다.
중요!
모든 함수는 생성도니 곳의 렉시컬 환경을 기억한다.
함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬환경에 대한 참조가 저장
-
counter. [[Environment]]엔 {count:0}이라는 렉시컬 환경에 대한 참조가 저장
[[Environment]]는 함수가 생성될때 딱 한 번 값이 세팅되고 영원히 변하지 않음!
여기에 저장된 렉시컬 환경을 외부 렉시컬 환경으로 참조! -
다시 함수가 실행되고 count 값을 찾는데 내부 렉시컬 환경에서는 count의 값이 없기 때문에,
다시 외부 렉시컬 환경에서 count값을 찾느다.
count는 0 이다.
count++가 실행되면서 count가 1 증가하는데, 변숫값 갱신은 변수가 저장된 렉시컬 환경에서 이뤄진다.
// 이러한 이유들로 counter()를 여러변 호출하면 count의 변수가 2,3으로 증가한다.
일단 대략 3번단계까지는 이해가 되는데, 4단계부터 조금 이해가 어려웠다.
대략적으로 내부 렉시컬 환경과 외부 렉시컬 환경은 어떤 의미인지는 파악했는데
count++로 인해 값이 증가하고, 그것을 저장하는 렉시컬 환경이 따로 있다는 이야기로 이해가 되었다.
let 변수는 상황에 따라 할당되는 값이 바뀌면, 다시 변수의 값이 바뀔 수 있는 그러한 것들을 렉시컬 환경에 저장한다는 이야기로 이해했다.
💬 오늘의 느낀점
렉시컬 환경이라는 것이 눈에 보이지는 않지만, 자바스크립에서 무언가 저장되어있는 공간이라고 생각이 든다.
