Javascript

개요 Promise 객체가 rejected 되었을 때 실행하고 싶은 콜백은 then 메소드의 두 번째 파라미터로 넣는다. 하지만 이 방법 말고 catch 메소드를 사용하는 방법도 존재한다. // Internet Disconnected fetch('') .then((response) => response.text(), (error) => { console.log(error); }) .then((result) => { console.log(result); }); 1. catch 메소드 1) catch 메소드란? catch 메소드는 Promise 객체가 rejected 되었을 때 실행하고 싶은 콜백을 등록하는 메소드이다. // Internet Disconnected fetch('') .then((respons..

개요 const successCallback = function () { }; const errorCallback = function () { }; fetch('') // Promise-A .then(successCallback, errorCallback); // Promise-B (1) fetch 메소드가 리턴하는 Promise 객체를 Promise-A 객체라고 하고, (2) then 메소드가 리턴하는 Promise 객체를 Promise-B 객체라고 가정하자. fetch 함수의 작업이 성공하는 경우와 실패하는 경우로 나누어서 생각해보면 i) fetch 함수의 작업이 성공해서 Promise-A 객체가 fulfilled 상태가 된 경우 : then 메소드 안의 "첫 번째" 콜백인 successCallbac..

1. Promise 객체란? 어떤 작업에 관한 상태 정보를 가지고 있는 객체를 의미한다. 따라서 작업의 상태에 따라 promise 객체가 가지고 있는 정보가 달라진다. 1) pending 상태 작업이 진행 중인 경우 2) fulfilled 상태 작업이 성공적으로 완료된 경우를 의미하며 Promise 객체는 작업 성공 결과를 갖게 됨 3) rejected 상태 작업이 실패한 경우를 의미하며 Promise 객체는 작업 실패 정보를 갖게 됨 2. fetch 함수 다시 해석하기 개요 fetch 함수는 Promise 객체를 리턴한다. fetch 함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 작업을 수행한다. 작업의 성공 여부가 fetch 함수가 리턴하는 promise 객체에 저장된다. console.log('S..

1. 비동기 실행 1) 개요 console.log('Start!'); fetch('') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 여기에는 2개의 콜백이 있다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행된다. 2) 실행 순서 이를 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면 1. console.log('Start'); 2. fetch 함수(리퀘스트 보내기 및 콜백 등록) 3..

1. fetch 함수 fetch("https://learn.codeit.kr/api/members") .then((response) => response.text()) .then((result) => { console.log(result)}); 1) 정의 서버로 리퀘스트를 보내고 리스폰스를 받는 함수 파라미터로 넘어온 url로 리퀘스트를 보낸다. 여기서는 서버에서 온 리스폰스를 response라는 파라미터로 받는다. 2) then 메소드 then은 fetch함수가 리턴하는 Promise 객체의 메소드로, 콜백을 등록하는 메소드이다. then 메소드 안에 있는 함수((response) => response.text())는 fetch 함수가 실행될 때 함께 바로 실행되는 함수가 아니다. 이 함수는 서버로부터..

1. 에러 1) 에러의 정의와 에러 객체 자바스크립트에서 에러가 발생하면 그 순간 프로그램 자체가 멈춰버리고 이후의 코드가 동작하지 않기 때문에 에러 관리가 중요하다. 그리고 에러가 발생하면 에러에 대한 정보를 name과 message라는 프로퍼티로 담고 있는 에러 객체가 만들어진다. 대표적인 에러 객체는 SyntaxError, ReferenceError, TypeError가 있다. 에러 객체는 직접 만들 수도 있다. new 키워드와 에러 객체 이름을 딴 함수를 통해 에러 객체를 만들 수 있고, throw 키워드로 에러를 발생시킬 수 있다. throw new TypeError('타입 에러가 발생했습니다.'); 2) try...catch문 try...catch문은 자바스크립트에서 대표적인 에러 처리 방법이..

1. Map Map은 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하다. 하지만, 할당연산자를 통해 값을 추가하고 점 표기법이나 대괄호 표기법으로 접근하는 일반 객체와 다르게 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다. new 키워드를 통해서 Map을 만들 수 있고 아래와 같은 메소드를 통해 Map 안의 여러 값들을 다룰 수 있다. - map.set(key, value): key를 이용해 value를 추가하는 메소드. - map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환. - map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드. - map.delete(key): key에 해당하..

※ 공통점 아래의 메소드들은 모두 배열의 요소를 하나씩 살펴보며 반복 작업을 하는 메소드로 각 메소드의 아규먼트로 콜백함수를 받는다. 그 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다. (index와 array는 생략가능) 1 . forEach 메소드 리턴값이 없기에 변수에 담으면 undefined가 된다. const numbers = [1, 2, 3]; // 표기법 1 : arrow function numbers.forEach((element, index, array) => { console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨. console.log(array); // [1, 2, 3] }); // 표기법 2 : 일반..

1. Spread 구문 문자열, 객체, 배열을 바로 앞에 마침표 세 개를 붙임으로써 배열로 펼칠 수 있다. cf)"..."을 붙이는 다른 문법 "..."을 붙이는 문법을 이전에 본 적이 있다. 바로 rest parameter를 이용할 때였는데, rest parameter는 여러 개의 아규먼트를 하나의 파라미터로 묶는 방식이고, spread 구문은 하나로 묶여있는 값을 개별 값으로 펼치는 방식이라는 차이가 있다. i) spread 구문 사용 X const webPublishing = ['HTML', 'CSS']; const interactiveWeb = webPublishing.slice(); interactiveWeb.push('JavaScript'); console.log(webPublishing); ..

※ 기본 개념 자바스크립트에서 여러 가지의 값을 하나에 모아 저장하고 싶을 때 '객체'를 사용한다. let ewha = { name : '이화여자대학교', bornYear : 1886, "is Very Nice" : true, worstThing : null bestMajor : { college : '엘텍공과대학', major : '컴퓨터공학과' } } 객체의 각 요소의 콜론을 기준으로 왼쪽의 값을 Key, 오른쪽의 값을 Value라고 한다. 그리고 이 Key, Value 한 쌍을 Property라고 하며, Property key 값을 Property Name Property Value 값을 Property Value라고도 한다. 1) Property Name Property Name은 문자열 타입을 ..

1. null 병합 연산자 왼편의 값이 null이나 undefined이면 오른편 값이 리턴되고, 왼편의 값이 null이나 undefined이 아니면, 왼편 값이 리턴된다. const example1 = null ?? 'I'; // I const example2 = undefined ?? 'love'; // love const example3 = 'you' ?? 'JavaScript'; // you console.log(example1, example2, example3); // I love you OR 연산자(||)와 헷갈릴 수도 있지만, OR 연산자는 왼편의 값이 falsy한지 확인한다는 점에서 다르다. 2. 조건부 연산자 삼항 연산자라고도 불리며, 자바스크립트에서 유일하게 세 개의 피연산자를 가진다...

1. 함수 선언 방법 1) 함수 선언(function 키워드 사용) // 함수 선언 function sayHi() { console.log('Hi!'); } 이렇게 작성하는 방식을 함수 선언(function declaration)이라고 한다. 함수 선언식은 호이스팅이 발생하며, 함수 스코프를 갖는다. 2) 함수 표현식 그리고 자바스크립트에서 함수는 값으로 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언할 수도 있다. // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; myBtn.addEventListener('click', function() { console.log('button is clicked!'); }); 이렇게 함수를 값으로 다루는..