본문 바로가기

javascript17

자바스크립트 클로저가 아직도 난해한 개념으로 다가오는 사람들 모여라! 📋 목차 이 포스팅을 읽으면 도움이 되는 사람들 클로저의 정의 렉시컬 스코프 함수객체의 내부슬롯 [[Environment]] 클로저와 렉시컬 환경 클로저의 활용 정리 ✍🏻 이 포스팅을 읽으면 도움이 되는 사람들 이 포스팅은 클로저에 대한 완벽정리를 도와주기위해 작성했습니다. 포스팅을 읽으면 도움이 되는 분들은 아래와 같습니다. 내가 아래 해당사항 중 하나라도 해당이 된다면 이 포스팅을 꼭 읽어보세요! MDN에 나온 클로저 사전 정의는 알고 있지만 제대로 이해하지 못하고 있다. 클로저가 왜생긴지 모르겠고, 대체 어디에 써먹으란건지 모르겠다. 클로저가 뭔지 모른다. 클로저관련 예제라곤 for문안에서 쓰는 그(?) 예제 밖에 모른다. 클로저에 대해 설명하라 하면 말문이 막힌다. 아래 개념은 미리 알고 오시는게.. 2021. 3. 5.
자바스크립트 프로토타입 개념이 어려운 사람들을 위해 📋 목차 서론 함수 객체의 내부구조 프로토타입(prototype)과 프로토(proto), 프로토체인이 뭐야? 왜 사용하는거야? 코드의 재사용, 상속에 대하여 참고자료 ✔️ 서론 자바스크립트를 막 공부하기 시작한 자린이(자바스크립트 어린이) 분들이나, 자바스크립트에 대해 깊이 공부 해보신적 없는 모든 분들 중에 혹시 프로토타입을 잘 모르고 계신다면 읽어보시면 좋을 것 같습니다. 잘못된 정보나 피드백, 이해하기 어려운 부분이 있으시면 댓글 부탁드립니다. ✔️ 함수 객체의 내부구조 Javacript 에서는 함수를 정의하고, 파싱단계에 들어가면, 내부적으로 수행되는 작업이 있습니다. 아래와 같은 함수를 정의할때 어떤일이 벌어지는지 한번 알아보겠습니다. function Dog() {} 1.해당 함수에 Constr.. 2021. 3. 1.
자바스크립트 비동기 처리 - callback 과 promise 서론 자바스크립트에서 중요한 개념인 비동기처리 오늘은 자바스크립트에서 비동기처리를 왜 해야하며 비동기처리를 어떻게 하는지 알아보도록 하겠습니다. 비동기 왜 중요할까? 비동기의 중요성을 설명할때 굉장히 많이 사용되는 짤인데 사실 이게 전부입니다. "앞전의 처리가 완료 될때까지 기다려야 한다니.." 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)됩니다. 클라이언트에서 서버로 데이터를 요청 했을 때, 서버가 그 요청에 대한 응답을 언제 줄지도 모르는데 마냥 기다릴 수 없고, 기다려야 한다면 사용자는 해당 어플리케이션을 사용하지 않을 것입니다. 그래서 우리는 비동기 처리를 반드시 배워야.. 2020. 11. 10.
this - 화살표함수와 일반함수 자바스크립트에서의 this는 꽤나 중요한 개념이다. 우선 this를 사용하는 간단한 예제 코드는 다음과 같다. function Person(name, age) { this.name = name; this.age = age; } const dumbo = new Person('dumbo', 20); console.log(dumbo.name); // dumbo console.log(dumbo.age); // 20 자바스크립트에서는 위와 같이 함수안에서 this를 사용할 수 있습니다. dumbo에 new키워드를 이용해 인스턴스를 생성했고 매개변수로 dumbo,20을 담았습니다. 이렇게 new를 통해 새로운 인스턴스를 생성하면 Person에서의 this 는 dumbo가 됩니다. (dumbo.name 으로 값을 불.. 2020. 11. 9.
실행컨텍스트 - 자바스크립트야 왜 그렇게 동작하니? 서론 자바스크립트를 입문 했을때 가장 어려웠던건 실행컨텍스트 부분이였어요. 가장 어려운 개념이자, 자바스크립트의 동장 원리를 알기 위해 꼭 짚어야 하는 부분 입니다. 나는 간단한 예제와 그림을 통해 실행컨텍스트에 대해 이해를 돕고자 합니다. 이 포스팅은 제로초님과 각종 구글링으로 얻은 것들을 정리 한 것입니다! 우선 대충 읽어봐요 컨텍스트의 4가지 원칙 1)처음에 브라우저가 코드를 읽을 때 전역 컨텍스트를 하나 만들어요! 그리고 함수를 호출 할때마다 함수컨텍스트도 만들죠 ㅎㅎ 2)컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this 가 생성이 된답니다 3)컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면.. 2020. 9. 25.