3월 13일 (1) JavaScript

function : 여러 동작을 묶은 덩어리, 동작해야 할 목적대로 묶은 명령들, 코드의 재사용(반복된 작업 감소 -> 생산성 향상)

한 가지 일을 할 수 있는 목적이 수행되는

소프트웨어 공학 - 구조적 프로그래밍

코드를 쪼개는 것, 모듈화 방식, 순차적, 시간단축, 인건비 감소, 생산성 향상

라이브러리 : 이미 만들어진 함수의 묶음,

alert, confirm, prompt, Math.random (보통 컴퓨터에 이미 내장되어 있는 기본적인 함수)

API, framework 등 (함수를 미리 만들어 놓은 것들)

함수의 문법

1. 함수 선언

function 함수명 ([매개변수들]) { 선언부

명령들...; 정의부

[return 결과값;] 정의부

}

[ ] 생략 가능

매개변수 : 함수에 값을 넣기 위해 사용되는 변수, 함수 내부의 명령문에서 사용되야 하는 데이터를 받기 위한 공간

return : 결과값을 반환하기 위한 키워드, 프로그램의 흐름을 되돌린다. 원래 흐름으로 되돌아 가라, 결과를 가지고 가라

return은 함수 내부에서 처리한 결괏값을 원래 흐름 상의 코드 부분에 전달하는 역할과 함수를 종료시키는 역할을 담당

선언 : 변수선언, 함수선언, 코드의 윗쪽에 배치

함수= 코드를 준비만 해놓고, 실제 실행되지 않을 수도 있다. 실행을 하고 난 후에는 원래 위치로 되돌아가게 함.

함수의 사용(함수 호출, function call)

묶여 있는 코드의 실행이 필요한 위치에 다음처럼 작성

1) return이 없는 경우

함수명 ([값]);

2) return이 있는 경우

변수 = 함수명([값]);

함수의 종류

1. 이미 만들어진 함수(라이브러리)

이름과 사용방법이 정해진 상태로 이미 만들어져 내부적으로 포함된 상태의 함수,

따로 선언이 필요없이 그냥 사용하면 된다.

예) alert, prompt 등

2. 사용자(개발자) 정의 함수

개발자가 이름과 내부 코드를 작성하고 사용하는 함수, 정의하는 형식은 4가지

먼저 코드를 묶어서 이름을 부여하는 선언을 하고, 처리될 위치에서는 이름만으로 묶은 코드를 사용

선언=정의, 이름으로 코드를 묶어서 사용함

참고) 프로그래밍에서 코드의 순서

선언코드 - 사용코드(기본형태)

사용코드 - 선언코드(호이스팅)

가급적 기본 형태로 사용할 것을 권장함

외부 자바스크립트 가지고 오기

간단한 경우 html파일 안에서 사용하지만, 많은 경우 js 파일을 만들어서 사용하는 것이 필요.

페이지로 만들어 놓으면 같은 함수를 여러 페이지에서 사용할 수 있음.

html 파일

<!DOCTYPE html>
<html lang="ko">

<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>자바스크립트 함수</title>
</head>

<body>
    <h2>계산기</h2>
    <p>첫 번째 수 : <input type="number" id="n1"><br>
        두 번째 수 : <input type="number" id="n2"></p>
    <p>
        <button id="addBtn">더하기</button>
        <button id="subBtn">빼기</button>
        <button id="mulBtn">곱하기</button>
        <button id="divBtn">나누기</button>
    </p>
</body>
<!-- 외부자바스크립트 가져오기 -->
<script src="1-1.calculator.js"></script>
<!-- 내부에서 처리할 자바스크립트 -->
<script>
    // body에 작성한 id를 연결하는 변수지정
    const num1 = document.querySelector("#n1");
    const num2 = document.querySelector("#n2");
    const addbtn = document.querySelector("#addBtn");
    const subbtn = document.querySelector("#subBtn");
    const mulbtn = document.querySelector("#mulBtn");
    const divbtn = document.querySelector("#divBtn");

    //버튼을 눌렀을 때 함수 정의 
    // 첫번째 함수 형태
    addbtn.addEventListener("click", function () {
        let x = Number(num1.value); // input 입력 첫번째 값을 가지고 옴
        let y = Number(num2.value); // input 입력 두번째 값을 가지고 옴
        let z = add(a, b); // 더하기 함수 이름 가지고 오기
        alert(`계산 결과 : ${z}`);
    });

    // 두번째 함수 형태
    subbtn.addEventListener("click", function () {
        let x = num1.value; // 입력
        let y = num2.value;
        sub(x, y); // 함수, 출력
    });

    // 세번째 함수 형태
    mulbtn.addEventListener("click", function () {
        let z = mul(); // 입력값 
        alert(`계산결과 ${z}`);  //출력
    });

    // 네번째 함수 형태
    divbtn.addEventListener("click", function(){
        div(); //함수호출
    });
