원시 자료형과 참조 자료형
원시 자료형 (primitive data type)
numberstringbooleannullundefined같은 고정된 저장공간을 차지하는 데이터- 변수에 하나의 데이터만 담음
참조 자료형 (reference data type)
- 대량의 데이터를 다루기에 적합한 '배열','객체','함수'
주소를 부여하여 그 안에 값을 넣음 - 변수에 할당할 때 변수에 값이 아닌 주소를 저장함
- 고정된 크기의 보관함이 아닌 동적으로 크기가 변하는 특별한 보관함(heap)을 사용
스코프
변수에 접근할 수 있는 범위.
중괄호(블록) 안쪽에 변수가 선언되었는지, 바깥쪽에 선언되었는지가 중요하며 이 범위를 스코프라고 부름
- 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서만 사용가능
- 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용불가
- 스코프는 중첩이 가능함
- 지역스코프에서 선언한 변수 -> 지역 변수
- 전역스코프에서 선언한 변수 -> 전역 변수
- 우선순위: 지역 변수 > 전역 변수
ex1)
let name = '김코딩';
function. showName() {
let name = '박해커'; // 지역 변수
console.log(name); // 지역 변수의 영향을 받아 '박해커 출력'
}
console.log(name); // 전역 변수 스코프이므로 '김코딩' 출력
showName();
console.log(name); // 여전히 전역 변수 스코프이므로 '김코딩'출력.. 안쪽 스코프로는 접근이 불가 ex2)
let name = '김코딩';
function. showName() {
name = '박해커'; // 변수 선언없이 그냥 name에 값 할당
console.log(name); // '박해커 출력'
}
console.log(name); // 전역 변수 스코프이므로 '김코딩' 출력
showName();
console.log(name); // showName함수 실행 후에는 전역변수 name의 이름이 바뀌기 때문에 '박해커'출력스코프의 종료
블록 스코프 (중괄호 기준으로 구분) <- 화살표 함수는 블록 스코프에 포함
함수 스코프 (함수 선언식 및 함수 표현식 기준으로 구분)
var: 블록스코프를 무시하고 함수 스코프를 따르는 아이
for (let i = 1; i < 5; i++) {
console.log(i);
}
console.log('final i:', i); // ReferenceError : for문을 벗어났기 떄문에 for (**var** i = 1; i < 5; i++) {
console.log(i);
}
console.log('final i:', i); // 5: var 키워드를 사용했기 때문let > var 선호 이유
- 블록 단위로 스코프 구분했을 때 훨씬 더 예측 가능한 코드를 작성할 수 있는
let키워드 사용이 권장됨 var키워드는 재선언을 해도 에러가 나지 않지만let키워드는 재선언을 방지함
const
let과 동일하게 블록 스코프를 따름- 값의 변경을 최소화하여 안전한 프로그램을 만들 수 있음
- 유일한 값을 할당하는 경우
const사용을 권장함
window객체 (브라우저에만 존재)
- 브라우저 창을 대표하는 객체
- 브라우저 창과 관계없이 전역 항목도 담고 있음
- var로 선언된 전역 변수와 전역 함수가 window객체에 속함
주의사항
- 아무런 키워드 없이 변수의 이름을 사용하는 경우 무조건 global scope로 들어감
letconst로 선언하면 Script로 들어감- 함수 안에서 선언하는 경우 Local로 들어감
<그림:생활코딩 유튜브 참조>
스코프 체이닝 (scope chaining)
Local < Script < Global
종합퀴즈 다시풀기
9번
let x = 10;
function outer () {
x = 20;
function inner () {
let x
x = x + 20;
return x;
}
inner();
}
outer();
let result = x;클로저(closure)
- 자신이 선언될때의 맥락을 기억하는 함수
- 외부함수의 변수에 접근할 수 있는 내부함수
- 함수를 리턴하는 함수
- 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킴
- 함수가 생성될 당시의 외부변수를 기억하고 생성 이후에도 계속 접근 가능
- 외부 함수의 실행이 끝나더라도 외부함수 내 변수를 사용할 수 있음
클로저의 장점
- 데이터와 메서드를 같이 묶어서 다루는 모듈화에 유리(학습 더하기)
종합퀴즈 다시풀기
1번
let seenYet = function() {
let archive = {name: 'kimcoding', age: 28};
return function(val) {
if (archive[val]) {
return true;
}
archive[val] = true;
return false;
}
}
oneThing