함수(Function)

1. 함수 선언문 (Function Declaration)

function 키워드, 함수이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있다. 아래 함수에는 매개 변수가 없는데, 만약 여러개 있다면 각 매개변수를 콤마로 구분해준다.

function showMessage() {
  alert('hi!');
}

2. 지역 변수(local variable)

함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근 할 수 있다.
ex)

function showMessage(){
  let message = 'hi!'; // local variable
  alret(message);
}
showMessage(); // hi!
alert(message) // ReferenceError : message is not defined.

3. 전역 변수

• 함수 내부에서 함수 외부의 변수인 전역 변수에 접근할 수 있다.

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

showMessage(); // Hello, John

• 함수에서 전역 변수에 접근하는것뿐 아니라, 수정도 할 수 있다.

let userName= 'John';
function showMessage() {
  userName = 'Bob' // 전역 변수를 수정
  let message = 'Hello, ' + userName;
  alert(message);
}

alert(userName); // 함수 호출 전이므로 John이 출력됨

showMessage(); // Hello, John

alert(userName); // 함수에 의해 Bob으로 값이 바뀜

• 전역 변수는 지역 변수가 없는 경우에만 사용 할 수 있다.
  함수 내부에 전역 변수와 동일한 이름을 가진 변수가 선언되어있다면, 내부 변수는 전역 변수를 가린다.

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

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

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않는다. 따라서 값이 변경되지 않고, John이 출력 된다.

전역변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에 접근 할 수 있다. 하지만 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는것이 유용한 경우도 있다.

4. 매개변수(parameter)

매개변수를 이용하면 임의의 데이터를 함수 안에 전달 가능하다.

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

showMessage('Jin', 'Hi!'); // Jin: Hi!
showMessage('Jin', "What's up?"); // Jin: What's up?

기본값

기본값 설정 방법 1

매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다.
예를 들어 위의 코드에서 showMessage('Ahn'); 을 입력하면 에러가 발생하지 않고 Ahn: undefined가 출력 된다. 이 때, undefined 값이 되지 않게 하려면 기값을 설정해주면 된다.

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

showMessage('Ahn'); // Ahn: no text given

기본값 설정 방법2

가끔 함수 선언부에서 매개변수 기본값을 설정하는것 대신 함수가 실행되는 도중에 기본값을 설정하는게 논리에 맞는경우가 생기기도 한다.

• 매개변수를 undefined와 비교해 함수 호출 시 매개변수가 생략되었는지를 확인한다.
• if문 사용
• || 논리 연산자 사용
• null 사용

// 1. if문
function showMessage(text){
  if (text === undefined){
    text = 'empty';
  }
  alert(text);
}

showMessage(); // empty


// 2. ||

function showMessage(text){
  text = text || 'empty';
  ...
}
  
// 3. null

function showCount(count){
  alert(count ?? 'unknown');
}
  
showCount(0); //0
showCount(null); // unknown
showcount(); // unknown

5. 반환 값

함수를 호출 했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있다. 이 특정 값을 반환 값이라고 부른다.

return은 함수 내 어디서든 사용이 가능하다. 실행 흐름이 지시자 return을 만나면 함수 실행은 즉시 중단 되고 함수를 호출한 곳에 값을 반환한다. 또 함수 하나에 여러개의 return문이 올 수 있다.

function checkAge(age){
  if ( age >= 18 ){
    return true;
  } else {
    return confirm('are you sure?');
  }
}

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

if ( checkAge(age) ){
  alert('Good');
} else{
  alert('Nope');
}

• return문이 없거나 return 지시자만 있는 경우에 undefined를 반환한다.

function doNothin() {
  return;
}

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

• return 지시문은 return문 끝에 세미콜론을 자동으로 넣기 때문에 여러줄을 작성 할 때는 아래와 같이 작성을 해야된다

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

6. 함수 이름 짓기

함수 이름은 가능한 간결하고 명확해야 한다. 함수가 어떤 동작을 하는지 설명 할 수 있도록. 코드를 읽는 사람이 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

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

• get - 값을 반환 함
• calc - 무언가를 계산함
• create - 무언가를 생성함
• check - 무언가를 확인하고 불린값을 반환함

함수는 동작 하나만 담당하는것이 좋다.

함수는 함수 이름에 언급되어 있는 동작을 정확히 수행해야 한다.
속한 팀에서 접두어 의미를 재합의 하여 함수를 만들 수도 있지만, 접두어를 사용하여 함수 이름을 지을때는 해당 접두어에 어떤 의미가 있는지 잘 이해해야 한다.

함수 == 주석

함수는 간결하고, 한 가지 기능만 수행할 수 있게 만들어야 한다.
함수가 길어지면 함수를 잘게 쪼갤 때가 되었다는 신호!

함수를 간결하게 만들면 테스트와 디버깅이 쉬워지고 함수 그 자체로 주석의 역할까지 한다!

// 1번
function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {
    for (let j = 2; j < i; j++ ) {
      if (i % j ==0) continue nextPrime;
    }
    
    alert(i); // 소수
  }
}

// 2번
function showPrimes(n) {
  
  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;
    
    alert(i); // 소수
  }
}

function isPrime(n){
  for (let i ==2; i < n; i++) {
    if (n % i ==0) return false;
  }
  return true;
}

두번째가 훨씬 더 이해하기 쉽고 가독성이 높다. isPrime 함수 이름을 보고 해당 함수가 소수여부를 검증하는 동작을 한다는것을 알 수 있다. 이렇게 이름만 보고 어떤 동작을 하는지 알 수 있는 코드를 자기 설명적(self-describing)코드 라고 한다.

자료 출처 : https://ko.javascript.info