[JavaScript] function

함수

함수는 프로그램을 구성하는 주요 '구성 요소(building block)' 입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출할 수 있습니다.

지역변수

함수 내에서 선언한 변수인 지역 변수 (local variable)는 함수 안에서만 접근할 수 있습니다.

function showMessage(){
let message = "안녕하세요"; //지역변수
alert(message)
}

showMessage() // 안녕하세요
alert(message) // message is not defined

외부변수

함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있습니다.

let userName = 'john'

function showMessage(){
let meassage = 'hi' + userName
alert(message);
}

showMessage() // hi john

매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다.

function showMessage(from, text) {
alert( from + text);
}
showMessage('ann','hello') // ann hello

기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined가 됩니다.

function showMessage(from, text="no text given"){
alert(from + ":" + text)
}
showMessage("ann") // ann: no text given

text값을 전달 받지 못해도 undefined 대신 기본값 "no text given"이 할당됩니다.

기본값 설정은 이러한 방법도 있습니다.

function showMessage(text) {
  if (text === undefined) {
    text = '빈 문자열';
  }
  alert(text);
}
showMessage(); // 빈 문자열

함수 선언문 and 함수 표현식

함수 선언문

함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.

function sum(a,b){
return a+b;
}

함수 표현식

함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다.

let sum = function(a,b){
return a+b;
}

✅ 첫번 째 차이 : 위에 작성을 보면 알 수 있듯이 문법!

✅ 두번 째 차이 : 자바스크립트 엔진이 언제 함수를 생성하는지에 있습니다.

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

함수 선언문, sayHi는 스크립트 실행 준비 단계에서 생성되기 때문에, 내 어디에서든 접근 가능합니다.

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

그러나 함수 표현식으로 정희함 함수는 함수가 선언되기 전에 접근 불가합니다.

sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

✅ 세번 째 차이 : 스코프입니다.

엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.