💛원시자료형이란?
- number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터
- 변수에
값(value)자체가 담긴다
💜참조자료형이란?
- 대량의 데이터를 다루기에 적합하다.
배열과객체- 할당될 때 보관함의 주소 (reference)가 담긴다.
- 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 보관함.
💞스코프란?
울타리라고 생각하면 편하다.- 변수의 유효범위를 나타낸다 && 중첩가능
- 안쪽 스코프에서 바깥쪽 스코프로 접근 가능
바깥쪽 스코프에서 안쪽으로는 접근 불가.
- global scope : 전역 변수, 전역 변수를 최소화 할수록 side effect를 줄일 수 있다.
- local scope : 지역 변수, 전역 변수보다 더 높은 우선순위
🧨++var 키워드에 대해서
- var로 선언한 변수는 window 객체에 속하게 된다 = 전역변수가 된다
- var은 블록 스코프를 무시한다. 또한, 재선언을 해도 에러를 내지 않는다.
- 전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들수도 있어서 좋지않다.
- 선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역변수로 취급된다.
ex)function myAge(){ age = 15; console.log(age) //15; } myAge(); console.log(age);//15 console.log9window.age); //15
var,let,const의 차이점은 예전 블로그에 공부했던 기록이 있다.
<<<나의 tistory블로그 참조>>>
👀클로저란? 🔑🔑🔑
------------------------today's important point ------------------------
함수와 함수가 선언된 어휘적 환경의 조합
어휘적 환경이란 뭘까! => "변수 및 함수 선언의 형태"
"외부 함수의 변수에 접근할 수 있는 내부 함수"
const sum = (x,y) +=> x+y; sum(3,4) // 7 //화살표 함수를 이용한 덧셈함수
위의 함수와 아래 함수를 비교해보자.
const sum = x => y => x+y; sum(3,4) // 7
함수의 호출이 위와 다르게 두 번 발생했다.
sum은 함수를 리턴하는 함수다.
그렇다면 위의 함수를 함수 표현식으로 바꿔보자.
const sum = function (x) { return function (y) { return x+y; } }//스코프가 분리되어 있음
위처럼 클로저 함수는 '함수를 리턴하는 함수'라고 할 수 있다.
스코프 개념에서 살펴본 것처럼, 위 함수에서 외부 함수는 내부 함수 y에 접근할 수 없고, 내부 함수는 x에 접근이 가능하다.
여기서 클로저 함수의 중요한 점은, 외부 함수의 실행이 끝났을 때도, 외부 함수 내의 변수가 메모리에 저장되기 때문에, 저장한 값을 다시 사용할 수 있다는 점이다.
const sum = function (x) { return function (y) { return x+y; } } const sumresult = sum(7)//x의 값이 7로 온다. sumresult(3) // 10 sumresult(1) // 8
밑의 예는 데이터를 보존할 수 있는 html문자열 생성기로
클로저 함수를 활용한 내용이다.
const tagMaker = tag => content => `<${tag}>${content}</${tag}>` const divMaker =tagMaker('div'); //문자열을 담아둠 divMaker('Mango') // '<div>Mango</div>'
++ 🍒클로저 모듈 패턴
클로저를 이용해서 내부 함수를 하나만 리턴하지 않고,
'객체'에 담아서 여러 개의 내부 함수를 골라서 리턴할 수 있게 만들어준다.
함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.
클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있어서
모듈화에 유리하다.
ex)
const makeFunction = () => { let value = 0; return { increase : () => { value = value + 1 }, decrease : () => { value = value - 1 }, getValue : () => value } } const counter = makeFunction(); makeFunction.increase(); //1 makeFunction.increase(); //2 makeFunction.decrease(); //1 makeFunction.getValue(); //1
===추가
++ 변수 생성 단계
자바스크립트는 3가지 단계를 거쳐 변수를 생성한다.
1. 선언 : 변수 객체를 실행 컨텍스트에 등록
2. 초기화 : 등록된 변수의 메모리를 확보 >> 여기서 변수는 undefined로 초기화된다.
3. 할당 : 초기화된 변수에 실제 값을 할당한다.
let, const로 변수를 생성할 때는 1,2,3단계가 따로 이루어지고,
var을 사용해 변수를 생성할 시에는 선언 단계와 초기화 단계가 한 번에 이루어진다.
함수 선언문을 사용하면 세 단계 모두 한 번에 이루어진다.
++ 유효 범위 : 변수에 접근할 수 있는 범위
블록 스코프 : {}로 감싸진 범위
함수 스코프 : 함수 코드 블록 내부의 범위 (function(){}에서 {}내부의 범위)
