자바스크립트에서 객체와 배열 안에 특정 키나 값이 존재하는지 확인하는 방법은 여러 가지가 있습니다. 먼저 객체(Object)의 경우부터 살펴보겠습니다.1. 객체에 키가 존재하는지 확인하기 — in 연산자객체에 특정 키가 존재하는지 확인하려면 in 연산자를 사용합니다.예제let obj = { name: John, age: 22 } console.log(name in obj); console.log(address in obj);출력 결과true false참고: in 연산자는 지정된 속성이 해당 객체 자신 또는 프로토타입

JSON은 JavaScript Object Notation의 약자로, 자바스크립트 객체 표기법을 의미합니다. 바로 이러한 이유 때문에 JSON.stringify() 메서드에는 예쁘게 출력하는(pretty-printing) 기능이 기본적으로 내장되어 있습니다.핵심은 JSON.stringify()의 세 번째 인수입니다. 이 인수에 숫자를 전달하면 해당 숫자만큼의 공백으로 들여쓰기를 적용해 가독성이 뛰어난 형태로 JSON을 출력할 수 있습니다.1. 자바스크립트 객체를 예쁘게 출력하기다음과 같이 객체를 선언한 후, 세 번째 인수에 4를 넣

TypeScript와 JavaScript는 모두 클라이언트 측에서 서버 요청을 처리하고 UI에 데이터를 렌더링하는 데 널리 사용되는 프로그래밍 언어입니다. 두 언어 모두 스크립팅 언어라는 공통점이 있지만, TypeScript는 JavaScript에 없는 다양한 기능을 추가로 지원하기 때문에 JavaScript의 상위 집합(Superset)이라고 할 수 있습니다.그렇다면 두 언어는 구체적으로 어떤 점에서 다를까요? 아래 표에서 TypeScript와 JavaScript의 주요 차이점을 항목별로 살펴보겠습니다.TypeScript와 Jav

JavaScript에서 변수를 선언할 때는 var와 let, 두 가지 키워드를 사용할 수 있습니다. 그렇다면 언제 var를 쓰고, 언제 let을 사용해야 할까요? 두 키워드의 주요 차이점을 정확히 이해하는 것이 올바른 선택의 첫걸음입니다. 가장 큰 차이: 스코프(Scope) let과 var의 핵심적인 차이는 바로 스코프(scope)입니다. let으로 선언된 변수는 자신이 선언된 블록({}) 안에서만 유효한 블록 스코프(block scope)를 가집니다. 반면 var로 선언된 변수는 블록과 무관하게 어디서든 접근할 수 있는 전역 스코

