💻DEV-STUDY/JavaScript

JavaScript 비동기 처리자바스크립트 비동기 처리자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 처리 방식을 통해 병렬 작업이 가능해 보이게 만들 수 있다. 주로 I/O 작업(네트워크 요청, 파일 읽기 등)이나 타이머와 같은 시간이 오래 걸리는 작업에서 사용된다.  동기적(Synchronous) 처리 : 하나의 작업이 완료될 때까지 다음 작업을 시작하지 않는 방식. 즉 작업이 순차적으로 진행된다. console.log("Start");for (let i = 0; i 위 코드는 `for`루프가 끝날 때 까지 다른 작업이 실행되지 않고 기다린다. 즉, "End"가 출력되기 전까지 모든 작업이 멈춘 상태로 대기하게 된다. CPU를 독점하기 때문에, 긴 작..

필드 + 메서드객체 = 필드 + 메서드 (프로퍼티 집합)자바스크립트에서 객체는 필드(데이터)와 메서드(동작)를 포함한 프로퍼티들의 집합으로 정의된다.HTML (DOM) 객체: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content요소: ``속성: ``메서드 표현법: Default & Shorten자바스크립트에서 객체의 메서드는 두 가지 방식으로 정의할 수 있다. 1.  Default(기본) 표현법var person = { name: "CheonSang", sayName: function() } console.log(this.name); }};`sayName` 메서드는 `function` 키워드를 사용하여 정의된다.2. Shorten(간략) 표현법 (ES..

면접 단골 질문"this"면접 단골 질문 중 하나인 "함수 내 `this`와 메서드 내 `this`의 차이"에 대해 설명하면서 JS에서 `this` 바인딩 방식에 대해 조금 더 깊이 살펴보겠다. 자바스크립트 함수는 크게 일반 함수와 화살표 함수로 나눌 수 있으며, 이 둘은 `this` 바인딩 방식에서 큰 차이가 있다.일반 함수는 함수로도 사용될 수 있고, 메서드로도 사용될 수 있다.일반 함수 표현식 내 `this`: 동적 바인딩 (Dynamic  Scope)일반 함수의 `this`는 함수가 호출될 때의 컨텍스트에 따라 결정된다.즉, 동적 바인딩이 이루어지며 함수가 호출된 객체에 따라 `this`가 달라진다. 함수: 전역에서 호출된 함수 내 `this` → 무지성 window(global)function ..

function func() { }const func =  () => { };자바스크립트 함수 작성 방법함수 작성하는 방법을 총 3가지로 분류했다. 1. 함수 선언문 (Function Declaration)2. 함수 표현식 (Function Expression)3. 화살표 함수 (Arrow Function) 그 밖에 추가적인 내용은 포스팅에 담도록 할 예정이다. 함수 선언문(Function Declaration)가장 기본적인 함수 작성 방법으로, `function 함수명() { }`을 사용하며 함수 선언문을 통해 함수를 정의하고 어디서든 호출 가능하다.함수 호이스팅이 일어난다. →함수 선언 전에 호출 가능.example() // 함수 호이스팅 function example() { console.log('..

Execution Context자바스크립트 엔진은 코드가 작성된 자바스크립트 파일을 그대로 실행하는 것이아니라, 사실상 함수의 실행 방식과 비슷한 원리로 작동한다. 자바스크립트 엔진은 스크립트 파일을 구동할 때 기본적으로 두 가지 주요 단계를 거친다.Creation (Pre-parsing) Phase: 실행하기 전에 변수와 함수가 어떤 것인지 분석하고 필요한 메모리 공간을 예약한다.Execution Phase: 변수에 값을 할당하고 함수가 실제로 실행된다.자바스크립트 엔진 구성: Stack + Heap자바스크립트 엔진은 Stack + Heap 두개만 기억하면 된다. 자바스크립트 함수 동작원리도 마찬가지로 두개만 기억하자.Stack(스택): 함수 호출 순서대로 함수가 저장되고 실행되는 공간 = 실행 컨텍스..

"Hoisting"Hoisting ?본격적인 포스팅에 앞서 Hoisting(호이스팅)이라는 개념을 먼저 이해하는 것이 중요하다. 어원: Hoisting `명사` 끌어 올리기, 들어올려 나르기 Hoisting(호이스팅)은 변수 선언과 함수 선언이 코드 실행 전에 자바스크립트 엔진에 의해 최상단으로 끌어 올려지는 현상을 말한다. 자바스크립트 코드가 작성된 순서대로 실행되는 것처럼 보이지만, 실제로는 선언과 초기화가 미리 처리되기 때문에 예상치 못한 동작을 경험할 수 있다. 코드가 실행되기 전에 변수 선언과 함수 선언이 코드의 최상단으로 이동된다. 이는 선언만 이동되며, 변수의 값 할당은 호이스팅 되지 않는다.JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(i..

What is Functional Programming?함수형 프로그래밍 패러다임자바스크립트는 함수형 프로그래밍 패러다임을 추구하며 추가로 객체지향 프로그래밍 패러다임도 지원한다.객체지향 프로그래밍 패러다임의 여러 패턴을 적용하려면 클래스(상속)와 객체를 활용할 수 있다.타입스크립트를 통해 인터페이스(다형성)를 도입할 수 있다.따라서 자바 개발자가 객체지향 프로그래밍을 모두 이해하는 것과 같이 자바스크립트 개발자가 제대로 개발하기 위해선 함수형 프로그래밍에 대한 모든 이해가 필요하다.  일급함수: 함수 변수 + 함수 파라미터 + 함수 반환일급함수란, 일급 객체로 취급되는 개념이다. 함수가 마치 숫자나 문자열처럼 일반적인 값으로 다루어질 수 있다는 의미.일급 함수를 지원하는 언어는 함수를 변수에 저장하거나..

자바스크립트 런타임과 엔진: 웹과 서버에서의 동작 원리 자바스크립트는 웹과 서버 양쪽에서 중요한 역할을 하는 언어다. 자바스크립트가 어떻게 실행되는지를 이해하기 위해서는 자바스크립트 런타임과 자바스크립트 엔진의 개념을 알아야 한다. 자바스크트 런타임: 엔진과 API 자바스크립트 런타임은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 자바스크립트 엔진과 **API(라이브러리 및 바이너리)**로 구성된다. 자바스크립트 런타임은 자바스크립트 코드를 기계어로 변환하고 실행하는 역할을 하며, 이 과정에서 필요한 API와 라이브러리를 함께 제공한다.자바스크립트 엔진: 자바스크립트 코드를 읽고, 이를 기계어로 변환하여 실행하는 역할을 한다. 예를 들어, 구글 크롬의 V8 엔진이 대표적인 자바스크립트 엔진이다.JS..