2025 / 01 / 16
오늘 수업 시간에는 Math.random()와 Math.floor()을 이해하고 배열에 대해서 배웠습니다. 그리고 배운 내용을 활용해 간단한 실습 예제를 풀어보았습니다.
또한 code Refactoring을 하여 코드를 기능 변경은 없으면서도 간결하게 나타낼 수 있도록 해보았습니다.
💌 배열
배열(Array)은 데이터를 순서대로 저장하는 데 사용하는 객체입니다.
다양한 데이터를 담을 수 있으며, 데이터 조작에 유용한 많은 메서드를 제공합니다.
1. 배열의 특징
- 인덱스(index) - 배열은 0부터 시작하는 숫자 인덱스를 가집니다.
- 유형 혼합 가능 - 서로 다른 데이터 타입을 함께 저장할 수 있습니다.
- 크기 자동 조정 - 배열의 크기는 동적으로 변합니다.
2. 배열 생성 방법
① 리터럴 방식( 추천 )
const fruits = ['apple', 'banana', 'cherry'];② Array 생성자 사용
const numbers = new Array(1, 2, 3, 4); // [1, 2, 3, 4]
const emptyArray = new Array(5); // 길이가 5인 빈 배열3. 주요 속성
length 속성
- 배열의 길이를 반환합니다.
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 34. 주요 메서드
(1) 추가
push( )
- 배열 끝에 요소를 추가.
const fruits = ['apple', 'banana']; fruits.push('cherry'); console.log(fruits); // ['apple', 'banana', 'cherry']
unshift( )
- 배열 앞에 요소를 추가.
fruits.unshift('grape'); console.log(fruits); // ['grape', 'apple', 'banana', 'cherry']
(2) 제거
pop( )
- 배열 끝의 요소를 제거.
fruits.pop(); console.log(fruits); // ['grape', 'apple', 'banana']
shift( )
- 배열 앞의 요소를 제거.
fruits.shift(); console.log(fruits); // ['apple', 'banana']
(3) 조회와 탐색
indexOf( )
- 특정 요소의 인덱스를 반환.
console.log(fruits.indexOf('banana')); // 1
includes( )
- 특정 요소가 배열에 있는지 확인.
console.log(fruits.includes('cherry')); // false
(4) 배열 정렬
sort( )
- 배열을 정렬.
const numbers = [3, 1, 4, 1, 5]; numbers.sort(); console.log(numbers); // [1, 1, 3, 4, 5]
reverse( )
- 배열의 순서를 뒤집음.
numbers.reverse(); console.log(numbers); // [5, 4, 3, 1, 1]
(5) 배열 병합과 잘라내기
concat( )
- 배열을 병합.
const moreFruits = ['pear', 'pineapple']; const allFruits = fruits.concat(moreFruits); console.log(allFruits); // ['apple', 'banana', 'pear', 'pineapple']
slice( )
- 배열의 일부를 추출.
const someFruits = allFruits.slice(1, 3); console.log(someFruits); // ['banana', 'pear']
splice( )
- 배열의 요소를 추가, 제거, 또는 교체.
allFruits.splice(2, 1, 'mango'); console.log(allFruits); // ['apple', 'banana', 'mango', 'pineapple']
(6) 반복과 변환
forEach( )
- 각 요소를 순회하며 실행.
allFruits.forEach((fruit) => console.log(fruit)); // apple, banana, mango, pineapple
map( )
- 각 요소를 변환하여 새 배열 반환.
const upperCaseFruits = allFruits.map((fruit) => fruit.toUpperCase()); console.log(upperCaseFruits); // ['APPLE', 'BANANA', 'MANGO', 'PINEAPPLE']
filter( )
- 조건에 맞는 요소만 반환.
const filteredFruits = allFruits.filter((fruit) => fruit.includes('a')); console.log(filteredFruits); // ['banana', 'mango', 'pineapple']
💌 Math.random( )
- 자바스크립트 내장 객체인 Math의 메서드
- 0 이상 1 미만의 난수(랜덤 숫자)를 생성합니다.
- 난수는 매번 호출할 때마다 달라지며, 무작위 작업에 유용합니다.
1. 사용법
- 결과는 항상 0 이상(포함) 1 미만(제외)의 부동소수점 숫자입니다.
const randomNumber = Math.random();
console.log(randomNumber); // 예: 0.5378934723const randomNumber = Math.random()*4; // 0 ~ 4미만 사이의 난수
console.log(randomNumber); // 예: 2.2761462521const randomNumber = Math.random() * 10 + 1; // 1부터 10미만 사이의 난수
console.log(randomNumber); // 예: 4.71286213592. 사용 예시
① 정수 범위의 난수 생성
// 1부터 10 사이의 정수 난수
const randomInt = Math.floor(Math.random() * 10) + 1;
console.log(randomInt); // 예: 7② 배열에서 랜덤 요소 선택
const fruits = ['apple', 'banana', 'cherry'];
const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
console.log(randomFruit); // 예: 'banana'💌 Math.floor( )
- 주어진 숫자를 내림(가장 가까운 정수로 내림)하여 반환하는 Math 객체 메서드
- 소수점 아래 자리를 버리고, 가장 가까운 작은 정수로 값을 변환
1. 사용법
- Math.floor(4.9)는 4.9를 내림하여 4를 반환합니다.
const result = Math.floor(4.9);
console.log(result); // 42. 특징
- 소수점 이하를 버리고 가장 가까운 작은 정수로 반환.
- 음수의 경우에도 내림을 적용합니다.
console.log(Math.floor(-4.1)); // -5💌 실습 예제
가위바위보 게임 만들기 - 배열과 Math 객체 메소드 사용
- 사용자에게 숫자 1개를 입력받습니다.
- 컴퓨터에게 지정 범위에서 랜덤 난수 한개를 입력 받습니다.
- 사용자와 컴퓨터가 가위바위보를 합니다.
- 해당 결과를 이겼는지 비겼는지 졌는지 출력합니다.
- 이때 출력 값은 숫자가 아닌 무엇을 냈는지 입니다.
- 가위 / 바위 / 보
1. 입력 받기
사용자에게 숫자 1개를 입력받습니다.
let result = Number(prompt("내고 싶은 숫자를 입력하세요 \n [0 - 바위 / 1 - 보 / 2 - 가위 ]"));
2. 랜덤 난수
컴퓨터에게 지정 범위에서 랜덤 난수 한개를 입력 받습니다.
let com = Math.floor(Math.random() * 3); // 0, 1, 2 값을 반환하도록 수정
2-1. 배열 생성
제가 작성한 방식은 배열을 생성해서 값을 담아주었습니다.
let array2 = ["바위", "보", "가위"];
3. 가위바위보
사용자와 컴퓨터가 가위바위보를 합니다.
해당 결과를 이겼는지 / 비겼는지 / 졌는지 출력합니다.if (result === com) { document.write("사용자와 컴퓨터가 같은 값을 냈습니다. <br>"); } else if ((result === 0 && com === 2) || (result === 1 && com === 0) || (result === 2 && com === 1)) { document.write("사용자가 이겼습니다. <br>"); } else { document.write("컴퓨터가 이겼습니다. <br>"); }
4. 출력하기
이때 출력 값은 숫자가 아닌 무엇을 냈는지 입니다. 가위 / 바위 / 보
- 사용자와 컴퓨터에게 받은 값을 그대로 인덱스 숫자로 사용하여 배열에서의 해당 인덱스 값을 출력하는 형식으로 작성하였습니다.
// 사용자와 컴퓨터가 낸 값 출력 (가위 바위 보 형식으로) document.write(`사용자가 낸 값 - ${array2[result]} <br>`); document.write(`컴퓨터가 낸 값 - ${array2[com]} <br>`);
💌 Refactoring(Before)
문제를 보고 그냥 생각하는대로 풀어봤을 때는 긴 코드로 작성되었습니다.
// 사용자와 컴퓨터의 선택을 저장할 변수 선언
let A;
let B;
// 사용자로부터 가위, 바위, 보 중 하나를 입력받음 (2-가위, 1-바위, 3-보)
let result = Number(prompt("내고 싶은 숫자를 입력하세요 \n [2- 가위 / 1 - 바위 / 3 - 보]"));
// 컴퓨터의 선택을 난수로 결정 (1-바위, 2-가위, 3-보)
let com = Math.floor(Math.random() * 3 + 1);
// 선택을 저장할 배열 선언
let array = [];
// 사용자가 선택한 값에 따라 A에 문자열을 할당
if (result == 1) {
A = "바위"; // 사용자가 바위를 냈을 경우
} else if (result == 2) {
A = "가위"; // 사용자가 가위를 냈을 경우
} else {
A = "보"; // 사용자가 보를 냈을 경우
}
// 컴퓨터가 선택한 값에 따라 B에 문자열을 할당
if (com == 1) {
B = "바위"; // 컴퓨터가 바위를 냈을 경우
} else if (com == 2) {
B = "가위"; // 컴퓨터가 가위를 냈을 경우
} else {
B = "보"; // 컴퓨터가 보를 냈을 경우
}
// 배열에 사용자와 컴퓨터의 선택을 저장
array.push(`${A}`, `${B}`);
// 사용자의 선택과 컴퓨터의 선택이 같으면 비겼다는 메시지 출력
if (array[0] == array[1]) {
document.write("사용자와 컴퓨터가 같은 값을 냈습니다. <br>");
}
// 사용자가 이긴 경우 (가위는 보를 이기고, 바위는 가위를, 보 는 바위를 이긴다)
else if ((array[0] == "바위" && array[1] == "가위") ||
(array[0] == "보" && array[1] == "바위") ||
(array[0] == "가위" && array[1] == "보")) {
document.write("사용자가 이겼습니다. <br>");
}
// 그 외의 경우는 컴퓨터가 이긴 것으로 처리
else {
document.write("컴퓨터가 이겼습니다. <br>");
}
// 사용자와 컴퓨터가 낸 값을 화면에 출력
document.write(`사용자가 낸 값 - ${A} <br>`);
document.write(`컴퓨터가 낸 값 - ${B}`);
💌 Refactoring(After)
이후 조건을 축약하고 코드를 정리할 수 있는 다른 방법을 찾아 수정하였습니다.
let result = Number(prompt("내고 싶은 숫자를 입력하세요 \n [0 - 바위 / 1 - 보 / 2 - 가위 ]"));
let com = Math.floor(Math.random() * 3); // 0, 1, 2 값을 반환하도록 수정
let array2 = ["바위", "보", "가위"];
if (result === com) {
document.write("사용자와 컴퓨터가 같은 값을 냈습니다. <br>");
} else if ((result === 0 && com === 2) || (result === 1 && com === 0) || (result === 2 && com === 1)) {
document.write("사용자가 이겼습니다. <br>");
} else {
document.write("컴퓨터가 이겼습니다. <br>");
}
// 사용자와 컴퓨터가 낸 값 출력 (가위 바위 보 형식으로)
document.write(`사용자가 낸 값 - ${array2[result]} <br>`);
document.write(`컴퓨터가 낸 값 - ${array2[com]} <br>`);11일차 후기
- Math.random( ) 메소드는 많이 써봤는데 오늘 수업시간에 보니까 반가웠습니다.
- 평소에도 배열이 약한 편인데 기초부터 차근차근 배우는 느낌이 좋았습니다.
- if문만 활용해도 괜찮은 실습 예제를 오늘 배운 메소드와 배열로 해결하려니까 생각보다 시간도 오래 걸리고 머릿속에서 정리하는 것도 살짝 힘들었습니다.
- 하지만 문제해결을 위해 계속 수정하고 시도한 결과 원하는 바를 이룰 수 있어서 기분이 좋았습니다. ( ᵔᵒᵔ )ᵍᵒᵒᵈᵎᵎ
૮꒰ ྀི〃´꒳`〃꒱ა