[React] JavaScript 응용_1 (Truthy&Falsy/삼항연산자/단락회로평가/조건문업그레이드/비구조화할당)

섹션 3 JavaScript 응용

<Udemy 리액트 챌린지 1주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 1주차 미션으로 "섹션 3 JavaScript 응용"을 수강한 내용을 정리하고 있습니다. 👍

---

JavaScript 응용

3-1 Truthy & Falsy

• Truthy : 참이 아닌 ‘참 같은 값’
• Falsy : 거짓이 아닌 ‘거짓 같은 값’

자바스크립트는 자신만의 기준으로 참과 거짓을 구분한다.

let a = ""; // 비어있는 문자열
if (a) {
  console.log(true);
} else {
  console.log(false); // 빈 문자열을 false로 인식
}

a = "string"; // 비어있지 않은 문자열
if (a) {
  console.log(true); // 비어있지 않은 문자열을 true로 인식
} else {
  console.log(false);
}

• true 로 판단 : 빈 배열 [], 빈 객체 {}, 비어있지 않은 문자열, Infinity 등
  ⇒ Truthy : true 값이 아닌데 true로 평가하는 값
• false 로 판단 : null, undefined, 0, -0, NaN, 빈 문자열 “”
  ⇒ Falsy : 거짓 값이 아닌데 false로 평가하는 값

 

활용 방법

👀 객체의 프로퍼티 값을 리턴하는 함수 예제

// 객체의 name 프로퍼티의 값을 리턴하는 함수
const getName = (person) => {
  return person.name;
};

let person = { name: "김유민" };
const name = getName(person);
console.log(name);

// let person2;
// const name2 = getName(person2);  // 오류 발생 -> undefined 객체의 프로퍼티에 접근할 수 없음
// console.log(name2);

위의 예제에서 person 객체의 name 프로퍼티 참조 시에는 오류 없이 value 값인 "김유민"을 출력한다.

그러나 주석처리된 부분을 보면, undefined인 person2 객체를 함수에 넘긴 경우엔 오류가 발생한다.

name 참조 시 오류

👉 undefined 객체이기 때문에 프로퍼티를 참조할 수 없다.
→ 오류가 나지 않도록undefined인 객체를 조건문을 사용하여 참조하지 않게 처리해줘야한다.

 

객체가 Falsy 인지 체크하기

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

// person이 undefined 인 경우
let person;
let name = getName(person);
console.log(name);					// "객체가 아닙니다" 출력

// person이 null 인 경우
person = null;
name = getName(person);
console.log(name);					// "객체가 아닙니다" 출력

person객체가 null이거나 undefined 등 Falsy하면 프로퍼티 접근 시 오류가 발생하며, 프로퍼티에 접근하지 못하는 Falsy인 경우의 수가 많다.

if (person === undefined || person === null) 
	return "객체가 아닙니다";

 이런 식으로 조건문에 하나하나 일일이 조건을 거는 것보단

if (!person)	// Falsy 인 경우 
	return "객체가 아닙니다";

 👉  이렇게 Falsy 한 경우를 체크하는 것이 놓치는 falsy한 조건이 없고, 훨씬 보기도 좋다.

 

3-2 삼항 연산자

: 조건문을 줄일 수 있는 방법

형식 : 조건문 ? 참일 경우 수행 : 거짓일 경우 수행;

// 주어진 숫자가 양수인지 음수인지 판단
let a = 3;

// 일반적인 조건문
if (a >= 0) {
  console.log("양수");
} else {
  console.log("음수");
}

// 삼항 연산자 
a >= 0 ? console.log("양수") : console.log("음수");

👉 코드 길이 단축!

삼항연산자의 리턴 값을 변수에 대입해서 사용할 수도 있다.

let a = [];

const arrayStatus = a.length === 0 ? "빈 배열" : "안 빈 배열";
console.log(arrayStatus);  // "빈 배열" 출력

👉  배열 a의 길이가 0일 경우 "빈 배열"이, 0보다 길 경우 "안 빈 배열"이라는 문자열이 상수 arrayStatus에 저장된다.

 

중첩 삼항연산자

