배열에서 랜덤 요소 선택하기

“온라인 쇼핑몰 이벤트를 진행합니다! 선착순 100명에게 5가지 경품 중 하나를 랜덤으로 드려요!”

const gifts = ['🎧 에어팟', '📱 갤럭시버즈', '⌚ 갤럭시워치', '🎮 닌텐도스위치', '💻 아이패드'];
const prize = gifts[???];  // 어떻게 공정하게 추첨할까?

이런 상황은 개발 중 매일 마주칩니다. 이벤트 추첨, 추천 상품 표시, 랜덤 광고 선택, 테스트 데이터 생성…

특히 이벤트 추첨은 공정성이 생명입니다. 모든 경품이 동일한 확률로 당첨되어야 하죠.

하지만 저는 처음에 이렇게 코딩했다가 큰 문제를 발견했습니다:

// ❌ 제가 처음 작성한 코드
const index = Math.round(Math.random() * gifts.length);
const prize = gifts[index];

// 🐛 문제 발견!
// 100,000번 추첨 결과:
// 🎧 에어팟:      10,234회 (10%)  ← 당첨 확률 절반! ❌
// 📱 갤럭시버즈:   20,012회 (20%)  ✅
// ⌚ 갤럭시워치:   19,998회 (20%)  ✅
// 🎮 닌텐도스위치: 20,001회 (20%)  ✅
// 💻 아이패드:     9,987회 (10%)   ← 당첨 확률 절반! ❌
// undefined:     19,768회 (20%)  ← 경품 없음?! 💥

첫 번째와 마지막 경품이 절반 확률로만 당첨되고, 심지어 경품이 없는 경우(undefined)까지 발생했습니다!

이것은 불공정한 이벤트입니다. 에어팟을 기대한 고객은 다른 경품보다 당첨될 확률이 절반밖에 안 되고, 20%의 사람들은 아무것도 받지 못합니다.

// ✅ 올바른 방법
const index = Math.floor(Math.random() * gifts.length);
const prize = gifts[index];

// 100,000번 추첨 결과:
// 🎧 에어팟:      20,123회 (20.1%)  ✅ 완벽!
// 📱 갤럭시버즈:   19,876회 (19.9%)  ✅ 완벽!
// ⌚ 갤럭시워치:   20,054회 (20.1%)  ✅ 완벽!
// 🎮 닌텐도스위치: 19,991회 (20.0%)  ✅ 완벽!
// 💻 아이패드:     19,956회 (20.0%)  ✅ 완벽!

모든 경품이 정확히 20% 확률로 당첨됩니다. 공정한 추첨입니다!

단 하나의 차이: Math.round() → Math.floor()

이 문서는 왜 Math.floor()를 써야 하는지, Math.round()는 왜 불공정한지, 그리고 실무에서 어떻게 활용하는지를 수학적 증명과 함께 설명합니다.

왜 이걸 배워야 할까요?

1. 가장 자주 사용하는 패턴

// 실무에서 매일 사용하는 코드
const fruits = ['🍎', '🍌', '🍇', '🍊', '🍓'];
const random = fruits[Math.floor(Math.random() * fruits.length)];

// 게임, 추천 시스템, 광고 로테이션 등 모든 곳에서 사용!

2. 간단해 보이지만 실수하기 쉬움

// 3가지 흔한 실수:
Math.round(Math.random() * arr.length);  // ❌ 편향 + 범위 초과
Math.random() * arr.length;              // ❌ 소수점 반환
Math.floor(Math.random() * (arr.length + 1));  // ❌ undefined 가능

3. 실무 필수 지식

추천 시스템 (랜덤 상품 표시)
게임 개발 (아이템 드롭)
테스트 코드 (랜덤 데이터 생성)
광고 시스템 (순서 섞기)
머신러닝 (데이터 샘플링)

Math.random() 이해하기

배열에서 랜덤 요소를 올바르게 선택하려면, 먼저 JavaScript의 Math.random() 함수가 정확히 무엇을 반환하는지 이해해야 합니다. 이것을 이해하지 못하면 미묘한 버그가 발생합니다.

정의 (MDN 공식 문서)

The Math.random() static method returns a floating-point, pseudo-random number that’s greater than or equal to 0 and less than 1.