딥 클론(Deep Clone), 즉 깊은 복사는 복사 대상 객체 내부에 존재하는 모든 중첩 객체까지 하나하나 새롭게 복제하는 작업을 의미합니다. 이렇게 만들어진 복사본과 원본 객체는 아무것도 공유하지 않기 때문에, 원본이 변경되어도 복사본에는 전혀 영향을 주지 않습니다.가장 간단하고 널리 사용되는 방법은 객체를 JSON.stringify()로 문자열로 변환한 뒤, 다시 JSON.parse()로 JavaScript 객체로 되돌리는 것입니다. 다만 이 방식은 메서드(함수)는 복사할 수 없다는 한계가 있습니다.예제let obj = {

자바스크립트에는 다른 프로그래밍 언어처럼 코드 실행을 일시 정지하는 sleep() 함수가 기본적으로 제공되지 않습니다. 이는 자바스크립트가 단일 스레드 기반의 이벤트 루프로 동작하기 때문인데, 실행이 멈추면 전체 페이지가 응답하지 않게 될 수 있기 때문입니다.다행히도 setTimeout과 async/await를 조합하면 sleep과 동일한 효과를 손쉽게 구현할 수 있습니다. 가장 간단한 방법은 Promise를 반환하는 커스텀 sleep 함수를 직접 만드는 것입니다.구현 예제const sleep = milliseconds =>

자바스크립트는 Java나 C++ 같은 언어와 달리 열거형(Enum)을 기본적으로 지원하지 않습니다. 하지만 Object.freeze() 메서드를 활용하면 열거형과 유사한 구조를 손쉽게 만들 수 있습니다.Object.freeze()로 열거형 흉내 내기기본 원리는 간단합니다. 먼저 열거할 모든 상수 값을 프로퍼티로 담고 있는 객체를 생성한 뒤, Object.freeze()로 해당 객체를 동결(freeze)합니다. 객체가 동결되면 새로운 프로퍼티 추가, 기존 프로퍼티 수정 및 삭제가 모두 차단되므로, 열거형처럼 고정된 값 집합을 안전하게

Set(세트)이란 무엇인가?세트(Set)는 특정 값들을 순서 없이, 중복 없이 저장할 수 있는 추상 자료형입니다. 이는 수학에서 말하는 유한 집합(finite set) 개념을 컴퓨터로 구현한 것이라고 볼 수 있습니다.대부분의 다른 컬렉션 타입과 달리, 세트에서는 특정 요소를 꺼내오기보다는 주로 어떤 값이 집합에 속해 있는지(멤버십 검사)를 확인하는 방식으로 사용됩니다.언제 Set을 사용해야 할까?다음과 같은 상황에서 Set을 활용하면 좋습니다.- 저장하는 요소의 순서가 중요하지 않고, 값의 중복을 허용하고 싶지 않을 때- 주로 객체

JavaScript에서 집합(Set)이란?Set(집합)은 특정 값들을 저장할 수 있는 추상 자료형으로, 순서가 없고 중복된 값을 허용하지 않는다는 특징이 있습니다. 수학에서 말하는 유한 집합(finite set) 개념을 컴퓨터로 구현한 것입니다. 배열이나 리스트와 같은 대부분의 컬렉션과 달리, Set은 특정 요소를 순서대로 꺼내기보다는 주로 특정 값이 집합에 포함되어 있는지(멤버십)를 확인하는 용도로 활용됩니다.JavaScript에서는 ES6(ECMAScript 2015)부터 내장 Set 객체를 통해 이러한 집합 자료구조를 손쉽게

자바스크립트의 Set 객체는 저장된 모든 요소를 한 번에 삭제할 수 있는 clear() 메서드를 기본적으로 제공합니다. 이 메서드는 인자 없이 호출하며, 호출 즉시 해당 Set 객체가 비워집니다.clear() 메서드 사용 예제let mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); mySet.add(3); mySet.add(a); console.log(mySet) mySet.clear(); console.log(mySet)실행 결과Set { 1, 2, 3, a } Set {

자바스크립트(JavaScript)의 Set 클래스는 특정 값이 세트(Set) 객체에 포함되어 있는지 확인할 수 있도록 has() 메서드를 제공합니다. 이 메서드는 인자로 전달된 값이 세트에 존재하면 true, 존재하지 않으면 false를 반환합니다.has() 메서드는 다음과 같이 사용할 수 있습니다.예제 코드let mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); // 중복 값은 무시됨 mySet.add(3); mySet.add(a); console.log(mySet); c

JavaScript Set에서 객체 검색하기 JavaScript의 Set 클래스는 특정 집합 객체 안에 요소가 존재하는지 확인할 수 있는 has() 메서드를 제공합니다. 숫자나 문자열 같은 원시 값뿐만 아니라 객체도 Set에 저장할 수 있으며, 저장된 객체를 검색할 때도 동일한 메서드를 사용합니다. 다만 객체를 검색할 때는 한 가지 중요한 규칙이 있습니다. 바로 해당 객체의 참조(reference)를 그대로 전달해야 한다는 점입니다. JavaScript에서 객체는 값 자체가 아니라 메모리상의 참조 주소로 비교되기 때문에, 내용이 완

Set을 사용해야 하는 상황 이해하기JavaScript에서 Set을 활용해 코드를 더 빠르게 만들려면, 먼저 배열(Array) 대신 Set을 사용해야 하는 상황을 정확히 이해해야 합니다.1. 중복 데이터 방지Set은 고유한(unique) 요소만 저장합니다. 따라서 자료구조에 중복된 데이터가 저장되지 않아야 한다는 것을 미리 알고 있다면, 배열보다 Set을 사용하는 것이 훨씬 간편하고 효율적입니다.2. 집합 연산의 효율성합집합(union), 교집합(intersect), 차집합(difference) 같은 기본적인 집합 연산은 Set이

