본문 바로가기

js

(25)
JavaScript - 에러처리 'try...catch'와 에러 핸들링 보통의 스크립트에서 에러가 발생하면 스크립트가 죽고(즉시 중단되고), 콘솔에 에러가 출력됩니다. 그러나 try...catch문법을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 됩니다. 'try...catch' 문법 try{ // 코드 }catch (err){ // 에러 핸들링 } try...catch 동작 알고리즘은 다음과 같습니다. 먼저, try{...} 안의 코드가 실행됩니다. 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다. 에러가 있다면, try 안 코드의 실행이 중단되고, catch(err) 블록으로 제어 흐름이 넘어갑니다. 변수 err(아무이름이나 사용 가능)는 무슨 ..
Js - 반복문 # 자바스크립트 반복문 종류 1. for : 고전적인 for문 2. for in : 객체의 프로퍼티 키 열거 전용 3. for of : 이터러블 순회 전용 4. forEach(): 배열 순회 전용 메서드 5. while : 고전적인 while문 6. do while : 고전적인 do...while문 7. Object 객체 메서드: 객체 순회 전용 8. Array.prototye 메서드 : 배열 전용 하나씩 코드와 함께 정리해본다. # 자바스크립트 반복문 총정리 1. for 문: 고전적인 for문 => for(let i = 0; i < 10; i++){...반복 수행 코드...} for (let i = 0; i < 10; i++){ console.log(i); // 0~9까지 출력 } * (주의) 변수 선..
JS - 조건부 삼항 연산자( ? : ),Null 병합 연산자( ?? ),옵셔널 체이닝 조건부 삼항 연산자( ? : ) 조건부 삼항 연산자는 java , c 등등 다양한 프로그래밍 언어에서도 사용되는 연산자입니다. 조건부 삼항 연산자는 전통적인 조건문 if .. else 문의 약어 입니다. 사용하게 되면 코드가 더 간결해지고 깔끔해 보입니다. 조건 ? A : B; 위 조건부 삼항 연산자를 if .. else문으로 작성하면 다음과 같습ㄴ디ㅏ. if (조건) { return A; } else { return B; } 출처: https://developer-talk.tistory.com/300 [평범한 직장인의 공부 정리:티스토리] Null 병합 연산자( ?? ) Null 병합 연산자는 Nullish 병합 연산자로 부르기도 하며 물음표를 두 개 사용합니다. Null 병합 연산자(??)의 왼쪽 피..
Js - [ES6] Spread Operator(스프레드 연산자) Spread Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. 1.함수에서의 Spread Operator function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // ...numbers -> x = 1 ,y = 2 ,z = 3 // expected output: 6 //Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, ..
Js-async와 await async와 await async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. async, await는 놀라울 정도로 이해하기 쉽고 사용법도 어렵지 않습니다. async 함수 async 키워드부터 알아봅시다. async는 function 앞에 위치합니다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환됩니다. 직접 확인해 봅시다. async function f() { ..
JS- setTimeout setTimeout과 setInterval을 이용한 호출 스케줄링 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 자바스크립트 명세서엔 setTimeout과 setInterval가 명시되어있지 않습니다. 하지만 시중에 나와 있는 모든 브라우저, Node.js를 포함한 자바스크립트 호스트 환경 대부분이 이와 유사한 메서드와 내부 스케줄러를 지원합니다. setTimeout 문법: let timerId = setTim..
Js- 나머지 매개변수와 스프레드 문법 나머지 매개변수와 스프레드 문법 상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않습니다. 예시: Math.max(arg1, arg2, ..., argN) – 인수 중 가장 큰 수를 반환합니다. Object.assign(dest, src1, ..., srcN) – src1..N의 프로퍼티를 dest로 복사합니다. 기타 등등 이번 챕터에서는 이렇게 임의의(정해지지 않은) 수의 인수를 받는 방법에 대해 알아보겠습니다. 또한 함수의 매개변수에 배열을 전달하는 방법에 대해서도 알아보겠습니다. 나머지 매개변수 ... 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없습니다. 아래와 같이 말이죠. function sum(a, b) { return a + b; } alert( sum(1,..
Js - array method 앞으로 많이 사용할 메서드 위주로 정리할 것이다. foreach arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줍니다. 문법: arr.forEach(function(item, index, array) { // 요소에 무언가를 할 수 있습니다. }); 아래는 요소 모두를 얼럿창을 통해 출력해주는 코드입니다. // for each element call alert ["Bilbo", "Gandalf", "Nazgul"].forEach(alert); 아래는 인덱스 정보까지 더해서 출력해주는 좀 더 정교한 코드입니다. ["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { alert(`${item} is at index ..