
▶클로저(closure) 클로저(closure)는 함수의 랙시컬 스코프를 기억하는 함수가 렉시컬 스코프를 벗어난 외부 스코프에서 실행될 때에도 자신의 렉시컬 스코프에 접근할 수 있게 해주는 것입니다. 클로저는 자바스크립트에서 굉장히 중요한 개념이며, 함수를 사용하는 곳이면 어디든지 적용할 수 있습니다. 클로저를 활용하면 특정한 상태를 기억하고 캡슐화하거나 나아가 하나의 모듈을 정의하는 패턴으로도 확장할 수 있습니다. 이렇게 강력한 활용도를 가진 클로저는 앞서 설명한 렉시컬 스코프와 스코프 체인(이하 렉시컬 스코프 체인)만 제대로 이해하면 쉽게 사용할 수 있습니다. function foo() { var a = 1; function bar() { console.log(a); // 1 } bar(); } fo..

▶호이스팅(Hoisting) 스코프의 개념과 렉시컬 스코프 규칙에 대해 어느 정도 정리가 되었을 것입니다. 이제 스코프 안에서 변수를 선언하였을 때 발생하는 호이스팅(Hoisting)이라는 동작에 대해 좀 더 자세히 알아봅시다. 호이스팅은 선언문이 스코프 내의 가장 최상단으로 끌어올려지는 것을 의미합니다. console.log(a); // Undefined var a = 1; 전역 스코프 내의 변수 a를 선언하기 전에 console.log() 메서드에서 참조하였습니다. 선언하기 전에 접근하였으니 "ReferenceError: a is not defined"에러가 발생할 것 같지만, 예상과 달리 정상적으로 실행되어 undefined가 출력됩니다. 왜 이런 결과가 나오는 것일까요? 답은 호이스팅입니다. 선언..

▶스코프(Scope) 스코프(Scope)는 변수나 매개변수에 접근할 수 있는 범위를 결정합니다. 자바스크립트의 스코프는 함수와 블록 단위의 스코프로 나눌 수 있으며, 함수나 블록의 선언 위치에 따라 중첩된 스코프가 정의될 수 있습니다. 이번 글에서는 스코프의 종류와 렉시컬 스코프 규칙, 스코프 체인을 통한 검색 방법에 대해 설명할 것입니다. 그리고 자바스크립트의 유명한 특징인 호이스팅의 동작 방식과 모튤 스코프를 정의하고 사용하는 법에 대해서도 알아보겠습니다. 1) 함수 스코프와 블록 스코프 자바스크립트에서는 함수 스코프와 블록 스코프가 존재합니다. 우선 자바스크립트에서 가장 흔하게 사용되는 함수 스코프부터 알아봅시다. ▷함수 스코프와 var 함수 스코프는 말 그대로 선언된 함수 단위로 생성되는 스코프이..

▶함수 자바스크립트에서 함수는 가장 중요한 개념 중 하나이며 자바스크립트 함수만의 독특한 특징들이 있습니다. 함수의 특징을 얼마나 잘 이해하느냐가 자바스크립트 개발자로서의 역량을 판가름하는 기준이 될 수 있겠습니다. 단순한 함수 정의나 호출을 통해 결과 값을 얻는 것 이외에 this 바인딩, 클로저 등 자바스크립트 함수만의 특징을 제대로 이해하고 있어야 합니다. 1) 함수란 무엇인가? 함수는 객체의 특별한 형태이며 문(statement)으로 구성된 몸체를 가진 하나의 실행 단위입니다. function doSomething() { console.log('hello javascript'); } 또한 자바스크립트 함수는 일급 함수(first-class function)로서 다른 함수의 매개변수나 반환 값으로도..

▶들어가기 전 자바스크립트는 느슨한 타입을 가진 언어이기 때문에 관대한 타입 변환을 수행합니다. 이런 부분은 많은 개발자가 자바스크립트를 이해하기 힘들어하고 싫어하는 이유이기도 합니다. 앞으로 자바스크립트의 타입 변환 규칙을 ECMAScript에 명시된 명세를 기준으로 알아볼 것입니다. 이 내용들은 어떤 식으로 타입 변환을 제어하는 것이 좋을지 판단할 때 큰 도움이 될 것입니다. 또한, 자바스크립트의 꽃이라고도 할 수 있는 함수의 선언과 호출 방법 그리고 this 바인딩에 대해 다룰 것입니다. 언급한 내용 모두 자바스크립트에서 혼란스럽게 여겨지지만, 알아보고 나면 생각보다 간단한 규칙이 있다는 것을 이해할 수 있을 것입니다. ▶타입 변환 자바스크립트에서 타입 변환을 이해하는 것은 매우 중요합니다. 어떤 ..
- Total
- Today
- Yesterday
- testing
- 타입스크립트
- frontend
- 자바스크립트
- next.js
- HTML
- 디프만
- 머신러닝
- 딥러닝
- jest
- rtl
- JSP
- 파이썬
- 자바
- CSS
- Python
- 스타일 컴포넌트 styled-components
- react-query
- 프론트엔드 공부
- 프론트엔드
- 프로젝트 회고
- 리액트 훅
- 데이터분석
- react
- TypeScript
- styled-components
- 자바스크립트 기초
- 인프런
- 프론트엔드 기초
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |