Dev's

Javascript 호이스팅(Hoisting)JavaScript에서 호이스팅(Hoisting)은 변수 선언과 함수 선언이 코드 실행 전에 자바스크립트 엔진에 의해 최상위로 끌어올려지는 동작을 말하며, 이로 인해 코드 작성 순서와 관계없이 변수나 함수를 사용할 수 있는 것처럼 보이나, 호이스팅의 실제 동작 방식을 이해하는 것이 중요하다변수 호이스팅자바스크립트에서는 var 키워드로 선언된 변수들이 호이스팅 된다. 하지만 호이스팅 시 변수 선언만 끌어올려지고, 변수 할당은 원래 코드에서 선언된 위치에 남아 있게 된다.이는 초기화 전에 변수를 참조할 수 있지만, 이 경우 값은 undefined가 된다.console.log(a); // undefinedvar a = 10;console.log(a); // 10위 ..

CommonJS(CJS)와 ES Modules(ESM)은 JavaScript에서 모듈을 관리하고 불러오는 두 가지 방식이다.이 두 방식은 모듈의 정의, 불러오기, 사용 방법에서 차이가 존재한다.CommonJS(CJS)개요CommonJS는 Node.js에서 널리 사용되는 모듈 시스템이다. JavaScript가 서버 사이드 환경에서 사용되기 시작하면서 생겨났으며, Node.js는 처음부터 CommonJS를 기본 모듈 시스템으로 사용해 왔다.사용법모듈 불러오기: require() 함수로 모듈을 불러온다.모듈 내보내기: module.exports 또는 exports 객체를 사용해 모듈을 내보낸다.// module.jsconst message = "Hello, CommonJS!";module.exports = m..

클로저(Closure)는 JavaScript의 중요한 개념 중 하나로, 함수와 함수가 선언된 어휘적 환경(Lexical Environment)을 함께 기억하는 구조이다.클로저는 주로 함수 내부에서 정의된 또 다른 함수를 통해 외부 함수의 변수에 접근할 수 있도록 하며, 이를 통해 다양한 유용한 기능을 구현할 수 있다.클로저의 기본 개념클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 메커니즘이며, 내부 함수가 외부 함수의 범위에 있는 변수를 "기억"하기 때문에 클로저가 형성된다.function outerFunction() { const outerVariable = "I am outside!"; function innerFunction() { console.log(outerV..

JavaScript에서 this는 컨텍스트(context)를 나타내는 중요한 키워드로, 코드가 실행되는 문맥에 따라 달라진다. this의 동작을 이해하는 것은 JavaScript의 핵심 개념 중 하나이며, 다음은 this에 관한 주요 사항과 그 사용 방법을 설명한 내용이다.전역 컨텍스트(Global Context)에서의 thisJavaScript에서 this는 기본적으로 전역 객체를 참조한다. 브라우저 환경에서는 window 객체가 전역 객체이며, Node.js에서는 global 객체가 전역 객체이다.console.log(this); // 브라우저에서는 window, Node.js에서는 global 출력함수 컨텍스트(Function Context)에서의 this함수 내부에서 this는 해당 함수를 호출한..

자바스크립트는 함수형 프로그래밍을 지원하는 언어 중 하나이다. 함수형 프로그래밍의 여러 기법 중 하나인 커링(currying)은 자바스크립트 코드의 재사용성과 가독성을 높이는 데 도움을 줄 수 있다. 이번 블로그 글에서는 커링의 기본 개념과 이를 자바스크립트에서 어떻게 활용할 수 있는지 정리하고자 한다.커링(Currying)이란?커링은 다수의 인수를 받는 함수를 일련의 함수 호출로 변환하는 기술이다. 보다 구체적으로 말하자면, 커링은 여러 인수를 받는 함수를 단일 인수를 받는 함수의 연속으로 변환하는 과정이며, 이를 통해 부분 적용(partial application)과 같은 강력한 함수형 프로그래밍 패턴을 활용할 수 있다.커링의 기본 개념커링의 기본 개념을 이해하기 위해 간단한 예를 살펴보자. 두 수를..

자바스크립트는 싱글 스레드 기반 언어로, 한 번에 하나의 작업만 수행할 수 있다. 그러나 실제 웹 애플리케이션에서는 여러 작업을 동시에 처리해야 하는 경우가 많다. 예를 들어, 서버에서 데이터를 가져오거나, 파일을 읽거나, 사용자 입력을 기다리는 등의 작업이 있다.이러한 비동기 작업을 처리하기 위해 자바스크립트는 다양한 방법을 제공한다. 이 글에서는 Callback, Promise, Async/Await에 이어 Generator와 Yield 문법까지 살펴보려 한다.CallbackCallback 함수란?Callback 함수는 다른 함수에 인수로 전달되어 나중에 실행되는 함수이다. 비동기 작업이 완료된 후에 호출되는 함수로, 자바스크립트에서 비동기 처리를 구현하는 가장 기본적인 방법이다.function fe..

|| 연산자 첫 번째 표현식이 falsy 한 값일 경우 두 번째 표현식을 반환 undefined || 'default'; // default null || 'default'; // default 0 || 'default'; // default ?? 연산자 첫 번째 표현식이 null 또는 undefined 인 경우 두 번째 표현식을 반환 undefined ?? 'default'; // default null ?? 'default'; // default 0 ?? 'default'; // 0 falsy 값 false 0 -0 0n "" null undefined NaN

아래와 같이 조건문 안에 +를 사용하여 String에서 Number로 형변환을 시키는 코드가 있어, + 연산자의 몇가지 사용 예를 정리한다. const arry = ['1', '0']; arry.map(item => { if (+a) { ... } ... });더하기 일반적으로 사용하는 덧셈을 하도록 사용할 수 있다. 1 + 2; // 3 const a = 1; const b = 2; a + b; // 3전위, 후위 연산자 숫자를 증가시키기 위해 사용되며 전위, 후위로 사용할 수 있다. let a = 1; ++a; // 2; a; // 2; let a = 1; a++; // a; a; // 2;형변환 +을 이용하여 String을 Number 형식으로 형변환을 할 수 있다. +..

Tilt(~) 연산자 사용법 틸트(Tilt) 연산자를 사용하게 되면 내부적으로 32비트 정수로 변환 후 NOT 연산자를 실행한다. 9 ~9 // -10 최종적으로 2의 보수 -(n+1)와 같다. Tilt(~)를 사용하여 참, 거짓 처리 -(n+1)와 같다는 성질을 이용하여 조건문에서 Tilt(~)를 이용할 수 있다. const str = "Hello World"; if (~str.indexOf("ll")) { console.debug('참'); } else { console.debug('거짓'); } const arry = [1, 2, 3]; if (arry.findIndex(item => item === 2)) { console.debug('참'); } Tilt(~)를 두개 사용하여 비트 잘라내기 Ti..

Javascrript에서 모든 값은 다음 둘 중 하나의 값을 갖는다. Boolean으로 강제로 형변환하면 false가 되는 값 이를 제외한 나머지의 값 Boolean 으로 강제로 형변환시 false의 값을 가지게 되는 값들은 아래와 같다. false 0 -0 0n "" null undefined NaN 위의 값과 같이 강제로 형변환시 false의 값을 가지게 되는 경우를 falsy 그 외의 경우를 truthy라 한다. 참고 자료 https://developer.mozilla.org/ko/docs/Glossary/Truthy