javascript 배열 실습, 함수 (2023.04.27)

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

javascript 배열 실습, 함수 (2023.04.27) 본문

full stack/JavaScript

javascript 배열 실습, 함수 (2023.04.27)

Shinjio 2023. 4. 27. 18:10

🎈 배열 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>array practice</title>
    <style>
        table, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script>
        // 과목점수, 이름을 배열로 입력받을 때마다 배열에 추가하는 방법으로...
        // 0. 과목 수, 과목 이름, 과목 점수, 총점, 평균 초기화
        //과목 수 변수 선언
        let subNum = 0;
        // 과목 이름 저장 배열 선언
        let subName = [];
        // 점수 저장 배열 선언
        let subScore = [];
        // 총점 변수 선언
        let totalScore = 0;
        // 평균 초기화
        let avgScore = 0;

        // 1. 과목 수 입력 
        subNum = Number(prompt('과목 수 입력'));
        
        // 2. 과목 수만큼 과목 이름 입력
        for(let i = 0 ; i < subNum ; i++){
            subName.push(prompt('점수를 입력할 과목을 입력하세요.'));
        }

        console.log(subName);

        // 3. 각 과목들의 점수를 입력
        // 000의 점수 입력
        // 4. 총점, 평균값을 도출
        for(let i = 0 ; i < subName.length ; i++){
            let score = Number(prompt(`${subName[i]}의 점수를 입력`));
            subScore.push(score);
            totalScore += score;
        }

        avgScore = parseInt(totalScore / subScore.length);

        console.log(subScore);
        console.log(totalScore);
        console.log(avgScore);

        // 5. 결과를 HTML 내 표 형태로 출력
        // 과목 이름1, 과목 이름2,  ..., 총점, 평균
        // 과목 점수1, 과목 점수2,  ..., total, avg
        document.write(`
            <table>
                <tr>
            `);

        for(let i = 0 ; i < subNum ; i++){
            document.write(`
                    <td>${subName[i]}</td>
            `)
        }

        document.write(`
                    <td>총점</td>
                    <td>평균</td>
                </tr>
                <tr>
            `)
            for(let i = 0 ; i < subNum ; i++){
            document.write(`
                    <td>${subScore[i]}</td>
            `)
        }
        document.write(`
                    <td>${totalScore}</td>
                    <td>${avgScore}</td>
                </tr>
            </table>
        `)

    </script>
</body>
</html>

🎈 함수

특정 기능을 수행하는 소스 코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조

// 함수 : 특정 기능을 수행하는 소스 코드를 하나로 묶어서 
//          필요할 때마다 사용하기 위한 구조 

// 함수 선언
function intro() {
    console.log('안녕하세요. 저는 신지영입니다👩');
}

// 함수 호출
intro();

// 매개변수
function lunch(menu) {
    console.log(`점심으로는 ${menu} 먹었습니다🥰`);
}

lunch('가츠동');

// 매개변수 + return문
function dinner(menu){
    return `저녁으로는 ${menu} 먹을 거에요!😸`;
}

console.log(dinner('라면'));

위와 같이 함수를 작성하면 호이스팅이 발생할 수 있음!

📖 함수 호이스팅

선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상

즉, 선언문이 아직 선언되지 않았는데 선언된 것처럼 동작

// 호이스팅 : 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상

// 소스코드 처리 과정 : 평가 단계 >> 실행
// 평가 : 모든 선언문(변수, 함수 등) 등록
// 실행(런타임)

// 변수 호이스팅 
// 변수 선언 키워드 var 사용시 발생
console.log(lunchMenu);
// undefined ->  선언O, 할당X
var lunchMenu = '미니돈까스';
console.log(lunchMenu);
// console.log(dinnerMenu);
// let dinnerMenu = '연어초밥';

// 함수 호이스팅
hoisting('위')
function hoisting(val) {
    console.log(val, '함수 선언문');
}
hoisting('아래');

hoisting2('위')
const hoisting2 = function(val){
    console.log(val, '함수 표현식');
}
hoisting2('아래')

hoisting이라는 함수를 선언하기 선에 hoisting을 사용하였는데도 오류가 발생하지 않음 → 함수 호이스팅

원래는 아래와 같이 오류가 발생해야 정상

함수 호이스팅 결과

