Learn & Record
HTML CSS JS (while, while 배열, 연습문제, break, continue, lsit, splice, function, 함수 변수 할당, 선언적함수, 매개변수, return, 사용자정의함수) 본문
Dev/HTML CSS JS
HTML CSS JS (while, while 배열, 연습문제, break, continue, lsit, splice, function, 함수 변수 할당, 선언적함수, 매개변수, return, 사용자정의함수)
Walker_ 2024. 3. 28. 17:301. while 반복문
- if 조건문과 형태가 매우 비슷. 다른 점은 문장을 한 번만 실행하고 끝내는 것이 아니라
불 표현식이 true면 계속해서 문장을 실행한다는 점
- while 반복문의 경우 조건이 변하지 않는다면 무한히 반복 실행하므로
- 조건을 거짓으로 만들 수 있는 문장이 포함되어 있어야 함
- 반복문이 무한 반복 되는 것을 무한 루프 infinite loop
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
*/
// 무한 반복문
let i = 0;
while (true) {
alert(`${i}번째 반복문입니다.`)
i++;
}
// while 반복문 기본
let i = 1;
// confirm() : 사용자가 [확인] 버튼을 클릭하면 true반환. [취소]를 클릭하면 false 반환
while (confirm('계속 진행하시겠습니까?')) {
alert(`${i}번째 반복입니다.`);
i++;
}
</script>
</head>
<body>
</body>
</html>
2. while문으로 배열 출력하기
- while 반복문과 for 반복문은 서로 대체해서 사용할 수 없음
- 보통 특정 횟수 반복할 때 for,
- 조건에 큰 비중이 있을 때는 while. 예) 특정 시간동안 어떤 데이터를 받을 때 까지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const array = [1,2,3,4,5];
// for문으로 배열 출력. 위의 코드에도 초기값, 조건식, 증감식이 있음
for (i=0; i<array.length; i++) {
console.log(`${i} : ${array[i]}`);
}
// 1. 인덱스 번호가 필요 : 0 ~ 4
// 2. 반복문은 5번 반복
var i = 0;
while (i<array.length) {
console.log(`${i} : ${array[i]}`);
i++;
}
</script>
</head>
<body>
</body>
</html>
3. 연습문제
/*
커피 1잔을 300원에 판매하는 커피자판기가 있습니다.
이 커피자판기에 돈을 넣으면 자판기에서 뽑을 수 있는 커피가 몇 잔이며 잔돈은 얼마인지를 함께 출력하는 프로그램을 구현하세요.
실행 예)
자판기에 얼마를 넣을까요? >>> 1400
커피 1잔, 잔돈 1100원
커피 2잔, 잔돈 800원
커피 3잔, 잔돈 500원
커피 4잔, 잔돈 200원
*/
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
커피 1잔을 300원에 판매하는 커피자판기가 있습니다.
이 커피자판기에 돈을 넣으면 자판기에서 뽑을 수 있는 커피가 몇 잔이며 잔돈은 얼마인지를 함께 출력하는 프로그램을 구현하세요.
실행 예)
자판기에 얼마를 넣을까요? >>> 1400
커피 1잔, 잔돈 1100원
커피 2잔, 잔돈 800원
커피 3잔, 잔돈 500원
커피 4잔, 잔돈 200원
*/
console.log("-------for문 활용-------")
var money = prompt("자판기에 얼마를 넣을까요? >>"); // 입력한 돈. 나중에 prompt('자판기에 얼마를 넣을까요? >>>')로 변경
var priceCoffee = 300; // 커피 한잔의 가격
if (priceCoffee>=300) {
for (i=1; 0 <= money - priceCoffee*i; i++) {
console.log(`커피 ${i}잔, 잔돈 ${money - priceCoffee*i}원`)
}
} else {
console.log('금액이 부족합니다.')
}
console.log("-------while문 활용-------")
var i = 1;
if (priceCoffee>=300) {
while (0 <= money - priceCoffee*i) {
console.log(`커피 ${i}잔, 잔돈 ${money - priceCoffee*i}원`)
i++;
}
} else {
console.log('금액이 부족합니다.')
}
/*
금액으로 구매할 수 있는 최대 잔수를 구한 후, for문의 조건에 이용.
*/
console.log('금액으로 구매할 수 있는 최대 잔수를 구한 후, for문의 조건에 이용.')
// var money = promt('자판기에 얼마를 넣을까요? >>>')
var priceCoffee = 300;
const maxCups = parseInt(money / priceCoffee); // 금액으로 구매할 수 있는 최대 잔수
console.log(maxCups)
for (i=0; i <= maxCups; i++) {
console.log(`커피 ${i}잔, 잔돈 ${money - priceCoffee*i}원`)
}
</script>
</head>
<body>
</body>
</html>
4. break, continue
- break : switch문이나 반복문을 벗어날 때 사용하는 키워드
while (true) {
if (조건식) {
break;
}
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
while (true) {
if (조건식) {
break;
}
}
*/
for (let i = 0; true; i++) { // 조건문이 true라서 무한 반복
alert(i + '번째 반복문입니다.')
// 진행 여부를 물어봄
const isContinue = confirm('계속하시겠습니까?')
if (!isContinue) { // 취소를 누르면 false가 반환이 되므로 not 연산자를 사용해서 true로 변경
break;
}
}
alert('프로그램 종료'); // 프로그램의 종료를 확인
</script>
</head>
<body>
</body>
</html>+
- continue : 반복문 안의 반복을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
<script>
for (let i =0; i < 5; i++) {
console.log(i);
// 현재 반복 작업을 중지하고 다음 반복 작업을 수행
continue;
alert(i); // 경고장이 출력되지 않음
}
</script>
5. list
- list : 배열 뒷 부분에 요소 추가하기
- 배열 뒷 부분에 요소를 추가할 때는 push() 메소드 사용
- 배열.push(요소)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const todos = ['우유구매', '업무 매일 확인하기', '필라테스 수업']
console.log(todos); // (3) ['우유구매', '업무 매일 확인하기', '필라테스 수업']
todos.push('저녁 식사 준비하기');
todos.push('피아노 연습하기');
// 배열의 뒷부분에 요소 2개가 추가됨
console.log(todos); // (5)
// 배열은 참조변수라서 cosnt 라도 값 변경이 가능
const frutsA = ['사과', '배', '바나나']
frutsA.push('망고')
console.log(frutsA)
// 재할당은 불가능
// frutsA = ['우유구매', '업무 메일 확인하기', '필라테스 수업'];
// Uncaught TypeError: Assignment to constant variable.
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 배열 뒷 부분에 요소 추가하기
인덱스를 사용해 배열 뒷부분에 요소 추가하기
배열의 길이는 고정이 아니기 때문에 인덱스 번호를 사용해서 강제로 요소를 추가 할 수 있음
*/
const fruitsA = ['사과', '배', '바나나']
fruitsA[10] = '귤';
// 4 ~ 10 번째 요소는 아무것도 없음
console.log(fruitsA) // (11) ['사과', '배', '바나나', empty × 7, '귤']
const fruitsB = ['사과', '배', '바나나'];
// length 속성 사용
fruitsB[fruitsB.length] = '귤';
console.log(fruitsB); // ['사과', '배', '바나나', '귤']
</script>
</head>
<body>
</body>
</html>
- 배열 요소 제거하기
- 1) 인덱스를 기반으로 제거하는 경우
- 2) 값을 기반으로 제거하는 경우
- 인덱스를 기반으로 제거하는 경우
- 배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용
- 배열.splice(인덱스, 제거할 요소의 개수)
<script>
const fruitsA = ['사과', '배', '바나나'];
console.log(fruitsA); // (3) ['사과', '배', '바나나']
fruitsA.splice(2, 1); // 배열의 2번째 인덱스로 부터 1개 요소를 제거
console.log(fruitsA) // (2) ['사과', '배']
</script><script>
const fruits = ['사과', '배', '바나나']
const index = fruits.indexOf('바나나'); // 바나나를 값으로 가지는 인덱스 구함
console.log(index); // 2
fruits.splice(index, 1);
console.log(fruits); // (2) ['사과', '배']
console.log(fruits.indexOf('바나나')); // 배열에 없는 경우 -1을 출력
if (fruits.indexOf('바나나') >= 0) {
fruits.splice()
}
</script>
- 배열의 특정 위치에 요소 추가하기
- splice() 메소드 사용
- 2번째 매개변수에 0을 입력하면 splice() 메소드가 요소를 삭제하지는 않고, 3번째 매개변수에 요소를 추가함
- 배열.splice(인덱스, 0, 요소); 추가하고자 하는 위치, 0, 추가하고자 하는 요소
const items = ['사과', '귤', '바나나', '오렌지']
console.log(items); // (4) ['사과', '귤', '바나나', '오렌지']
items.splice(1, 0, '양파'); // 1번 인덱스에 요소를 추가
console.log(items) // (5) ['사과', '양파', '귤', '바나나', '오렌지']
6. 함수 function
- 함수 : 코드의 집합, 함수를 실행하면 여러 코드를 묶어서 실행 할 수 있고,
- 필요할 때마다 호출하여 반복적으로 사용 가능
- 함수를 사용하면 좋은 점
- 반복되는 코드를 한 번만 정리해놓고 필요할 때 마다 호출하므로 반복 작업을 피할 수 있다
- 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다
- 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다
- 용어 정리
- 함수 정의 : 함수를 만든 것
- 함수 호출 : 함수를 사용하는 것
- 인수 : 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣는 것
- 매개변수 : 함수를 정의할 때 전달받을 인수를 정의하는 것
- 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과
- 익명함수 선언하기
- 익명 함수 anonymous function : 이름이 없는 함수
- 기본형 : function() {}
<script>
// 변수를 선언해서 함수를 할당
const func = function () {
console.log('함수 내부의 코드입니다 ... 1');
console.log('함수 내부의 코드입니다 ... 2');
console.log('함수 내부의 코드입니다 ... 3');
console.log('');
}
// 함수를 호출
func();
func();
// 출력
console.log(typeof func); // function. 함수의 자료형 확인
console.log(func); // 함수 자체도 단순한 자료이므로 출력할 수 있음
</script>
<script>
/*
* 선언적 함수 사용하기
선언적 함수 : 이름이 있는 함수
기본형 : function 함수이름 () {}
*/
// 함수를 생성
function func1st() {
console.log('함수 내부의 코드입니다 ... 1');
console.log('함수 내부의 코드입니다 ... 2');
console.log('함수 내부의 코드입니다 ... 3');
console.log('')
}
// 함수를 호출
func1st();
func1st();
// 출력
console.log(typeof func1st); // function
console.log(func1st);
</script>대부분의 프로그램은 선언적 함수만 사용하거나(C),
선언적 함수를 주로 사용하고 익명함수를 보조적인 수단(C++, 자바의 람다)으로 사용하지만,
자바스크립트는 함수지향 프로그램(ECMA script 6 이후)이라서 변수에 함수 할당하다거나,
익명함수를 주로 사용하고 선언적 함수를 보조적인 수단으로 사용하는 것을 지향함
- 호이스팅(Hoisting) : var로 선언한 변수와 선언적 함수는 변수, 함수 이전에 호출하여도 에러를 발생하지 않음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
compute();
// script로 구분되어 있으면 실행이 안됨
</script>
<script>
/*
* 함수 :
*/
function compute() {
let x = 10;
let y = 100;
let result = x / y;
console.log(result);
}
compute(); // 0.1
</script>
<script>
// 선언적 함수는 재정의 가능
compute(); // 110
function compute() {
let x =10;
let y = 100;
let result = x + y;
console.log(result);
}
compute(); // 110
</script>
</head>
<body>
</body>
</html>
- 동일한 이름의 함수가 존재
- 선언적 함수의 경우 동일한 이름의 함수가 존재하면 뒤에 선언된 함수가 실행이 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let num = 100;
function menu() {
num += 100;
document.write(num, ": 앞의 함수 실행<br>")
}
menu();
function menu() {
document.write(num, ": 뒤의 함수 실행<br>");
}
</script>
</head>
<body>
</body>
</html>
- 함수를 변수에 할당하는 방법 2가지
<script>
// 1. 변수에 할당하면서 선언적 함수 선언
const func2nd = function namedFunc2nd() { // 변수를 선언해서 함수를 할당
console.log("nameFunc2nd() 함수 내부의 코드입니다 ...");
console.log('')
}
// 호출
func2nd(); // 변수를 통해 함수를 호출
// namedFunc2nd(); // Uncaught ReferenceError: namedFunc2nd is not defined
// 변수에 할당하면서 선언적 함수를 선언하면 익명함수로 처리
console.log(typeof func2nd); // function. 함수의 자료형 확인
// 2. 선언적 함수를 선언 후에 변수에 할당.
function namedFunc() {
console.log('namedFunc() 함수 내부의 코드입니다...')
console.log('');
}
const func1st = namedFunc; // 선언적 함수를 변수에 할당.
func1st(); // 변수를 통해 함수를 호출
namedFunc(); // 함수를 호출
console.log(typeof func1st); // function. 자료형 확인
</script>
- 매개변수와 리턴값
- 매개변수 : 함수를 정의할 때 괄호 안에 적는 것
- 리턴값 : 함수의 최종 결과. 호출한 곳으로 반환되는 값.
- 매개변수와 리턴값은 함수의 필수 요소가 아니고, 필요할 때만 사용함
기본형
funcion 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
문장;
문장;
return 리턴값;
}
<script>
/*
기본형
funcion 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
문장;
문장;
return 리턴값;
}
*/
const f = function(x) {
return x * x;
}
// 함수를 호출
console.log(f(3)); // 9. 매개변수 x에 전달되는 인수가 3이고 리턴값이 9.
console.log(f()); // NaN
</script>
<script>
// 변수가 있는 함수 정의문
const myFnc = function (name, area) {
document.write('안녕하세요. ' + name + '입니다.','<br>');
document.write('사는곳은 '+area+'입니다.','<br><br>');
};
myFnc('홍당무', '서울');
myFnc('깍두기', '부산');
</script>
- 데이터를 반환하고 강제 종료하는 return 문
- return의 역할
- 1) 데이터를 반환
- 2) 함수의 강제 종료 (반환값이 없어도 됨)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const getAvg = function (arrData) {
// 배열로된 과목을 받아서 점수를 입력 받고 평균을 반환
let sum = 0;
for(let i = 0; i < arrData.length; i++) {
sum += Number(prompt(`${arrData[i]} 점수는?`, '0'));
}
const avg = sum / arrData.length; // 평균을 계산
return avg;
alert(avg); // return 이후의 코드라서 실행이 안됨. (Unreachable code)
}
const arrSubject = ['국어', '수학', '영어'];
const result = getAvg(arrSubject);
document.write(`평균 점수는 ${parseInt(result)}점 입니다.`)
</script>
</head>
<body>
</body>
</html>
- 이미지 image를 통한 활용
- 종료 목적의 return
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#galleryZone {
text-align: center;
}
</style>
<script>
// 종료 목적의 return
let num = 1;
const showGallery = function (direction) {
if (direction===1) { // 다음을 클릭한 경우
if (num===9) {
alert('마지막 이미지입니다.')
return; // 이미지가 9개인 경우 num이 9인 경우 함수 종료
}
num++;
} else { // 이전을 클릭한 경우
if (num === 1) {
alert('첫번째 이미지입니다.')
return; // 첫번째 이미지
}
num--;
}
const imgTag = document.getElementById('photo'); // id 값이 photo인 요소를 가져옴
imgTag.setAttribute('src', 'images/pic_'+num+'.jpg') // id값이 photo인 요소의 src 속성을 변경
}
</script>
</head>
<body>
<div id="galleryZone">
<p><img src="./images/pic_1.jpg" id="photo" alt=""></p>
<p>
<button onclick="showGallery(0)">이전</button>
<button onclick="showGallery(1)">다음</button>
</p>
</div>
</body>
</html>
- 이미지 순환 하도록 구현
<script>
// 종료 목적의 return
let num = 1;
const showGallery = function (direction) {
if (direction===1) { // 다음을 클릭한 경우
if (num === 9) alert('마지막 이미지입니다.');
num === 9 ? num = 1: num++;
} else { // 이전을 클릭한 경우
if (num === 1) {
alert('첫 이미지입니다.')
num = 9;
} else {
num--;
}
}
const imgTag = document.getElementById('photo'); // id 값이 photo인 요소를 가져옴
imgTag.setAttribute('src', 'images/pic_'+num+'.jpg') // id값이 photo인 요소의 src 속성을 변경
}
</script>
- 사용자 정의 함수
- 예제 : 윤년을 확인하는 함수
- 1) 4로 나누어 떨어지는 해는 윤년
- 2) 하지만 100으로 나누어 떨어지는 해는 윤년이 아님
- 3) 하지만 400으로 나누어 떨어지는 해는 윤년
<script>
// 윤년을 확인하는 함수를 정의 - 정수 연도를 입력받아서 윤년의 여부를 불린형으로 반환
// let year = prompt(parseInt('년도를 입력해주세요.'));
const isLeapYear = function (year) { // 반환값이 bool형인 함수의 이름은 is로 시작하게 만듬
const isLeapYear = (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
return isLeapYear
}
console.log(`2020년은 윤년일까? === ${isLeapYear(2020)}`); // true
// true && true || false
console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`); // false
// false && true || false
console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`); // true
// true && false || true
console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`); // false
// true && false || false
</script>
- 사용자 정의 함수 2
- 기본적인 사용자 정의 함수 예제 : a부터 b까지 더하는 함수
const sumAll = function (a, b) {
let sum = 0
for (a; a <=b; a++) {
sum = sum + a;
}
return sum;
}
console.log(`1부터 100까지의 합: ${sumAll(1,100)}`); // 5050
console.log(`1부터 500까지의 합: ${sumAll(1,500)}`); // 125250
- 사용자 정의 함수 3
- 배열을 전달 받아서 최솟값을 구하는 함수
<script>
const min = function (arrNum) {
let minNum = 0;
for (let i = 0; i<arrNum.length-1; i++) {
if (arrNum[i] > arrNum[i+1]) {
minNum = arrNum[i+1]
}
}
return minNum;
}
const testArray = [52, 273, 32, 103, 275, 24, 57];
console.log(`${testArray}중에서`);
console.log(`최솟값 = ${min(testArray)}`); // 24;
</script>
- 선생님 코드
<script>
const min = function (array) {
let min = array[0];
for (let i =1; i < array.length; i++) { // 0번 인덱스를 초기화에 사용했으니 1번 인덱스부터 사용
if (min > array[i]) { // 현재 min 보다 더 작다면
min = array[i]; // min 값을 변경
}
}
return min;
}
</script>공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
'Dev > HTML CSS JS' 카테고리의 다른 글
'Dev/HTML CSS JS' Related Articles
more
