Front-End/JavaScript18 [JS] 호이스팅과 TDZ (Temporal Dead Zone) - let도 호이스팅이 된다! 처음 자바스크립트를 공부하면서 호이스팅이란 개념을 들었을 때 '단순히 끌어올린다'라는 생각만 했었다. 맞는 말이지만, 실제로 아래 코드를 실행해보면 다음과 같은 결과가 일어난다. console.log(success); // undefined; console.log(fail); // ReferenceError var success = '성공!'; let fail = '실패 ㅠ' var을 사용한 경우는 문제가 없고, let을 사용한 경우는 에러가 발생한 것을 보니까 var은 호이스팅이 되고 let은 호이스팅 되지 않는 것일까? 근데 호이스팅이 되면 끌어올려지니까 let을 사용한 경우는 그렇다치고, var로 선언한 success는 접근할 수 있는데 왜 값은 undefined지? 의문점들이 막 생겨났다. 이러한.. 2021. 6. 9. [JS] 자바스크립트 Event Loop 자바스크립트에 대해 찾아보면 자바스크립트는 단일 스레드 기반의 언어라고 한다. 그런데 단일 스레드는 한번에 한가지 일만 처리할 수 있다. 그런데 평소에 코드를 작성하고 실행해보면서 서버에서 데이터를 가져오는 도중에 다른 일을 못해 멈추거나 이를 처리하는 데 멈추거나 한 기억은 없다. 즉, 순서대로 처리하는 동기적인 방식이 아니라 비동기적으로 구현이 가능했다. 어떻게 가능한 것일까? 우선 자바스크립트 엔진, 런타임 환경에 대해 알아보자. 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터를 뜻한다. 대표적으로 그 유명한 크롬의 V8 등이 있다. 아래 사진은 자바스크립트 엔진을 간략하게 나타낸 모습이다. (출처) Heap : 메모리 할당이 일어나는 곳 Ca.. 2021. 6. 7. 자바스크립트 비동기 처리 방식 ✅ 비동기(Asynchronous) 란? 비동기는 하나의 요청 처리가 완료되기 전에 다음 요청을 처리하는 방식이다. 즉 순서에 상관없이 동시에 여러개의 작업을 할 수 있기 때문에 효율적이다. 왜 처리를 해야하는가? 우선 자바스크립트는 싱글스레드 방식이라 동기적으로밖에 진행할 수 없는데, 기본적으로 자바스크립트는 웹브라우저나 node.js 엔진에서 실행이 된다. 이때 엔진에는 자바스크립트를 돌리는 하나의 스레드가 존재하는데, 엔진 뿐 아니라 비동기 처리모델인 web api라는 것이 함께 동작해서 setTimeout 같은 시간이 소요되는 일을 처리한다. web api들이 자바스크립트 엔진 스레드와는 따로 비동기 처리를 해주면서 콜백함수를 가지고 이벤트 루프에 들어가 처리되는 대로 콜백함수를 자바스크립트 엔진.. 2021. 2. 2. psuedoclassical VS class[ES6] 상속 방법 자바스크립트는 프로토타입 기반 객체지향 언어언어다. 그렇기 때문에 class라는 개념이 없어서 prototype을 기반으로 class를 흉내냈다! (ES6에서 class 문법이 추가되었지만 클래스가 아닌 프로토타입을 기반으로 한 문법) 지금까지 class를 통해 객체(인스턴스)를 만드는(흉내) 프로토타입에 대해 이해를 했다면, 오늘은 객체지향의 특징 중 하나인 클래스에서 클래스로 행해지는 '상속'에 대해 공부해보려고 한다. ✅ psuedoclassical (prototype) ES6에서 class 문법이 추가되기 전에 class를 흉내내기 위한 방법 중 하나이다. 다음 예시는 Human - Student 상속을 구현하는 과정이다. 방법 뿐만아니라, 추가적인 것들도 알아보자. 우선 복습을 해보자면, pro.. 2021. 1. 16. 프로토타입(Prototype) 이해하기(2) 프로토타입(Prototype) 이해하기(1)에서는 목적인 프로토타입에 대해 공부하기보다 단순히 프로토타입 기반 언어인 자바스크립트가 어떻게 클래스 기능을 흉내내는지 알아봤다. 이번엔 정말로 프로토타입에 대해 알아보자! ✅ 자바스크립트의 프로토타입이란? 프로토타입에 대해 알기 전에 몇가지 정리하는 것이 필요할 것 같다. 나 같은 경우에도 이상한 말들이 자꾸 튀어나와 이해하는데 정말 많은 시간이 걸린것 같다 ㅠㅠ 밑에 글들을 보기전에 결론을 먼저 말하자면 정리 🖋 prototype 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 prototy.. 2021. 1. 15. 프로토타입(Prototype) 이해하기(1) C++, Java와 같은 클래스 기반 객체지향 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 언어다. 객체지향 프로그래밍에 대해서 미리 공부한 상태라고 가정할 것이다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 객체지향 프로그래밍 언어는 클래스라는 개념이 없다. 그럼에도 자바스크립트가 객체지향 언어인 이유는 다른 방법으로 클래스의 기능을 구현했기 때문이다. (ES6에서 class 문법이 추가되었지만 클래스가 아닌 프로토타입을 기반으로 한 문법) 그리고 클래스 기반 객체지향 프로그래밍에서 명심할 것 클래스란, 객체를 만들어 내기 위한 추상적인 개념, 설계도 혹은 틀 객체란, 소프트웨어 세계에 구현할 대상, 클래스.. 2021. 1. 15. this ✅ this란? 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체이다. this는 함수 실행시 결정이 되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다. 모든 함수는 실행할 때마다 this라는 객체가 추가된다. arguments 객체와 함께 함수 내부로 암묵적으로 전달되는 것이다. 아무리 봐도 딱 한줄로 정의하기가 너무 어렵다. 이 말은 공부가 덜 되었다는 뜻! 우선 의식의 흐름대로 정리해보려고 한다. 함수 실행의 다섯가지 방법 함수 실행에는 다섯 가지 방법이 있다. 이때 this에게 있어서, '함수가 무엇인지?'가 중요한 것이 아니라, '어떻게 실행(호출)되는 것인지?'가 중요하기 때문에 함수 실행의 다섯가지 방법을 보도록 하자. 1. G.. 2021. 1. 12. ES6 문법 공부를 하면서 나도 모르게 편하게 사용되는 것들이, 알고보니 ES6이 도입되고나서부터 사용되는 것들이 정말 많았다. 아무 생각없이 사용하던 것들에 대해 복습 겸 공부 겸 개념정리 겸 es6 문법에 대해 정리를 해보려고 한다! ✅ ES6이란? ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전이다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트라고 한다. 여기서 ECMAScript란? 자바스크립트 언어의 표준 규격을 의미 ES6은 새로운 기능들을 많이 추가했는데 이중에 자주 배웠던 것을 우선적으로 알아볼 것이다. ECMAScript 6 에 추가된 기능 let + cons.. 2021. 1. 9. 명령형 VS 선언형 프로그래밍 아직은 완벽한 개념을 이해하기 힘들어 간략하게만 정리해보려 한다. 이 사이트에서 설명을 잘해주는데 익숙하지가 않아 어렵게만 느껴진다 ㅠㅠ 이 사이트를 잘 번역해준 블로그를 많이 참고했다!(거의 복붙했다..) “You know, imperative programming is like how you do something, and declarative programming is more like what you do, or something.” 직역을 해보자면 명령형(imperative) 프로그래밍은 무엇을 어떻게 할 것인가에 가깝고, 선언형(declarative) 프로그래밍은 무엇을 할 것인가에 가깝다고 한다. 배우고 있는 자바스크립트 배열 예제를 통해 명령형 프로그래밍 방식과 선언형 프로그래밍 방식에 대.. 2021. 1. 8. 고차 함수_3 (feat. 추상화) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 그렇다면 우리는 왜 고차 함수를 사용해야 할까? ✅추상화(abstraction)란? 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것 즉, 요약 우리가 살면서 하는 지하철/버스 카드, 문자, 검색, 자동차 시동 걸기와 같은 모든 행동들은 단순해 보이지만 그 속에는 무수한 원인과 결과가 내포되어 있다. 하지만 우리는 신경쓸 필요가 없다. 왜냐하면 이러한 행동들은 전부 추상화의 결과이기 때문이다! 자바스크립트(외 많은 프로그래밍 언.. 2021. 1. 8. 고차 함수_2 (feat. 내장 고차 함수 filter, map) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 앞서 말했듯이 함수는 일급 객체라서 다음과 같은 특성을 갖는다. 변수에 할당(assignment)할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 콜백 함수를 전달받은 함수는 이 콜백 함수를 호출(invoke)할 수 있다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다. 특히 콜백 함수는 어떤 작업이 완료되었을 때 호출되.. 2021. 1. 8. 고차 함수_1 (feat. 일급 객체, 호이스팅) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 우선 고차 함수에 대해 더 자세히 알아보기 전에 중요한 것이 있다. 어떻게 함수를 인자로 받거나 함수를 리턴할 수 있을까? 함수는 일급 객체(first-class citizen)다. 퍼스트 클래스 하면 보통 '특별한 대우를 받는다'라고 생각이 든다. 자바스크립트에도 특별한 대우를 받는 것들이 있는데, 이런 것들을 일급 객체라고 한다. 그 중 하나가 함수다! 함수가 자바스크립트에서 어떤 대우를 받느냐? 변수에 할당(assignment)할 .. 2021. 1. 8. 이전 1 2 다음