함수가 선언되기 전에 호출이 됨(호이스팅 발생) >> 안정화 작업 필요 >> 함수 표현식 혹은 화살표 함수 사용!

📖 함수 표현식

변수로 참조하여 익명 함수로 선언

(익명함수 : 이름이 없는 구조 > 변수의 형태로 만들어 참조시키는 구조)

// 함수 표현식 : 익명 함수의 형태로 함수를 선언 -> 변수 참조
// 변수로는 const로 사용하는게 좋음 
// let 사용시 나중에 값을 변경할 수 있기 때문에
// function(매개변수) -> 익명함수 

const intro = function(){
    console.log('안녕하세요. 저는 신지영입니다🐱');
}
intro();

// 매개변수
const lunch = function(menu) {
    console.log(`점심으로는 ${menu} 먹었습니다🥰`);
}

lunch('가츠동');

// 매개변수 + return문
const dinner = function(menu){
    return `저녁으로는 ${menu} 먹을 거에요!😸`;
}

console.log(dinner('라면'));

📖 화살표 함수

// 화살표 함수 : 함수 표현식 형태, function 키워드 대신 => 사용

const intro = ()=>{
    console.log('안녕하세요. 저는 신지영입니다😀😀');
}
intro();

// 매개변수
// 매개변수 하나일 때는 소괄호() 생략 가능!
// 실행로직 한 줄일 때 중괄호{} 생략 가능! 
// -> return 키워드 있을 때는 return 키워드까지 생략 가능
// const lunch = (menu)=>{
//     console.log(`점심으로는 ${menu} 먹었습니다🥰`);
// }
const lunch = menu=>
    console.log(`점심으로는 ${menu} 먹었습니다🥰`);


lunch('가츠동');

// 매개변수 + return문
// const dinner = (menu)=>{
//     return `저녁으로는 ${menu} 먹을 거에요!😸`;
// }
const dinner = menu=>`저녁으로는 ${menu} 먹을 거에요!😸`;
console.log(dinner('라면'));

함수 실습 1. 더하기 문제

※ 함수 호출 시 뒤에 소괄호 적는 것 까먹지 말기!!!!!

// 두 개의 숫자를 입력 받기
let num1 = Number(prompt('첫번째 정수 입력'));
let num2 = Number(prompt('두번째 정수 입력'));

// 1. 함수 선언문
function addNumber1(){
    return num1 + num2;
}

// 2. 함수 표현식
const addNumber2 = function(){
    return num1 + num2;
}

// 3. 화삺표 함수
const addNumber3 = ()=>num1 + num2;

// 출력하여 결과 확인
console.log('함수 선언문', addNumber1());
console.log('함수 표현식', addNumber2());
console.log('화살표 함수', addNumber3());
alert(addNumber1());

함수 실습 2. 피라미드 문제

// 1. 이모티콘, 행의 개수 입력 받기 
let emo = prompt('이모티콘 입력하세요.');
let rowNum = Number(prompt('출력할 행의 개수를 입력하세요'));

// 2. 이모티콘을 행의 개수에 맞춰 피라미드 형태로 출력하는 함수 만들기
//      함수 매개변수 => 이모티콘, 행의 개수
const print = (emo, rowNum)=>{
    for(let i = 1 ; i <= rowNum ; i++){
        for(let j = 1 ; j <= i ; j++){
            document.write(emo);
        }
        document.write(`<br>`);
    }
}

print(emo, rowNum);

'full stack > JavaScript' 카테고리의 다른 글

javascript DOM (2023.05.01) (0)	2023.05.01
javascript 객체(Object) (2023.04.28) (1)	2023.04.29
javascript 반복문 실습 & 작성 위치 & 배열(2023.04.26) (0)	2023.04.26
javascript 변수, 자료형, 연산자, 조건문, 반복문 (2023.04.25) (0)	2023.04.25
JavaScript 개요 & 입출력 (2023.04.24) (0)	2023.04.24

'full stack/JavaScript' Related Articles

JiYoung Dev 🖥

javascript 배열 실습, 함수 (2023.04.27) 본문

javascript 배열 실습, 함수 (2023.04.27)

🎈 배열 실습

🎈 함수

📖 함수 호이스팅

📖 함수 표현식

📖 화살표 함수

'full stack > JavaScript' 카테고리의 다른 글

티스토리툴바