이 한 문장에 모든 핵심이 담겨 있습니다. 하나씩 뜯어봅시다:

핵심 포인트:

0 이상 (0 포함) - Math.random()은 정확히 0을 반환할 수 있습니다
1 미만 (1 제외) - Math.random()은 절대 1을 반환하지 않습니다. 0.9999…는 가능하지만 정확히 1은 불가능
부동소수점 (소수점 숫자) - 정수가 아닌 0.847362… 같은 소수점 숫자를 반환
의사난수 (진짜 랜덤은 아님) - 수학적 알고리즘으로 생성된 랜덤이므로, 시드가 같으면 같은 수열이 반복됩니다

이 네 가지 특성을 정확히 이해하는 것이 올바른 랜덤 선택의 첫 걸음입니다.

실제 반환값

Math.random();  // 0.847362...
Math.random();  // 0.123456...
Math.random();  // 0.999999...
Math.random();  // 0.000001...

// 범위: [0, 1)
// 0은 가능, 1은 불가능

시각화

Math.random() 반환 범위:

0 ●━━━━━━━━━━━━━━━━━━━━━━━━○ 1
  │                           │
  포함                      제외

가능: 0, 0.1, 0.5, 0.9, 0.9999999...
불가능: 1, 1.0, 1.00000...

⚠️ 중요: 암호학적으로 안전하지 않음

// ❌ 보안이 중요한 경우 사용 금지
const token = Math.floor(Math.random() * 1000000);  // 예측 가능!

// ✅ 보안이 필요하면 Web Crypto API 사용
const array = new Uint32Array(1);
crypto.getRandomValues(array);
const secureRandom = array[0] / (0xffffffff + 1);

Math.floor() vs Math.round() vs Math.ceil()

JavaScript는 부동소수점을 정수로 변환하는 세 가지 주요 함수를 제공합니다: Math.floor(), Math.round(), Math.ceil(). 이들의 차이를 정확히 이해하는 것이 편향 없는 랜덤 선택의 핵심입니다.

많은 개발자들이 “어차피 정수로 바꾸는 건데 뭐가 다르겠어?”라고 생각하지만, 배열 인덱스를 생성할 때 이 차이는 치명적인 편향을 만들어냅니다.

Math.floor() - 내림 (항상 아래로)

The Math.floor() static method always rounds down and returns the largest integer less than or equal to a given number.

Math.floor()는 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환합니다. 쉽게 말해, 항상 소수점 이하를 버립니다(음수에서는 더 작은 쪽으로).

Math.floor(5.95);   // 5
Math.floor(5.05);   // 5
Math.floor(5.5);    // 5
Math.floor(-5.05);  // -6 (더 작은 정수)
Math.floor(-5.95);  // -6

// 항상 "버림"

Math.round() - 반올림 (가까운 쪽으로)

Math.round(5.95);   // 6
Math.round(5.5);    // 6
Math.round(5.05);   // 5
Math.round(5.49);   // 5
Math.round(-5.5);   // -5

// 0.5 이상이면 올림

Math.ceil() - 올림 (항상 위로)

Math.ceil(5.95);    // 6
Math.ceil(5.5);     // 6
Math.ceil(5.05);    // 6
Math.ceil(5.01);    // 6
Math.ceil(-5.05);   // -5 (더 큰 정수)

// 항상 "올림"

왜 Math.floor()를 써야 할까?

이제 핵심 질문입니다: 왜 Math.floor()를 써야 할까요? 왜 Math.round()나 Math.ceil()이 아닐까요?

답은 균등한 확률 분포에 있습니다. 배열의 모든 요소가 동일한 확률로 선택되려면, 각 인덱스가 생성될 확률이 정확히 같아야 합니다.

// 배열 인덱스: 0, 1, 2, 3, 4 (5개)
const arr = ['A', 'B', 'C', 'D', 'E'];

// ❌ Math.round() 사용 시
Math.round(Math.random() * 4);
// 0: [0, 0.5)    → 확률 50%
// 1: [0.5, 1.5)  → 확률 100%
// 2: [1.5, 2.5)  → 확률 100%
// 3: [2.5, 3.5)  → 확률 100%
// 4: [3.5, 4]    → 확률 50%
// 첫 번째와 마지막 요소가 절반 확률! ❌

