본문 바로가기

ALL

(119)

[JavaScript] 호이스팅(Hoisting) 이란? 🔗 호이스팅(Hoisting)이란? 변수 또는 함수 선언 부분이 최상단으로 끌어 올려지는 현상을 의미한다. 변수가 있으면 위치에 상관없이 최상단에서 undefined된 형태로 존재한다. ⭐ 주의 var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다. (let/const 변수 선언, 함수 표현식에서는 발생하지 않는다.) 12345console.log(a); // undefined 출력console.log(b); // error var a = 'hello';const b = 'hello2';cs 12345678910func1(); // hello 출력func2(); // error function func1() { // 함수선언문 console.log("hello");} var func2 = functi..

[JavaScript] 실행 컨텍스트(Execution Context)란? 🔗 실행 컨텍스트(Execution Context) 란? 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이다. 🔗 실행 컨텍스트의 종류 📍 전역 컨텍스트 (Global Context) 전역 영역에 존재하는 코드의 실행 컨텍스트 실행 컨텍스트가 생성이 되면, 스택에 쌓인다. 어플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때) 소멸된다. window가 this로 할당된다. 📍 함수 컨텍스트 (Function Context) 함수 내에 존재하는 코드의 실행 컨텍스트 선언된 함수가 호출이 될 때 실행 컨텍스트가 생성이 되고, 스택에 쌓인다. 함수의 모든 동작(실행)이 완료되면, 함수 컨텍스트는 소멸된다. (클로저 사용하면 소멸X) 🔗 실행 컨텍스트의 객체 실행 컨텍스트는 실행 가..

[JavaScript / ES6] ES6 문법 정리 🔗 const, let 📌 var VS const, let var은 함수 스코프이다. const, let은 블록 스코프이다. 따라서 {블록} 밖에서 변수에 접근할 수 없다. 📌 const VS let let은 변수에 재할당이 가능하다. 따라서 다른 값을 대입해야 하는 상황이 생겼을 때 사용한다. const는 변수에 한 번 대입하면 다른 값을 대입할 수 없다. 보통 기본적으로 사용한다. 🔗 템플릿 문자열 1 2 3 4 5 6 7 const num1 = 1; const num2 = 2; const result = 3; const string1 = num1 + '+' + num2 + '=' + result; // 기존 방식 const string2 = `${num1}+${num2}=${result}` // E..

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까지 기다리지 않고 다른 코드를 처리하는 방식이다. 🔗 비동기 처리 사례 > AJAX 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. 🔗 비동기 처리 방법 ① > 콜백(Callback) 함수 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출하여 넘겨주는 방식이다. 🔗 콜백 함수 사용하는 이유 특정 로직이 끝났을 때 원하는 동작..

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하는 것일까? 바로 여기서 등장하는 개념이 이벤트 루프이다. 🔗 이벤트 기반(event-driven)이란? 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. ▪ 이벤트 루프 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다. 모든 이벤트가 종료될 때 까지 이벤트 처리를 위한 작업을 반복하므로 루프라고 불린다. 콜 스택에서 실행 중인 것이 있는지 확인하고, 콜백 큐에 작업이 있는지 확인해서 콜 스택이 비었다면 콜백 큐 내의 작업을 콜 스택으로 ..

[JavaScript] 가비지컬렉터(Garbage Collector)란? / 역할, 동작 원리 🔗 가비지컬렉터(Garbage Collector)란? 여기서 가비지란 '정리되지 않은 메모리', '유효하지 않은 메모리 주소'를 말한다. 가비지 컬렉터는 이러한 필요없는 정보들, 가비지들을 쓸어 담아 버림으로써 메모리를 관리해준다. 🔗 가비지컬렉터 동작 원리 자바스크립트에서 변수는 직접적으로 참조 값(문자열, 객체, 배열)을 담고 있지 않고, 해당 값은 메모리 상에 저장된다. 그래서 참조 값을 생성하고 나서 더이상 참조할 것이 없거나 비어졌을 때 가비지 컬렉터가 동작하여 메모리가 반환된다. (메모리를 다시 재사용 할 수 있는 상태가 된다.) 🔎 참고 자료 가비지 컬렉터가 뭐하는 건가요? 프론트엔드 개발자 면접 질문 정리 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', ..

[JavaScript] 메모라이제이션(Memoization)이란? 🔗 메모라이제이션(Memoization)이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 그것을 활용함으로써 반복 수행을 제거한다. 프로그램 실행 속도가 빨라진다. 🔎 참고 자료 자바스크립트 메모라이제이션 예제보기 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데 왜 그런 것일까? 자바스크립트는 어떻게 '동시성(Concurrency)'을 지원하 devjindev.tistory.com

[JavaScript] 메소드 체이닝(Method Chaining)이란? 🔗 메소드 체이닝(Method Chaining)이란? 여러 메소드를 이어서 호출하는 문법이다. 메소드가 객체(this)를 반환하여 여러 메소드를 순차적으로 선언할 수 있도록 한다. 🔗 장단점 장점 코드가 간결해져 하나의 문장처럼 읽힐 수 있다. 장기적으로 유지보수에 도움이 된다. 단점 하나의 라인에서 너무 많은 일이 일어나 디버깅에 어려움이 있을 수 있다. 오류가 났을 때 어느 부분의 메소드에서 오류가 났는지 확인하기 어렵다. 🔎 참고 자료 메소드 체이닝 💡 같이 보면 좋을 Post [JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다. 자바스크립트는 싱글 스레드 언어이다. 하지만 실제 사용시에는 많은 작업이 동시에 처리되는 멀티 스레드처럼 보이는데..

이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음

티스토리툴바