javaScript 함수(function)

메타플랫폼대표
|2024. 4. 11. 16:09
반응형

## 함수


 
-함수는 ‘호출될 수 있는 코드 조각’이다.
-변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼
 함수를 선언하면 함수의 이름을 코드 조각대신 사용할 수 있다.

-함수를 만드는 대표적인 방법 2가지
 # 함수 선언식
 # 함수 표현식

# 함수 선언식

function 함수명() {
// 함수의 기능을 표현하는 구문
}



# 함수 표현식 (이름이 없는 함수를 만든 후 변수에 대입하는 형식)

const 함수명 = function(){ 
// 함수의 기능을 표현하는 구문
}


-함수가 만들어지고 나면 함수명은 스스로 보관하고 있는 구문대신 사용될 수 있다.
-함수를 사용하기위해서는 함수를 호출해야 한다.

 

 

-둘의 차이는 const는 변수로 저장했기에, 선언전에 사용을 할 수 없지만,

함수표현식은 언제나 위에서나 아래서나 사용가능하다.

함수선언식은 언제나 사용하진 못하고 선언 후에 사용할 수 있다. 이것이 유일한 둘의 차이점.

// 함수선언식
function sayHello2(){
    let hello = "HELLO WORLD~~!!"
    console.log(hello);
};

sayHello2();

//함수표현식
const sayHello = function(){
    let hello = "hello world~~!!"
    console.log(hello);
};

sayHello();

 

 

 

## 함수의 데이터 반환(return)

-함수를 만들 때 함수가 데이터를 반환하도록 할 수 있다.
-함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 의미한다.

 

#return의 두개의 의미

-내가 지정한 값을 호출한 곳으로 반환한다. (두 개 일 수 없다)

-해당 함수를 종료한다. (두 개 일 수 없다)

getNumber();  = 3을 리턴하는 함수

console.log(3);

 

let number = getNumber();
console.log(number);

=

console.log(getNumber());

 

function plus (){
    let num = 5+5;
    return num;
};

let result = plus();
console.log(result);
console.log(plus());

function str () {
    let string = "함수 호출 하신거 맞죠"
    return string;
}

let result2 = str();
console.log(result2);
console.log(str());

function bool () {
    let boo = 5<10;
    return boo;
}

let result3 = bool();
console.log(result3);
console.log(bool());

 

-return문이 없이 쓰려면 바로 호출해서 사용하면 된다.

function noReturn () {
    console.log("리턴값이 없는 함수");
}

noReturn(); // "리턴값이 없는 함수" 가 값으로 출력

 

-확인을 누르면 결과 값이 true가 나온다. 이를 활용해서,

-확인을 누르면 true기에 확정 문구를 띄어주고, 취소를 누르면 false이기에 취소 문구를 띄어준다.

let bool = confirm("해당 상품의 구매확정"); // 여기서 confirm은 true나 false의 값을 출력한다.

if(bool = true) {
    console.log("해당 상품의 구매가 확정이 되었습니다.");
} else {
    console.log("해당 상품의 구매 확정이 취소 되었습니다.");
}

 

-위 코드를 이렇게 function 함수를 생성해서 호출하여 사용할 수도 있겠다.

function result () {
    let bool = confirm("해당 상품의 구매확정");

    if(bool) {
        console.log("해당 상품의 구매가 확정되었습니다.");
    } else {
        console.log("해당 상품의 구매가 확정되지 않았습니다.");
        return;
    }
    console.log("구매확정 감사합니다.");
}

 

 


 

위에서 했던 함수선언은 매개변수 없이 호출을 했다.

매개변수가 있는 호출을 하기 위해선 어떻게 해야할까?

 

 

## 함수와 매개변수



-함수 호출문은 '함수명' + '소괄호'이다.
-소괄호의 목적은 함수가 실행될 때 사용할 데이터를 전달받는 것이다.

-데이터를 전달받아 기능을 수행하는 함수를 만들때에는 
 전달받을 데이터의 이름을 정해야 하는데 이를 매개변수라고 한다.

 

#매개변수가 포함이 되어있는 함수 선언문 작성

 

function myFunction (매개변수1, 매개변수2, 매개변수3) {

// 함수 호출시 동작할 구문 작성

}

 

myFuntion(인자 1, 인자 2, 인자 3);

 

-데이터를 전달받기 위해서 만든 변수를 매개변수(parameter)라고 하며, 함수 호출시 전달하는 데이터를 인자(agument)라고 한다.

 

-함수를 만들때 매개변수는 있어도 되고 없어도 생성할 수 있다.

-함수를 만들때 return을 통한 데이터 반환은 있어도 되고 없어도 생성할 수 있다.

 

function result(number1, number2) {
    console.log("입력받은 숫자 [number1] : " + number1);
    console.log("입력받은 숫자 [number2] : " + number2);
    let sum = number1 + number2;
    return sum;
}


result(100,200);
console.log("[number1] + [number2] =" + result(100,200));


function result(number1, number2) {
    console.log("입력받은 숫자 [number1] : " + number1);
    console.log("입력받은 숫자 [number2] : " + number2);
    let sum = number1 + number2;
    console.log("[number1] + [number2] = " + sum);
}

result(100,200);

 

let sum = 0;

function gogo(number1, number2) {
    for (number1; number1 <= number2; number1 +=1) {
        sum += number1
        console.log("더한 숫자를 출력합니다." + number1 + "번째 값 = " + sum);
    }
}
function result3(num1, num2) {
    let tmp = num1;
    let sum1 = 0;
    let sum2 = 0;
    for(num1; num1 <= num2; num1 += 1) {
        if (num1 % 2 == 0){
            sum1 += num1;
        } else {
            sum2 += num1;
        }
    }
    console.log(tmp + "부터" + num2 + "까지범위중 짝수의 합: " + sum1);
    console.log(tmp + "부터" + num2 + "까지범위중 짝수의 합: " + sum2);
}

result3(1,100);
반응형

'javaScript↗' 카테고리의 다른 글

[ jS] HTML 태그 추가 / 클래스 관리  (1) 2024.04.12
javaScript 이벤트(event)  (0) 2024.04.11
javaScript 조건문(if-else), 반복문(for,while)  (0) 2024.04.11
javaScript DOM(parameter, agument)  (0) 2024.04.11
javaScript 연산식  (0) 2024.04.09