// 중첩 삼항연산자 : 학점 계산 프로그램
// 90이상 : A+
// 50이상 : B+
// 둘다 아님 : F
let score = 100;

// 중첩 삼항 연산자 -> 가독성이 좋지 않다! if문으로 하는게 더 가독성 좋음
score >= 90
  ? console.log("A+")
  : score >= 50
  ? console.log("B+")
  : console.log("F");

• 중첩 삼항연산자는 가독성이 좋지 않아서 if문을 쓰는게 더 가독성이 좋다.

3-3 단락 회로 평가

: 연산 순서를 이용한 문법

• false && true
  : && 는 둘다 True여야 true이다.
  👉 첫번째 피연산자가 false 면 뒤의 피연산자는 볼 필요가 없다.
• true || false
  : || 는 둘중 하나만 true여도 true이다.
  👉 첫번째 피연산자가 true면 true로 판단하고 두번째 피연산자는 보지 않는다.

⇒ 둘 다 단락회로평가가 이루어지기 때문에 true/false를 빨리 판단할 수 있다.

 

💡 truthy와 falsy를 판단할 때 유용하게 사용 가능하다

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

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

 person이 Truthy 한경우에만 person의 name 프로퍼티를 리턴하는 코드가 있을 때, if문을 사용하는 부분을 단락 회로 평가로 개선할 수 있다.

 

단락 회로 평가를 사용하여 개선

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

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

return person && person.name;

: person이 Truthy 여야만 person.name을 리턴한다.
Falsy면 person.name에 접근하지 않고 undefined를 리턴한다.
(→ person이 이미 Falsy한 객체이므로 person.name에 접근하지 않아 오류가 발생하지 않는다.)

 

undefined 객체일 경우 Return 처리

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

👉 name  값이 Falsy 한 경우, False를 리턴하지 않고, 문자열 "객체가 아닙니다."를 리턴하도록 처리한다.

 

3-4 조건문 Upgrade 하기

예제 1

: 주어진 문자열이 한식 종류에 해당하는지 판단하는 코드 개선하기

function isKoreanFood(food){
    if (food === '불고기' || food === '비빔밥' || food === '떡볶이') {
        return true;
    }
    return false;
}

console.log(isKoreanFood("불고기"));  // true
console.log(isKoreanFood("파스타"));  // false

: food 값을 각각 체크하여 true/false 판단한다.

👉 배열 내장 메소드 includes 함수를 사용하여 조건문을 개선할 수 있다.

 

includes() 를 사용해 개선

function isKoreanFood(food){
    // includes 함수 사용하여 배열에 food가 포함되는지 확인
    if (['불고기','비빔밥','떡볶이'].includes(food)) {
        return true;
    }
    return false;
}

: if 문의 조건으로 food 값을 각각 체크하지 않고, 체크할 문자열을 담은 배열을 만들어 해당 배열에 속하는지 여부를 체크하여 true/false 를 리턴한다.

 

예제 2

: mealType을 입력받아 대표적인 메뉴를 리턴하는 함수

// 한식, 중식, 양식 입력받아 대표적인 메뉴 리턴하는 함수
const getMeal = (mealType)=>{
    if (mealType === '한식') return "불고기";
    if (mealType === '중식') return "멘보샤";
    if (mealType === '양식') return "파스타";
    if (mealType === '일식') return "초밥";
    return "굶기";
};

console.log(getMeal("한식"));  // 불고기
console.log(getMeal("한식"));  // 중식
console.log(getMeal());       // 굶기

 

위의 코드는 음식 종류에 따라 각각 if문 블록을 생성하여 값을 리턴하고 있다.

만약 음식종류(mealType)이 추가되거나 return하는 문자열이 바뀔 경우, 수정이 번거로워진다는 단점이 있다.

 

객체를 사용하여 개선

: {음식타입:대표메뉴} 형태를 가진 meal 객체를 선언하여 getMeal 개선

const meal = {
  한식 : "불고기",
  중식 : "멘보샤",
  양식 : "파스타",
  일식 : "초밥",
  인도식 : "카레",
};

const getMeal = (mealType)=>{
    return meal[mealType] : "굶기";
};

