프론트엔드 공부한 거 정리하기

생성자 함수는 객체를 생성하기 위한 템플릿 역할을 하는 함수다. 붕어빵 틀이나 거푸집이라고 생각하면 될 듯. function Person(name, age) { // 거푸집 this.name = name; this.age = age; } const person1 = new Person('John', 30); // 팥 붕어빵 const person2 = new Person('Jane', 25); // 슈크림 붕어빵 이 생성자 함수를 통해 생성된 객체는 각자 다른 메모리에 저장되어 참조된다. 즉, 키나 값을 바꿔도 되는 고유한 객체가 됨 특징 생성자 함수는 첫 글자를 대문자로 쓰는 게 관례라고 한다. 생성자 함수를 통해 생성된 객체는 생성자 함수의 프로토타입을 상속받는데, 인스턴스 메서드를 프로토타입에 추가..

Map객체 Map 객체는 '키'와 '값'으로 이루어진 컬렉션으로 자바스크립트의 기본 객체인 Object와 달리 키가 반드시 문자열이 아니어도 되며, 다양한 데이터 타입을 키와 값으로 활용할 수 있다. Map객체 생성 // 빈 Map 객체 생성하기 const map = new Map(); // 이터러블 객체를 전달하여 Map 객체 생성하기 const arr = [['name', 'John'], ['age', 30]]; const map2 = new Map(arr); Map객체의 기본 동작 set(key, value) : 키-값 쌍을 추가한다. 기존에 동일한 키가 존재하면 값 대체. const map = new Map(); map.set('name', 'John'); // 요소 추가 map.set('name..

팩토리얼을 사용해서 경우의 수를 구하는 문제를 풀다가 nCm = n! / n-m! * m! 공식으로 수를 구하다보면 소수점으로 떨어지는 경우가 있을 것 같아 Math.trunc()를 사용했는데 실패해서 찾다가 알게된 글 정리. 컴퓨터는 2진법으로 계산을 하기 때문에 계산을 위해 10진법인 수를 2진법으로 변환하는 과정에서 무한소수가 생길 수 있다. 다만, 컴퓨터 메모리에는 용량 제한이 있기 때문에 컴퓨터가 알아서 무한 소수를 유한 소수로 바꿔서 저장하는데 이 과정에서 미세한 오류가 발생한다고 한다. 수포자라 자세히는 모르겠는데 여튼 소수를 계산하다보면 의도치 않은 수가 발생할 수 있으니 아래 메서드를 사용하자. toFixed() toFixed()는 입력받은 숫자를, 매개변수만큼 자리수를 반올림해 Stri..

옵셔널 체이닝(optional chaining)은 자바스크립트에서 속성이나 메서드를 참조할 때 해당 속성이나 메서드가 존재하지 않으면 에러를 발생시키지 않고 그냥 undefined를 반환하도록 하는 연산자입니다. 기존에는 속성이나 메서드를 참조할 때 해당 객체가 null이나 undefined일 경우 에러가 발생했기 때문에 이를 위해 null 체크를 작성하거나, 조건문으로 처리했지만, 옵셔널 체이닝을 사용하면 간단하게 처리 가능. 옵셔널 체이닝은 "?"으로 표시하며 해당 속성이나 메서드가 존재하지 않으면 undefined를 반환. const person = { name: 'John', address: { city: 'Seoul', street: '123 Main St' } } // person 객체의 ad..

프로미스를 쉽게 사용할 수 있게 만든 비동기 함수로 일반 함수 앞에 async를 붙이면 해당 함수를 프로미스로 반환한다. async function isAsync() { return "프로미스로 반환됩니다" } isAsync().then(alert); // "프로미스로 반환됩니다" await await는 async 함수 내에서만 작동하며 Promise가 처리될 때까지 기다렸다가 구문을 실행한다. async function isAsync() { const isPromise = new Promise((res, rej) => // new Promise로 promise 함수 호출 setTimeout(() => { // 3초 딜레이 후 resolve 값 반환. res("3초 기다렸다가 출력."); }, 3000)..

비동기 작업을 위한 패턴으로 이행에 성공했을 때와 실패했을 때의 동작을 미리 약속하는 것. 이 때 동작은 콜백함수로 이루어지며 성공했을 시 resolve, 실패했을 시 reject로 실행된다. new Promise() 생성자 함수로 프라미스 객체를 생성하면 그와 동시에 콜백함수가 호출되는데 이 때 전달되는 함수는 executor(실행자, 실행 함수)라고 한다. resolve, reject는 자바스크립트가 제공하는 자체 콜백 함수로 함수의 이행 결과에 따라 resolve 혹은 reject 중 하나의 값은 무조건 호출된다. new Promise가 생성하는 promise 객체의 내부 프로퍼티. state 기본값 'pending(대기 상태)' resolve 호출 시 fulfilled(이행 상태) reject 호..

스크립트에 에러가 있을 경우 에러 발생 구문을 실행한 후 스크립트를 중단 없이 진행하는 구문. 스크립트는 에러가 있을 경우 그 즉시 실행을 멈추고 죽어버리는데 try..catch문을 사용하면 스크립트가 죽는 걸 방지할 수 있고 코드를 디버깅하기도 유용함. 단, 런타임 에러에만 동작하며 중괄호 짝이 안맞는 등 작성 방식이 잘못된 경우에는 동작하지 않음. 또 setTimeOut처럼 스케쥴 된 코드는 엔진이 try...catch 구문을 떠난 후에 실행되므로 작성한다면 setTimeOut 코드 내부에 try...catch문을 작성해야 한다. 자바스크립트는 에러가 발생하면 에러 객체를 생성한다. 그 후 catch블록에 에러를 인수로 전달한다. try { // } catch(err) { // 에러 객체로 err 대..

WheelEvent.deltaY : 세로 스크롤 시 값 반환. (읽기 전용)