String.trimStart()와 String.trimEnd()란?JavaScript의 String.trimStart() 메서드는 문자열 앞부분(시작 부분)의 공백을 제거하고, String.trimEnd() 메서드는 문자열 뒷부분(끝 부분)의 공백을 제거합니다.두 메서드 모두 원본 문자열은 변경하지 않고, 공백이 제거된 새로운 문자열을 반환한다는 점이 특징입니다. 이는 ES2019(ES10)에서 표준으로 도입된 기능으로, 기존의 trim() 메서드가 양쪽 공백을 모두 제거하는 것과 달리 한쪽 방향만 선택적으로 처리할 수 있어 더욱
ES2019(ES10)에서 도입된 선택적 캐치 바인딩(Optional Catch Binding)은 try-catch 문에서 catch 블록의 괄호와 매개변수를 생략할 수 있도록 해주는 기능입니다. 즉, 발생한 에러 객체를 담을 변수를 더 이상 선언하지 않아도 됩니다.이 기능은 다음과 같은 상황에서 특히 유용합니다.발생할 수 있는 에러의 종류를 미리 알고 있는 경우에러의 구체적인 내용과 관계없이 단순히 예외 처리 로직만 실행하면 되는 경우기존에는 반드시 catch(err)처럼 변수를 명시해야 했지만, 이제는 아래와 같이 괄호 없이 c
flatMap() 메서드란? JavaScript의 Array.prototype.flatMap() 메서드는 주어진 중첩 배열(nested array)을 새로운 평탄화된(flat) 배열로 변환하는 함수입니다. flatMap()은 각 요소에 콜백 함수를 적용하는 map()과, 결과를 한 단계만 펼쳐주는 flat()의 기능을 하나로 결합한 메서드입니다. 즉, arr.map(fn).flat(1)과 동일한 결과를 반환하지만 두 메서드를 따로 호출할 필요가 없어 코드가 더 간결하고 효율적입니다. flatMap()의 특징 원본 배열은 변경하지
encodeURI() 함수란?JavaScript의 encodeURI() 함수는 전체 URI를 인코딩하는 데 사용됩니다. 단, 예약 문자인 , / ? : @ & = + $ #는 인코딩하지 않고 그대로 유지합니다.decodeURI() 함수란?decodeURI() 함수는 encodeURI() 함수로 인코딩된 URI를 다시 원래 형태로 디코딩하는 역할을 합니다.즉, 두 함수는 서로 반대되는 기능을 수행하며, URL에 공백이나 특수문자가 포함된 경우 이를 안전하게 처리할 때 유용하게 사용됩니다.예제 코드다음은 JavaScript에서
JavaScript에서 매개변수(parameter)와 인수(argument)는 자주 혼용되지만 서로 다른 개념입니다. 이 두 용어의 차이를 정확히 이해하면 코드를 읽고 작성할 때 훨씬 수월해집니다. 매개변수(Parameter)란 무엇인가? 매개변수는 함수를 정의할 때 소괄호 안에 선언되는 변수 이름을 의미합니다. 함수가 어떤 값을 받아 처리할지 미리 지정해 두는 일종의 자리 표시자 역할을 합니다. 인수(Argument)란 무엇인가? 인수는 함수를 호출할 때 실제로 전달되는 구체적인 값입니다. 함수 내부에서는 이 값이 매개변수에
함수 호출(Function Invocation)과 메서드 호출(Method Invocation)이란?자바스크립트에서 함수를 실행하는 방식은 크게 두 가지로 나눌 수 있습니다.함수 호출은 add(2, 3)처럼 함수 이름을 직접 사용하여 호출하는 방식입니다. 이 경우 함수 내부의 this는 전역 객체(window)를 가리키거나 엄격 모드에서는 undefined가 됩니다.메서드 호출은 obj.welcome()처럼 객체의 속성으로 정의된 함수를 호출하는 방식입니다. 이 경우 this는 해당 메서드를 소유한 객체를 가리키기 때문에 객체 내부
JavaScript의 call() 메서드는 서로 다른 객체에서 동일한 함수를 재사용할 수 있도록 도와주는 유용한 기능입니다. call()을 호출할 때 첫 번째 인수는 함수 내부에서 this로 바인딩되는 객체가 되며, 두 번째 인수부터는 쉼표로 구분하여 개별적으로 전달됩니다. call() 메서드의 기본 문법 func.call(thisArg, arg1, arg2, ...) thisArg : 함수 내부에서 this로 사용될 객체 arg1, arg2, ... : 함수에 전달할 인수 목록 (쉼표로 구분하여 나열) 참고로 비슷한 역할을 하
블록 스코프(Block Scope)는 두 개의 중괄호 { } 사이에 형성되는 영역을 의미합니다. 이 블록은 반복문(loop), if 조건문 또는 switch 문 내부 어디에서든 생성될 수 있습니다.ES2015(ES6)에서 도입된 let과 const 키워드를 사용하면 해당 블록 내부에서만 접근할 수 있는 블록 범위 변수를 선언할 수 있습니다. 즉, 블록 밖에서는 이 변수들에 접근할 수 없으며, 접근을 시도하면 참조 오류(ReferenceError)가 발생합니다.다음은 JavaScript에서 블록 스코핑이 어떻게 동작하는지 보여주는 코
자바스크립트에서 오류(Error) 객체는 스크립트 실행 중 문제가 발생했을 때 자바스크립트 인터프리터가 자동으로 생성하여 던지는(throw) 객체입니다. 또한 개발자가 직접 사용자 정의 예외를 만들어 던질 때에도 이 오류 객체를 활용할 수 있습니다.오류 객체의 주요 속성자바스크립트 오류 객체는 다음과 같은 두 가지 핵심 속성을 제공합니다.속성설명name오류의 이름(종류)을 설정하거나 반환합니다. 예를 들어 TypeError, ReferenceError 등이 있습니다.message오류에 대한 상세 메시지를 문자열 형태로 설정하거나 반
배열 구조 분해란 무엇인가?구조 분해 할당(Destructuring)은 배열이나 객체에 저장된 값을 개별 변수로 손쉽게 꺼내올 수 있도록 해주는 JavaScript 문법입니다. 특히 배열 구조 분해를 활용하면 인덱스 번호로 하나씩 접근하는 번거로운 작업 없이, 단 한 줄의 코드로 여러 값을 동시에 추출하여 변수에 할당할 수 있습니다.다음은 JavaScript에서 배열 구조 분해를 구현한 예제 코드입니다.예제<!DOCTYPE html> <html lang=en> <head> <meta charse
자바스크립트의 for...of 루프는 배열(Array), 문자열(String), 유사 배열 객체(array-like objects), NodeList 등 반복 가능한(iterable) 객체를 순회할 수 있도록 해주는 강력한 반복문입니다.기존의 전통적인 for 루프나 forEach 메서드와 달리, for...of 루프는 인덱스 관리 없이 각 요소의 값에 직접 접근할 수 있어 코드가 더 간결하고 가독성이 뛰어납니다.for...of 루프 기본 문법for (변수 of 반복가능한객체) { // 실행할 코드 }예제 코드다음은 자바스크립트에
JavaScript Array.prototype.find() 메서드란?Array.prototype.find() 메서드는 배열에서 주어진 조건을 만족하는 첫 번째 요소의 값을 반환합니다. 조건에 맞는 요소가 여러 개 있더라도 가장 먼저 발견된 하나만 반환하며, 만족하는 요소가 없으면 undefined를 리턴합니다.콜백 함수는 배열의 각 요소에 대해 순서대로 실행되며, 콜백이 true를 반환하는 순간 탐색이 중단되고 해당 요소가 결과로 돌아옵니다.주요 특징조건을 만족하는 첫 번째 요소의 값만 반환합니다.조건에 일치하는 요소가 없으면 u
JavaScript에서 배열의 특정 요소를 제거할 때 가장 널리 사용되는 방법 중 하나가 splice() 메서드입니다. splice()는 단순히 요소를 삭제하는 것뿐만 아니라 교체나 새 요소 추가까지 가능한 강력한 메서드이며, 원본 배열 자체를 직접 변경(mutate)한다는 특징이 있습니다.splice() 메서드의 기본 문법splice() 메서드는 두 개의 주요 매개변수를 받습니다.시작 인덱스(startIndex) – 제거를 시작할 위치삭제 개수(deleteCount) – 시작 인덱스부터 제거할 요소의 개수예를 들어 arr.spli
JavaScript 생성자 함수에 새로운 속성(property)이나 메서드(method)를 추가하려면 prototype 객체를 활용하면 됩니다. 생성자 함수의 프로토타입에 속성이나 메서드를 정의하면, 해당 생성자로부터 만들어진 모든 인스턴스가 이를 공유하여 사용할 수 있습니다. 이는 메모리를 효율적으로 관리할 수 있는 방법이기도 합니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewpor
JavaScript에서 new 연산자를 사용하면 생성자(constructor) 함수를 기반으로 새로운 객체 인스턴스를 간편하게 만들 수 있습니다. new 연산자가 실행되면 빈 객체가 먼저 생성되고, 생성자 함수 내부의 this 키워드가 해당 객체를 가리켜 속성이 할당된 뒤, 완성된 객체가 반환됩니다.예제<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewp
JavaScript에서 생성자 함수는 일반적으로 new 키워드를 통해 새로 생성된 객체(this)를 암묵적으로 반환합니다. 하지만 생성자 내부에서 객체를 명시적으로 반환하면, new 연산자는 this 대신 그 객체를 결과값으로 돌려줍니다. 반면 숫자나 문자열 같은 원시 타입(primitive)을 반환하면 무시되고 기존처럼 this가 반환된다는 점도 함께 기억해 두면 좋습니다. 예제 코드 다음은 JavaScript 생성자에서 값을 반환하는 방법을 보여주는 코드입니다. <!DOCTYPE html> <html lang=&
자바스크립트 finally 문이란?자바스크립트의 finally 문은 try 블록과 catch 블록이 모두 실행된 후에 오류가 발생했는지 여부와 관계없이 항상 실행되는 구문입니다. 이러한 특성 덕분에 리소스 해제, 변수 초기화, UI 업데이트 등 어떤 경우에도 반드시 수행해야 하는 정리(cleanup) 작업을 안전하게 처리할 수 있습니다.일반적인 동작 흐름은 다음과 같습니다.try 블록에서 오류가 발생하지 않으면 → try 블록 실행 후 finally 블록 실행try 블록에서 오류가 발생하면 → catch 블록 실행 후 finally
JavaScript에서 자체 호출 함수(Self-Invoking Function)는 즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)이라고 불립니다.IIFE는 이름 그대로 함수가 정의되는 순간 곧바로 실행되는 JavaScript 함수입니다. 따라서 일반 함수처럼 별도로 호출하는 과정이 필요 없다는 것이 가장 큰 특징입니다.IIFE의 기본 문법IIFE는 다음과 같은 형태로 작성합니다.(function () { // 실행할 코드 })();함수 전체를 괄호 ()로 감싸고, 그
타입 강제 변환이란?타입 강제 변환(Type Coercion)은 하나의 데이터 타입이 자동으로 또는 암묵적으로 다른 데이터 타입으로 변환되는 것을 의미합니다. 자바스크립트는 느슨한 타입(loosely typed) 언어이기 때문에, 개발자가 명시적으로 변환하지 않아도 연산 과정에서 엔진이 스스로 타입을 변환하는 경우가 많습니다.대표적인 예로 문자열과 숫자를 더할 때 발생하는 현상을 들 수 있습니다. + 연산자의 피연산자 중 하나라도 문자열이면, 나머지 숫자도 자동으로 문자열로 변환되어 문자열 연결(concatenation)이 이루어집
타입 캐스팅(Type Casting)이란? 타입 캐스팅은 하나의 데이터 타입을 다른 데이터 타입으로 명시적으로 변환하는 과정을 의미합니다. 자바스크립트는 느슨한 타입 언어이기 때문에 개발자가 직접 내장 함수를 사용해 원하는 타입으로 값을 변환할 수 있으며, 대표적으로 아래 세 가지 함수가 가장 널리 사용됩니다. String() : 값을 문자열(string) 타입으로 변환 Number() : 값을 숫자(number) 타입으로 변환 Boolean() : 값을 불리언(boolean) 타입으로 변환 예를 들어 숫자 44를 String(