본문 바로가기
반응형

언어/Javascript, Typescript39

[js] Promise 정리 Promise정리 [ State, Producer, Consumer(then, catch, finally), Promise Chaining, Error Handling ] Promise란? 1. Promise는 비동기 작업에 대한 javascript 개체이다. 2. Promise는 State라는 상태값을 가지고 Promise 생상부분과 사용부분으로 나눌 수 있다. 3. 비동기 처리 동작은 기본적으로 callback과 동일하지만 단점(콜백지옥)을 보완했다. 1) State state: pending -> fulfilled or rejected (보류 중 -> 이행 또는 거부됨) pending 상태 = 값을 아직 알 수 없을 때 (data가 정확하게 할당되지 않았을 때 등) fullfilled 상태 = 반환.. 2023. 3. 22.
[js] 콜백함수(callback) 콜백함수란? 콜백함수를 매개변수로 받는 함수 만드는 방법, 콜백지옥이란? 콜백함수(Callback function)란? 1. 콜백함수는 다른 함수에 매개변수로 넘겨준 함수를 말한다. (함수에 파라미터로 들어가는 함수) 2. 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출된다. 3. 함수를 순차적으로 실행하고 싶을 때 사용한다. 콜백함수를 매개변수(parameter)로 받는 함수 만드는 방법 예제코드) function sayOne(params){ console.log(1); params(); } function sayTwo(){ console.log(2); } sayOne(sayTwo); 1. sayOne은 콜백함수 필요한 함수 2. sayTwo가 콜백함수이다. 3... 2023. 3. 21.
[js] 코드 최적화 - falsy값, 삼항 연산자, fallback값(nullish값 체크) falsy값 체크, 삼항 연산자, fallback값(nullish값 체크)의 코드 최적화 방법 (클린코드) 1. falsy값 체크 타입스크립트가 아니라 자바스크립트를 사용한다면 꼭 해야하는게 타입 체크이다. 특히, null ,undefined ,0 ,false ,NaN , "" 값을 체크해서 점검해야 할 때가 있다. 논리 부정연산자인 "!" 를 이용하면 쉽게 쓸 수 있다. const isFalsy = (value) => { if ( value === null || value === undefined || value === 0 || value === false || value === NaN || value === "" ) { return true; } return false; }; // 위 코드를 아래와 .. 2023. 3. 12.
[js] 코드 최적화 - 반복문(for-of, for-in), 조건문(if문, switch문) [js] iterable객체의 반복문, if문, switch문의 코드 최적화 방법 (클린코드) * iterable 객체란? 2023.02.18 - [언어/Javascript,TypeScript] - [js] iterable 객체, Array.from [js] iterable 객체, Array.from iterable(반복 가능한) 객체, Array.from 메소드 iterable(반복 가능한) 객체란? 1. 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체이다. 2. for..of 반복문을 적용할 때 Symbol.iterator를 호출하는 kfdd6630.tistory.com 1. iterable객체의 반복문 배열과 객체의 내부에 접근할 때 단순 for문을 사용하는 것을 지양하고 자바.. 2023. 3. 7.
[js, ts] 함수를 파일로 따로 빼서 정리하는 방법 [JavaScript, TypeScript] 함수를 파일로 따로 빼서 정리하는 방법 만들고 싶은 함수를 정리한 예를 들면 calculator.ts 파일을 만든다. const plus = (number1: number, number2: number): number => { return number1 + number2; }; const minus = (number1: number, number2: number): number => { return number1 - number2; }; const multiply = (number1: number, number2: number): number => { return number1 * number2; }; const divide = (number1: number,.. 2023. 3. 5.
[js] 무작위 날짜 생성하기, 무작위 숫자 생성하기 [Javascript] 무작위 날짜 생성하기, 무작위 숫자 생성하기 1. 무작위 숫자 생성함수(범위) function getRandomNumberRange(min, max) { if(min === max) return ('equal Number'); return Math.floor(Math.random() * (max - min + 1)) + min; } - min이상 max이하인 숫자 생성함수 - min = 1, max = 99일때, 1~99까지 무작위 숫자 반환 - min, max는 숫자(number)여야 하고 다른 값이어야 함 2. 무작위 숫자 생성함수(자리 수 이하) function getRandomNumberDigit(digit) { if(digit < 1) return ('parameter i.. 2023. 2. 21.
[js] iterable 객체, Array.from iterable(반복 가능한) 객체, Array.from 메소드 iterable(반복 가능한) 객체란? 1. 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체이다. 2. for..of 반복문을 적용할 때 Symbol.iterator를 호출하는 데 iterable한 객체가 아니라면 에러가 발생한다. - Symbol.iterator는 반드시 이터레이터(iterator, 메소드 next가 있는 객체) 를 반환해야 한다. - for..of는 반환된 객체(이터레이터)만을 대상으로 동작한다. - for..of에 다음 값이 필요하면, for..of는 이터레이터의 next()메소드를 호출한다. - next()의 반환 값은 {done: Boolean, value: any}와 같은 형태이어야 한다. -.. 2023. 2. 18.
[js] Spread(전개 구문), apply(), Object.assign() JavaScript에서 Spread(전개 구문), apply(), Object.assign() 사용, 깊은 복사 사용법 2023.02.16 - [개발 용어 정리] - 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) A = 원본 B = 복사하려는 객체 얕은 복사 새로운 B객체를 생성 후 원본 A객체를 메모리 영역을 참조해서 원본에 종속된 객체를 생성하는 것이 얕은 복사 kfdd6630.tistory.com Spread(전개 구문) 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자들(iterable 객체) 예를 들어, 1. 0개 이상의 인수 .. 2023. 2. 16.
[js] Math (절댓값, 반올림, 올림, 내림, 랜덤 등등) JavaScript_Math 1. javascript에서 Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 2. javascript에서 Math는 함수 객체가 아니다. 3. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없다. 4. 다른 전역 객체와 달리 Math는 생성자가 아니다. 5. Math의 모든 속성과 메서드는 정적이다. 6. 파이 상수는 Math.PI로 참조할 수 있고, 사인 함수는 매개변수 x에 대해 Math.sin(x)와 같이 호출할 수 있다. 7. 상수는 javascript에서 가능한 최대 실수 정밀도로 정의되어 있다. 속성 및 메소드 중 많이 사용한다고 생각되는 순서대로 나열 Math.abs(x) 숫자의 절댓값을 반환한다. Math.rou.. 2023. 2. 15.
[js] history.back(), history.forward(), history.go() history.back()=뒤로가기, history.forward()=앞으로 가기, history.go()=특정위치로 가기 History.back()history.back();1. history.back() 메소드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시한다.2. history.go(-1)와 같다.3. 이전 페이지가 없는 경우 아무것도 하지 않는다.4. 이 메소드는asynchronous(비동기)로 동작한다.5. popstate 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있다. 다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성한다.HTML뒤로 가기jsdocument.getElementById('goBack').addEventListener('click', () => { window.h.. 2023. 2. 12.
반응형

티스토리툴바