▶호이스팅(Hoisting) 스코프의 개념과 렉시컬 스코프 규칙에 대해 어느 정도 정리가 되었을 것입니다. 이제 스코프 안에서 변수를 선언하였을 때 발생하는 호이스팅(Hoisting)이라는 동작에 대해 좀 더 자세히 알아봅시다. 호이스팅은 선언문이 스코프 내의 가장 최상단으로 끌어올려지는 것을 의미합니다. console.log(a); // Undefined var a = 1; 전역 스코프 내의 변수 a를 선언하기 전에 console.log() 메서드에서 참조하였습니다. 선언하기 전에 접근하였으니 "ReferenceError: a is not defined"에러가 발생할 것 같지만, 예상과 달리 정상적으로 실행되어 undefined가 출력됩니다. 왜 이런 결과가 나오는 것일까요? 답은 호이스팅입니다. 선언..
▶스코프(Scope) 스코프(Scope)는 변수나 매개변수에 접근할 수 있는 범위를 결정합니다. 자바스크립트의 스코프는 함수와 블록 단위의 스코프로 나눌 수 있으며, 함수나 블록의 선언 위치에 따라 중첩된 스코프가 정의될 수 있습니다. 이번 글에서는 스코프의 종류와 렉시컬 스코프 규칙, 스코프 체인을 통한 검색 방법에 대해 설명할 것입니다. 그리고 자바스크립트의 유명한 특징인 호이스팅의 동작 방식과 모튤 스코프를 정의하고 사용하는 법에 대해서도 알아보겠습니다. 1) 함수 스코프와 블록 스코프 자바스크립트에서는 함수 스코프와 블록 스코프가 존재합니다. 우선 자바스크립트에서 가장 흔하게 사용되는 함수 스코프부터 알아봅시다. ▷함수 스코프와 var 함수 스코프는 말 그대로 선언된 함수 단위로 생성되는 스코프이..
▶들어가기 전 앞으로는 자바스크립트 객체의 프로퍼티나 메서드에 접근하는 원리에 대해 알아보고, 상속을 구현해 볼 것입니다. 또한 앞서 언급했던 스코프가 무엇인지, 어떤 규칙으로 결정되는지 구체적으로 살펴보고 파생되는 개념인 모듈, 클로저, 호이스팅에 대해 알아보겠습니다. ▶프로토타입 ▷프로토타입이란? 프로토타입(prototype)이란 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미하기도 합니다. 즉 일반적으로 원형이라는 뜻을 가지고 있습니다. 다시 말해 자신을 만들어낸 객체의 원형이라고 할 수 있겠습니다. 생성자 함수에 정의한 모든 객체가 공유할 원형(모든 함수에는 프로토타입이 있고, 모든 객체는 Object를 상속받습니다)을 말합니다. 이때 구체적으로 프로토타입 객체(Prototy..
▶함수 자바스크립트에서 함수는 가장 중요한 개념 중 하나이며 자바스크립트 함수만의 독특한 특징들이 있습니다. 함수의 특징을 얼마나 잘 이해하느냐가 자바스크립트 개발자로서의 역량을 판가름하는 기준이 될 수 있겠습니다. 단순한 함수 정의나 호출을 통해 결과 값을 얻는 것 이외에 this 바인딩, 클로저 등 자바스크립트 함수만의 특징을 제대로 이해하고 있어야 합니다. 1) 함수란 무엇인가? 함수는 객체의 특별한 형태이며 문(statement)으로 구성된 몸체를 가진 하나의 실행 단위입니다. function doSomething() { console.log('hello javascript'); } 또한 자바스크립트 함수는 일급 함수(first-class function)로서 다른 함수의 매개변수나 반환 값으로도..
▶들어가기 전 자바스크립트는 느슨한 타입을 가진 언어이기 때문에 관대한 타입 변환을 수행합니다. 이런 부분은 많은 개발자가 자바스크립트를 이해하기 힘들어하고 싫어하는 이유이기도 합니다. 앞으로 자바스크립트의 타입 변환 규칙을 ECMAScript에 명시된 명세를 기준으로 알아볼 것입니다. 이 내용들은 어떤 식으로 타입 변환을 제어하는 것이 좋을지 판단할 때 큰 도움이 될 것입니다. 또한, 자바스크립트의 꽃이라고도 할 수 있는 함수의 선언과 호출 방법 그리고 this 바인딩에 대해 다룰 것입니다. 언급한 내용 모두 자바스크립트에서 혼란스럽게 여겨지지만, 알아보고 나면 생각보다 간단한 규칙이 있다는 것을 이해할 수 있을 것입니다. ▶타입 변환 자바스크립트에서 타입 변환을 이해하는 것은 매우 중요합니다. 어떤 ..
- Total
- Today
- Yesterday
- react
- react-query
- 타입스크립트
- 프론트엔드
- next.js
- CSS
- rtl
- 자바
- 리액트
- TypeScript
- 프론트엔드 공부
- JSP
- 인프런
- 프론트엔드 기초
- 데이터분석
- testing
- frontend
- 리액트 훅
- 머신러닝
- 프로젝트 회고
- 파이썬
- 스타일 컴포넌트 styled-components
- styled-components
- HTML
- jest
- 디프만
- 자바스크립트
- 딥러닝
- Python
- 자바스크립트 기초
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |