[JavaScript] 주요 문법 정리

함수 표현 방식

- 함수 선언식 : function 함수명() { }

함수 선언 전에 호출 가능함

 

- 함수 표현식 : 변수 = function() { }

함수를 함수명 없이 선언한 후 변수에 저장

반드시 함수 선언 후 호출

 

 

 

변수 선언

- 스코프 : 변수의 유효 범위

1) 함수 스코프 : 유효 범위가 함수 내부 (var)

함수 내부에 다른 블록{ }에서 선언된 변수를 사용 가능함

같은 이름으로 중복 선언 가능함 (새로 만들어지는 변수로 기존 변수를 덮어씀)

 

2) 블록 스코프 : 유효 범위가 블록 내부 (let, const)

다른 블록{ }에서 선언된 변수를 사용할 수 없음

변수 중복선언 불가능

 

-> const > let > var 순서대로 사용하되, var는 전역 변수 선언 시에만 사용을 권장함

 

 

 

화살표 함수

=>를 사용하여 function, return 키워드를 생략하는 문법

// 기존 함수 선언 방식
const angelplayer = function(data1, data2) {
    return data3;
};


// 화살표 함수 선언 방식 (function 생략)
const angelplayer = (data1, data2) => {
    return data3;
};


// 화살표 함수 선언 방식 (function, return 생략)
const angelplayer = (data1, data2) => data3;

 

- function 생략

 

- 암묵적 반환 (return 생략) : return 생략 시 화살표 뒤에 있는 값을 자동으로 반환 

 

- 파라미터 작성법

파라미터가 하나일 때 소괄호 생략

매개 변수가 없으면 소괄호 생략 불가능

 

 

 

모듈 내보내기, 가져오기

- 이름으로 내보내기/가져오기

다수의 식별자를 공유

내보내기 : export {식별자1, 식별자2};

가져오기 : import {식별자1, 식별자2} from '경로/파일명.js';

 

 

- 기본으로 내보내기/가져오기

식별자 하나만 지정하여 공유하는 방식

내보내기 : export default 식별자;

가져오기 : import 변경할_이름 from '경로/파일명.js';

 

 

 

콜백 함수, 비동기 처리

- 동기 처리 : 함수를 포함한 모든 코드가 순서대로 실행

 

- 비동기 처리 : 명령 요청 후 다음 작업을 수행하다가 요청이 완료되면 작업을 마무리

코드들이 독립적으로 실행

 

- 콜백 함수 : 비동기 처리 방식을 구현하기 위해서 사용함

함수의 파라미터로 함수를 전달하는 경우 전달된 함수를 콜백 함수라고 부름

전달된 함수는 비동기 처리

-> 기존의 비동기 처리 방식 -> 콜백 지옥, 가독성 문제 발생

 

- Promise

비동기 처리 방식의 단순화, 가독성, 유지보수 용이

 

 

 

JSON, Fetch API

- JSON : 자바스크립트 등에서 데이터 저장, 교환에 사용

JSON -> JS 객체로 변환하여 사용함

형태 : { 키 : 값, 키 : 값 }

 

JSON 파일(텍스트) -> JS 객체 : JSON.parse()

JS 객체 -> JSON 텍스트 : JSON.stringify()

 

 

- Fetch API

데이터의 CRUD  작업을 위해 HTTP Request, Response의 post, get, put, delete를 메소드로 관리

 

fetch(경로) : 경로를 전달하면 서버가 응답하는 값을 pResponse 파라미터에 저장함

 

<button onclick="
fetch('https://jsonplaceholder.typicode.com/posts/1') // 경로 지정
    .then(pResponse => pResponse.text()) // JSON -> 텍스트로 변경
    .then(pJSON => console.log(pJSON)); // 출력
">JSON Remote</button>

 

 

 

Promise

- Promise : 비동기 처리 방식으로 실행된 결과의 성공과 실패를 관리

약속 생성, 최종 경과로 구분

 

1) 약속 생성 상태 : 별도의 script로 new Promise 구현

pending  : 요청한 실행의 반환을 기다리는 상태

resolved : 요청한 실행이 성공한 경우

rejected : 요청 실행 실패

 

 

2) 최종 결과 상태 : event로 .생성한 Promise 호출

fulfilled : 성공적으로 원하는 결과값을 반환 받은 상태

unfulfilled : 요청이 실패하여 오류 처리를 해야하는 상태

 

 

 

await, async

- await : 함수를 순차적(동기)으로 처리하도록 지시

$ await 함수();

 

- async : 함수를 비동기로 처리하도록 선언

$ async function 함수명() { }