정규 표현식에서 \s 메타 문자는 공백(whitespace) 문자를 찾을 때 사용됩니다. 문자열에 공백 계열의 문자가 하나라도 포함되어 있는지 손쉽게 검사할 수 있습니다. \s가 매칭하는 공백 문자의 종류 \s는 다음과 같은 문자들을 공백 문자로 취급합니다. 스페이스(space) 문자 탭(tab) 문자 (\t) 캐리지 리턴(carriage return) 문자 (\r) 줄바꿈(new line) 문자 (\n) 수직 탭(vertical tab) 문자 (\v) 폼 피드(form feed) 문자 (\f) 예제 // 공백이 포함되어 있지

정규식(RegExp)에서 \W 메타문자는 단어 문자(word character)가 아닌 문자, 즉 비단어 문자를 찾을 때 사용합니다.여기서 말하는 단어 문자란 영문 소문자(a~z), 대문자(A~Z), 숫자(0~9), 그리고 밑줄(_)을 의미합니다. 이 범위에 속하지 않는 공백, 특수문자, 기호 등은 모두 비단어 문자로 간주됩니다.\W 메타문자의 역할\W는 [^a-zA-Z0-9_]와 동일한 의미를 가집니다. 즉, 대괄호 표기법으로 단어 문자를 제외하는 것과 같은 결과를 냅니다. 입력 문자열에 단어 문자 외의 문자가 하나라도 포함되어

자바스크립트는 다중 상속(multiple inheritance)을 지원하지 않습니다. 하지만 실제 개발에서는 두 개 이상의 클래스가 가진 기능을 하나의 객체에 합쳐야 하는 경우가 종종 발생합니다. 이럴 때 유용하게 쓸 수 있는 것이 바로 믹스인(Mixin)입니다.믹스인은 상속 계층 구조에 얽매이지 않고, 한 객체의 메서드와 속성을 다른 객체에 그대로 복사하여 기능을 확장하는 방법입니다.믹스인이란?믹스인은 섞다라는 뜻의 단어에서 유래했으며, 여러 객체의 기능을 하나의 클래스나 객체에 섞어 넣는 프로그래밍 기법을 의미합니다. 자바스크립

JavaScript의 클래스(class)는 ES6(ECMAScript 2015)에서 도입된 기능으로, 프로토타입(prototype) 기반 상속을 더 직관적으로 사용할 수 있게 해주는 문법적 설탕(syntactical sugar)입니다. 내부적으로 클래스는 사실 특수한 함수(special functions)로 동작합니다.class 키워드로 클래스 정의하기JavaScript에서는 class 키워드를 사용해 다음과 같이 클래스를 정의할 수 있습니다.class Person {     // 이 클래스의 생

클로저(Closure)란 함수와 그 함수가 선언된 당시의 렉시컬 환경(Lexical Environment)이 결합된 것을 의미합니다. 쉽게 말해, 내부 함수가 외부 함수의 변수에 계속 접근할 수 있도록 해주는 자바스크립트의 핵심 개념입니다.클로저의 기본 동작 원리function outerFunc() { var name = TutorialsPoint; // outerFunc가 생성한 지역 변수 return function innerFunc() { // innerFunc()는 내부 함수이자 클로저입니다

가비지 컬렉션(Garbage Collection)을 사용하는 언어에서 메모리 누수의 가장 큰 원인은 불필요한 참조(unwanted references)입니다. 메모리 누수를 제대로 이해하려면 먼저 메모리가 해제되는 과정, 즉 가비지 컬렉션이 어떻게 동작하는지 살펴볼 필요가 있습니다.마크 앤 스윕(Mark-and-Sweep) 알고리즘이 알고리즘은 더 이상 필요하지 않은 객체라는 개념을 도달할 수 없는(unreachable) 객체로 재정의합니다. 이 방식은 루트(roots)라고 불리는 객체 집합이 존재한다는 전제를 기반으로 합니다. 자

자바스크립트 순환 참조의 예순환 참조(Circular Reference)는 서로 다른 두 객체가 서로를 참조할 때 발생합니다.과거의 문제점: 메모리 누수구형 브라우저에서는 순환 참조가 메모리 누수(memory leak)의 주요 원인이었습니다. 하지만 최신 가비지 컬렉션(Garbage Collection) 알고리즘은 순환 구조와 순환 의존성을 충분히 처리할 수 있도록 개선되었기 때문에, 이제는 더 이상 큰 문제가 되지 않습니다.설계 관점에서의 순환 참조그러나 순수한 설계 관점에서 보면, 순환 참조는 여전히 바람직하지 않은 코드 스멜(