// ✅ Math.floor() 사용 시
Math.floor(Math.random() * 5);
// 0: [0, 1)   → 확률 100%
// 1: [1, 2)   → 확률 100%
// 2: [2, 3)   → 확률 100%
// 3: [3, 4)   → 확률 100%
// 4: [4, 5)   → 확률 100%
// 모든 요소가 동일한 확률! ✅

이제 Math.random()과 Math.floor()를 이해했으니, 이 둘을 조합하여 배열에서 편향 없는 랜덤 선택을 구현해봅시다.

이 패턴은 JavaScript 개발에서 가장 자주 사용하는 패턴 중 하나이므로, 이해하고 외워두는 것이 좋습니다.

기본 패턴 (정석)

다음은 배열에서 랜덤 요소를 선택하는 표준 패턴입니다. 이 코드는 전 세계 수백만 개의 프로젝트에서 사용되고 있습니다:

/**
 * 배열에서 랜덤 요소 선택
 */
function getRandomElement(arr) {
  if (arr.length === 0) {
    throw new Error('Array is empty');
  }

  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}

// 사용 예시
const colors = ['red', 'blue', 'green', 'yellow'];
console.log(getRandomElement(colors));  // 'green' (무작위)

단계별 이해

위 패턴이 어떻게 작동하는지 단계별로 이해해봅시다. 각 단계에서 무슨 일이 일어나는지, 왜 그렇게 작동하는지 알면 이 패턴을 영원히 기억할 수 있습니다.

const arr = ['A', 'B', 'C', 'D', 'E'];  // length = 5

// 1단계: Math.random() 호출
Math.random();  // 0.7234... (0 이상 1 미만)
// → [0, 1) 범위의 무작위 부동소수점

// 2단계: 배열 길이를 곱함
0.7234 * 5;  // 3.617 (0 이상 5 미만)

// 3단계: Math.floor()로 내림
Math.floor(3.617);  // 3 (정수 인덱스)

// 4단계: 배열 접근
arr[3];  // 'D' ✅

// 전체 범위:
// Math.random() * 5 → [0, 5)
// Math.floor()      → 0, 1, 2, 3, 4 (5개)

TypeScript 제네릭 버전

function getRandomElement<T>(arr: T[]): T {
  if (arr.length === 0) {
    throw new Error('Array is empty');
  }

  return arr[Math.floor(Math.random() * arr.length)];
}

// 타입 안전성
const numbers: number[] = [1, 2, 3, 4, 5];
const num: number = getRandomElement(numbers);  // 타입 추론 ✅

const words: string[] = ['hello', 'world'];
const word: string = getRandomElement(words);  // 타입 추론 ✅

여러 개 선택 (중복 허용)

/**
 * 배열에서 n개 랜덤 선택 (중복 가능)
 */
function getRandomElements(arr, n) {
  if (arr.length === 0) {
    throw new Error('Array is empty');
  }

  const results = [];
  for (let i = 0; i < n; i++) {
    const index = Math.floor(Math.random() * arr.length);
    results.push(arr[index]);
  }

  return results;
}

// 사용
const dice = [1, 2, 3, 4, 5, 6];
console.log(getRandomElements(dice, 3));
// [4, 2, 4] - 중복 가능

여러 개 선택 (중복 제거)

/**
 * 배열에서 n개 랜덤 선택 (중복 없음)
 */
function getRandomUniqueElements(arr, n) {
  if (n > arr.length) {
    throw new Error('Cannot select more elements than array length');
  }

  const copy = [...arr];  // 원본 보호
  const results = [];

  for (let i = 0; i < n; i++) {
    const index = Math.floor(Math.random() * copy.length);
    results.push(copy[index]);
    copy.splice(index, 1);  // 선택한 요소 제거
  }

  return results;
}

// 사용
const players = ['Alice', 'Bob', 'Charlie', 'David'];
console.log(getRandomUniqueElements(players, 2));
// ['Charlie', 'Alice'] - 중복 없음

흔한 실수와 함정

이 섹션은 매우 중요합니다. 아래의 실수들은 실제로 수많은 프로덕션 코드에서 발견되는 버그들입니다. 각 실수가 왜 문제인지 정확히 이해하면, 여러분은 다른 개발자들보다 한 발 앞서 나갈 수 있습니다.

