Truthy/Falsy

...
if (!변수)
혹은 
if (변수)
...

조건식이 아니어도, JS가 true/false로 평가하는 값들

false

• 빈 문자열 ''
• undefined
• null
• 0, -0, NaN

true

• 비지 않은 문자열
• 빈 배열 []
• 빈 객체 {}
• 0, -0, NaN을 제외한 숫자

삼항 연산자

조건 ? 조건이true일경우실행할코드 : 조건이false일경우실행할코드

// 축약하지 않은 if문 버전
if (조건===true) {
  조건이true일경우실행할코드
} else if (조건===false) {
  조건이false일경우실행할코드
}

// 코드 대신 값을 넣을 경우 값을 return
const 변수 = 조건 ? 조건이true일경우반환할값 : 조건이false일경우반환할값;

조건식을 한줄로 축약하여 표현하는 문법
중첩으로 사용할 경우 가독성이 낮아지므로 if문으로 풀어서 써 주는 것이 좋음

단락회로 평가

// 조건이 true일 때는 값을 반환하고, false면 undefined를 반환하는 코드
if (조건) return {값};
혹은
return 조건 && 값

왼쪽에서 오른쪽으로 순차적으로 연산하는 논리 연산자의 연산 순서를 이용하는 문법

비 구조화 할당

let [변수1, 변수2, 변수3] = [값1, 값2, 값3]
console.log(변수1); // 값1

배열의 각 요소를 변수로 지정
변수를 여러개 동시에 선언 가능
객체로 사용할 때는 키값을 기준으로 변수명을 정해야 함

spread 연산자

객체의 프로퍼티나 배열의 값을 펼치는 것

객체에서의 사용

const 객체1 = {
	프로퍼티1: 값1,
	프로퍼티2: 값2,  
}

const 객체2 = {
	...객체1			//spread 연산자
	프로퍼티3: 값3,  
}

console.log(객체2); // {프로퍼티1: 값1, 프로퍼티2: 값2, 프로퍼티3: 값3,}

객체1의 프로퍼티를 객체2에 복사해 넣는 문법(파이썬 클래스의 상속과 아주조금 유사)

배열에서의 사용

const 배열1 = [값1, 값2]

const 배열2 = [...배열2, 값3]

console.log(배열2); // [값1, 값2, 값3]

배열1의 요소를 배열2에 복사해 넣는 문법(파이썬 클래스의 상속과 아주조금 유사)

동기 & 비동기

동기 방식

자바스크립트의 디폴트 동작 방식
블로킹 방식: 앞의 작업이 완료되기 전에는 뒤 작업을 하지 않음

멀티 스레드 vs 싱글 스레드

이러한 난점을 극복하기 위해 멀티 스레드로 동작하는 경우도 있지만, 자바스크립트는 싱글 스레드 방식으로 작동하는 언어임

비동기 방식

자바스크립트에서 이러한 난점을 극복하기 위해는 비동기 방식을 사용할 수 있음

아래 예시에서는 비동기 방식으로 작동하는 작업 3개에 각각의 작업이 끝나고 동작할 콜백 함수를 붙인 것

콜백 지옥

비동기 작업에 콜백을 줄지어 붙여서 매우 복잡하고 읽기 어려워진 코드

Promise

Promise함수
  .then(함수가성공하면실행할작업)  // = resolve 콜백함수로 구현했던 것
  .catch(함수가실패하면실행할작업) // = reject 콜백함수로 구현했던 것

콜백지옥을 피해서 비동기 작업을 작성하는 문법

비동기 작업의 세 가지 상태

한 번 작업이 성공하거나 실패하면 그걸로 끝

예시

같은 코드를 Promise와 콜백을 사용하여 구현한 예

async, await

async function 함수명 () {
  await 작업1
  작업2
}
함수명
  .then(함수가성공하면실행할작업)
  .catch(함수가실패하면실행할작업)

Promise를 보다 쉽게 이용하겨, 비동기 처리를 보다 직관적으로 할 수 있게 하는 문법
일반 함수 선언 앞에 astnc를 붙이면 Promise를 return하는 함수가 됨
async 함수 안의 특정 작업 앞에 await를 붙여 주면, 해당 줄은 동기적으로 처리가 됨(그 줄이 처리되기 전까지는 다음 줄이 실행되지 않음)

API 호출

fetch

let 변수 = fetch(API주소).then((res)=>res로수행할작업) 

res는 API 객체 자체를 의미하므로 데이터를 가공하려면 res.json 등으로 골라내야 함
cf.) https://jsonplaceholder.typicode.com/ :mockdata를 json 객체로 반환하는 무료 연습용 API를 제공하는 사이트

Reference

한입 크기로 잘라 먹는 리액트(React.js)