📌 Set 생성자의 동작 방식자바스크립트의 Set 생성자(new Set())는 다음과 같이 동작한다.인수 없음: new Set()처럼 인수를 전달하지 않으면 빈(Empty) Set 객체가 생성된다.하나의 이터러블 인수: new Set(iterable)처럼 하나의 이터러블(Iterable) 객체(예: 배열 Array, 문자열 String, 다른 Set 등)를 인수로 전달하면, 해당 이터러블의 요소들을 순회하면서 고유한 값들만 추출하여 새로운 Set 객체를 생성한다.⚠️ 여러 개의 인수 또는 이터러블이 아닌 인수: Set 생성자는 오직 첫 번째 인수만 확인한다.만약 첫 번째 인수가 이터러블이면, 그 이터러블의 요소들로 Set을 만든다. 두 번째 이후의 인수들은 모두 무시된다.만약 첫 번째 인수가 이터러블이..

JavaScript에서 심볼(Symbol)은 ES6에서 추가된 7번째 데이터 타입이다.심볼(Symbol) 타입은 JavaScript에서 고유하고 불변하는 값을 생성하는 데 사용된다.심볼은 주로 객체의 속성 키로 활용되어 속성 이름 충돌을 방지하거나, 특정 기능을 구현하는 데 사용된다. 특징원시 타입 (primitive data type): Boolean, null, undefined, Number, String과 같은 원시 타입에 속한다.변경 불가능한 값: 심볼 값은 한 번 생성되면 변경할 수 없다.유일성: 심볼은 생성될 때마다 고유한 값으로 만들어진다. 같은 설명(description)을 가진 심볼도 서로 다른 값으로 취급된다.생성 방법심볼은 Symbol() 함수를 호출하여 생성한다.const mySy..

JavaScript에서 비동기 처리는 웹 개발에서 필수적인 개념이다. 비동기 처리를 효과적으로 관리하기 위한 다양한 방법들이 존재하며, 그중 대표적인 것이 콜백(callbacks), 프로미스(Promises), async/await이다.콜백 함수 (Callbacks)콜백 함수는 프로그래밍에서 다른 함수에 인자로 전달되는 함수이다. 이 함수는 특정 이벤트가 발생하거나 특정 작업이 완료된 후 "나중에 호출"된다. 콜백 함수의 핵심은 웹 API에 작업을 전달하고, 해당 작업이 완료되었을 때 특정 함수(콜백 함수)를 실행하여 결과를 처리하는 것이다. 이 과정을 이벤트 루프라고 한다.이 과정에서 2가지 핵심 요소를 만족하게 된다.비동기 처리웹 API 호출, 파일 읽기, 타이머 설정 등 시간이 걸리는 작업은 비동기..

