본문 바로가기
반응형

언어47

[js] try...catch, finally 정리 try...catch문, finally 블록 정리 1. try...catch문이란? 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. try { // 수행하고싶은 로직을 수행한다. doSomething(); } catch (error) { console.error(error); } 위 코드에서 doSomething() 부분에서 error 발생시 console에 error가 출력된다. 2. try...catch문 문법 try { try_statements } [catch (exception_var) { catch_statements }] [finally { finally_statements }] try_statements: try 블록에서 실행될 선언들이다... 2023. 3. 23.
[js] async & await 정리 async & await 사용방법, useFul Promise APIs(Promise.all(), Promise.race()) async & await란? 1. async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 2. 비동기 방식을 사용함에 있어 Promise보다 명확한 방식이라고 할 수 있다. 3. 비동기 처리 동작은 기본적으로 callback, Promise와 동일하지만 앞 둘의 단점을 보완했다. 1 .async 사용방법 동기적 실행 // 1. Sync function fetchUser() { // 네트워크 응답이 10초 걸린다고 가정한다. return 'userName'; } const user = fetchUser(); console.log(user); con.. 2023. 3. 22.
[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.
반응형

티스토리툴바