2024. 6. 18 - JavaScript

JavaScript

조건문

•

switch ~ case

◦

case 조건 값 1:

처리구문

break

switch (값) {
    case 조건 값 1:
         처리구문
         break
    case 조건 값 2:
         처리구문
         break
    default:
        처리구문
  }
JavaScript
복사

◦

학점 계산

let score = prompt('학점을 입력하세요')

switch (Math.floor(score / 10)) {
    case 10:
    case 9:
        alert("A");
        break;
    case 8:
        alert("B");
        break;
    case 7:
        alert("C");
        break;
    default:
        alert("F");
}
JavaScript
복사

◦

삼항 연산자

let chk = num_1 % 2 == 0 ? '짝수' : '홀수'
JavaScript
복사

배열

•

배열: 변수들의 묶음 ⇒ 의미가 유사한 데이터의 묶음

◦

예시: arr 배열

	0x111	0x112	0x113	0x114	0x115	0x11n
요소	1번째 요소	2번째 요소	3번째 요소	4번째 요소	5번째 요소	……. n번째 요소
인덱스	arr[0]	arr[1]	arr[2]	arr[3]	arr[4]	…arr[n]

•

example code

let arr1 = [1, 2, 3]
console.log('arr1 => ', arr1, typeof(arr1))
JavaScript
복사

•

배열 컨트롤 : 참조(접근), 개수, 요소 추가, 요소 삭제

let arr3 = [1, 2, 3, 4, 5]
console.log('arr3 배열의 첫번째 요소값 => ', arr3[0])
console.log('arr3 배열의 마지막 요소값 => ', arr3[4])
console.log('arr3 배열의 마지막 요소값 => ', arr3[arr3.length - 1])
console.log('arr3 배열의 요소의 개수 => ', arr3.length)
JavaScript
복사

•

배열의 요소를 추가 : 배열.push() → 마지막 index 다음에 추가

// 배열의 요소를 추가 : 배열.push() -> 마지막 index 다음에 추가
arr3.push(10)
console.log(arr3)
console.log(arr3.length)
JavaScript
복사

•

배열의 특징 index에 위치한 값을 제거(삭제) + 배열.splice(index, 제거하고자 하는 요소의 개수)

// 배열의 특징 index에 위치한 값을 제거(삭제)
// 배열.splice(index, 제거하고자 하는 요소의 개수)
arr3.splice(2, 1)
console.log(arr3)
console.log(arr3.length)
JavaScript
복사

반복문

•

for 반복문

for (let i = 0; i < 5; i++) {
    console.log(i)
}
JavaScript
복사

•

모든 요소를 처리해야 하는 경우

for (const item in arr3) {
    console.log(arr3[item])
}

console.log('=================================')
for (let item of arr3) {
    console.log(item)
}
JavaScript
복사

•

while 문

// while (반복의 조건 bool) {}

console.log("while")
let num = 0
while (num < 5) {
    console.log(num)
    num++;
}
JavaScript
복사

•

1부터 더해나가면서 합이 100이 최초로 넘어갈 때 마지막 입력값 찾기

// 1부터 더해나가면서 합이 100이 최초로 넘어갈 때 마지막 입력값을 찾아보자
let sum = 0
let n = 1
while (true) {
    sum += n
    if (sum >= 100) {
        console.log(n, '을 더했을 때 최초 100이 넘어갑니다. 합은', sum)
        break
    }
    // console.log(n)
    n++
}
JavaScript
복사

•

하이 로우 게임

const rand_num = Math.random()
const real_num = Math.floor(rand_num * 100) + 1

let cnt = 0;
while (true) {
    cnt++
    if (cnt > 10) {
        alert('Game Over!!!')
        break
    }

    // 숫자를 입력 받고 hi/row 체크
    let num = Number(prompt('숫자를 입력하세요'))
    if (isNaN(num)) {
        alert('올바른 숫자를 입력하세요.')
    } else {
        if (num > real_num) {
            alert('row')
        } else if (num < real_num) {
            alert('high')
        } else {
            alert('정답입니다.')
            break
        }
    }
}
JavaScript
복사

함수

•

함수 

◦

특정 목적을 수행하기 위한 코드들의 집합

◦

필요에 따라 값을 받아서 처리 (매개변수 정의)

◦

필요에 따라 처리된 결과를 반환 (return 값)

•

