eadgnus

1. JSON(JavaScript Object Notation)

- 데이터를 저장하거나 전송할 때 사용되는 경량의 Data 교환 방긴

- 사람과 기계 모두 이해하기 쉬우며 용량이 작아서 XML을 대체하여 데이터 전송등에 많이 사용

- 데이터 포멧일 뿐, 통신 방법도 프로그래밍 문법도 아님

2. JSON의 특징

- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용

- 자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 변환하기 쉬움

- 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐

- 특정 언어에 종속되지 않으며, 대부분 프로그래밍 언어네서 JSON 포맷의 데이터를 핸들링 할수 있는 라이브러리를 제공

3. JSON의 구조

- 이름과 값이 쌍으로 이루어져 있다.

- 데이터는 쉼표 구분하여 나열

-{}중괄호로 감싸 표현

- 배열은 [ ]로 감싸 표현

4.JSON의 타입

- 숫자, 문자열, 불리언, 객체, 배열, null

stringify(obj)

객체를 문자열로 변환

parse(Json)

문자열데이터를 자바스크립트 객체로 변환

네임은 루시 나이는 14 품종은 포메라니안 이라는 딕셔너리를 만들었다.

딕셔너리 객체가 json 형태로 변환된것을 볼수 있다.

다시 오브젝트로 변환됨.

1. async / await

- callback, promise 비동기 처리를 좀더 쉽게 처리할 수 있도록 사용됨.

- ES7에 추가된 문법

1. 함수의 function 부분 앞쪽에 Async,Await을 붙여준다.

2. promise 실행문 앞쪽에 await를 붙여준다.

return 값이 반환된다.

2. 예제 및 설명

getBanana란 함수이다.

return 값으로 1초뒤에 🍌 바나나값을 리턴함

3초뒤에 🍎를 리턴

reject 시키고 에러를 발생한다. 

async는   promise를 더 쉽게 사용하기 위해 사용하고

.then/.catch/.finally 사용가능하다.

fetchFruits 함수를 실행해서 리턴값인 [banana, apple]의 이모지 배열을 fruits에 담아서 프린트 해준다.

4초뒤에 배열이 출력 됨.

1. 옵셔널 체이닝

- ECMA Script 11버전에 추가

- null 또는 undefined를 확인할때 쓰이는 연산자

- ?. , ??

2. 예제 및 설명

2-1

or 연산에서는 a,b 둘중 하나이상이 true이면 true값을 리턴하기 때문에 console부분이 출력된 모습.

2-2

and 연산에서는 둘다 true여야 true 값을 리턴하기 때문에 obj2까지 true값을 반환하여 마지막것에 있는 obj2가 result에 저장됨

2-3

or 연산에서는 둘중 하나만 true면 되기 때문에 true인 obj1만 연산후 obj2는 무시, 그후 obj1을 result에 저장

2-4

changelover 함수는 obj(파라미터)를 받아서 if문을 돌린다.

if문 => obj.lover(파라미터로 받은 값에 lover라는 키가 있냐) 에 ! 를 붙여 반대로 없으면 if문을 실행하게 됨

없다면 error 발생

있다면 obj.lover에 '애인이 바뀜' 을 새로 저장

makeNewlover 함수는 obj(파라미터) 를 받아서 lover가 있으면 에러를 발생해서 '애인이 있어'를 알림

없다면 obj.lover에 애인이 생김을 저장한다.

obj1의 lover값이 있으면 함수를 실행 없으면 실행 안한다.

마찬가지로 obj2에 lover가 있으면 실행함. 

있어서 이메론이었던 값이 변한 모습. 

2-5

아이템이라는 변수를 선언하고 딕셔너리를 저장

가격이라는 변수를 상수로 선언해서 item 변수에 price가 있다면 그 값을 저장하게 됨.

2-6

print() 함수는 text 변수에 message라는 파라미터가 없다면 'hello'문자열을 저장하게 된다.

문자열을 입력해준 '안녕' 말고는 다 기본값으로 설정해둔 hello가 출력된 모습.

2-7

0 은 false이기 때문에 -1이 저장된 모습

2-8

?? 연산자의 경우 0 도 객체로 인식되어서 0이 저장된다.

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 주석