함정 1: Math.round() 사용 (가장 흔함!)

이것은 전 세계에서 가장 많이 발생하는 랜덤 선택 버그입니다. 스택오버플로우에서도 이 실수를 한 코드를 수없이 볼 수 있습니다.

const arr = [1, 2, 3, 4, 5];

// ❌ 잘못된 방법
const wrong = Math.round(Math.random() * arr.length);

// 문제점 분석:
// Math.random() * 5 → [0, 5)
// Math.round() → 0, 1, 2, 3, 4, 5 (6개!)

// arr[5] = undefined ❌

// 확률 분포:
// 0: [0, 0.5)      → 10%
// 1: [0.5, 1.5)    → 20%
// 2: [1.5, 2.5)    → 20%
// 3: [2.5, 3.5)    → 20%
// 4: [3.5, 4.5)    → 20%
// 5: [4.5, 5)      → 10%

// ✅ 올바른 방법
const correct = Math.floor(Math.random() * arr.length);

실제 실험:

function testBias(method, iterations = 100000) {
  const arr = [1, 2, 3, 4, 5];
  const counts = [0, 0, 0, 0, 0, 0];  // 인덱스별 카운트

  for (let i = 0; i < iterations; i++) {
    const index = method(arr);
    counts[index]++;
  }

  console.log('분포:');
  counts.forEach((count, idx) => {
    const percent = (count / iterations * 100).toFixed(2);
    console.log(`${idx}: ${count}회 (${percent}%)`);
  });
}

// Math.round() 테스트
console.log('=== Math.round() ===');
testBias(arr => Math.round(Math.random() * arr.length));
// 0: 10001회 (10.00%)  ❌ 절반!
// 1: 19998회 (20.00%)  ✅
// 2: 20015회 (20.02%)  ✅
// 3: 19992회 (19.99%)  ✅
// 4: 20003회 (20.00%)  ✅
// 5: 9991회 (9.99%)    ❌ 절반! (undefined)

// Math.floor() 테스트
console.log('\n=== Math.floor() ===');
testBias(arr => Math.floor(Math.random() * arr.length));
// 0: 19989회 (19.99%)  ✅
// 1: 20012회 (20.01%)  ✅
// 2: 19998회 (20.00%)  ✅
// 3: 20023회 (20.02%)  ✅
// 4: 19978회 (19.98%)  ✅
// 5: 0회 (0.00%)       ✅ (절대 발생 안 함)

함정 2: length + 1 실수

const arr = ['A', 'B', 'C'];

// ❌ 잘못된 방법
const wrong = Math.floor(Math.random() * (arr.length + 1));
// 0, 1, 2, 3 가능 → arr[3] = undefined

// ✅ 올바른 방법
const correct = Math.floor(Math.random() * arr.length);
// 0, 1, 2 가능 → 모두 유효

함정 3: 소수점 그대로 사용

const arr = ['A', 'B', 'C'];

// ❌ 잘못된 방법
const wrong = arr[Math.random() * arr.length];
// arr[1.7234...] → undefined (배열 인덱스는 정수여야 함)

// ✅ 올바른 방법
const correct = arr[Math.floor(Math.random() * arr.length)];

함정 4: 범위 계산 실수

