함수(function)란 여러 개의 자바스크립트 명령들을 하나의 이름으로 묶은 단위를 말해.
그래서 함수 이름을 호출하면 그 함수 안에 들어 있는 명령들이 차례로 실행되는 거지.
그렇다고 함수 안에 명령들이 꼭 여러 개 있을 필요는 없어. 1개 만 있으도 함수는 함수야.
그래서 자바스크립트의 명령 자체를 함수로 부르기도 해.

우선 함수의 가장 기본적인 형식은 다음과 같아.
여기서 ( ) 안의 인자(Parameter)는 없어도 상관없어. 인자는 함수에 어떤 값을 넘겨 줄 필요가 있을 때 사용해.
역시 간단한 예제를 만들어 보면 금방 이해 될거야.

js.html 을 아래 코드로 교체하고 실행해봐.

<p>너의 이름은? <button onclick="message()">확인</button></p>
<script>
function message() {
    alert('홍길동');
}    
</script>

message() 라는 함수를 만들어서 사용했어.
그런데 이 message() 함수 안의 자바스크립 명령은 alert('홍길동') 하나 뿐이니 지난번과 똑같이 '홍길동'만 보여 주겠지?
어쨌든 여러분이 만든 함수가 작동을 하는 것을 확인할 수 있어.

이번에는 인자를 넣어서 한 번 해보자구.
위 코드를 아래와 같이 수정해 봐.

<p>너의 이름은? <button onclick="message('임꺽정')">확인</button></p>
<script>
function message(name) {
    alert(name);
}    
</script>

message() 함수 안에 name 이라는 인자를 넣어서 만들었어.
이때 이 name 은 변수처럼 작동하고 변수값은 이 함수를 호출할 때 넣어주는 값이야.
실행해 보면 '임꺽정' 메시지를 보여주지?

함수 안에서 변수를 생성해서 사용할 수도 있어.
코드를 다시 아래와 같이 수정해 봐.

<p>너의 이름은? <button onclick="message('임꺽정')">확인</button></p>
<script>
function message(name) {
    let sir = ' 두목';
    alert(name + sir);
}    
</script>

이제 버튼을 클릭하면 "임꺽정 두목' 로 답변하겠지?

이 함수는 자바스크립트에서 정말 많이 사용돼.
보통 어떤 작업을 하는데 자바스크립트 명령 1개로 만 작동하는 경우는 거의 없거든.
또 지금은 가장 간단한 형태의 함수만 해 보았지만 함수의 선언과 사용방법도 정말 다양해.
좀 더 자세히 알고 넘어나고 싶은 분들은 : https://ko.javascript.info/function-basics

■ 전역(Global)변수와 지역(Local)변수

여기서 잠깐 변수 얘기를 다시 해 볼께..
앞서 공부했던 let, var, const 같은 키워드를 사용해 생성한 변수, 상수들은 모두 해당 웹페이지의 어느 곳에서나 사용할 수 있는 것이었어. - 그래서 '전역(Global)변수' 라고 표현해.
그리고 바로 위에서 함수 안에서 let sir 로 sir 변수를 만들어 사용했잖아?
이건 이 함수 내에서만 사용하는 지역(Local) 변수야.

함수 밖에서 선언된 변수는 함수 안/밖 어디서나 사용할 수 있어.
그리고 함수 안에서 선언된 변수는 그 함수 안에서만 사용이 가능하고..

그렇다면 함수 밖에서 전역변수로 선언을 했는데 함수 안에서 똑같은 이름으로 다시 변수를 만들었다면?
그 경우에는 함수 안에서 선언된 변수만 독자적으로 사용되고, 밖으로 나가면 다시 전역변수가 작동하게 돼.
이름만 같지 완전 다른 변수라고 생각하면 돼.
이 점은 잘 알고 있어야 해. 초보시절에 실수를 많이 하게 되는 부분이야.
위 코드를 아래와 같이 썻다면 어떤 메시지가 나올까?

<p>너의 이름은? <button onclick="message('임꺽정')">확인</button></p>
<script>
let sir = ' 도둑놈';
function message(name) {
    let sir = ' 두목';
    alert(name + sir);
}    
</script>

함수 안에서 let sir 라는 지역변수를 다시 만들었으니 마찬가지로 '임꺽정 두목'으로 나올거야.
그러나 함수 안에 있는 let sir=' 두목'; 줄을 삭제하고 다시 실행해 보면 alert(name + sir); 라인의 sir 변수는 전역변수의 값을 받아서 '임꺽정 도둑놈' 으로 뜨겠지?