함수 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_function1</title>
    <script>
        // fn1()
        // 함수 : 특정 목적을 수행하기 위한 코드들의 집합
        // 필요에 따라 값을 받아서 처리 ( 매개변수 정의 )
        // 필요에 따라 처리된 결과를 반환 ( return 값 )

        // function 식별자() {} => 선언적 함수 정의

        // fn1 함수 => 안녕하세요 alert 을 출력하는 함수
        function fn1() {
            alert('안녕하세요')
        }

        // fn2 실습
        function fn2(age) {
            array.forEach('안녕하세요! ' + uname + '입니다.')
        }

        // 나이를 입력 받아서 성인 여부를 출력하는 ㅎ마수
        function chk_age(age) {
            if (age >= 19) {
                alert('성인 입니다,. 입장이 가능합니다')
            } else {
                alert('미성년자는 출입이 불가합니다.')
            }
        }

        // 출생연도를 입력받아서 성인 여부를 판단하고
        // 성인일 때 true, 미성년일 때 false 함수   

        function chk_age(age) {
            let result = false

            // if (age >= 19) { 
            //     resule = true
            // }

            // return result

            return age >= 19
        }

        let chk = chk_age(30)
        // fn2('손흥민')
        // check_age(25)

        // 함수 => 1급 객체
        const fn3 = function () {
            alert('HI~!!!')
        }

        // fn3()

        // fn1()

        // 숫자 두 개를 전달 받아서 사칙 연산의 결과를 출력하는 함수
        function calc (num1, num2) {
            console.log('더하기 결과', num1 + num2)
            console.log('빼기 결과', num1 - num2)
            console.log('곱하기 결과', num1 * num2)
            console.log('나누기 결과', num1 / num2)
            console.log('나머지 결과', num1 % num2)
        }

        calc(12, 6)
    </script>
</head>

<body>

</body>

</html>
JavaScript
복사

•

매개변수 : 함수가 호출될 때 받는 값을 저장하는 변수

•

가변 매개변수: 호출할 때 매개변수의 개수가 고정이 아닌 가변일 때 사용

•

전달되는 값들 중 가장 큰수를 반환하는 함수 만들기

// 전달되는 값들 중 가장 큰수를 반환하는 함수를 만들어보기
function getMaxNumbers(...nums) {
    let maxNum = nums[0]
    for (num of nums) {
        if (maxNum < num) {
            maxNum = num
        }
    }
    return maxNum
}

console.log(getMaxNumbers(1, 12, 5, 9))
JavaScript
복사

•

기본 매개변수

function test3(name, age = 19, gender = 'M') {
    // age = age || 30
    // gender = gender || 'M'
    console.log(name)
    console.log(age)
    console.log(gender)
}

console.log('=====================')
test3('king')
console.log('=====================')
test3('king', 20)
console.log('=====================')
test3('king', 20, 'F')
JavaScript
복사

•

매개변수로 시급과 시간을 입력받아 급여를 계산하는 함수 만들기

function earnings(name, wage = 20000, hours = 40) {
    console.log("============")
    console.log(`이름: ${name}`)
    console.log(`시급: ${wage}`)
    console.log(`근로시간: ${hours}`)
    console.log(`급여액: ${wage * hours}`)
}

earnings('손흥민', 12000, 30)
earnings('김민재', 15000)
JavaScript
복사

•

콜백 함수

◦

함수의 매개변수로 전달되는 함수 ⇒ 콜백 함수

◦

동기화 ⇒ 함수 호출 함수 모든 기능을 수행할 때까지 대기 후 실행

◦

비동기 ⇒ 웹 기반 통신 (Rest API), promise

•

콜백 함수 예제

function callTenTimes(callback){
    // callback = function(i){
    //       console.log(`${i} 번째 함수 호출`)
    //   }
    for(let i = 0; i < 10 ; i++){
        callback(i)
    }
}

callTenTimes(
    function(i){
        console.log(`${i} 번째 함수 호출`)
    }
)
const callBackFn = function(val, index){
        console.log(index, val)
    }
const cfn1 = function(val, index, temp){
        return val % 10 * 100
    }

const cfn2 = function (num) {
        return num % 2 == 0
    }

let arr = [11, 12, 13, 14, 15, 16, 17, 18, 19]
arr.forEach(callBackFn)
let arr1 = arr.map(cfn1)
console.log('arr1 >>> ', arr1)
let arr2 = arr.filter(cfn2)
console.log('arr2', arr2)
JavaScript
복사

2024. 6. 18 - JavaScript

JavaScript

조건문

배열

반복문

함수

기타