week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명)

# week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명) ## PH

• 2024-08-12 : First posting.

## TOC ## var, let, const 를 서로 비교 var 는 예전에 쓰던 변수 선언 방식으로 hoisting, 중복 선언 가능, function scope 만 지원 등 프로그래밍을 할 때 안좋은 점, 헷갈리게 하는 점이 너무 많아 요새는 안쓰는 추세로 가고 있다. let 은 변하는 값을 담는 변수를 선언하는 방식으로 primitive 변수나 JSON 등에 두루 쓸 수 있고, const 는 한번 할당되면 변하지 않는 변수 선언으로 JSON 등의 참조방식의 데이터는 그 JSON 안에서 수정이 가능하다지만, 그 JSON 을 나타내는 reference 는 변하지 않는 고정값으로 선언된다. 따라서 값이 변하지 않을 변수나 함수 등은 const 로 선언하는 것이 추천되며, 이 외의 변하는 값을 가지는 변수는 let 을 사용하기를 권장한다. ## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 function 으로 정의된 함수에서의 this 와 arrow function 으로 정의된 함수에서의 this 가 다르게 쓰이기 때문에 꽤나 신경써줘야 하는 개념으로 global scope 에서의 this 는 window 객체를 가리킨다. Node.js 에서는 또 다르게 전역 객체를 가리키기도 한다. JSON 의 method function 에서 function 형태로 정의 된 method 라면 this 는 그 함수를 부른 객체를 나타내며, 따라서 그 객체의 property 들도 접근이 쉽게 된다. 하지만 arrow function 형태로 정의 된 method 라면 this 는 여전히 global scope 의 window 객체를 나타낸다는 것에 주의해야 한다. function 의 .bind, .apply, .call 로 JSON 을 연결시켜 줘도 arrow function 에서 this 는 global 객체 window 를 가리키게 된다. ``` // with bind const test = { name: "jake", foo(callback) { setTimeout(callback.bind(this), 100) } }; test.foo(() => {console.log(this.name)}); // undefined ```/ ## 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명 Lexical 이란 어휘적인, 사전의, 사전적인 이란 의미를 갖는 단어로서 Lexical Scope 란 지역변수가 선언되고 유지되는 scope 를 말한다. 렉시컬 스코프(Lexical Scope)는 코드 작성 위치에 따라 변수와 함수의 유효 범위를 결정하는 방식입니다. 이는 함수가 선언된 위치에 따라 스코프가 결정되며, 함수가 호출되는 위치와는 무관합니다. 렉시컬 스코프는 정적 스코프(Static Scope)라고도 불리며, 대부분의 현대 프로그래밍 언어에서 사용됩니다. 렉시컬 스코프의 주요 특성

정적 스코프:
컴파일 시 코드 분석을 통해 스코프 체인이 결정됩니다. 실행 과정에서 동적으로 변하지 않습니다. 블록 스코프와 함수 스코프:
let, const, function 키워드를 사용하여 변수와 함수를 선언할 때 적용됩니다. 블록 스코프는 {} 안에서 유효하며, 함수 스코프는 함수 내에서 유효합니다. 스코프 체인:
변수나 함수를 사용할 때, 현재 코드 블록의 스코프 체인에서 해당 변수나 함수를 검색합니다. 만약 현재 블록에서 찾지 못하면, 외부 블록의 스코프 체인을 차례대로 검색합니다.

렉시컬 스코프의 예시 ``` // JavaScript function outerFunction(name) { let outerVariable = `나는 외부 변수! ${name}`; function innerFunction() { console.log(outerVariable); // '나는 외부 변수!' 출력 } return innerFunction; } const innerFunc = outerFunction("kipid"); outerFunction("Another name"); innerFunc(); // "나는 외부 변수! kipid" 가 출력 됨. 참조되는 내부 변수의 값이 메모리에 계속 저장되어 있음을 알 수 있음. ```/ 위 예시에서 innerFunction 은 outerFunction 내에서 선언되었기 때문에 outerVariable 에 접근할 수 있습니다. 이는 함수가 선언된 위치에 따라 스코프가 결정되는 렉시컬 스코프의 특성 덕분입니다. 렉시컬 스코프는 코드 가독성을 향상시키고, 변수 오염을 방지하며, 재귀 함수 구현을 용이하게 합니다. 이를 통해 코드의 유지보수성과 안정성을 높일 수 있습니다. ## RRA