// min과 max 사이의 정수 (max 포함)
function randomInt(min, max) {
  // ❌ 잘못된 방법들
  Math.floor(Math.random() * max);          // min 무시
  Math.floor(Math.random() * (max - min));  // max 제외
  Math.round(Math.random() * (max - min)) + min;  // 편향

  // ✅ 올바른 방법
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 사용
randomInt(1, 6);  // 주사위: 1, 2, 3, 4, 5, 6 모두 가능
randomInt(0, 10); // 0부터 10까지 (10 포함)

범위 계산 시각화:

// 1부터 6까지 (주사위)
function diceRoll() {
  return Math.floor(Math.random() * 6) + 1;
  //                          ↑        ↑
  //                      6개 숫자   최소값 1
  //
  // Math.random() * 6 → [0, 6)
  // Math.floor()      → 0, 1, 2, 3, 4, 5
  // + 1               → 1, 2, 3, 4, 5, 6 ✅
}

함정 5: 빈 배열 처리 안 함

// ❌ 에러 처리 없음
function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

getRandomElement([]);  // undefined (조용히 실패)

// ✅ 에러 처리 추가
function getRandomElementSafe(arr) {
  if (!Array.isArray(arr)) {
    throw new TypeError('Argument must be an array');
  }

  if (arr.length === 0) {
    throw new Error('Array is empty');
  }

  return arr[Math.floor(Math.random() * arr.length)];
}

getRandomElementSafe([]);  // Error: Array is empty ✅

실전 활용 예시

1. 랜덤 추천 시스템

/**
 * 상품 추천 시스템
 */
class RecommendationEngine {
  constructor(products) {
    this.products = products;
  }

  // 랜덤으로 n개 추천
  recommend(count = 3) {
    const shuffled = [...this.products];
    const recommendations = [];

    for (let i = 0; i < Math.min(count, shuffled.length); i++) {
      const index = Math.floor(Math.random() * shuffled.length);
      recommendations.push(shuffled[index]);
      shuffled.splice(index, 1);  // 중복 제거
    }

    return recommendations;
  }

  // 카테고리별 랜덤 추천
  recommendByCategory(category, count = 1) {
    const filtered = this.products.filter(p => p.category === category);

    if (filtered.length === 0) {
      return [];
    }

    const results = [];
    for (let i = 0; i < Math.min(count, filtered.length); i++) {
      const index = Math.floor(Math.random() * filtered.length);
      results.push(filtered[index]);
      filtered.splice(index, 1);
    }

    return results;
  }
}

// 사용
const products = [
  { id: 1, name: 'Laptop', category: 'Electronics' },
  { id: 2, name: 'Phone', category: 'Electronics' },
  { id: 3, name: 'Shirt', category: 'Clothing' },
  { id: 4, name: 'Shoes', category: 'Clothing' }
];

const engine = new RecommendationEngine(products);
console.log(engine.recommend(2));
// [{id: 3, name: 'Shirt'...}, {id: 1, name: 'Laptop'...}]

2. 게임 아이템 드롭

/**
 * 가중치 기반 랜덤 아이템 드롭
 */
function dropItem(items) {
  // items = [
  //   { name: 'Common', weight: 70 },
  //   { name: 'Rare', weight: 20 },
  //   { name: 'Epic', weight: 9 },
  //   { name: 'Legendary', weight: 1 }
  // ]

  const totalWeight = items.reduce((sum, item) => sum + item.weight, 0);
  const random = Math.random() * totalWeight;

  let cumulativeWeight = 0;
  for (const item of items) {
    cumulativeWeight += item.weight;
    if (random < cumulativeWeight) {
      return item;
    }
  }

  return items[items.length - 1];  // fallback
}

// 사용
const lootTable = [
  { name: 'Common Sword', weight: 70 },
  { name: 'Rare Shield', weight: 20 },
  { name: 'Epic Armor', weight: 9 },
  { name: 'Legendary Weapon', weight: 1 }
];

// 100번 드롭 테스트
const results = {};
for (let i = 0; i < 100; i++) {
  const item = dropItem(lootTable);
  results[item.name] = (results[item.name] || 0) + 1;
}

console.log(results);
// {
//   'Common Sword': 68,        // ~70%
//   'Rare Shield': 21,         // ~20%
//   'Epic Armor': 10,          // ~10%
//   'Legendary Weapon': 1      // ~1%
// }

3. 퀴즈 앱 - 랜덤 문제 출제

/**
 * 랜덤 퀴즈 생성기
 */
class QuizGenerator {
  constructor(questions) {
    this.allQuestions = questions;
    this.usedQuestions = new Set();
  }

  // 다음 랜덤 문제 (중복 없음)
  nextQuestion() {
    const available = this.allQuestions.filter(
      q => !this.usedQuestions.has(q.id)
    );

    if (available.length === 0) {
      this.reset();
      return this.nextQuestion();
    }

    const index = Math.floor(Math.random() * available.length);
    const question = available[index];
    this.usedQuestions.add(question.id);

    return question;
  }

  // 난이도별 랜덤 문제
  nextQuestionByDifficulty(difficulty) {
    const filtered = this.allQuestions.filter(
      q => q.difficulty === difficulty && !this.usedQuestions.has(q.id)
    );

    if (filtered.length === 0) {
      return null;
    }

    const index = Math.floor(Math.random() * filtered.length);
    const question = filtered[index];
    this.usedQuestions.add(question.id);

    return question;
  }

  reset() {
    this.usedQuestions.clear();
  }
}

// 사용
const questions = [
  { id: 1, text: 'What is 2+2?', difficulty: 'easy' },
  { id: 2, text: 'What is sqrt(16)?', difficulty: 'medium' },
  { id: 3, text: 'What is integral of x?', difficulty: 'hard' }
];

const quiz = new QuizGenerator(questions);
console.log(quiz.nextQuestion());
// { id: 2, text: 'What is sqrt(16)?', difficulty: 'medium' }

4. 광고 로테이션

/**
 * 광고 랜덤 표시 (노출 횟수 제한)
 */
class AdRotator {
  constructor(ads) {
    this.ads = ads.map(ad => ({
      ...ad,
      impressions: 0,
      maxImpressions: ad.maxImpressions || Infinity
    }));
  }

  getAd() {
    // 노출 한도가 남은 광고만
    const available = this.ads.filter(
      ad => ad.impressions < ad.maxImpressions
    );

    if (available.length === 0) {
      return null;  // 모든 광고 소진
    }

    // 랜덤 선택
    const index = Math.floor(Math.random() * available.length);
    const ad = available[index];
    ad.impressions++;

    return {
      id: ad.id,
      content: ad.content,
      remainingImpressions: ad.maxImpressions - ad.impressions
    };
  }

  reset() {
    this.ads.forEach(ad => {
      ad.impressions = 0;
    });
  }
}

// 사용
const ads = [
  { id: 1, content: 'Ad A', maxImpressions: 3 },
  { id: 2, content: 'Ad B', maxImpressions: 2 },
  { id: 3, content: 'Ad C', maxImpressions: 5 }
];

const rotator = new AdRotator(ads);

// 10번 광고 요청
for (let i = 0; i < 10; i++) {
  const ad = rotator.getAd();
  if (ad) {
    console.log(`Show: ${ad.content} (${ad.remainingImpressions} left)`);
  }
}

5. 테스트 데이터 생성

/**
 * 랜덤 테스트 데이터 생성기
 */
const TestDataGenerator = {
  randomName() {
    const firstNames = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];
    const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones'];

    const first = firstNames[Math.floor(Math.random() * firstNames.length)];
    const last = lastNames[Math.floor(Math.random() * lastNames.length)];

    return `${first} ${last}`;
  },

  randomEmail() {
    const domains = ['gmail.com', 'yahoo.com', 'hotmail.com'];
    const name = Math.random().toString(36).substring(2, 10);
    const domain = domains[Math.floor(Math.random() * domains.length)];

    return `${name}@${domain}`;
  },

  randomAge(min = 18, max = 80) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },

  randomUser() {
    return {
      name: this.randomName(),
      email: this.randomEmail(),
      age: this.randomAge()
    };
  },

  generateUsers(count) {
    return Array.from({ length: count }, () => this.randomUser());
  }
};