ES6 클래스는 ECMAScript 2015(ES6)에서 도입된 새로운 객체 지향 프로그래밍 문법이다. 기존의 프로토타입 기반 상속보다 클래스 기반 언어와 유사한 문법을 제공하여 개발자들이 객체 지향 프로그래밍을 더욱 쉽게 사용하도록 돕는다.class는 기본적으로 프로토타입 기반 상속이다.class 문법은 자바스크립트의 프로토타입 기반 상속을 더욱 쉽게 사용할 수 있도록 "문법적 설탕(syntactic sugar)"을 제공하는 것이지 상속을 받는 전혀 다른 방식이 아니다.문법적 설탕(syntactic sugar)?프로그래밍 언어에서 기존에 존재하는 기능을 더 쉽고 간결하게 사용할 수 있도록 제공하는 문법을 의미한다.자바 스크립트에선화살표 함수 (Arrow functions)구조 분해 할당 (Destruc..

자바스크립트는 클래스(class) 기반 언어가 아닌 프로토타입(prototype) 기반 언어이다.객체지향 프로그래밍을 할 때 클래스에서 객체를 찍어내는 방식(Java, C++, Python 등)이 아니라, 기존 객체(프로토타입)를 복사하고 수정해서 새로운 객체를 만드는 방식을 사용한다. 프로토 타입(Prototype)이란?자바스크립트에서 객체는 다른 객체의 값을 상속 받을 수 있으며, 그 기반이 되는 객체를 '프로토타입'이라고 한다.프로토타입은 말 그대로 원본, 원형, 시제품의 의미이며 새로운 객체의 거푸집(몰드, 형틀) 역할을 한다.상속?원본이 되는 객체(프로토타입)의 속성과 메서드과 메서드를 '참조'한다는 의미다. 원본 데이터는 그대로 존재하고 메모리 주소를 참조하는 방식에 가깝다.즉 원본 데이터를 ..

자바스크립트에서 생성자 함수는 new 키워드와 함께 호출되어 객체를 생성하고 초기화하는 특별한 함수이다.일반 함수와 달리, 생성자 함수는 객체 생성을 목적으로 하며, this 키워드를 사용하여 새로 생성될 객체의 속성과 메서드를 정의한다. 즉 방을 꾸미려고 할 때  미리 어떤 위치에는 의자가 놓이고, 어떤 위치에는 책상이 높이고, 어떤 위치에는 침대가 놓이고 하는 것들을 미리 정해두는 것이다.function FurnitureLayout(chair, table, bed) { this.chair = chair; // 의자 this.table = table; // 테이블 this.bed = bed; // 침대 };여기서 new 키워드로 생성자 함수를 호출하고 매개변수를 할당하는 것은 해당 매개변..

다형성(Polymorphism)은 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, '여러 형태를 가질 수 있는 능력'을 의미한다. 즉, 하나의 인터페이스나 메서드가 다양한 형태의 객체를 처리할 수 있는 능력을 말한다. 핵심 개념하나의 인터페이스, 다양한 구현:다형성을 통해 동일한 이름의 메서드가 객체의 타입에 따라 다르게 동작할 수 있다.예를 들어, '소리 내기'라는 메서드가 동물 객체에서는 '멍멍', 고양이 객체에서는 '야옹'으로 다르게 구현될 수 있다.유연성과 확장성:다형성은 코드의 유연성을 높여주고 새로운 타입의 객체가 추가되더라도 기존 코드를 수정하지 않고 확장할 수 있게 해준다.이는 코드의 재사용성을 높이고 유지 보수를 용이하게 한다.다형성의 종류오버로딩(Overloading):같은 이름..

객체 지향 프로그래밍(Object-Oriented Programming, OOP) 은 프로그래밍의 한 패러다임(paradigm)이다. 즉 지배적인 사상, 접근 방식, 철학이라고 볼 수 있다. 이런 패러다임은 크게 2가지로 나뉘는데 흔히들 말하는 절차 지향 프로그래밍(Procedural Programming)과 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이다. 그렇다면 객체 지향이란 결국엔 무엇인가?기본적으로 프로그램은 코드 1줄, 1줄로 만들어진다. 그렇지 않은 프로그램은 존재하지 않는다고 볼 수 있다.그런데 객체 지향은 그런 코드를 1줄, 1줄 단위가 아닌 객체라는 덩어리 단위로 관리하는 것을 선호한다는 것이다. 그렇다면 객체란 결국 무언인가?핵심 개념객체 (Obj..

IIFE(Immediately Invoked Function Expression)는 '즉시 실행 함수 표현식'이라는 뜻으로, 자바스크립트에서 함수를 정의하자마자 즉시 실행하는 패턴을 의미한다. IIFE의 기본 구조IIFE는 다음과 같은 기본적인 구조를 가진다.(function() { // 함수 내용})();익명 함수를 괄호 ()로 감싼다.함수 뒤에 또 다른 괄호 ()를 붙여 함수를 즉시 호출한다.IIFE의 사용 이유 및 개념스코프 제한:IIFE 내부에서 선언된 변수와 함수는 IIFE 내부 스코프에서만 접근할 수 있다.이를 통해 전역 스코프의 오염을 방지하고, 변수명 충돌을 막을 수 있다.즉시 실행:함수를 정의하자마자 즉시 실행하므로, 초기화 코드나 한 번만 실행하면 되는 코드를 작성하는 데 유용하다.모..

변수/함수 유형호이스팅초기화특징var 변수일어남undefined함수 스코프, 선언 전 사용 시 undefinedlet 변수일어남초기화 안됨 (TDZ)블록 스코프, 선언 전 사용 시 ReferenceErrorconst 변수일어남초기화 안됨 (TDZ)블록 스코프, 선언 전 사용 시 ReferenceError, 재할당 불가함수 선언식 (Function Declaration)일어남함수 전체 로드선언 전 호출 가능함수 표현식 (Function Expression, var)일어남undefined선언 전 호출 시 TypeError 발생 가능함수 표현식 (Function Expression, let, const)변수 호이스팅 규칙을 따름초기화 안됨 (TDZ)선언 전 호출 시 ReferenceError 발생  일반적으로..