1. 단락회로 평가
console.log(false && true);
console.log(true || false연산 순서를 이용하는 단락회로 평가
&& 연산자의 경우 왼쪽 피연산자가 false면 false
|| 연산자의 경우 왼쪽 피연산자가 true면 ture
const getName = (person) => {
const name = person && person.name;
// && 연산자는 첫번째 피연산자가 false면 바로 값 리턴
return name || "객체가 아닙니다.";
// || 연산자는 첫번째 피연산자가 false면 바로 두번째 값 리턴
};
let person = null;
const name = getName(person);
console.log(name); // "객체가 아닙니다."단락회로 평가를 통해서 && 연산자를 사용하여 false 값인 첫 번째 피연산자(person)을 반환하게 하고, || 연산자를 사용하여 첫 번째 피연산자가 false 이므로 두번째 값을 리턴한다.
const getName = (person) => {
const name = person && person.name;
return name || "객체가 아닙니다.";
};
let person = { name: "jisu" };
const name = getName(person);
console.log(name); // jisu
반대로 person이 true이기 때문에 && 연산자에서 person.name을 반환하고, || 연산자에서 name이 trued이기 때문에 바로 name을 반환한다.
2. 조건문 업그레이드
만약 음식타입을 받았을 때 해당 타입에 매칭되는 음식을 출력해줘야 한다면? key-value 형태로 객체를 만들고 해당 key의 value를 출력해주면 된다
const meal = {
한식: "불고기",
양식: "파스타",
일식: "초밥",
중식: "멘보샤"
};
const getMeal = (mealType) => {
return meal[mealType] || "굶기";
};
const food1 = "일식";
console.log(getMeal(food1));
이렇게 객체의 괄호 표기법으로 해당 value에 접근해서 가져오면 조건문이 훨씬 간단하고 효율적이게 된다.
3. 비 구조화 할당
3-1. 배열 비 구조화 할당
배열의 요소를 할당할 때 사용할 수 있는 간편한 방법!
// 기존 할당 코드
let arr = ["one", "two", "three"];
let one = arr[0];
let two = arr[1];
let three = arr[2];
// 변수를 담은 배열을 사용해서 똑같이 할당할 수 있음
let [one, two, three] = arr;
// 혹은 선언과 동시에 할당할 수 있음, 비 구조화 할당!
let [fir, sec, thir] = ["one", "two", "three"];
console.log(one, two, three); // one two three
console.log(fir, sec, thir); // one two three
// 혹은 비 구조화 할당에서 기본값을 넣어줄 수 있음
let [fir, sec, thir, fourth = "four"] = ["one", "two", "three"];
console.log(fir,sec,thir, fourth) // one two three four이번에는 값을 서로 스왑하는 것도 비 구조화 할당으로 해보자
// 기존 스왑
let a = 10;
let b = 20;
let tmp = 0;
tmp = a;
a = b;
b = tmp;
console.log(a, b);
// 비구조화 할당 사용 스왑
let a = 10;
let b = 20;
[a, b] = [b, a] // a 변수에 배열의 b값을 할당
console.log(a, b); // 20 10
3-2. 객체 비 구조화 할당
// 객체 비 구조화 할당
let object = { one: 1, two: 2, three: 3 };
let { one, two, three } = object;
console.log(one, two, three); // 1 2 3객체 비 구조화 할당은 핵심은 순서가 아니라
동일한 key 값을 변수로 사용해야 한다
만약 새로운 변수에 객체의 프로퍼티를 할당받고 싶다면 아래와 같이 해야한다.
// key : 새로운 변수명 = 디폴트 값
let object = { one: 1, two: 2, three: 3 };
let { one: first, two, three, four = 4 } = object;
console.log(first, two, three, four);
이렇게 :을 사용해서 새로운 변수명에 할당해 줄 수 있고, 기본값을 주고 싶을때는 배열과 마찬가지로 =을 사용하면 된다.
4. spread 연산자
만약 여러 객체에서 서로 중복되는 데이터가 있을 경우 이 spread 연산자를 사용하여 코드를 더 효율적으로 작성할 수 있다.
const cookie = {
base: "cookie",
madeIn: "korea"
};
const chocoChipCookie = {
...cookie,
madeIn: "korea",
toping: "chocochip"
};
const blueberryCookie = {
madeIn: "korea",
toping: "blueberry"
};
const strawberryCookie = {
madeIn: "korea",
toping: "strawberry"
};
console.log(chocoChipCookie); // {base: "cookie", madeIn: "korea", toping: "chocochip"}
cookie라는 객체의 프로퍼티를 스프레드 연산자를 통해 각각의 객체들에 넣어준 것이다. 완전 좋다.
또한 배열에서도 사용 가능한데,
예전에 배열의 내장 메서드로 concat을 통해 배열을 병합시키는 것을 배웠었다. 이것을 스프레드 연산자를 통해서 똑같이 할 수 있다.
const cookie1 = ["초코쿠키", "딸기쿠키"];
const cookie2 = ["말차쿠키", "아몬드쿠키"];
const allCookies = [...cookie1, ...cookie2];
console.log(allCookies);
5. 동기와 비동기
자바스크립트는 코드가 작성된 순서대로 작업을 수행한다.
이전 작업이 진행 중 일때는 다음 작업을 진행하지 않고 기다리는데 이를 블로킹 방식 이라고 한다. 자바스크립트는 싱글 스레드로 동기 방식의 처리를 진행하고 있다.
따라서 이렇게 싱글 스레드인 자바스크립트에서 동기 방식으로 작업을 처리하게 되면 하나의 작업이 오래 걸리면, 나머지 모든 작업이 모두 정지되어 있기 때문에 흐름이 굉장히 느려진다! 아주 큰 문제!
싱글 스레드인 자바스크립트의 동기적 방식의 문제점들을 해결하기 위해 나온 것이 바로, 비동기 방식이다.
비동기 작업은 하나의 작업이 진행 중이어도 다른 작업이 이를 기다리지 않고 동시에 진행할 수 있는데 이를 논 블로킹 방식이라고 한다.
