Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 개발자 도구
- next.js
- 티스토리챌린지
- useState
- 비제어
- 프레임 워크
- 개발자
- Pr
- 코딩 테스트
- prettier
- 개발
- form
- 오블완
- eslint
- PullRequest
- zustand
- frontend
- 가을 감성
- Context API
- Study
- react
- package.json
- polling
- react-query
- tailwind css
- github
- CSS
- 협업
- Fe
- js
Archives
- Today
- Total
ougi FE
Closure(클로저)가 뭘까? 본문
728x90
오늘은 여러 블로그에서 여러 글에서 봤었는데 공부하기가 귀찮아 미루던 Closure에 대해서 소개드리겠습니다!
❓ Closure? 그게 뭘까?
내부함수와 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment)의 조합입니다.
사전적 의미로 Closure은 폐쇄라는 의미인데 Closure의 핵심은 스코프를 이용해 변수의 접근 범위를 폐쇄하는 것입니다.
Closure의 특징들을 말해보자면
외부에서 내부는 불가능하지만 내부에서 외부로 스코프 접근이 가능합니다.
외부 함수가 반환된 후에도 이 접근이 유지됩니다.
내부함수란?
다른 함수 내부에 정의된 함수
렉시컬 환경
함수가 선언될 때 생성되는 환경으로 해당 함수의 스코프에 있는 모든 변수와 함수를 포함
❓ 왜 Closure 함수로 작성할까?
function external() {
const message = "Hi"; // 외부 함수의 변수
return function internal(name) { // closure 변수
return message + name; // 외부 변수와 받은 네임 합쳐서 return 해주기
}
}
let greeting = external();
console.log(greeting("Bae")); // "Hi Bae"
- 전역변수 사용을 최소화
- 전역변수를 많이 사용하면 의도하지 않게 사이드이펙트가 발생할 수 있습니다.
전역변수의 수를 최소화 하여서 이걸 예방하기 위해서 Closure 함수로 많이 사용하는 것이 좋다고 합니다.
- 전역변수를 많이 사용하면 의도하지 않게 사이드이펙트가 발생할 수 있습니다.
- 데이터 보존 가능
- 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있습니다.
따라서 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖습니다.
- 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있습니다.
- 모듈화를 통한 코드 재사용에 편리
- 클로저를 사용하면 함수마다 자신만의 독립적인 데이터를 갖고 그 데이터를 보존하면서 사용할 수 있게 됩니다.
클로저 함수들을 각각 다른 변수에 할당하면 서로 간섭하지 않고 독립적으로 동작하게 만들 수 있습니다.
- 클로저를 사용하면 함수마다 자신만의 독립적인 데이터를 갖고 그 데이터를 보존하면서 사용할 수 있게 됩니다.
✨ 글을 마치며
오늘은 Closure 함수에 대해서 알아보았는데 더 깊이 알고 좋은 코드를 작성할 수 있게 된 것 같아 좋았습니다.
글을 읽어주셔서 감사합니다.
728x90
'JavaScript' 카테고리의 다른 글
[JavaScript] Shadow DOM이란 뭘까? (1) | 2024.11.26 |
---|---|
package.json? package-lock.json? 무슨 차이일까? (1) | 2024.11.10 |
[코딩 테스트] (제일 작은 수 제거하기) 나의 첫 코딩 테스트 트러블 슈팅!! ⚽(+ shift, sort, pop, splice, Math.min) (1) | 2024.09.28 |
[JavaScript] Cropper.js가 뭘까? ✂️ (2) | 2024.09.11 |
[Formatter] ESLint가 뭘까?? (1) | 2024.09.06 |