함수의 선언

1. 함수 선언 (Function declaration)

function name(param1, param2) { body ... return; }
  • one function === one thing : 하나의 함수는 한 가지의 일만 하도록 만들어야 함

  • naming: do something / command / verb : 명령/동사의 형태로 이름을 지정해야 함

  • function is object in JS : 자바스크립트에서 함수는 객체임

function printHello() {
  console.log('Hello');
}
printHello(); //Hello

function log(message) {
  console.log(message);
}
log('Hello@'); //Hello@
log(1234); //1234

First-class function

함수는 변수에 할당 할 수도 있고, parameter로 전달이 되고 함수를 return할 수도 있음

2. 매개변수(Parameters) & 인자(Argument)

  • 매개변수는 함수를 선언할 때 주는 값

  • 인자는 함수를 호출할 때 입력하는 실제 값 함수가 호출될 때, 값을 전달 받아 매개변수 값이 정의됨

// premitive parameters: passed by value
// object parameters: passed by reference
function changeName(obj) {
  obj.name = 'coder';
}
const ellie = {name: 'ellie'};
changeName(ellie);
console.log(ellie); // {name: 'coder'}
//object는 reference로 전달되기 때문에 
//함수안에서 object값을 변경하게 되면 그 변경사항이 그대로 메모리에 전달됨

3. 기본 매개변수 값 설정 (Default parameters + ES6)

// Default parameters (added in ES6)
function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // Hi! by unknown

4. 나머지 매개변수 (Rest parameters + ES6)

( ... parameter) : 세 개의 점을 매개변수의 앞에 작성해 정의 함 함수에 전달된 인자의 목록을 배열 형태로 전달

function printAll (...args) {
  for(let i = 0; i <args.length; i++) {
    console.log(args[i]);
  }

  for (const arg of args) {
    console.log(arg);
  }  

  args.forEach(arg) => console.log(arg);
}
printAll('dream', 'coding', 'ellie');
//dream, coding, ellie

" function is object in JS "

선언한 함수 뒤에 . 을 붙이면 함수가 Object로 전환 되며, 속성값을 확인 할 수 있음

5. 함수의 범위 : Global scope & Local scope

Scope : 변수에 접근하거나 참조할 수 있는 위치를 정의하는 것

  • Global scope (전역 스코프)

    변수가 전역 범위에 선언된 경우로, 어떤 블록에서도 접근이 가능 이렇게 선언된 변수 = global variable : 전역변수

  • Local scope (지역 스코프)

    블록 내부에 선언된 경우로, 내부에서만 사용이 가능한 변수 이렇게 선언된 변수 = local variable : 지역변수

" 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다! "

let globalMessage = 'global'; // global variable : 전역변수
function printMessage() { // printMessage()는 내부 함수이며, 클로저
  let message = 'hello'; // local variable : 지역변수
  console.log(message);
  console.log(globalMessage);
  function printAnother() {
    console.log(message);
    let childMessage = 'hello';
  }
}
printMessage();
// console.log(Message); // error
//closure 와 관련이 있음 //closure : 어떤 데이터와 그 데이터를 조작하는 함수를 연관시켜 줌
page클로저

6. 리턴 함수 (Return)

  • 함수의 결과를 얻을 수 있게 하기 위해서 값을 반환하는데 사용

  • 지역변수를 알 수 있는데 사용

  • 현재 진행 중인 함수를 중지할 수 있음

// Return a value
function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); 
console.log(`sum: ${sum(1, 2)}`); // sum: 3

6-1. Early return, early exit

// bad
 function upgradeUser(user) {
   if (user.point > 10) {
   //long upgrade logic...
   }
 }

// good
function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }
  // long upgrade logic...
}

return undefined생략 될 수도 있음

Last updated