[JSTS-002][입문] 타입·함수·스코프·클로저 이해하기
페이지 정보
작성자 기술팀장 작성일 26-08-29 16:36 조회 243 댓글 0본문
[이번 수업]
JavaScript의 타입, 함수, 스코프, 클로저를 연결해 배웁니다. 값의 종류를 확인하고 이름이 보이는 범위를 구분한 뒤, 함수가 바깥 상태를 기억하는 과정을 Node.js로 확인합니다.
[선수지식]
JSTS-001의 변수 선언과 Node.js 실행 방법을 알면 됩니다. 터미널에서 node --version이 동작하지 않으면 Node.js 공식 사이트의 LTS 버전을 먼저 설치하세요.
[학습목표]
1. 값의 타입과 변수의 차이를 설명한다.
2. 함수의 매개변수·반환값과 스코프를 구분한다.
3. 클로저가 바깥 상태를 기억하는 모습을 확인한다.
4. TypeScript 타입 검사와 실행 중 입력 검증을 구분한다.
[핵심개념]
타입은 값의 종류입니다. JavaScript의 기본 값에는 undefined, null, boolean, string, number, bigint, symbol이 있고, 그 밖에는 객체가 있습니다. 변수는 값을 가리키는 이름이며 다른 타입의 값을 다시 넣을 수도 있습니다. 이를 동적 타입이라고 합니다. typeof는 간단한 확인에 유용하지만 typeof null은 역사적인 이유로 object입니다. 배열은 Array.isArray로 확인하세요. 뜻하지 않은 형 변환을 줄이려면 ==보다 ===를 우선합니다.
함수는 매개변수라는 입력을 받아 일을 하고 결과를 return으로 돌려주는 재사용 가능한 값입니다. 함수도 변수에 담거나 다른 함수가 반환할 수 있습니다. 스코프는 선언한 이름을 쓸 수 있는 범위입니다. const와 let은 중괄호 블록 안에서만 보이고 var는 함수 범위를 따릅니다. 재할당이 없으면 const, 필요할 때만 let을 쓰는 습관이 좋습니다.
클로저는 함수와 그 함수가 만들어진 렉시컬 환경, 즉 코드상 바깥 범위의 연결입니다. 바깥 함수가 끝나도 반환된 안쪽 함수가 count를 참조하면 상태가 남습니다. TypeScript는 number 같은 타입 표기로 실행 전에 일부 실수를 찾지만 만들어진 JavaScript에서는 표기가 사라집니다. 외부 입력은 실행 중에도 검사해야 합니다.
[따라하기]
lesson.js 파일에 아래 내용을 저장하세요.
const course = "JS";
function makeRecorder(label) {
let count = 0;
return function record() {
count += 1;
return `${label}: ${count}`;
};
}
const record = makeRecorder(course);
console.log("types:", typeof course, typeof record);
console.log(record());
console.log(record());
{
const onlyHere = "block";
console.log("scope:", onlyHere);
}
Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 같은 명령을 실행합니다.
node lesson.js
예상 결과:
types: string function
JS: 1
JS: 2
scope: block
record를 호출할 때마다 count가 늘어납니다. makeRecorder 실행은 끝났지만 record가 count를 참조하기 때문입니다. onlyHere를 중괄호 밖에서 출력하면 ReferenceError가 납니다.
[흔한 실수]
첫째, const가 객체 내부까지 불변으로 만든다고 생각합니다. const는 다른 값을 다시 대입하지 못하게 할 뿐 객체 속성은 바뀔 수 있습니다. 둘째, var를 블록 변수처럼 사용해 이름이 예상보다 넓게 보입니다. 셋째, 콜백이 바깥 변수를 언제 읽는지 놓칩니다. 넷째, 클로저가 큰 객체를 참조해 불필요한 메모리를 남깁니다.
[보안 주의]
클로저는 암호화된 비밀 저장소가 아닙니다. 브라우저에 보낸 비밀번호나 API 비밀키는 확인될 수 있으므로 서버에 보관하세요. 사용자 문자열을 eval이나 Function 생성자에 넣지 마세요. TypeScript를 사용해도 JSON·폼·환경 변수 같은 외부 값은 허용 범위와 길이를 실행 중에 검사합니다. 필요 없는 이벤트 리스너와 타이머는 해제하세요. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
makeRecorder("Python")으로 두 번째 기록기를 만들어 숫자가 서로 독립적으로 증가하는지 확인하세요. 이어서 count를 0으로 돌리는 reset 기능과 label의 typeof 검사를 추가하세요.
[확인문제]
1. typeof null과 배열 타입 확인에서 주의할 점은 무엇인가요?
2. const·let의 블록 스코프와 var의 함수 스코프는 어떻게 다른가요?
3. makeRecorder가 끝난 뒤에도 count가 유지되는 이유는 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 글은 WEB-002 CSS 박스 모델·선택자·레이아웃입니다. JavaScript 트랙에서는 JSTS-003 배열·객체와 불변 데이터 처리로 이어집니다.
[공식 참고 자료]
ECMAScript 언어 타입 명세
https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html
MDN JavaScript 함수 가이드
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
MDN 클로저 가이드
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
TypeScript Everyday Types
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
JavaScript의 타입, 함수, 스코프, 클로저를 연결해 배웁니다. 값의 종류를 확인하고 이름이 보이는 범위를 구분한 뒤, 함수가 바깥 상태를 기억하는 과정을 Node.js로 확인합니다.
[선수지식]
JSTS-001의 변수 선언과 Node.js 실행 방법을 알면 됩니다. 터미널에서 node --version이 동작하지 않으면 Node.js 공식 사이트의 LTS 버전을 먼저 설치하세요.
[학습목표]
1. 값의 타입과 변수의 차이를 설명한다.
2. 함수의 매개변수·반환값과 스코프를 구분한다.
3. 클로저가 바깥 상태를 기억하는 모습을 확인한다.
4. TypeScript 타입 검사와 실행 중 입력 검증을 구분한다.
[핵심개념]
타입은 값의 종류입니다. JavaScript의 기본 값에는 undefined, null, boolean, string, number, bigint, symbol이 있고, 그 밖에는 객체가 있습니다. 변수는 값을 가리키는 이름이며 다른 타입의 값을 다시 넣을 수도 있습니다. 이를 동적 타입이라고 합니다. typeof는 간단한 확인에 유용하지만 typeof null은 역사적인 이유로 object입니다. 배열은 Array.isArray로 확인하세요. 뜻하지 않은 형 변환을 줄이려면 ==보다 ===를 우선합니다.
함수는 매개변수라는 입력을 받아 일을 하고 결과를 return으로 돌려주는 재사용 가능한 값입니다. 함수도 변수에 담거나 다른 함수가 반환할 수 있습니다. 스코프는 선언한 이름을 쓸 수 있는 범위입니다. const와 let은 중괄호 블록 안에서만 보이고 var는 함수 범위를 따릅니다. 재할당이 없으면 const, 필요할 때만 let을 쓰는 습관이 좋습니다.
클로저는 함수와 그 함수가 만들어진 렉시컬 환경, 즉 코드상 바깥 범위의 연결입니다. 바깥 함수가 끝나도 반환된 안쪽 함수가 count를 참조하면 상태가 남습니다. TypeScript는 number 같은 타입 표기로 실행 전에 일부 실수를 찾지만 만들어진 JavaScript에서는 표기가 사라집니다. 외부 입력은 실행 중에도 검사해야 합니다.
[따라하기]
lesson.js 파일에 아래 내용을 저장하세요.
const course = "JS";
function makeRecorder(label) {
let count = 0;
return function record() {
count += 1;
return `${label}: ${count}`;
};
}
const record = makeRecorder(course);
console.log("types:", typeof course, typeof record);
console.log(record());
console.log(record());
{
const onlyHere = "block";
console.log("scope:", onlyHere);
}
Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 같은 명령을 실행합니다.
node lesson.js
예상 결과:
types: string function
JS: 1
JS: 2
scope: block
record를 호출할 때마다 count가 늘어납니다. makeRecorder 실행은 끝났지만 record가 count를 참조하기 때문입니다. onlyHere를 중괄호 밖에서 출력하면 ReferenceError가 납니다.
[흔한 실수]
첫째, const가 객체 내부까지 불변으로 만든다고 생각합니다. const는 다른 값을 다시 대입하지 못하게 할 뿐 객체 속성은 바뀔 수 있습니다. 둘째, var를 블록 변수처럼 사용해 이름이 예상보다 넓게 보입니다. 셋째, 콜백이 바깥 변수를 언제 읽는지 놓칩니다. 넷째, 클로저가 큰 객체를 참조해 불필요한 메모리를 남깁니다.
[보안 주의]
클로저는 암호화된 비밀 저장소가 아닙니다. 브라우저에 보낸 비밀번호나 API 비밀키는 확인될 수 있으므로 서버에 보관하세요. 사용자 문자열을 eval이나 Function 생성자에 넣지 마세요. TypeScript를 사용해도 JSON·폼·환경 변수 같은 외부 값은 허용 범위와 길이를 실행 중에 검사합니다. 필요 없는 이벤트 리스너와 타이머는 해제하세요. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
makeRecorder("Python")으로 두 번째 기록기를 만들어 숫자가 서로 독립적으로 증가하는지 확인하세요. 이어서 count를 0으로 돌리는 reset 기능과 label의 typeof 검사를 추가하세요.
[확인문제]
1. typeof null과 배열 타입 확인에서 주의할 점은 무엇인가요?
2. const·let의 블록 스코프와 var의 함수 스코프는 어떻게 다른가요?
3. makeRecorder가 끝난 뒤에도 count가 유지되는 이유는 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 글은 WEB-002 CSS 박스 모델·선택자·레이아웃입니다. JavaScript 트랙에서는 JSTS-003 배열·객체와 불변 데이터 처리로 이어집니다.
[공식 참고 자료]
ECMAScript 언어 타입 명세
https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html
MDN JavaScript 함수 가이드
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
MDN 클로저 가이드
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
TypeScript Everyday Types
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
댓글목록 0
등록된 댓글이 없습니다.