함수 선언

함수 선언 방식을 이용하면 함수를 만들 수 있습니다.

function name(parameters) {

... body ...

}

예시

function showMessage() {

  alert('hiiiii!');
}

showMessage();

지역 변수

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

function showMessage(){
 let message = 'hi!!!';
  
  alert( message );
}

showMessage();

alert( message );// ReferenceError! (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

외부 변수

함수 내부에서 함수 외부 변수인 외부 변수에 접근할 수 있습니다.

let userName = 'Jimmy';

function showMessage(){
	let message = 'Hello,' + userName;
  alert(message);
}

showMessage();// Hello, Jimmy

접근뿐만 아니라 수정도 가능합니다.

let userName = 'hey-ho';

function showMessage(){
	userName = 'Bob';// 외부변수 수정
  
   let message = 'Hello,' + userName;
  	alert(message);
  

}

alert( userName );  //hey-ho 출력

show Message();

alert( userName); //Bob 출력
 

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있습니다.
함수 내부에 외부 변수와 똑같은 이름의 지역 변수가 있으면 내부 변수 우선입니다!
외부 변수의 값은 영향을 받지 않습니다.

let userName = 'hey-ho';

function showMessage(){
	let userName = 'John'; //같은 이름을 가진 지역 변수
  	let message = 'Hello,' + userName; // John
  	alert(message);

}

showMessage(); //내부 변수만 영향을 받습니다.

alert( userName); // 함수 외부변수인 'hey-ho'를 출력합니다.

전역 변수

외부 선언된 변수는 전역변수라 부릅니다 모든 함수에 접근할 수 있습니다.

매개 변수

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

예시

function showMessage(from, text) {
	alert(from + ": " + text);
}

showMessage('Ann', 'Hello!');// Ann : Hello!
showMessage('Ann', "What's up?"); // Ann : What's up?

function showMessage(from, text) {
 from = '*' + from +'*';
  alert(from + ': '+ text );
}

let from = "Ann";

showMessage(from,"Hello"); // *Ann* Hello

alert(from); // Ann

기본값

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

예시

showMessage("Ann");

text엔 undefiend 가 할당 됩니다."Ann: undefined"가 출력됩니다.

기본값을 문자열로 설정하기

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

showMessage("Ann"); // Ann: no text given

기본값을 복잡한 표현식으로 설정하기!

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

매개변수 기본값을 설정할 수 있는 다른 방법

// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text){
	if(text === undefined){
    	text = '빈 문자열';
    }
  alert(text);
}

showMessage();//빈 문자열

// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
  text = text || '빈 문자열';
  ...
}

또한 nullish 병합 연산자 ??를 사용하면 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리 할수 있습니다.

// count 가 넘어오지 않으면 unknown을 출력하는 함수
function showCount(count){
	alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); //unknown
showCount(); //unknown

반환값

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

let result = sum(1,2);
alert( result); // 3

return 지시자는 함수 내 어디서든 사용할수 있습니다.

function checkAge(age) {
	if (age >= 18){
    	return true;
    }
  	else{
    	return confirm("보호자의 동의를 받으셨나요?");
    }
}


let age = prompt('나이를 알려주세요',18);

if( checkAge(age) ) {
	alert('access 성공!');
	}
else {
	alert('접속 차단');
	}

return만 명시하는 경우 함수가 즉시 종료됩니다.

fucntion showMovie(){
	if ( !checkAge(age)){
    return;
    }
  
  alert('영화 상영');
}

return문이 없는 함수와 return지시자만 있는 함수는 undefined를 반환합니다.

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

⚠ return과 값 사이에 절대 줄을 삽입하지 마세요.

return
 (some + long + expression + or + whatever * f(a) + f(b))

자바스크립트는 return문 끝에 세미클론을 자동으로 넣기 때문에 이렇게 작성하면 안됩니다. 위코드는 아래와 같이 동작합니다.

return;
   (some + long + expression + or + whatever * f(a) + f(b))

따라서 다음과 같이 작성 해주셔야 합니다.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

함수이름짓기

함수가 동작을 하는지 축약해서 설명해 주는 동사를 접두어로 붙여 함수 이름을 만드는게 관습입니다.

• "show"로 시작하는 함수는 대개 무언가를 보여주는 함수입니다.
• "get…" – 값을 반환함
• "calc…" – 무언가를 계산함
• "create…" – 무언가를 생성함
• "check…" – 무언가를 확인하고 불린값을 반환함

예시)

showMessage(..)     // 메시지를 보여줌
getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..)         // 합계를 계산하고 그 결과를 반환함
createForm(..)      // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

✅함수는 동작 하나만 담당해야합니다.

그 이외의 동작은 수행하면 안됩니다. 두가지 동작을 한다면 분리시켜 독립된 함수로 나눠야 합니다.
안좋은 예시

• getAge 함수는 나이를 얻어오는 동작 수행, alert 창에 나이를 출력해 주는 동작까지 포함
• createForm 함수는 form을 만들고 이를 반환하는 동작 수행, form을 문서에 추가하는 동작
• checkPermission 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작 수행, 승인 여부를 보여주는 메시지를 띄우는 동작