// 사용
const testUsers = TestDataGenerator.generateUsers(5);
console.log(testUsers);
// [
//   { name: 'Alice Johnson', email: 'x7k2m@gmail.com', age: 34 },
//   { name: 'David Smith', email: 'p9q1n@yahoo.com', age: 27 },
//   ...
// ]

올바른 패턴 정리

이 섹션은 실무에서 바로 사용할 수 있는 검증된 패턴들의 모음입니다. 이 패턴들은 MDN 문서와 전 세계 수백만 개의 프로젝트에서 사용되고 있는 표준입니다.

각 패턴을 복사해서 프로젝트에 바로 사용하거나, 여러분의 유틸리티 라이브러리에 추가하세요.

패턴 1: 배열에서 랜덤 요소 (가장 기본)

사용 빈도: ★★★★★ (가장 자주 사용)

// ✅ 표준 패턴
const element = arr[Math.floor(Math.random() * arr.length)];

이것은 암기해야 할 핵심 패턴입니다. 면접에서도 자주 나오고, 실무에서도 매일 사용합니다.

패턴 2: 0부터 n-1까지 랜덤 정수

// ✅ 표준 패턴
const num = Math.floor(Math.random() * n);

// 예: 0부터 9까지
const digit = Math.floor(Math.random() * 10);  // 0~9

