공부/javascript (12) 썸네일형 리스트형 폴리필이란? 폴리필 📖`폴리필`은 자바스크립트 표준에서 새로 추가된 기능을 구현하지 않은 브라우저나 환경에서도 해당 기능을 사용할 수 있게 만들어주는 코드입니다. 예를 들어, 최신 브라우저는 최신 표준의 대부분 기능을 지원하지만, 오래된 브라우저는 지원하지 않는 경우가 많습니다. 이때 폴리필을 통해 부족한 기능을 "채워 넣는" 작업을 합니다. 폴리필은 다음 두 가지 방식으로 작동합니다.새로운 내장 함수 추가예를 들어, `Array.prototype.includes` 같은 함수가 오래된 브라우저에 없을 경우 이를 직접 구현해 사용할 수 있게 만듭니다.기존 함수의 동작 수정브라우저에 이미 존재하는 기능이 최신 표준과 맞지 않다면, 이를 수정해 동작을 맞춥니다. 왜 폴리필이 중요한가요? 📖폴리필은 개발자가 최신 기술로.. javascript 심화 7 (클로저) 클로저 📖1. 개념`클로저`는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 2. 렉시컬 스코프어디서 `호출했는지`가 아니라 어디에 `선언`했는지에 따라서 상위 스코프가 결정되는 것입니다!const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo(); // 1bar(); // 1 bar 함수는 foo 함수 내부에서 `호출`됐지만 전역에서 `선언`되었기 때문에 전역변수 x를 참조하게 돼서 1을 출력하게 됩니다! 3. 함수가 선언된 렉시컬 환경간단하게 설명하면 `클로저`란 외부 함수의 변수에 접근할 수 있는 내부 함수입니다!function outerFunc() { // 외부 함수의 변수 var x.. javascript 심화 6 (이벤트 루프) 이벤트 루프 📖자바스크립트의 특징이벤트 루프를 설명하기 전에 자바스크립트의 특징에 대해 간단히 알아보겠습니다. ❗중요 키워드 `싱글 스레드`, `비동기` 자바스크립트는 한 번에 하나의 작업만을 처리하기 때문에 싱글 스레드 언어입니다. 비동기로 동작하기 때문에 싱글 스레드임에도 불구하고 동시에 작업을 수행할 수 있습니다.그러나 `비동기로 동작하는 핵심 요소`는 자바스크립트가 아닌 `브라우저`가 가지고 있습니다! 브라우저의 기본 구조 구성 요소`Heap` : 메모리 할당이 발생하는 곳입니다. `Call Stack` : 실행 컨텍스트를 저장하는 자료구조(LIFO)로 함수를 호출하면 Call Stack에 push 됩니다. `Web APIs` : 브라우저에서 제공하는 API로 DOM, AJAX, setTimeo.. javascript 심화 5 (Promise, async, await) Promise란 📖Promise는 비동기 작업의 결과에 대한 상태를 나타내는 객체입니다. 아래 예시에서 new 연산자로 Promise의 인자로 넘어가는 콜백은 바로 실행됩니다. 내부에서 비동기 작업이 완료될 때 `resolve()`를 호출합니다.new Promise(function (resolve) { setTimeout(function () { var name = '에스프레소'; console.log(name); resolve(name); }, 500);}) Promise 상태`대기(Pending)` : 비동기 함수가 아직 시작하지 않은 상태`성공(Fulfilled)` : 비동기 함수가 성공적으로 완료된 상태`실패(Rejected)` : 비동기 함수가 실패한 상태 Promise가.. javascript 심화 4 (콜백함수) 콜백함수 📖다른 함수가 실행이 끝난 뒤 실행되는(=callback) 함수를 말합니다! 그리고 다른 함수로 인자를 넘겨주는 함수입니다! 즉, 콜백 함수는 다른 함수에 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행하게 됩니다.function func(callback) { callback();}function callback() { console.log("callback 함수입니다.");}func(callback);// 결과 : callback 함수입니다. ❗간단하게 설명하면 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수! 제어권 📖1. 호출 시점콜백 함수의 제어권을 .. javascript 심화 3 (this, 화살표함수, call, apply, bind) this 📖객체지향 언어에서의 this는 클래스로 생성한 인스턴스를 말합니다. 그러나 자바스크립트에서의 this는 `자신이 속한 객체` 또는 `자신이 생성할 인스턴스`를 가리키는 자기 참조 변수입니다. 즉 this를 통해 객체나 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this는 언제 결정 될까?🧐this는 `함수를 호출할 때 결정`됩니다. 즉 동적으로 결정된다는 것입니다. 브라우저에서에 this는 Window객체를 의미합니다. node 환경에서의 this는 global객체를 의미합니다. 그러나 함수를 호출하는 방식에 따라 바인딩 객체가 달라집니다. 일반 함수 호출에서의 this ➡️ 전역 객체일반 함수에서의 this는 전역 객체를 의미하기 때문에, 브라우저에서는 `window`, nod.. javascript 심화 2 (호이스팅, var let const 차이점, TDZ) 호이스팅 📖 호이스팅이란? 사전에 검색해 보면 `끌어올리기`, `들어 올려 나르기`라고 나옵니다!단어 뜻처럼 스크립트 내에 변수나 함수의 선언이 스코프 최상단으로 끌어올려지는 현상을 말합니다. ❗여기서 포인트는 물리적으로 끌어 올려지는 것이 아니라 코드 전체를 스캔하고 실행 컨텍스트에 미리 기록하기 때문에 이런 현상이 발생합니다! 실행 컨텍스트가 궁금하시면❓ javascript 심화 1 (실행 컨텍스트)실행 컨텍스트 📖실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기mingos-habitat.tistory.com 예시코드 (매개변수, 변수)✅매개변수 및 변수는 선언부를 호이스팅 .. javascript 심화 1 (실행 컨텍스트) 실행 컨텍스트 📖실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기 위해선 `콜 스택`에 대한 이해가 반드시 필요합니다! 예시코드 ✅// ---- 1번var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 2번 console.log(a);}outer(); // ---- 3번console.log(a); 실행 컨텍스트의 구성 순서📃코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(o.. 이전 1 2 다음
