본문 바로가기

JavaScript

(37)
[JavaScript] for of 반복문에서 배열의 idx 값 가져오기 entries() let fruits = ['바나나', '사과', '체리', '수박']for (const [idx, fruit] of fruits.entries()) { console.log(`idx: ${idx}, fruit: ${fruit}`);}// idx: 0, fruit: 바나나// idx: 1, fruit: 사과// idx: 2, fruit: 체리// idx: 3, fruit: 수박 물론 이런 방법도 된다. let fruits = ['바나나', '사과', '체리', '수박']let idx = 0;for (const fruit of fruits) { console.log(`idx: ${idx}, fruit: ${fruit}`); idx++;}// idx: 0, fruit: 바나나// idx: 1,..
[JavaScript ]CommonJS 모듈 ES 모듈 차이 1. 문법 - CommonJS 모듈 const module = require('module'); module.exports = { ... }; - ES 모듈 import module from 'module'; export const something = { ... }; 2. 로딩방식 CommonJS: 동기적으로 로드 ES 모듈: 비동기적으로 로드3. 사용환경CommonJS: 주로 Node.js 환경 ES 모듈: 브라우저와 최신 Node.js 버전에서 지원4. 정적 분석CommonJS: 런타임에 동적으로 모듈 결정 ES 모듈: 컴파일 시간에 정적으로 분석 가능5. 캐싱CommonJS: 모듈을 캐시하여 여러 번 호출해도 한 번만 실행 ES 모듈: 모듈을 한 번만 평가하고 결과를 공유6. thi..
[JavaScript] Array.from() 1. 목적Array.from()은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다. 2. 기본 구문 Array.from(arrayLike[, mapFn[, thisArg]])  3. 매개변수arrayLike: 배열로 변환할 유사 배열 객체나 반복 가능한 객체mapFn (선택적): 배열의 모든 요소에 대해 호출할 맵핑 함수thisArg (선택적): mapFn 실행 시 this로 사용할 값 4. 특징문자열을 개별 문자의 배열로 변환할 수 있습니다.Set이나 Map을 배열로 변환할 수 있습니다.유사 배열 객체(예: arguments 객체)를 실제 배열로 변환할 수 있습니다.두 번째 인자로 맵핑 함수를 제공하..
[JavaScript] Object.keys, Object.values, Object. entries, Object.fromEntries Object.keys, Object.values, Object.entrie각 메서드는 객체의 키, 벨류, 혹은 둘 다를 배열로 반환한다let user = { name: "John", age: 30};console.log(Object.keys(user)) // 출력 : ["name", "age"]console.log(Object.values(user)) // 출력 : ["John", 30]console.log(Object.entries(user)) // 출력 : [ ["name","John"], ["age",30] ]  fromEntries(iterable) key-value 리스트를 객체로 변환한다.const entries = new Map([ ['foo', 'bar'], ['baz', 42],]..
[JavaScript] with 사용법 Array.prototype.with() 2023년 7월에 추가된 메서드로배열의 특정 인덱스의 값을 변경한 새로운 배열을 반환.원본 배열은 변경되지 않는다.  1. 구문 arrayInstance.with(index, value) // index: 변경하려는 요소의 인덱스 // value: 새로 할당할 값  2. 반환값  지정된 인덱스의 요소가 새 값으로 대체된 새로운 배열 3. 예시 const arr = [1, 2, 3, 4, 5]; console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음) 4. 특징 음수 인덱스 사용 가능 (배열 끝에서부터 계산)희소 배열(sparse array)에 사용하면 빈 슬롯을 und..
[JavaScript] 배열 정렬 Array.prototype.sort() sort 함수는 원본 배열을 직접 변경하며, 정렬된 배열을 반환한다. 기본 사용법은 아래와 같다1. array.sort(  )2. array.sort( 비교함수 )  배열의 요소를 정렬하고, 기본적으로 요소를 문자열로 변환한 후 유니코드 순서로 정렬한다.이 말은 숫자비교가 제대로 안된다는 뜻이다const numbers = [10, 1, 21];numbers.sort();console.log(numbers); // 출력: [1, 10, 21]  1. 배열 안의 숫자 비교 위 예에서 본 것처럼 숫자 비교를 할 시, 항상 비교함수를 넣어줘야 한다. 숫자배열.sort((a, b) => a - b); // 오름차순 숫자배열.sort((a, b) => b - a); // 내림차순 10 - 1  = 9  ..
[JavaScript] Closure (클로져) 클로저(Closure)는 1. 내부 함수와2. 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment)의 조합 이다. 1. 내부 함수: 다른 함수 내부에 정의된 함수2. 렉시컬 환경: 함수가 선언될 때 생성되는 환경으로, 해당 함수의 스코프에 있는 모든 변수와 함수를 포함.  클로저의 동작: 내부 함수가 외부 함수의 변수에 접근할 수 있고, 외부 함수가 반환된 후에도 이 접근이 유지된다.  어떤 특별한 개념이 아닌 함수의 생성과 함께 자연스럽게 발생하는 게 클로저라는 현상이지만, 우리가 특별히 언급할 때는 주로 상위 스코프에서 선언한 변수를( 렉시컬 환경 ), 내부 함수에서 참조할 경우에일어나는 특정한 사용 사례나 동작을 가리킨다.var outer = function () { var a..
[JavaScript] 이벤트 루프란? 이벤트 루프는 자바스크립트의 비동기 실행 모델을 구현하는 핵심 메커니즘입니다. 자바스크립트가 단일 스레드 언어임에도 불구하고 비동기적으로 작업을 처리할 수 있게 해주는 중요한 요소입니다. 1. 이벤트 루프의 주요 구성 요소 1. 콜 스택 (Call Stack):    - 자바스크립트 코드가 실행되는 곳입니다.    - 함수 호출 시 스택에 쌓이고, 실행 완료 시 스택에서 제거됩니다. 2. 힙 (Heap):    - 객체가 할당되는 메모리 영역입니다.   - 변수와 객체의 메모리 할당이 이루어지는 곳입니다.3. 태스크 큐 (Task Queue) 혹은 콜백 큐:    - 비동기 콜백 함수들이 대기하는 큐입니다.    - setTimeout, setInterval, I/O 작업 등의 콜백이 여기에 추가됩니다...