함수 function()

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

함수 선언문

함수의 이름이 선언되므로 어디서든 호출 가능 (호이스팅 hoisting)

function sayHello(){
  console.log('hello');
}

---

지역변수, 전역변수

지역변수의 값이 선언되지 않았다면 전역변수의 값을 받아 사용한다. (상위 요소에서 찾게 된다. )

const num1 =10; // 전역변수
function sum(){
    const num1=11; //지역변수
    console.log(num1);
}
console.log(num1);
sum();

---

매개변수

여기다가 num1에다가 외부의 값을 입력해주고 싶다면 function sum()의 괄호 안에 변수를 선언해줘야 한다. 이를 매개변수라고 한다.

function sum(num2){ //num2는 매개변수
    const num1=10; //지역변수
    console.log(num1+num2);
}
console.log(num1);
sum(50); //const num2=50 
//60출력

---

return

return은 함수의 제일 마지막에 사용하여 값을 다시 전달하는 역할을 한다. 필수 아님!

function sumFunc(num2){ //num2는 매개변수
    const num1=11;
    const result=num1 + num2 //지역변수
    console.log(result);
    
    return result;// return 결과값 전달
}
sumFunc(50); //num2=50

let addFunc = sumFunc(50);
console.log(addFunc);

---

함수 표현식

변수 안에다가 함수를 넣는다. 함수의 이름이 선언되지 않아 익명 함수라고도 한다.
따라서, 코드에 도달하여 함수가 생성된 후에야 sayHello() 함수를 사용 가능하다.

let sayHello = function(){
  console.log('Hello');

sayHello(); //Hello 출력
}

---

화살표 함수(arrow function)

let add = function(num1, num2){
  return num1 + num2;
}

위의 코드에서 function을 생략하고 =>를 넣어서

let add =(num1, num2)=>{
  return num1 + num2;
}

---

번외편

예제) 사용자에게 두 상수 값을 입력받아 더하여 출력하는 함수를 선언해보자.

let addFunc=(a, b)=>{      
    const result4=a+b;
    console.log(result4);10
}
a=Number(prompt("숫자1을 입력하세요"));
b=Number(prompt("숫자2을 입력하세요"));
addFunc(a,b);

함수를 함수표현식인 화살표 함수로 선언하였기 때문에 가장 윗줄에 선언하여야 한다.
prompt() 함수는 입력을 문자열로 받기 때문에 숫자형변형을 해준다.
그래서 이때,

let addFunc=(a, b)=>{

여기에 a,b는 지역변수이고

addFunc(a,b);

여기에 a,b는 전역변수임을 구분해야 한다.

추가로 한가지 주의할 점은
력하는 함수를 선언해보자.

let addFunc=(x, y)=>{      
    const result4=x+y;

여기에서 x, y는 함수가 작성되는 동안 동일한 요소이므로 같은 변수명을 유지해야 한다.

Onclick

각각의 HTML 요소에 속성값으로 JS 함수를 연결하여 사용자가 요소를 클릭할 때 발생한다.

예시) 클릭을 누르면 페이지의 'alert'에서 'test' 멘트가 출력된다.

<div onclick=" test();">클릭</div>

    <script>
        function test(){
            alert('test') //test라는 멘트의 알림창이 뜨는 함수
        }
    </script>

• 세미콜론(;)으로 구분해서 함수를 여러개 연결할 수 있다.
  onlink ="func1();func2();func3()"