→ 음식 종류가 추가됨에 따라 meal 객체의 값만 수정하면 된다.
또한 return 하는 문자열이 바뀌는 경우, 해당하는 value값만 수정하면 되기 때문에 수정이 용이하다.

함수의 반복된 수정을 방지하고 함수 내부의 if문이 많아지는 것을 방지할 수 있다.

 

3-5 비구조화 할당

배열과 객체를 우아하게 사용하는 방법!

배열의 비구조화 할당

일반적으로 배열에 있는 각 요소의 값을 각각 변수에 할당하려면 다음과 같이 할 수 있다.

let arr = ["one", "two", "three"];
let one = arr[0];
let two = arr[1];
let three = arr[2];  // arr 변수를 반복적으로 참조하는 문제

비구조화 할당으로 변수 one, two, three에 배열arr의 각 요소들을 인덱스 순서대로 할당할 수 있다.

// 비구조화 할당
let [one, two, three] = arr; // arr의 각 인덱스의 데이터를 리스트 내부에 선언된 변수에 순서대로 할당

별도의 배열 변수 arr를 선언하지 않고도 비구조화 할당을 할 수도 있다.

// 배열의 선언분리 비구조화 할당
let [one, two, three] = ["one", "two", "three"]; // 배열의 요소를 순서대로 변수에 할당

기본값 바인딩

비구조화 할당 시, 할당받지 않은 변수엔 undefined가 할당된다.

let [one, two, three, four] = ["one", "two", "three"]; // four -> undefined

→ 할당받지 못하는 변수 four 발생했을 때, four에는 undefined가할당된다.

👉 할당되지 않은 변수에 기본값 바인딩이 가능하다.

let [one, two, three, four='four'] = ["one", "two", "three"];

: 변수 four엔 배열의 비구조화 할당이 일어나지 않았지만 기본값 'four'가 저장된다.

 

Swap에 활용 가능

let a = 10;
let b = 20;

[a, b] = [b, a];	// Swap

→ [b, a]라는 배열을 만들고, a 와 b에 순서대로 할당하기 때문에 a와 b를 swap 가능

 

객체의 비구조화 할당

let object = {one : "one", two:"two", three:"three"};
let {one, two, three} = object;

→ 객체의 각 프로퍼티를 변수에 바인딩할 수 있다.

object의 one의 value는(”one”) 변수 one에,
two의 value는(”two”) 변수 two에,
three의 value는(”three”) 변수 three에 바인딩 된다.

 

Key값 기준 할당

→ ⭐️ 객체의 비구조화 할당은 인덱스(순서) 기준이 아니라 Key값을 기준으로 할당된다.
따라서 변수명과 프로퍼티의 키값이 동일해야한다. (따라서 변수 순서는 상관없다.)

let {two, one, three} = object; → 이렇게 해도 two에는 “two”가 할당됨

 

다른 변수명으로 할당하고 싶은 경우

: {키값:사용하고 싶은 변수명} 으로 변수명을 지정하면 사용하고 싶은 변수명을 가진 변수로 값 할당이 가능하다.

let object = {one : "one", two:"two", three:"three", name:"유민"};
let {one, two, three: sam, name:myName, abc='four'} = object;
console.log(myName);  // "유민" 출력

위의 예제의 경우, sam 변수에 three 프로퍼티의 value가 (= "three"), myName 변수에 name 프로퍼티의 value가 (= "유민") 저장된다.

---

확실히 자바스크립트 응용 파트에 들어오니까 다른 언어와 조금 다른 특징들이 많다. 처음 접해보는 개념도 있어서 흥미로웠고, 잘 활용하면 깔끔하고 보기 좋은 코드를 작성할 수 있을 것이다. 그리고 잘 활용할 수 있도록 익숙해져야겠다.

강의를 들으면서 노션에 정리한걸 블로그로 다시 정리하면서 또 복습을 하게 되니까 좋다. 시간은 많이 소요되지만 언젠간 단축되겠지.

새로운 내용이 많다보니 섹션 3도 2개의 포스트로 나눠서 올리겠습니다. 🥹

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)