JavaScript Functions

Functions (기능,함수)

우리는 어떠한 기능을 수행하는 코드를 개발할 때 여러번 반복되는 기능들을 구현합니다.

예를들어 방문자가 로그인, 로그아웃 및 여러곳에서 메시지를 표현 해야 합니다. 이러한 메시지를 표시하는 기능을 

반복하지 않고 여러번 호출 할 수 있습니다.

 

이미 자바스크립트에는 메시지를 보여주는 내장함수가 포함되어 있습니다. alert(message),prompt(message,default),

confirm(question) 그러나 이런 함수는 직접 기능을 구현할 수 있습니다.

 

사이트 가시면 자바스크립트를 직접 실습 하면서 배울수 있습니다.

https://plnkr.co/edit/

Plunker

함수 선언

함수는 function 키워드 선언후 함수의 이름 매개괄호 순으로 함수를 만듭니다.

키워드 / 함수명 / 매개괄호(매개변수)
function showMessage(parameters){
	기능 구현
	alert('Hello everyone!');
}

hello everyone 메시지를 표시하는 함수를 만들었습니다. 위의 함수를 호출하는 방법은 매우 간단합니다.

showMessage();
showMessage();

함수명을 선언하면 함수 안에 alert 함수가 실행이 됩니다.

 

지역 변수

함수 안에서 선언된 변수는 해당 함수 안에서만 사용할 수 있습니다.

function showMessage(){
	let message = "Hello, I'm Javascript!";
    
    alert( message );
}

// Hello, I'm JavaScript! 실행 후
showMessage();

// error 
alert( message );

외부 변수

함수는 외부의 변수에도 접근 할 수 있습니다.

let userName = 'John';

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

// Hello, John
showMessage(); 

외부 변수는 함수 내에서 수정도 가능합니다.

let userName = 'John';

function showMessage() {
  userName = "Bob"; // 수정된 변수 값

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

// 아직 변경되지 않은 John이 호출 됩니다.
alert( userName );

// 함수가 실행되면서 userName 이 Bob인 메시지가 호출됩니다.
showMessage();

// 함수에서 userName 은 Bob으로 수정되었기 때문에 Bob이 호출됩니다.
alert( userName );

외부 변수는 로컬(함수내부) 변수가 없는 경우에만 사용됩니다.

동일한 이름의 변수가 함수 내에서 선언 되면 외부 변수를 무시하고 내부의 변수를 사용합니다.

// 외부 변수
let userName = 'John';

function showMessage() {
  // 내부 변수
  let userName = "Bob";

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수안의 userName 인 Bob을 호출 
showMessage();

 // 외부에 선언된 John을 가져옵니다.
alert( userName );

실습 코드에서 외부에 전체의 영역에 선언 된 변수를 global 변수라고 합니다.

전역 변수는 모든 함수에서 사용할 수 있습니다.(내부에서 같은 변수명으로 선언하지 않은 경우)

하지만 전역변수는 최소화 또는 사용하지 않는 것이 좋습니다. 때로는 프로젝트 변하지않는 고유 데이터를 저장 하는데 유용 할 수 있습니다.

매개 변수

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

 

매개변수는 괄호 안에 순서에 따라 ,를 사용하여 분류 합니다. 첫번째 from위치에 Ann 두번째 text위치에 Hello 순서에 맞추어 데이터를 전달할 수 있습니다.

// arguments: from, text 
function showMessage(from, text) { 
  alert(from + ': ' + text);
}

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

밑의 함수 같은 경우는 매개변수의 from 과 함수내부의 from은 서로 다른 변수입니다.

내부의 함수에 변수 from을 선언하고 그 안에 담아주는 from은 매개변수의 from데이터 입니다.

function showMessage(from, text) {

  from = '*' + from + '*';

  alert( from + ': ' + text );
}

let from = "Ann";

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

 // Ann
alert( from );

기본값

매개 변수를 전달하지 않으면 값은 undefined 입니다. 예를 들어 위에서 선언한 함수 showMessage(from,text)는 단일 인수로 호출 할 수 있습니다.

showMessage("Ann");

위의 호출은 오류가 아닙니다. 위와 같은 방법으로 호출을 하면 "Ann : undefined"라고 호출 됩니다. text가 없기 때문에

text === undefined 라고 가정합니다.

 

이런경우 기본값을 지정하여 사용할 수 있습니다.

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

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

text 매개변수는 text 값이 전달되지 않으면 "no next given" 이라는 문자열을 호출 합니다.

 

매개변수 안에 기본값을 지정하는 방식을 지원하지 않는 버전에서는 아래와 같이 사용할 수 있습니다.

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }

  alert( from + ": " + text );
}

function showMessage(from, text) {
  // if text is falsy then text gets the "default" value
  text = text || 'no text given';
  ...
}

 

값 반환

함수는 결과적으로 호출 코드에 값을 다시 반환 할 수 있습니다.

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

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

a와 b를 더해 그 결과값을 반환하는 함수 입니다. return은 함수 어느 곳에 작성할 수 있습니다. 실행이 도달하면 함수가 중지되고 값이 호출 코드로 (result) 반환합니다.

return은 단일 기능에 여러번 작성할 수 있습니다.

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('Do you have permission from your parents?');
  }
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
  alert( 'Access granted' );
} else {
  alert( 'Access denied' );
}

return 값 없이 사용할 수 있습니다. 이로 인해 기능이 즉시 종료 됩니다.

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "Showing you the movie" ); // (*)
  // ...
}

함수에 return이 없거나 return에 값이 없는 함수

function doNothing() { /* empty */ }

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

function doNothing() {
  return;
}

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

 

return과 값 사이에 줄 바꿈을 추가하지 마십시오

 

값의 표현식이 긴 return의 경우 다음과 같이 다음줄에 배치하려고 할 수 있습니다. 

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

 

세미 콜론은 코드의 마지막을 나타내므로 빈값이 반환 됩니다.

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(..)     // shows a message
getAge(..)          // returns the age (gets it somehow)
calcSum(..)         // calculates a sum and returns the result
createForm(..)      // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

접두어가 있으면 함수 이름을 한눈에 파악하여 어떤 종류의 작업을 수행하고 어떤 종류의 값을 반환하는지 이해할 수 있습니다.