2025 / 01 / 22
오늘은 수업에서 내장 메소드와 for문 복습을 하였습니다.
그리고 어제 실습 예제에서 더 간단하게 풀 수 있는 내장 메소드를 알려주셔서 제가 작성한 코드에 적용하는 시간도 가졌습니다.
교수님꼐서 주신 실습 예제가 오늘은 3문제였는데, 문제 이해를 잘못해서 소수가 아닌 수를 구하는게 어려웠습니다..
하지만~ 결국은 답을 찾아서 기분이 좋았습니다.
💌 내장 메소드
자바스크립트 엔진에 의해 제공되는 미리 정의된 함수들을 의미합니다.
개발자가 별도로 구현하지 않고도 바로 사용할 수 있는 함수들입니다.
다양한 객체와 데이터 타입(배열, 문자열, 수학 계산 등)에 대해 유용한 작업을 할 수 있도록 제공됩니다.
1) 특징
① 자바스크립트 엔진에 의해 제공됩니다.
- 자바스크립트는 내장 메소드들을 미리 정의하여, 개발자가 직접 작성할 필요 없이 그 메소드들을 바로 호출해서 사용할 수 있도록 합니다.
② 객체와 연관되어있습니다.
- 대부분의 내장 메소드는 특정 객체에 속해있습니다.
- 배열 객체에는 배열을 다루는 메소드들이, 문자열 객체에는 문자열을 다루는 메소드들이 포함되어 있습니다.
③ 표준화되어있습니다.
- 내장 메소드들은 자바스크립트 표준에 정의되어 있어서, 모든 자바스크립트 엔진에서 동일하게 동작합니다.
④ 다양한 데이터 타입에 적용할 수 있습니다.
- 배열, 문자열, 수학적 계산, 시간 처리 등 여러 데이터 타입에서 내장 메소드를 제공하여, 작업을 편리하게 처리할 수 있습니다.
2) 제공되는 객체
- 자바스크립트에서 내장 메소드는 여러 객체에 정의되어 있으며, 각 객체는 특정한 역할을 수행합니다.
① Array
- 배열을 다룰 수 있는 메소드들이 제공됩니다.
- (map( ), filter( ), reduce( ) 등)
② String
- 문자열을 처리하는 메소드들이 제공됩니다.
- (slice( ), replace( ), split( ) 등)
③ Math
- 수학적 계산을 위한 메소드들이 제공됩니다.
- (max( ), min( ), random( ) 등)
④ Object
- 객체를 처리하는 메소드들이 제공됩니다.
- (keys( ), values( ), assign( ) 등)
⑤ Date
- 날짜와 시간을 처리하는 메소드들이 제공됩니다.
- (getDate( ), getFullYear( ) 등)
3) 작동 방식
- 자바스크립트에서 사전 정의되어 있기 때문에, 객체나 데이터 타입에 속하는 메소드들을 호출하는 방식으로 사용합니다.
- ex) 배열에 push() 메소드를 호출하면 배열에 새로운 값을 추가할 수 있습니다.
- 인스턴스 메소드 형태로 존재하며, 특정 객체의 인스턴스에서 호출할
- ex) arr.push()는 배열 arr의 인스턴스에서 호출되고, 그 배열을 변경합니다.
💌 map 메소드
배열의 각 요소에 대해 주어진 함수를 실행하고 그 결과를 새로운 배열로 반환합니다.
배열을 변형하는 데 유용하며, 원본 배열을 변경하지 않고 새로운 배열을 반환하는 점이 특징입니다.
1) map 메소드
① 목적
- 배열의 각 요소를 주어진 함수로 처리한 후, 그 결과를 새로운 배열로 반환합니다.
② 반환값
- 새로운 배열을 반환합니다.
③ 원본 배열 변화 여부
- 원본 배열은 변경되지 않습니다.
2) 사용 예시
① 기본 사용법
- 배열의 각 숫자에 2를 곱한 새로운 배열을 생성하는 예시입니다.
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (원본 배열은 변하지 않음)② 인덱스를 사용하는 예시
- 배열의 각 요소와 인덱스를 활용해 새로운 배열을 생성하는 에시입니다.
const numbers = [10, 20, 30, 40];
const result = numbers.map((num, index) => num + index);
console.log(result); // [10, 21, 32, 43]3) 주의사항
① 불변성
- map( )은 원본 배열을 변경하지 않기 때문에, 원본 배열을 그대로 두고 새로운 배열을 반환하는 방식을 이용하여 불변성을 유지할 수 있습니다.
② 배열 크기
- 원본 배열의 크기 만큼 새로운 배열이 반환됩니다.
- 배열의 길이가 0이면 빈 배열이 반환됩니다.
③ 다른 자료형 반환
- 배열의 각 요소에 대해 처리하는 함수에서 다른 자료형을 반환할 수 있습니다.
const strings = ["hello", "world"];
const lengths = strings.map(str => str.length);
console.log(lengths); // [5, 5]💌 실습 예제(1)
구구단 출력 프로그램 만들기
- 사용자에게 구구단 단을 입력받습니다.
- 해당 단까지의 구구단을 출력합니다.
- 0이나 1이 입력이 된다면 예외처리를 합니다.
- ex) 입력 : 3 / 출력 : 2 X 1 = 2 .... 3 X 9 = 27
1. 입력 받기
사용자에게 구구단 단을 입력받습니다.
- 사용자가 구구단의 단을 입력하도록 prompt()를 사용하여 값을 입력받습니다.
let gugu = prompt("입력받고 싶은 구구단의 단을 입력해주세요!");
2. 구구단 계산하기
해당 단까지의 구구단을 출력합니다.
- 입력받은 단에 대해 for 루프를 이용해 구구단을 출력합니다.
- i는 구구단의 단을 나타내며, j는 1부터 9까지의 곱셈 결과를 출력합니다.
// 구구단 출력 (2단부터 입력받은 단까지) for(let i = 2; i <= gugu; i++){ document.write(`${i}단 <br>`); for(let j = 1; j < 10; j++){ document.write(`${i} * ${j} = ${i*j} <br>`); // 마지막 곱셈 후 줄바꿈 if(j == 9){ document.write(`<br>`); } } }
3. 예외처리
0이나 1이 입력이 된다면 예외처리를 합니다.
- 사용자가 0 또는 1을 입력했다면, 구구단의 범위로 적합하지 않기 때문에 경고 메시지를 띄우고, 올바른 값이 입력될 때까지 while 루프에서 계속해서 값을 받습니다.
while(true){ gugu = prompt("입력받고 싶은 구구단의 단을 입력해주세요!"); // '0' 또는 '1'을 입력받으면 다시 입력을 요구 if(gugu == "0" || gugu == "1"){ alert("다시 입력해주세요!"); continue; }else{ break; } }
💌 전체 코드
- 위에서 작성한 코드를 하나로 합쳐 놓은 것입니다.
<script>
let gugu;
// 사용자로부터 구구단의 단을 입력받음
while(true){
gugu = prompt("입력받고 싶은 구구단의 단을 입력해주세요!");
// '0' 또는 '1'을 입력받으면 다시 입력을 요구
if(gugu == "0" || gugu == "1"){
alert("다시 입력해주세요!");
continue;
}else{
break;
}
}
// 구구단 출력 (2단부터 입력받은 단까지)
for(let i = 2; i <= gugu; i++){
document.write(`${i}단 <br>`);
for(let j = 1; j < 10; j++){
document.write(`${i} * ${j} = ${i*j} <br>`);
// 마지막 곱셈 후 줄바꿈
if(j == 9){
document.write(`<br>`);
}
}
}
</script>💌 실습 예제(2)
소수 구분 프로그램 만들기
- 사용자에게 숫자를 입력받습니다.
- 소수인지 아닌지 판별합니다.
- 소수인 숫자와 소수가 아닌 숫자를 나눠서 출력합니다.
- ex) 입력 : 1,2,3,4,5,6,7,8
- ex) 출력 : 소수가 맞는 숫자 : 2,3,5,7 / 소수가 아닌 숫자 : 1,4,6,8
1. 입력 받기
사용자에게 숫자를 입력받습니다.
- 사용자에게 prompt로 숫자를 입력받습니다.
- 기본 값으로 "1,2,3,4,5,6,7,8,9,10"를 넣어주었습니다.
let user = prompt("숫자를 입력해주세요", "1,2,3,4,5,6,7,8,9,10");
비교를 쉽게 하기 위해 새로운 배열에 숫자를 (",")을 기준으로 담아줍니다.
let num = user.split(",").map(item => parseInt(item, 10));
2. 소수 판별
소수인지 아닌지 판별합니다.
- 소수가 맞는 숫자는 result라는 배열에 아닌 숫자는 result2라는 배열에 push합니다.
- num 배열을 순회하면서 각 숫자에 대해 소수 여부를 확인합니다.
- num[i]는 각 숫자를 나타내며, 이를 검사하기 위해 isPrime 변수를 true로 초기화합니다.
- 먼저 숫자가 1 이하인 경우 소수가 아니므로 isPrime을 false로 설정합니다.
- 그 외의 숫자에 대해서는 2부터 그 숫자보다 작은 수들로 나누어 떨어지는지 확인합니다.
- 나누어 떨어지면 소수가 아니므로 isPrime을 false로 설정하고 반복문을 종료합니다.
let result = []; // 소수만 저장할 배열 let result2 = []; // 소수가 아닌 수를 저장할 배열 // num 배열을 순회하면서 각 숫자에 대해 소수 여부를 확인 for (let i = 0; i < num.length; i++) { let isPrime = true; // 현재 숫자가 소수라고 가정 // 1 이하의 숫자는 소수가 아니므로 false 처리 if (num[i] <= 1) { isPrime = false; } else { // 2부터 num[i] - 1까지 나누어 떨어지는지 확인 for (let j = 2; j < num[i]; j++) { if (num[i] % j === 0) { // 나누어떨어지면 소수가 아님 isPrime = false; break; // 나눠 떨어졌으므로 더 이상 검사할 필요 없음 } } } // 소수일 경우 result 배열에 추가 if (isPrime) { result.push(num[i]); } else { // 소수가 아닌 경우 result2 배열에 추가 result2.push(num[i]); } }
3. 출력하기
소수인 숫자와 소수가 아닌 숫자를 나눠서 출력합니다.
- result와 result2를 각각 출력해줍니다.
document.write(`소수가 맞는 숫자는? ${result} <br><br>`); document.write(`소수가 아닌 숫자는? ${result2} <br>`);
💌 전체 코드
- 위에서 작성한 코드를 하나로 합쳐 놓은 것입니다.
<script>
// 사용자로부터 숫자 입력 받기
let user = prompt("숫자를 입력해주세요", "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15");
// 입력받은 문자열을 배열로 변환하고, 각 항목을 정수로 변환
let num = user.split(",").map(item => parseInt(item, 10));
let result = []; // 소수만 저장할 배열
let result2 = []; // 소수가 아닌 수를 저장할 배열
// 숫자 배열을 순회하면서 소수 여부 확인
for (let i = 0; i < num.length; i++) {
let isPrime = true; // 현재 숫자가 소수라고 가정
// 1 이하의 숫자는 소수가 아니므로 false 처리
if (num[i] <= 1) {
isPrime = false;
} else {
// 2부터 num[i] - 1까지 나누어 떨어지는지 확인
for (let j = 2; j < num[i]; j++) {
if (num[i] % j === 0) { // 나누어 떨어지면 소수가 아님
isPrime = false;
break; // 더 이상 검사할 필요 없음
}
}
}
// 소수일 경우 result 배열에 추가
if (isPrime) {
result.push(num[i]);
} else {
// 소수가 아닌 경우 result2 배열에 추가
result2.push(num[i]);
}
}
// 소수인 숫자들을 출력
document.write(`소수가 맞는 숫자는? ${result} <br><br>`);
// 소수가 아닌 숫자들을 출력
document.write(`소수가 아닌 숫자는? ${result2} <br>`);
</script>💌 실습예제(3)
랜덤한 비밀번호 만들기
- 각각 글자 / 숫자 / 문자가 저장되어있는 배열을 생성합니다.
- prompt를 통해 각각의 글자, 숫자, 특수문자의 개수를 입력받습니다.
- 입력 받은 갯수에 따라 랜덤으로 출력합니다.
- 출력 받은 글자 / 숫자 / 문자를 다시 섞어서 랜덤으로 배치합니다.
- 랜덤으로 섞인 비밀번호를 출력합니다.
1. 배열 생성
각각의 글자 / 숫자 / 문자가 저장되어있는 배열을 생성합니다.
- letters - 알파벳 소문자를 저장한 배열
- numbers - 0부터 9까지의 숫자를 저장한 배열
- symbols - 특수문자들을 저장한 배열
const letters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ]; const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; const symbols = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"];
2. 입력 받기
prompt를 통해 각각의 글자, 숫자, 특수문자의 개수를 입력받습니다.
- 비밀번호에 섞고 싶은 개수를 작성받습니다.
let letter = Number(prompt("몇 개의 글자를 섞으실건가요?")); let number = Number(prompt("몇 개의 숫자를 섞으실건가요?")); let symbol = Number(prompt("몇 개의 문자를 섞으실건가요?"));
3. 랜덤 출력
입력 받은 갯수에 따라 랜덤으로 출력합니다.
- 랜덤으로 나온 숫자를 배열의 인덱스로 사용하여 값을 출력합니다.
- 나온 값을 Allresult라는 빈 배열에 담아줍니다.
let Allresult = []; for (let i = 0; i < letter; i++) { let result = Math.floor(Math.random() * letters.length); Allresult.push(letters[result]); } for (let i = 0; i < number; i++) { let result = Math.floor(Math.random() * numbers.length); Allresult.push(numbers[result]); } for (let i = 0; i < symbol; i++) { let result = Math.floor(Math.random() * symbols.length); Allresult.push(symbols[result]); }
4. 랜덤 배치
출력 받은 글자 / 숫자 / 문자를 다시 섞어서 랜덤으로 배치합니다.
1) Fisher-Yates Shuffle 알고리즘 사용(셔플)
- 처음 배열의 인덱스 i와 무작위 인덱스 j의 자리를 교환하여 배열을 섞습니다.
for (let i = Allresult.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // i와 j의 값을 swap [Allresult[i], Allresult[j]] = [Allresult[j], Allresult[i]]; } console.log(Allresult.join(''));
2) splice 내장 메소드 사용
- 랜덤으로 받은 값을 넣을 Allresult2라는 빈 배열을 선언합니다.
- randomIndex에 해당하는 번호를 가진 Allresult의 배열의 내용을 Allresult2 배열에 추가합니다.
- splice( )는 Allresult 배열에서 randomIndex 위치에 있는 요소를 삭제합니다.
- 두 번째 인자로 1을 넘기면, 하나의 요소만 삭제됩니다.
let Allresult2 = []; while (Allresult.length > 0) { let randomIndex = Math.floor(Math.random() * Allresult.length); Allresult2.push(Allresult[randomIndex]); Allresult.splice(randomIndex, 1); }
5. 출력하기
랜덤으로 섞인 비밀번호를 출력합니다.
- 섞인 글자 / 숫자 / 문자가 담긴 Allresult2라는 배열을 출력해줍니다.
document.write(`당신의 비밀번호는 ${Allresult2} 입니다.`);
💌 전체 코드
- 위에서 작성한 코드를 하나로 합쳐 놓은 것입니다.
<script>
const letters = [
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
"n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
];
const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const symbols = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"];
let letter = Number(prompt("몇 개의 글자를 섞으실건가요?"));
let number = Number(prompt("몇 개의 숫자를 섞으실건가요?"));
let symbol = Number(prompt("몇 개의 문자를 섞으실건가요?"));
document.write(`글자는 ${letter}개 <br>`);
document.write(`숫자는 ${number}개 <br>`);
document.write(`문자는 ${symbol}개 <br>`);
let Allresult = [];
let Allresult2 = [];
for (let i = 0; i < letter; i++) {
let result = Math.floor(Math.random() * letters.length);
Allresult.push(letters[result]);
}
for (let i = 0; i < number; i++) {
let result = Math.floor(Math.random() * numbers.length);
Allresult.push(numbers[result]);
}
for (let i = 0; i < symbol; i++) {
let result = Math.floor(Math.random() * symbols.length);
Allresult.push(symbols[result]);
}
document.write(`선정된 문자는 ${Allresult} 입니다. <br>`);
console.log(Allresult);
/*
// Fisher-Yates Shuffle 알고리즘을 이용하여 배열 섞기
for (let i = Allresult.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
// i와 j의 값을 swap
[Allresult[i], Allresult[j]] = [Allresult[j], Allresult[i]];
}
console.log(Allresult.join(''));
*/
while (Allresult.length > 0) {
let randomIndex = Math.floor(Math.random() * Allresult.length);
Allresult2.push(Allresult[randomIndex]);
Allresult.splice(randomIndex, 1);
}
document.write(`당신의 비밀번호는 ${Allresult2} 입니다.`);
console.log(Allresult2);
</script>15일차 후기
- 내장 메소드가 어떤 자료형에 무엇이 적용되는지 따로 알 수 있었습니다.
- 사용해보면서 내가 안써본 메소드가 진짜 많다는게 느껴졌다.
- 소수가 아닌 수를 구하는 문제에서 소수가 아니란 뜻은 합성수랑 1을 포함하는건데 말그대로 1은 합성수도 아니라 빼려고 하다가 시간이 진짜 많이 걸렸다.
- 제한 시간 내에는 제출하지 못했지만 결국은 끝까지 해서 완성했다.
- 마지막 실습예제는 메소드를 안쓰고 배열을 섞으려고 하니까 좀 어려웠다..
- 메소드 없는 것도 구현을 했는데 반복을 많이 돌리다보니 로딩이 너무 오래 걸리길래 그냥 놔두고 편한대로 셔플이나 내장 메소드로 다시 구현했다.
- 오늘 머리를 너무 썼나.. 머리가 너무 아팠다. へ(￣ ∇ ￣へ)
૮꒰ ྀི〃´꒳`〃꒱ა