백슬래시(\)는 JavaScript에서 문자열을 여러 줄로 나눌 때 매우 중요한 역할을 합니다. 백슬래시 없이 문자열을 중간에 끊어버리면 JavaScript가 해당 문자열을 읽지 못하고, 그 결과 아무런 출력도 생성되지 않습니다. 다음 예제에서는 문자열을 나누는 과정에서 백슬래시를 사용하지 않았기 때문에 화면에 아무것도 표시되지 않습니다. 예제 1: 백슬래시 없이 문자열 나누기 (실패 사례) <html> <body> <p id="backslash"></p> <scri
Object.is()란 무엇인가?Object.is()는 JavaScript에서 두 개의 값이 서로 같은지 여부를 확인할 때 사용하는 정적 메서드입니다.Object.is()가 두 값을 같다고 판단하려면 다음 조건 중 하나를 만족해야 합니다.두 값이 모두 undefined이거나 모두 null인 경우두 값이 모두 true이거나 모두 false인 경우두 문자열의 길이가 같고, 문자가 동일하며, 순서까지 일치하는 경우두 값의 부호(극성)가 서로 같은 경우두 값이 모두 NaN인 경우기본 문법Object.is(val1, val2);Object.
Object.seal()과 Object.freeze()의 핵심적인 차이점은 객체 속성의 값 변경 가능 여부에 있습니다. Object.seal()은 기존 속성의 삭제는 막아주지만, 속성 값의 수정은 허용합니다. 반면 Object.freeze()는 객체를 어떠한 변경으로부터도 완전히 보호(immunity)하여, 아주 사소한 수정조차 불가능하게 만듭니다.Object.seal()Object.seal() 메서드는 기존 속성의 삭제를 금지하지만, 외부에서 속성 값을 변경하는 것까지는 보호해 주지 못합니다. 즉, 새로운 속성 추가와 기존 속성
JavaScript Proxy() 객체란?Proxy() 객체는 ECMAScript 6(ES6)에서 새롭게 도입된 기능 중 하나로, 속성 조회(property lookup), 할당(assignment), 열거(enumeration), 함수 호출 등 객체의 기본적인 연산에 대해 사용자 지정 동작(custom behavior)을 정의할 수 있게 해주는 강력한 도구입니다.Proxy() 객체를 이해하려면 먼저 다음 세 가지 핵심 용어를 알아야 합니다.handler(핸들러) — 트랩(trap)들을 담고 있는 자리표시자(placeholder)
순수 함수(Pure Function)란 무엇인가?순수 함수(Pure Function)는 결정론적(deterministic) 함수를 의미합니다. 즉, 동일한 입력값을 넣을 때마다 항상 동일한 출력값을 반환하는 함수입니다. 수학적으로 표현하면 잘 정의된(well-defined) 함수와 같은 개념입니다.순수 함수는 다음과 같은 특징을 가집니다.오직 자신의 매개변수(인자)에만 의존합니다.함수 외부 범위에 있는 변수를 변경하려고 하지 않습니다.부작용(side effects)을 일으키지 않습니다.순수 함수가 아닌 경우 1: 외부 변수에 의존하
JavaScript에서 객체가 봉인(sealed)되었는지 여부를 확인하려면 Object.isSealed() 메서드를 사용합니다. 이 메서드는 객체의 봉인 상태에 따라 불리언(boolean) 값을 반환합니다.객체가 봉인되었다고 판단되는 조건은 다음과 같습니다.1) 객체가 확장 가능(extensible)하지 않아야 합니다.2) 객체의 모든 속성이 구성 불가능(non-configurable)해야 합니다.문법Object.isSealed(obj)매개변수 — Object.isSealed()는 객체를 인자로 받으며, 해당 객체가 봉인되었는지 여
문자열에서 HTML 태그 제거하기JavaScript에서는 정규표현식(Regular Expression)을 활용하여 문자열에 포함된 HTML/XML 태그를 간단하게 제거할 수 있습니다. span, div 같은 HTML 요소는 <div>, <span>처럼 여닫이 꺾쇠괄호() 사이에 위치합니다. 따라서 정규표현식으로 꺾쇠괄호와 그 안의 내용을 모두 빈 문자열()로 치환하면 손쉽게 태그를 제거할 수 있습니다.기본 문법str.replace( /(<([^>]+)>)/ig, '');위 정규표현
네임스페이스 오염(Namespace Pollution)이란?JavaScript는 함수 오버로딩(function overloading)을 지원하지 않습니다. 따라서 같은 이름을 가진 두 개의 함수가 존재하면, 나중에 로드된 함수가 먼저 로드된 함수를 덮어쓰게(override) 됩니다. 이는 곧 JavaScript에 네임스페이스(namespace)라는 이름 구분 체계가 없다는 의미입니다.다행히 객체(object)를 활용하면 직접 네임스페이스를 만들 수 있고, 이를 통해 함수나 변수 이름이 충돌하는 네임 충돌(name collision)
for...in과 for...of 루프의 차이점 두 루프 모두 무언가를 반복(iterate)한다는 공통점이 있지만, 가장 큰 차이점은 무엇을 순회하느냐에 있습니다. 1) for...in 루프 for...in 루프는 객체의 열거 가능한 속성(enumerable properties)을 임의의 순서로 순회합니다. 이 루프는 값(value)이 아니라 오직 속성(key)에만 관심을 둡니다. 다음 예제에서는 for...in 루프를 사용해 배열의 속성을 순회합니다. 배열에서 인덱스(index)는 중요한 속성이므로 각 요소의 인덱스가 순서대로
정규 표현식(Regular Expression)을 사용하면 JavaScript에서 주어진 문자열의 단어 수를 손쉽게 계산할 수 있습니다. 문자열에 포함된 단어를 정확하게 세기 위해서는 몇 가지 전처리 과정을 거쳐야 하며, 이 글에서는 그 단계를 하나씩 살펴보겠습니다.단어 수 계산 시 고려해야 할 사항문장이나 문단은 여러 개의 단어가 공백으로 구분되어 이루어져 있습니다. 그런데 실제 문자열에서는 단어 사이에 공백이 하나만 있는 것이 아니라, 두 칸 이상의 연속된 공백이나 줄바꿈 앞뒤의 불필요한 공백도 존재할 수 있습니다. 따라서 정확
JavaScript는 getElementById(), getElementsByClassName() 같은 DOM 선택 메서드와 style 속성을 조합하면 요소의 색상, 글꼴 크기 등 CSS 스타일을 자유롭게 변경할 수 있습니다.아래 예제에서는 getElementById() 메서드를 사용해 요소의 글꼴 크기와 글꼴 스타일을 변경하는 방법을 살펴보겠습니다.예제 1 — 글꼴 크기와 글꼴 스타일 변경하기다음 예제에서는 style.fontSize와 style.fontStyle 명령을 사용해 지정된 텍스트의 글꼴 크기를 35px로, 글꼴 스타일
JavaScript에서 숫자끼리 더하면 일반적인 산술 덧셈이 수행됩니다. 하지만 숫자와 문자열을 함께 더하려고 하면 산술 연산이 불가능하기 때문에, 자바스크립트는 두 값을 이어 붙이는 연결(concatenation) 동작으로 처리합니다. 즉, + 연산자는 피연산자 중 하나라도 문자열이 있으면 나머지 숫자를 자동으로 문자열로 변환한 뒤 문자열을 합칩니다. 이러한 암묵적 형 변환(type coercion)은 초보 개발자가 자주 겪는 실수의 원인이 되므로 정확히 이해하는 것이 중요합니다. 예제로 확인하기 아래 예제에서는 네 개의 변수 a
함수를 메서드로 접근하기 JavaScript 객체는 여러 개의 속성(property)으로 구성됩니다. 어떤 속성을 메서드처럼 사용하려면, 그 속성에 함수를 정의하고 함수 내부에서 객체의 다른 속성들을 함께 활용하면 됩니다. 다음 예제에서는 employee라는 객체를 생성하며, 여기에는 fullName, lastName, firstName, Designation 등의 속성이 포함되어 있습니다. 이때 fullName 속성 아래에 함수를 정의하고, 그 안에서 firstName과 lastName 속성을 참조하도록 작성했습니다. 따라서 f
이메일 주소 숨기기웹 페이지에 이메일 주소를 그대로 노출하면 스팸 봇이나 승인되지 않은 사용자에게 수집될 위험이 있습니다. JavaScript를 활용하면 이메일 주소의 일부를 가려서(masking) 개인 정보를 보호할 수 있습니다. 아래 단계를 따라 구현해 보세요.모든 이메일 주소에는 공통적으로 @ 기호가 포함되어 있습니다. 따라서 split() 메서드를 사용해 이메일 주소를 @ 기준으로 분리합니다. 예를 들어 batman@gmail.com을 분할하면 batman과 gmail.com이라는 두 개의 결과를 얻게 됩니다.분할된 결과를
WeakSet.has() 메서드란?WeakSet.has()는 JavaScript에 내장된 함수로, 특정 객체가 WeakSet 컬렉션 안에 존재하는지 검사한 후 그 결과를 불리언(Boolean) 값으로 반환합니다. 참고로 WeakSet 객체는 약하게 참조되는(weakly held) 객체들을 컬렉션 형태로 저장할 수 있게 해주는 자료구조입니다.문법(Syntax)weakSet.has(obj);매개변수(Arguments)weakSet.has() 메서드는 하나의 매개변수 obj를 받아들이며, 해당 객체가 대상 WeakSet에 존재하는지 여부
Atomics란?Atomics는 JavaScript에서 원자적(atomic) 연산을 정적(static) 메서드 형태로 제공하는 내장 객체입니다. Math 객체의 메서드처럼 Atomics의 모든 메서드와 속성도 정적으로 제공되며, 주로 SharedArrayBuffer 객체와 함께 사용됩니다.원자적 연산은 Atomics 모듈에 구현되어 있습니다. 다른 전역 객체들과 달리 Atomics는 생성자(constructor)가 아니기 때문에 new 연산자와 함께 사용하거나 함수처럼 직접 호출할 수 없습니다.원자적(Atomic) 연산이란?원자적
JavaScript에서 함수에 값을 전달하는 방식은 크게 두 가지로 나눌 수 있습니다. 바로 값에 의한 전달(pass by value)과 참조에 의한 전달(pass by reference)입니다. 이 두 가지 개념을 정확히 이해하면 함수 내부에서의 데이터 변경이 외부 변수에 어떤 영향을 미치는지 명확하게 파악할 수 있습니다. 값에 의한 전달 (Pass by Value) 값에 의한 전달 방식에서는 함수를 호출할 때 변수의 값 자체가 인수(argument)로 직접 복사되어 전달됩니다. 따라서 함수 내부에서 인수의 값을 변경하더라도 함
JavaScript에서 배열을 비우는 방법은 여러 가지가 있습니다. 각 방법마다 동작 방식과 주의점이 다르므로, 상황에 맞는 방법을 선택하는 것이 중요합니다. 먼저 다음과 같은 배열이 있다고 가정해 보겠습니다. var array1 = [1, 2, 3, 4, 5, 6, 7]; 방법 1: 새로운 빈 배열 할당하기 array1 = []; 위 코드는 기존 변수에 새로운 빈 배열을 할당하는 방식입니다. 원본 배열 array1을 참조하는 다른 변수가 없다면 가장 간단하고 직관적인 방법입니다. 다만 이 방법에는 주의할 점이 있습니다. 만약 다른
JavaScript에서 객체에 특정 키(속성)가 존재하는지 확인하는 방법은 여러 가지가 있습니다. 그중 가장 널리 사용되는 두 가지 방법은 in 연산자와 hasOwnProperty() 메서드입니다.먼저 아래와 같은 employee 객체가 있다고 가정해 보겠습니다.var employee = { name: Ranjan, age: 25 }이제 employee 객체에 name 속성이 존재하는지 확인해 보겠습니다.1) in 연산자in 연산자를 사용하면 객체의 속성 존재 여부를 간단하게 확인할 수 있습니다. 주의할 점은 in 연산자
자바스크립트(JavaScript)에서 어떤 변수가 배열인지 아닌지 판별해야 하는 경우가 종종 있습니다. 예를 들어, 함수에 전달된 인수가 배열일 때만 반복문을 실행하거나 배열 전용 메서드를 사용하고 싶을 때가 그렇습니다. 이때 활용할 수 있는 대표적인 방법은 다음과 같이 세 가지입니다.1) Array.isArray() 메서드Array.isArray() 메서드는 인수로 전달된 변수가 배열인지 여부를 검사합니다. 변수가 배열이면 true를, 그렇지 않으면 false를 반환합니다. ES5부터 도입된 공식 표준 메서드로, 가장 권장되는 방