JavaScript 7

자꾸 잊는 reduce()

배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환하는 메소드.array.reduce(callback(accumulator, currentValue[, index[, array]]), [initialValue])callback: 각 요소에 대해 실행할 함수. 네 개의 매개변수를 가짐.accumulator: 누적값(이전 콜백의 반환값)currentValue: 현재 처리 중인 배열 요소index(선택): 현재 처리 중인 요소의 인덱스array(선택): reduce를 호출한 배열initialValue(선택): 첫 번째 호출에서 accumulator로 사용할 값 ☕ 사용 예시- 배열의 합계 구하기const numbers = [1, 2, 3, 4, 5];const sum = num..

JavaScript 2025.03.01

자꾸 까먹는 map()

호출한 배열의 모든 요소에 주어진 함수를 호출한 결과로 채운 새로운 배열 생성.원본 배열은 변경되지 않음.=> 배열의 모든 요소를 하나씩 가져와서 주어진 함수에 넣어 처리한 결과로 새로운 배열을 만들어 주는 메서드. 🍰 구문map(callbackFn)map(callbackFn, thisArg)callbackFn: 배열의 각 요소에 대해 실행할 함수thisArg(선택 사항): callbackFn 안에서 this로 사용할 값  🍰 callbackFn의 세 가지 매개변수currentValue - 현재 처리 중인 요소의 값index - 현재 처리 중인 요소의 인덱스array - map() 메서드를 호출한 배열 자체  🍰 사용 예시// currentValue 사용하기const numbers = [10, 20..

JavaScript 2025.01.29

Throttle & Debounce

🍰 둘 다 JavaScript에서 성능 최적화를 위해 특정 이벤트의 호출 빈도를 제어하는 데 사용됨.🍴 Throttle: 이벤트가 연속해서 발생 시, 일정 시간 간격으로 이벤트를 처리함.이벤트가 자주 발생해도 일정 시간마다 한 번씩만 처리됨. let waiting = false; function throttle(callback, limit = 200) { if (!waiting) { // waiting이 false일 때만 실행 callback(); waiting = true; setTimeout(() => { // limit초 뒤에 waiting을 false로 변경하는 타이머 waiting = false; }, limit); }}타이머가 돌고..

JavaScript 2024.06.30

정적 메서드(Static Method)와 인스턴스 메서드(Instance Method)

🍰 정적 메서드클래스 레벨에서 정의됨클래스 이름을 통해 직접 호출할 수 있음클래스의 인스턴스 없이도 실행될 수 있음객체의 상태와 무관한 연산을 수행할 때 유용함this 키워드를 사용할 수 없음class MyClass { static staticMethod() { console.log('This is a static method.'); }}// 정적 메서드 호출MyClass.staticMethod(); // This is a static method.🍰 인스턴스 메서드객체 레벨에서 정의됨특정 객체의 인스턴스를 통해 호출됨객체의 상태를 조회하거나 변경하는 데 사용됨this 키워드를 사용하여 현재 객체에 접근할 수 있음객체의 상태와 관련된 행동을 정의할 때 필수적임다형성을 지원함, ..

JavaScript 2024.06.16

얕은 복사 & 깊은 복사

🍰 얕은 복사 (Shallow Copy): 객체의 1단계 속성들만 복사객체의 속성 중 하나가 다른 객체를 참조 -> 원본 객체와 복사된 객체가 공유중첩된 객체나 배열은 복사 X, 참조만 복사const original = { name: 'Alice', age: 25, address: { city: 'Wonderland', zip: '12345' }};// 얕은 복사const shallowCopy = { ...original };console.log(shallowCopy);// { name: 'Alice', age: 25, address: { city: 'Wonderland', zip: '12345' } }shallowCopy.name = 'Bob';shallowCopy.address.c..

JavaScript 2024.06.16

let/var/const 차이점

let var const 중복 선언 X O X 재할당 O O X scope block level scope function level scope block level scope 함수 레벨 스코프 함수 내에서 선언된 변수는 함수 내에서만 유효 함수 내에서는 블록 내외부에 상관없이 유효 함수 외부에서는 참조 불가 블록 레벨 스코프 코드 블록 내부에서만 유효 블록 외부에서 참조 불가 호이스팅(hoisting) 호이스팅은 변수 및 함수 선언이 스코프의 최상위로 끌어올려지는 특성 코드 실행 전에 선언된 변수 및 함수가 메모리에 할당되어 있어 마치 선언이 코드의 최상단으로 끌어올려진 것처럼 동작하는 것을 의미함 let - 변수를 선언문 이전에 참조 시 참조 에러 발생 scope의 시작에서 변수의 선언까지 일시적 사..

JavaScript 2024.01.25