JS 주요문법 이해하고 스코프, 클로저 개념 익히기!
사실 완벽한 이해란 없는것,,,?ㅎㅎ🫥
- 원시 자료형
원시 자료형이란 객체가 아니면서 method를 가지지 않는 6가지의 타입이다.
string, number, bigint, boolean, undefined, symbol, (null)
원시 자료형은 위 그림과 같은 데이터 보관함에 저장할 때 하나의 데이터 만을 담을 수 있다.
데이터가 "하나"의 정보를 담고 있다.
- 참조 자료형
원시 자료형이 아닌 모든 것은 참조 자료형이다.
참조 자료형이 변수에 할당되는 경우는, 변수에 이 데이터가 저장되는 곳의 주소가 할당된다.
배열([])과 객체({}), 함수(function(){})가 대표적이다.
참조 자료형은 원시자료형이 보관되는 데이터 보관함이 아닌 특별한 데이터 보관함(heap)에 저장된다.
데이터가 위치한 곳을 가리키는 주소가 변수에 저장되고, heap에서는 동적으로 변한다. 데이터는 별도로 관리되고, 우리가 직접 다루는 변수에는 주소가 저장되기 때문에 reference data type이라고 불린다.
- 예제 이해하기
let first = [10, 20, 30, 40];
let second = first;
second[0] = 5;-> second는 first가 가지고 있는 주소를 그대로 가지고 있다. 값만 복사했다면 second의 0번째 인덱스에 있는 요소를 변경하면 first는 변경되지 않겠지만, 주소를 공유하고 있기 때문에 first도 똑같이 변경된다.
-> first === second (true)
-> first의 0번째 인덱스에 있는 요소는 5이다.
let x = { foo: 3 };
let y = x;
y.foo = 2;
x.foo = ? // 2->y.foo = 2, 값이 3이었던 y.foo에 2를 할당했다.
그러면 x.foo는 무엇일까?
현재는 같은 주소를 바라보고 있는 y.foo가 2로 변경이 되었으니, 같은 곳을 바라보고 있었던 x.foo도 2가 된다.
// 다음 코드가 실행된 후, score의 값은 무엇일까?
let score = 80;
function doStuff(value) {
value = 90;
}
doStuff(score) //80-> score의 값 80은, 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달하게 된다.
그래서 함수에서 어떤 일이 발생했던가와 관련이 없이 score는 초기에 할당된 값 80이 그대로 유지된다.
- 스코프
👉 스코프란 무엇일까?
"변수의 유효범위" 즉, 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념
- 변수 접근 규칙
범위가 중괄호(블록) 또는 함수에 의해 나누어지고 그 범위를 스코프라고 부른다.
스코프는 중첩이 가능하다.
- 예제 이해하기
let name = '김코딩';
function showName() {
let name = '박해커'; // 지역 변수
console.log(name); // 두 번째 출력 : 박해커
}
console.log(name); // 첫 번째 출력 : 김코딩
showName();
console.log(name); // 세 번째 출력 : 김코딩-> 두번째 출력은 지역 변수가 전역 변수보다 우선순위가 높으므로 지역 변수 name인 '박해커'가 출력된다.
-> 세번째 출력은 첫번째 출력과 마찬가지로 전역 변수 name인 '김코딩'을 사용한다. 지역변수에 선언된 name변수는 안쪽 스코프이므로 접근이 불가능하기에 전역변수인 '김코딩'을 출력한다.
let name = '김코딩';
function showName() {
name = '박해커';
console.log(name); // 두 번째 출력 : 박해커
}
console.log(name); // 첫 번째 출력 : 김코딩
showName();
console.log(name); // 세 번째 출력 : 박해커-> '박해커'라는 값으로 할당하고 있는 name 변수는 let키워드를 사용한 선언이 존재하지 않는다. 전역에 선언된 name 변수를 그대로 사용한다는 뜻이다.
-> 첫번째 출력은 함수가 실행되기 전이므로 '김코딩'을 출력하고 그 이후에는 전역변수 name의 값이 '박해커'로 바뀌기 때문에 모두 '박해커'가 출력된다.
- 스코브의 종류와 let,const,var
1️⃣블록스코프 : 중괄호로 둘러싼 범위, 화살표 함수로 둘러싼 범위
2️⃣함수스코프 : 함수로 둘러싼 범위
-var로 선언한 변수는 전역 변수가 되므로 let과 const를 적극활용하는 것이 좋다.
-age=20과 같이 선언 없이 할당된 변수도 전역변수로 취급된다. 
- 클로저
👉 클로저란 무엇일까?
함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
클로저 함수는 어휘적 환경을 메모리에 저장하기에 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수를 사용할 수 있다.
👉 클로저 함수란 무엇일까?
외부 함수의 변수에 접근할 수 있는 내부 함수
👉 클로저 함수의 특징
-함수를 리턴하는 함수이다. 함수를 리턴하는 함수가 클로저의 형태를 만든다.
-리턴하는 함수에 의해 스코프(변수의 접근범위)가 구분된다.
-내부함수는 외부 함수에 선언된 변수에 접근 가능하다.
eg) 보라색 박스 : 외부함수와 외부함수의 변수 x
노란색 박스 : 내부함수와 내부함수의 변수 y
