spread

April 1, 2022 2 분 소요

📖 truthy & falsy

📍 truthy

truthy란?

js에서 참으로 인식되는 값을 truthy 라고 한다.
“0”, “”, “false”, [], {}, Infinity 는 truthy이다.

📍 falsy

falsy란?

js에서 거짓으로 인식되는 값을 falsy 라고 한다.
null, undefined, 0, -0, Nan은 falsy이다.

💡 활용

const getName = (person) => {
  if (!person) {
    return "객체가 아닙니다.";
  }
  return person.name;
};

let person;
console.log(person);
console.log(getName(person));

>>>
false
객체가 아닙니다.

!person을 사용해서 person의 거짓이 참이면 조건문 수행.

📖 삼항 연산자

조건 ? 참이면 실행 : 거짓이면 실행

💡 실행

let arr = [];
let arrayStatus = arr.length === 0 ? "빈 배열" : "안빈배열";
console.log(arrayStatus);

let arr = [];
let result = arr ? console.log("빈배열") : console.log("안빈배열");

중첩 활용은 가능하나 가독성이 떨어지므로 되도록이면 지양..

📖 조건문Upgrade

📍 배열

function isKoreanFood2(food) {
  if (["불고기", "비빔밥", "떡볶이"].includes(food)) {
    return true;
  }
  return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);

>>>
true
false

.includes() 메서드를 활용해서 food라는 매개변수가 배열안에 있는지 없는지를 판단한다.

📍 객체

const getMeal = (mealType) => {
  return meal[mealType] || "굶기";
};
const meal = {
  한식: "불고기",
  중식: "멘보샤",
  일식: "초밥",
  양식: "스테이크",
  인도식: "카레",
};
console.log(getMeal("한식"));
console.log(getMeal());

>>>
불고기
굶기

getMeal이라는 함수를 만들고 meal[mealType] 값이 있다면 바로 리턴, 없다면 굶기를 리턴한다.

📖 단락회로 평가

논리 연산자인 &&,

, !을 활용한 것이다. 논리 연산자는 왼쪽부터 먼저 참인지 거짓인지 평가하는데, 이를 활용하여서 작성할 수 있다.

&& : 왼쪽이 거짓이면 거짓으로, 왼쪽이 참이면 오른쪽을 검사
: 왼쪽이 참이면 참으로, 왼쪽이 참이면 오른쪽을 검사 X

💡 활용
truthy, falsy를 활용하여서 작성

const getName = (person) => {
  return person && person.name;
};

let person;
let name = getName(person);
console.log(name);

>>> undefined

객체가 아닙니다. 로 출력하려면 어떻게 해야될까?

let person = {};
const getName = (person) => {
  const name = person && person.name;
  return name || "객체가 아닙니다.";
};

name을 통해서 참이라면 person 객체의 이름을 반환, 거짓이라면 undefined를 반환 => return에서 name이 undefined라면 거짓으로 판단되므로 오른쪽도 검사, name이 있다면 바로 반환.

📖 비구조화 활당

배열과 객체에 있는 값들을 간단하게 전달할 수 있는 방법! 백준 문제 풀이에도 많이 사용될 것 같다❗

📍 배열 비구조화 활당

let [one, two, three] = arr;
console.log(one);

>>> one

원래 배열의 개수보다 할당받고 싶은 변수의 개수가 많을 때, seven = “empty” 처럼 넣어주면 empty로 출력된다.

let [four, five, six, seven = "empty"] = ["four", "five", "six"];
console.log(four, five, six, seven);

>>> four five six empty

📍 객체 비구조화 할당

let obj = { o: "one", t: "two", th: "three" };
let { o, t, th: _3rd, f = "four" } = obj; //키 값을 기준으로 할당.
console.log(o, t, _3rd, f);

>>> one two three four

th: _3rd => 키 값을 _3rd로 한다.
f = “four” => f라는 키 값이 없다면 four을 출력한다.

📖 spread

말 그대로 뭔가를 펼친다는 의미. 반복이 많은 경우 함수처럼 간단하게 사용할 수 있다. …배열 이름 / 객체 이름 으로 사용할 수 있다.

📍 배열 spread

const noTopingCookies = ["촉촉한쿠키", "안촉촉한쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코칩쿠키"];

const allCookies = [...noTopingCookies, ...topingCookies, "추가된쿠키"];
console.log(allCookies);

>>> [ '촉촉한쿠키', '안촉촉한쿠키', '바나나쿠키', '블루베리쿠키', '딸기쿠키', '초코칩쿠키', '추가된쿠키' ]

객체와는 달리 유동적으로 새로운 값을 추가할 수 있다. ( “추가된쿠키” )

📍 객체 spread

const cookie = {
  base: "cookie",
  madeIn: "Korea",
};

const chocochipCookie = {
  ...cookie,
  toping: "chocochip",
};

const blueberryCookie = {
  ...cookie,
  toping: "blueberry",
};

const strawberryCookie = {
  toping: "strawberry",
};

console.log(chocochipCookie);
console.log(blueberryCookie);
console.log(strawberryCookie);

>>>
{ base: 'cookie', madeIn: 'Korea', toping: 'chocochip' }
{ base: 'cookie', madeIn: 'Korea', toping: 'blueberry' }
{ base: 'cookie', madeIn: 'Korea', toping: 'strawberry' }

Twitter Facebook LinkedIn

Sohn SooKyoung