eadgnus

1. Promise

- 자바스크립트 비동기 처리에 사용되는 객체

- 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

2. Promise의 장점

- 비동기 처리 시점을 명확하게 표현 가능

- 연속된(콜백지옥) 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연함

- 코드의 유지 보수성이 증가

3. 기본형태

promise는 resolve와 reject라는 콜백함수를 파라미터(매개변수)로 받아 사용하게 되는데 이름이 꼭 저것일 필요는 없다.

resovle 는 성공했을때, reject는 실패 했을때 값을 반환 하게 된다.

3-1 리턴받은 객체

3-1-1. .then() 정상적으로 값이 resolve 되었을때 실행 됨

3-1-2. .catch() 값이 실패되어 reject가 반환되었을때 실행하게 됨, 그러나 catch보다 밑에 있는 .then의 경우 실행이 된다.

3-1-3. .finally() 성공유무와 관계없이 무조건 실행하게 됨

4. 예시 및 설명

runInDelay(seconds) 함수를 만들어서 promise를 화살표 함수로 실행하고

if문을 이용하여 seconds의 값이 없거나(false), 0보다 작으면 reject를 실행하여 에러를 발생하게 하였다.

그후 (return은 생략이 가능) setTimeout()함수를 이용하여 입력한 seconds(밀리초) * 1000 = 입력한 숫자=초

후에 resolve를 시켜줌

runInDelay(0.1) => 0.1(밀리초) 이지만 위의 함수에서 *1000을 해주어 0.1초 뒤에 실행하겠다는 뜻

.then 정상적으로 resolve가 되면 '타이머가 완료되었습니다'를 콘솔로 출력 

.catch 레어가 나면 에러값('seconds가 0보다 작다!')을 출력

.fainally 무조건 출력

에러가 나지 않아 then의 값이 출력된 모습.

프로미스는 값이 자동으로 리턴되어서 이런식으로 함수만 넣어서 콜백함수에도 사용 가능하다.

1. 예외처리

기본형의 모습이다. try문 안에서 실행하고 싶은 문장을 실행하다가 오류가 발생하게 되면 그 밑에줄은 건너뛰고,

catch(error)에서 적혀있는 문장을 실행하게 된다.

finally는 예외가 발생하던 안하던 위의 연산이 끝나게 되면 무조건 실행하게 됨.

2. 예시 및 설명

function readFile()
readFile(path) 함수에서 throw new Error를 이용하여 에러를 발생시켰다.
return 부분인 바보래요라는 str은 윗줄의 에러로 인해서 실행되지 않음.

processFile(path){
let content로 컨텐트라는 함수를 선언해주고;
try문 안에서 오류가 실행되는 함수인 readFile을 실행하였고, 여기에서 에러가 발생하여 catch문 실행
오타: catch{  =>  catch(error){
catch문의 실행결과 : content 변수에 값을 '기본내용'으로 변환
그 후 finally의 문장을 실행하게 된다.

const result에 '결과'라는 str과 content를 저장하여 return
}

const result = processFile('경로'); 
프로세스 파일 함수를 경로라는 매개변수를 넣어 실행

1. // 한줄짜리 주석

2. /* */ 여러줄 주석

3. /** */ JSDoc 주석

1. 맵(map)

- key, Value로 이루어진 데이터 집합의 자료구조

2. 예시 및 설명

이러한 함수가 있다고 했을 때

console.log(map) 에서는

이렇게 표현된다.

2-1 사이즈 확인 

맵 안의 요소의 갯수를 반환 해준다

2-2 키 존재 확인

has()를 이용하여 맵 안에 해당 키가 있는지 true, false로 확인할 수 있다. 

2-3 순회

map은 이터러블한 객체이므로 for문등을 통해서 순회도 가능하다.

forEach문을 통해서 map의 value와 key를 받아서 콘솔에 찍어준 모습. 

2-4 찾기

get('key')를 이용하여 사과와 바나나의 이모지를 반환했다.

orange는 없는데 undefined로 표현된 모습.

2-5 obj 객체에서 value에 접근하던 방법

2-6 map객체에서 value에 접근하는 방법

가운데 방법인 get을 이용해서만 가능하다.

2-7 요소추가

set을 이용하여 key 와 value를 추가 해줄수 있다.

2-8 요소삭제

delete는 선택한 요소만, clear는 전체가 삭제된다.

1. set

- 파이썬과 같이 요소들이 중복되지 않고

- 요소의 순서에 의미가 없다, 고로 인덱스로 접근 불가

- 교집합, 합집합, 차집합, 여집합등을 구현 가능

2. 문제 1

2-2 정답

이런 방법으로도 풀수 있다.

3. 문제 2

3-2 정답

set1, 2에 있는 배열을 함수에 매개변수로 받아서 (new-> 복사해서 저장해주는 역할) 

set3,4 = 매개변수 이름일뿐이다.

리턴줄에 있는 set3은 매개변수로 받아준 set1 array 객체 중 필터링을 거친다

필터링 과정설명 -> set2 배열이 has: 가지고 있는 (item)을  반환하여 set3에다가 필터링하여 new(복사) 하여 return함

1. spread

- 전개구문

- 모든 Iterable은 Spread가 될수 있음

- 순회 가능한 데이터는 펼쳐질 수 있음

add라는 더하기 함수를 만들어서

add(요소1, 요소2, 요소3); 이렇게 하는방법도 있지만

const nums 처럼 Array 객체를 만들어 함수에 인덱싱을 하는방법,

...nums 처럼 넣는 방법도 있다.

2. 예시 및 설명

2-1

fruit1,2 배열을 만들어서

arr 변수에 concat으로 두개의 Array(배열)를 합쳐준다

2-2

...a, ...b 꼴로 배열에 집어넣어도 같은 결과가 나온다

2-3

배열 사이에 다른 요소를 추가하여도 문제가 없다.

2-4

apple에 딕셔너리 형태로 담고

apple_update 에서는 job 키와 프로그래머 라는 value를 추가

2-5

fruits 배열을 나눠서 변수로 지정하는 방법

바나나와 수박은 1, 2번에 담기고 나머지 요소들은 others에 담기게 됨(변수이름은 others가 아니어도 됨)

2-6

배열을 x,y에 나눠담고 z를 기본값으로 0을 설정해서 담을수도 있다.

2-7

위와 마찬가지 경우인데 함수에서 받는 리턴값을 담기

2-8

display 함수에서 name, age, job 키들을 매개변수로 받아 각 키의 value를 반환

component 딕셔너리에서 styles의 value 인 딕셔너리 안에서 키가 color인 black을 출력하는 함수