[JS] 조건문, 구조분해할당(비구조화할당)

 

 

조건문 응용

 

 

조건문을 보다 쉽게 응용하여 작성해보자. 전달받은 인자가 한식인지 확인하는 함수로 예를 들어보자.

 

function isKoreanFood(food) {
	if(food === "라면" || food === "떡볶이" || food === "돼지고기") {
    return true;
    }
    return false;
}

const food1 = isKoreanFood("라면")
console.log(food1) /// true;

위 코드는 음식의 조건을 하나하나 대입해줘야하는 노가다가 생길 수 밖에 없다. 만약 switch case문을 이용한다고 해도 음식에 대한 case 가 엄청 많아질 것 이기 때문에 의미가 없다. 다른 구조로 코드를 생각해보자. 만약 입력받은 파라미터가 배열에 존재하는지만 계산하도록 한다면 코드를 다음과 같이 작성할 수 있다.

 

function isKoreanFood(food) {
	if(["라면", "떡볶이", "돼지고기"].includes(food)) {
    return true;
    }
    return false;
}

const food1 = isKoreanFood("라면")
console.log(food1) /// true;

배열 메서드 includes를 활용하여 복잡한 조건문을 다음과 같이 간추릴 수 있다. 이번에는 인자로 받은 파라미터가 중식인지 양식인지 일식인지 구분하는 코드로 확장해보자.

 

const getMeal = (mealType) => {
	if (mealType === "한식") return "불고기";
    if (mealType === "양식") return "파스타";
    if (mealType === "일식") return "스시";
    if (mealType === "중식") return "짜장면";
    return "음식이 아님"
}

console.log(getMeal("양식")) /// 파스타

위와 같이 작성이 가능하지만, mealType이 존재하는 모든 음식의 종류로 나눠야 한다면..? 100가지가 넘을 수 도 있다. 이것을 우리는 객체의 프로퍼티에 접근하는 객체의 괄호표기법을 이용해서 혁신적으로 해결해볼 수 있다.

 

const meal = {
	한식 : "불고기",
    중식 : "짜장면",
    양식 : "파스타",
    일식 : "스시"
}

const getMeal = (mealType) => {
	return meal[mealType] || "음식이 아님";
}

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

meal이라는 객체에 key값과 value값으로 작성해준다. getMeal타입을 호출할 때 "한식"을 전달해줬기 때문에 meal이라는 객체에서 한식이라는 key를 갖는 value값 "불고기"를 가져오게 된다.

 

 

구조분해할당(비구조화할당)

 

 

하나의 배열이 있을 때, 그 배열의 값을 지속적으로 작성하여야 한다고 생각해보자. 코드는 다음과 같이 작성해야 할 것이다.

let arr = ["string", "number", "boolean"];

let string = arr[0];
let number = arr[1];
let boolean = arr[2];

// 코드를 더 줄여보자

let arr = ["string", "number", "boolean"];

let [string, number, boolean] = arr; 

// 코드를 더 줄여보자 

let [string, number, boolean] = ["string", "number", "boolean"]

 

마지막 코드를 살펴보면 배열의 선언 자체에서 분리한다고 해서 배열의 선언분리 비구조화 할당이라고 부른다. 배열의 요소를 순서대로 변수에 할당할 수 있는 방법이다. 만약 할당을 받지 못하는 상황이 생겨 undefined로 반환된다면 다음과 같이 코드를 수정해볼 수 있다.

let [string, number, boolean, null] = ["string", "number", "boolean"] 
// "string", "number", "boolean", undefined

let [string, number, boolean, null="null"] = ["string", "number", "boolean"] 
// "string", "number", "boolean", "null"

 

배열의 구조를 간단하게 swap하는 방법도 존재한다.

let a = 10;
let b = 20;

[a, b] = [b, a]; // [20, 10]

 

객체의 비구조화할당을 알아보자. 다음 코드는 비구조화할당을 사용하지 않고 일반적으로 작성했을 때의 코드를 비구조화할당을 이용하여 할당하는 과정을 나타낸 코드이다. 객체의 비구조화할당은 배열과 다르게 index를 활용하는 것이 아니라 객체의 key값으로 활용한다. 그러므로 배열을 비구조화할당할때와 다르게 객체를 분해하는 순서와는 상관없다. 

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

let one = obj.one;
let two = obj.two;
let three = obj.three;

// 구조분해할당을 이용해 코드를 더 줄여보자.

let { one, two, three } = obj;

 

그러나 만약 가독성을 위해 분해하는 객체의 키값을 변형해서 사용할 수는 없을까? 가능하다. 객체내에 키값이 구분하기 어렵거나 단 번에 읽히지 않는 등 가독성이 떨어질 때 유용하게 사용할 수 있다.

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

let { name: one, age: two, size: three } = obj;