[JS] Math.random()과 Object.Keys()로 점심메뉴 랜덤 선택하기

  무작위로 점심 메뉴를 추천하고 싶을 때 어떻게 할까요? Math.random() 함수와 Object.keys() 메서드를 활용하여 점심 메뉴 중 하나를 랜덤하게 선택하는 기능을 구현해 보겠습니다.

 

 

---

객체를 배열로 변환하고 랜덤 숫자를 생성하는 방법

먼저, 다음과 같은 객체를 고려해 보겠습니다. 각 키는 음식유형을 나타내며, 각 값은 해당음식의 이름과 이미지URL 을 포함하고 있습니다.

const lunchChoice = {
    hansik: {name: "비빔밥", image: "https://kormedi.com/wp-content/uploads/2024/09/gettyimages-a11354394.jpg"},
    chineseFood: {name: "짜장면", image: "https://cdn.kormedi.com/wp-content/uploads/2021/10/r658x041.jpg"},
    westernFood: {name: "파스타", image: "https://cdn.imweb.me/upload/S20230403a6b69b7e354a4/c1e4ca23c29de.jpg"}
};

 

 

---

1. 객체를 배열화하기

 

이제 Object.keys() 메서드를 사용하여 lunchChoice 객체의 모든 키를 배열로 변환합니다:

const keys = Object.keys(lunchChoice);

 

 

---

 

2. Math.random 함수로 랜덤한 숫자 받기

keys 배열에서 랜덤한 인덱스를 선택할때  Math.random() 함수를 사용합니다. 이 함수는 0 이상 1미만의 랜덤한 소수를 생성하고, 이 값을 keys.length와 곱하여 배열의 범위 내에서 사용할 수 있는 값을 얻습니다. 이후 Math.floor() 함수를 사용하여 소수점 아래를 제거함으로써, 배열의 유효한 인덱스를 최종적으로 결정합니다. 이 방법을 통해 배열 내의 랜덤한 요소에 접근할수 있습니다:

const randomIndex = Math.floor(Math.random() * keys.length);
const randomLunch = lunchChoice[keys[randomIndex]];

 

 

이 코드를 실행하면 lunchChoice 객체 내의 랜덤한 점심 메뉴를 randomLunch 변수에 저장하게 됩니다. 이 객체의 name과 image 속성을 활용하여 사용자에게 보여줄 수 있습니다.

 

console.log(`오늘의 점심 추천 메뉴는 ${randomLunch.name}입니다! 
메뉴의 사진을 보고 싶다면 여기를 클릭하세요: ${randomLunch.image}`);

 

 

이 방법을 활용하면 다양한 점심 메뉴를 랜덤하게 선택할수 있습니다.