[자바스크립트] Set 사용법
·
언어/자바스크립트
/* Create */const set = new Set();/* Add */set.add(1)set.add(2)set.add(3)set.add(1)console.log(set) // Output: Set(3) { 1, 2, 3 }/* Check */console.log(set.has(1)) // trueconsole.log(set.has(5)) // false/* Remove */set.delete(1)/* Size */console.log(set.size) // 2/* Iterate */for (let item of set) { console.log(item)}set.forEach(value => { console.log(value)})/* Convert Set to Array */const ar..
[자바스크립트] 문자 <-> 아스키코드(ASCII) 변환 방법
·
언어/자바스크립트
문자 > 아스키코드let str = "Hello world!";console.log(str.charCodeAt(0)); // 72 (H)console.log(str.charCodeAt(1)); // 101 (e) 아스키코드 > 문자const code_e = 101;const code_H = 72;console.log(String.fromCharCode(code_e)); // econsole.log(String.fromCharCode(code_H)); // H
자바스크립트 문자열(String)의 모든 것
·
언어/자바스크립트
문자열의 기본 특성JavaScript에서 문자열은 원시 타입 중 하나이며, 변경 불가능(immutable) 합니다. 즉, 한 번 생성된 문자열을 직접 수정할 수 없고, 수정된 '새로운 문자열'을 만들어서 반환합니다. String 객체와 원시 문자열원시 문자열(primitive string)let str = "Hello";이는 JS 엔진 내부적으로 문자열 리터럴을 저장하며, 상수 풀(String pool)에 캐싱될 수도 있습니다.String 객체let objStr = new String("Hello");이는 래퍼(wrapper) 객체입니다. 원시 문자열에 대해 객체 형태의 프로퍼티와 메서드를 사용할 때 내부적으로 임시 `String` 객체로 감싸주지만, 가급적 직접 `new String(...)` 방식보다..
자바스크립트와 브라우저의 비동기 처리 구조: 이벤트 루프와 큐
·
언어/자바스크립트
들어가며자바스크립트와 브라우저 환경에서의 비동기 처리 구조를 전반적으로 정리한 내용입니다. 단일 스레드 언어인 자바스크립트가 어떻게 비동기 처리를 구현하는지, 그리고 브라우저가 제공하는 Web API와 이벤트 루프를 통해 어떤 식으로 콜백이 실행되는지 통합적으로 이해할 수 있도록 합니다. 비동기 프로그래밍(Asynchromous Programming)동기(Synchronous) vs 비동기(Asynchronous)동기어떤 작업 A를 요청하면 그 결과가 나올 때까지 멈춰서 대기한 뒤, 다음 작업을 처리하는 방식작업이 순차적으로만 진행되므로, 하나가 지연되면 전체 흐름에 블로킹이 발생비동기어떤 작업 A를 요청해도 그 결과를 기다리지 않고 다음 작업을 진행비동기 작업이 완료되면 콜백(Callback) 함수나 ..
배열 생성 심화: Array / Array.of / Array.from
·
언어/자바스크립트
Array()사용 예시// (1) 빈 배열 생성const emptyArray = Array();console.log(emptyArray); // []// (2) 길이만 지정해 배열 생성const arr2 = Array(5);console.log(arr); // [ , , , , ] (길이 5의 빈 슬롯 배열)console.log(arr.length); // 5// (3) 초기값을 가진 배열 생성const arr3 = Array(1, 2, 3);console.log(arr); // [1, 2, 3] 문제점console.log(Array(3)); // [ , , ] (길이 3의 빈 슬롯 배열)console.log(Array(3, 5)); // [3, 5]인자가 하나면 길이 ..
자바스크립트 배열(Array)의 모든 것
·
언어/자바스크립트
자바스크립트의 배열배열의 기본 이해자바스크립트(JavaScript)에서 배열(Array)은 순서가 있는 리스트 형태의 컬렉션으로, 각 요소(element)에 인덱스(index)를 통해 접근할 수 있습니다. 주의할 점은 자바스크립트의 배열은 다른 언어의 배열과 달리 고정된 크기가 없고, 동적으로 늘어나거나 줄어들 수 있습니다. 또한 배열은 실제로 객체의 한 종류이며, `length` 프로퍼티를 통해 요소의 개수를 추적합니다.순서 있는 데이터 집합길이 가변적인덱스로 접근 가능실제로는 객체 타입 배열 생성 방법리터럴(`[ ]`)`Array( )` 생성자`Array.of``Array.from`리터럴 표기법가장 일반적이고 직관적인 방법const arr = [10, 20, 30];Array 생성자const arr1..
자바스크립트의 스코프 규칙: Lexical Scope
·
언어/자바스크립트
SummaryJavaScript는 렉시컬 스코프(정적 스코프)를 채택하고 있다.함수나 변수가 어디서 "정의"되었는지가 스코프를 결정한다.함수 호출 위치가 아니라, 함수 정의 위치가 중요하다.스코프 체인을 통해 내부 함수는 자신이 정의될 당시의 외부 스코프 변수에 접근할 수 있다.이 스코프 체인을 활용한 개념이 클로저이다.ES6 이후 `let`, `const`에 의한 블록 스코프 역시 렉시컬 스코프의 개념을 강화한다. JS의 렉시컬 스코프(Lexical Scope)란?JavaScript에서 스코프(Scope)는 변수, 함수, 객체 등이 코드 어디에서 유효하며 접근 가능한지를 결정하는 개념입니다. 이러한 스코프는 크게 렉시컬(lexical) 스코프와 동적(dynamic) 스코프로 나눌 수 있습니다. Java..
브라우저 환경에서의 자바스크립트 - this
·
언어/자바스크립트
서론 및 요약: this를 쓰는 이유자바스크립트에서 `this` 키워드가 많이 사용되는 이유는 코드의 유연성을 높이고, 다양한 컨텍스트에서 객체나 함수의 동작을 다르게 만들 수 있기 때문입니다. 또한 `this`는 코드 실행 시점에 따라 동적으로 바인딩되며, 함수나 객체의 실행 컨텍스트를 이해하는 데 핵심적인 역할을 합니다. 하지만 이러한 특성 때문에 `this`의 동작 방식을 이해하는 데 혼란을 겪는 경우가 많습니다. 특히 함수 호출 방식, 객체의 메서드 호출, 그리고 화살표 함수와의 차이점은 `this`를 다룰 때 주의해야 할 주요 요소입니다. 예를 들어서동적 컨텍스트 바인딩`this`는 함수나 메서드가 호출되는 컨텍스트에 따라 동적으로 바인딩됩니다. 즉, 함수가 어떻게 호출되었는지에 따라 `this..
JavaScript 변수의 모든 것: var, let, const 완벽 비교와 활용법
·
언어/자바스크립트
JavaScript 변수변수는 데이터를 저장하고 관리하는 데 사용되는 프로그래밍 언어의 기본 요소입니다. JavaScript에서는 데이터를 동적으로 관리할 수 있으며, 변수 선언 방식에 따라 데이터의 처리와 범위가 달라집니다. 변수 선언 방식의 진화 (var → let, const)초기의 JavaScript에서는 `var`만 존재했지만, ES6 (ECMAScript 2015) 이후 `let`과 `const`가 추가되면서 보다 명확하고 안전한 변수 선언이 가능해졌습니다. var의 이해기본 개념과 선언 방법`var`는 JavaScript에서 가장 오래된 변수 선언 방식으로, 다음과 같이 사용됩니다.var x = 10; 함수 스코프와 전역 스코프함수 스코프 : `var`는 함수 내에서 선언된 경우 해당 함수 ..