[JS] function 함수

중학생 시절, 함수를 처음 배우는 시간에 하필 결석했는데 크게 신경 안쓰고 지나감.,,

그래서 함수를 제대로 알지 못했기 때문에 무서워했었드아,,ㅎㅎ
(혹시 해당 글에 잘못 된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다 ㅎㅎ)

 

 

🤔 프로그래밍에서의 함수란?

• 특정한 작업을 수행하는 코드를 의미함.
  미리 함수를 만들어두고 원할 때 실행해서 정해진 작업을 수행한다.
  
• 함수는 수납상자와 같고, 영어로는 function,
  객체를 배우게 된다면 그곳에선 method라고도 부른다.

🤔 함수는 입력과 출력으로 이루어져있다.

• 입력을 parameter(매개변수, 인자)와 argument(인수)
• 출력을 return 이라 한다.

parameter → formal parameter (공식적인, 정규 적인 매개변수)
argument → actual parameter (실제의, 사실상의 매개변수)

 

 

🌳 함수 만드는 방법

• 함수는 이름을 붙여줘야지 사용 가능함.

   변수와 마찬가지로 함수를 만드는 행위 → 함수를 선언한다(declare), 함수 선언문

 

• 함수를 선언하고나서 사용하려면 이름을 불러줘야 한다 → 함수 호출한다(call), 함수 실행문

(* if문, for문, while문, 함수 선언문의 중괄호 뒤에는 세미콜론을 안붙여도 된다.)

// 1. 함수 선언문(function 키워드 뒤에 함수 이름을 넣는 방식)
//a라는 이름의 함수
function a() {} // 함수 선언
a();            // 함수 호출(함수 실행문)


// 2. 함수 표현식(변수 또는 상수에 함수를 대입하는 방식)
// 익명함수를 만들고 변수 b에 담았음
const b = function() {};


// 3. 화살표 함수
// 익명함수를 만들고 변수 c에 담았음
const c = () => {};

 

 

🌳 함수를 만들면 좋은 이유

• 작성한 함수는 얼마든지 다시 사용 가능하고,
  반복적인 수행이 가능하다(재사용에 용이)
  
  
• 함수를 기능별로 작성하면, 비슷한 기능들만 모을 수 있다(응집력 향상)
  
  
• 코드의 일정 부분을 별도의 논리적 개념으로 독립화 할수 있다
  (논리적 이해 증가)
  
  
• 오류나 에러의 수정이 쉬어진다(안정성 향상)
• 반복되고 중복되는 문장을 밖으로 빼내 함수화 함으로써
  소스코드를 간결하게 할 수 있다(복잡성 감소화)

 

🌳 return 문

1. 함수를 호출하면 나오는 값으로 반환값이라고 함.

2. return문을 사용하지 않는다면, 항상 함수 실행문 끝에 return undefined가 있다고 생각하면 됨.

3. return문은 함수의 실행을 중간에 멈춤(return문이 실행되면, 그 아래의 코드는 실행되지 않는다)

// 아래 두개의 함수는 동일한 반환값을 가진다.
function a(){}

function a(){
    return undefined;
}


// 아래 두개의 함수는 동일한 반환값을 가진다.
function b(){
    console.log('b');
}

function b(){
    console.log('b');
    return undefined;
}

 

 

🌳 매개변수와 인수

multiply이라는 함수 선언문의 a, b 자리에 

2, 3 의 값이 들어가서 계산되어 나온다.

 

파라미터인 a, b는 multifly 함수를 호출 했을 때,

2, 3 을 넣을 수 있게 만들어주는 틀 같은 존재?!

 

여기 내가 만든 multifly 함수에서는 a, b(parameter)는 2, 3('argument')의 값을 가짐.

a, b(parameter) = 2, 3('argument') 와 같고, 실제로 parameter는 변수와 같은 특성을 가짐.

 

함수가 하나의 매개변수와 하나의 인수만 가지는 것은 아니다.

각각 여러개를 가질 수도 있고, 매개변수와 인수의 개수가 일치하지 않아도 됨.

 

• 매개체(medium) 뜻 : 둘 사이의 어떤 일을 맺어주는 것(둘 사이에서 양편의 관계를 맺어 줌)

• 매개변수(parameter) 뜻 : 함수를 정의할 때 사용되는 변수를 의미 함(인수에 사용되는 값을 담는 틀 정도라고 생각하면 되려나,,?)

  (인수에 있는 값(실질적 값)이 함수 호출 시, 매개변수에 담겨 해당 함수의 수식에 피연산자로 사용되어 계산됨)

• 인수(argument) 뜻 : 함수가 호출될 때 매개변수에 실제로 담기는 값을 의미 함.

function pizza(parameter){
    console.log(parameter);
}
pizza('argument');  // argument



function multiply(a, b){
    return a * b;
}
multiply(2, 3);    // 2 * 3 = 6

 

 

🌳 매개변수와 인수의 개수가 일치하지 않을 때

// 매개변수보다 인수가 적을 때
function fruits(a, b, c){  // 매개변수 3개, 인수가 2개
    console.log(a, b, c);
}
// 매개변수 c는 대응되는 인수가 없기 때문에 undefined를 반환한다.
fruits('apple', 'banana'); // apple, banana, undefined



// 인수보다 매개변수가 적을 때
function fruits(a, b){  // 매개변수 2개, 인수가 3개
    console.log(a, b);
}
// orage는 대응되는 매개변수가 없기 때문에 사용되지 않는다
fruits('apple', 'banana', 'orange'); // apple, banana

* 만약 인수가 몇 개 들어있는지 궁금하다면, console.log(arguments); 로 arguments를 출력해서 호출 시 넣었던 인수 목록을 볼 수 있다.
(단, function 키워드로 선언 한 함수만 호출 가능)

 

 

 

🤔 순수함수

하나의 목적을 잘 표현해 내는 함수를 순수 함수라고 하며,

자신의 매개변수나 내부 변수, 상수만 사용하는 함수를 의미한다.

 

 

 

 

 

 

 

 

 

 

📚 참고 자료

• 함수 사용의 장점

• mdn

• 생활코딩

• Let's Get It 자바스크립트 프로그래밍(제로초)