</script>

</html>

자바스크립트 파일은 함수형태 예시에 포함

함수의 형태

1. 매개변수와 반환값이 모두 있는 형태

funciton 함수명(매개변수목록들) {

명령어들;

return 반환값;

}

function add(a, b) { // 두 값을 받는다. 변수 a, b
    let c = a + b; // 두 값을 더해서 c에 저장
    return c; // 결과값을 반환한다.
}

2. 매개변수만 있고 반환값은 없는 형태

funciton 함수명(매개변수목록들) {

명령어들;

}

예) alert

function sub(a, b) {
    let c = a - b;
    alert(`계산결과 ${c}`);
}

3. 매개변수는 없고 반환값은 있는 형태

funciton 함수명() {

명령어들;

return 반환값;

}

//매개변수를 통한 입력을 처리하지 않는다.
function mul() { // 매개변수가 없음, 입력을 받지 못함
    let a = prompt("첫번째 수");
    let b = prompt("두번째 수");
    let c = a * b;
    return c;
}

4. 매개변수와 반환값이 모두 없는 형태

funciton 함수명() {

명령어들;

}

function div() {
    let a = prompt("첫번째 수");
    let b = prompt("두번째 수");
    let c = a / b;
    alert(`계산 결과 : ${c}`);
}

함수 종결자 return

return의 본래 의미는 명령의 흐름을 원래의 흐름으로 되돌리는 것

함수를 사용하면 명령의 흐름이 본 코드에서 함수의 코드로 넘어가게 된다.

return은 이 흐름을 다시 본 코드 쪽으로 되돌리는 역할을 담당하며, 반환값이 없이 함수의 모든 코드가 실행되는 경우에는 return 문을 생략한다.

(2, 4번째 형태)

코드는 직렬적으로 수행된다. 병렬적 X

원래는 return이 포함되어야 반환값이 없어 생략, 써도 무방하다.

return문을 단독으로 사용하는 경우)

if, switch 문과 결합되어 특정 조건일 때 즉시 함수를 종료하고 원래의 코드 흐름으로 넘어가도록 조치할 때 사용

예제) 두 번째 실행문, 세 번째 실행문

function div() {
    let a = prompt("첫번째 수");
    let b = prompt("두번째 수");

    //첫번째 실행문 
    //if(b != 0){
    //     let c = a / b;
    //     alert(`계산 결과 : ${c}`);
    // }
    // else{
    //     alert("두 번째 숫자에 0을 입력할 수 없습니다.")
    // }

    //두번째 실행문
    // if(b == 0) {
    //     alert("두 번째 숫자에 0을 입력할 수 없습니다.")
    //     return; // 함수 종료 밑에 두 문장은 사용되지 않음
    // } 
    // let c = a / b; //if문에 속하지 않은 문장
    // alert(`계산 결과 : ${c}`);

    //세번째 실행문
    switch (b) { //b와 0의 형태를 같게 해주어야 한다. 문자열, 숫자
        case "0":
            alert("두 번째 숫자에 0을 입력할 수 없습니다.");
            return;
        case "1":
            alert(`계산 결과 : ${a}`);
            return;
    }

    //let c = a / b; //if문에 속하지 않은 문장
    // alert(`계산 결과 : ${c}`);
}

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 14일 (1) JavaScript - 함수 파라미터, 객체 (0)	2023.03.14
3월 13일 (2) JavaScript - 변수 범위, 함수 표현식, 이벤트 (0)	2023.03.13
3월 10일 JavaScript - 배열 (0)	2023.03.10
3월 9일 (2) JavaScript - 제어문 while 문, 배열 (0)	2023.03.09
3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 (0)	2023.03.09

새롭게 공부시작하기

3월 13일 (1) JavaScript - 함수

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 13일 (1) JavaScript - 함수

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바