패턴 3: min부터 max까지 랜덤 정수 (max 포함)

// ✅ 표준 패턴 (MDN 권장)
function getRandomInt(min, max) {
  const minCeiled = Math.ceil(min);
  const maxFloored = Math.floor(max);
  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
}

// 사용
getRandomInt(1, 6);   // 주사위: 1~6
getRandomInt(0, 100); // 0~100

패턴 4: min부터 max까지 랜덤 정수 (max 제외)

// ✅ 표준 패턴
function getRandomIntExclusive(min, max) {
  const minCeiled = Math.ceil(min);
  const maxFloored = Math.floor(max);
  return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
}

// 사용
getRandomIntExclusive(0, 10);  // 0~9 (10 제외)

패턴 5: 0.0부터 n 사이 부동소수점

// ✅ 표준 패턴
const num = Math.random() * n;

// 예: 0.0 ~ 100.0
const percent = Math.random() * 100;  // 23.456...

성능 고려사항

성능 비교

function benchmark(iterations = 1000000) {
  const arr = [1, 2, 3, 4, 5];

  console.time('Math.floor()');
  for (let i = 0; i < iterations; i++) {
    arr[Math.floor(Math.random() * arr.length)];
  }
  console.timeEnd('Math.floor()');

  console.time('Math.round()');
  for (let i = 0; i < iterations; i++) {
    arr[Math.round(Math.random() * arr.length)];
  }
  console.timeEnd('Math.round()');

  console.time('Math.ceil()');
  for (let i = 0; i < iterations; i++) {
    arr[Math.ceil(Math.random() * arr.length) - 1];
  }
  console.timeEnd('Math.ceil()');
}

benchmark();
// Math.floor(): ~15ms
// Math.round(): ~16ms (약간 느림, 편향 있음)
// Math.ceil(): ~17ms (약간 느림)

결론: Math.floor()가 가장 빠르고 올바른 방법 ✅

연습 문제

1. 기본 구현

// 배열에서 랜덤 요소를 반환하는 함수를 작성하세요
function getRandomElement(arr) {
  // 여기에 코드 작성
}

const colors = ['red', 'blue', 'green'];
console.log(getRandomElement(colors));  // 'blue' (무작위)

2. 범위 지정 랜덤 정수

// min과 max 사이의 랜덤 정수 (max 포함)
function randomIntInclusive(min, max) {
  // 여기에 코드 작성
}

console.log(randomIntInclusive(1, 6));   // 1~6 (주사위)
console.log(randomIntInclusive(10, 20)); // 10~20

3. 가중치 랜덤 선택

// 가중치에 따라 랜덤 선택
function weightedRandom(items, weights) {
  // items: ['A', 'B', 'C']
  // weights: [10, 5, 1]
  // A가 가장 높은 확률로 선택

  // 여기에 코드 작성
}

console.log(weightedRandom(['A', 'B', 'C'], [10, 5, 1]));

참고 자료

공식 문서 및 표준

MDN - Math.random() - JavaScript 난수 생성 공식 문서
MDN - Math.floor() - 내림 함수 공식 문서
MDN - Math.round() - 반올림 함수
MDN - Math.ceil() - 올림 함수
ECMAScript® 2023 - Math Object - Math 객체 명세
MDN - Crypto.getRandomValues() - 암호학적으로 안전한 난수

학습 자료

Random Number Generation (Wikipedia) - 난수 생성 이론
Pseudorandom Number Generator - 의사난수 생성기
JavaScript.info - Random - JavaScript 난수 튜토리얼

심화 주제

Reservoir Sampling - 스트림 데이터에서 랜덤 샘플링
Monte Carlo Methods - 확률적 알고리즘
Weighted Random Selection - 가중치 기반 선택

마치며

배열에서 랜덤 요소를 선택하는 것은 간단해 보이지만 올바르게 해야 합니다.

// 이 패턴만 기억하세요! ⭐
const random = arr[Math.floor(Math.random() * arr.length)];