[JavaScript] 3. 함수

1. 함수

 

• 절차적인 프로그램에선 함수가 중요
• sub-program (함수 여러 번 사용 가능)
• 작업 수행 및 값을 계산
• 자바스크립트에서는 함수를 object로 간주하기때문에 변수를 할당 할 수도 있고 매개변수(parameter) 전달, 함수를 리턴 할수도 있다.
• 함수는 변수처럼 취급이 가능하다
• 변수에 값으로 할당 가능
• 다른 함수에 인수로 전달 가능
• 다른 함수에 의해 반환 가능

 

function name(param1, param2) {

	body...
    return ;
//하나의 함수에는 하나의 기능만 추가하자!
}

function print() {
	console.log('Hello');
}

print();
//Hello 밖에 출력을 못하는 쓸모없는 함수

function print(message) {
	console.log('message');
}

print('Hello@@');
//print( )괄호 안에 있는 건 매개변수이며
//출력 할때 print('Hello@@')라고 했을때 그 매개변수 자리에 Hello@@ 들어간다.
//그래서 위의 함수보단 더 유용한 함수가 된다~

 

자바스크립트 vs 타입스크립트

 

js

function log(msg) {
    console.log(msg);
    return 0;
}

log(`Hello`);
//자바스크립트는 타입이 없기 때문에 명확하지 않다.

 

ts

 

// TS
function log(msg: string): number {
    console.log(msg);
    return 0;
    
//지금은 배우지 않았지만 그냥 비교!
//타입스크립트는 명확하게 타입을 알 수 있어 굿굿

 

 

1. parameter(매개변수)

 

paramter와 argument 차이

 

parameter는 매개변수 Variable 인자 (parameter = 매개변수 = 변수)

들어오는 인자가 매개체 역할을 하기 때문에 매개변수라고 부름

 

argument는 전달인자 value 인수 (argument = 전달인자 = 값)

함수를 호출할 때 값을 전달한다고 해서 전달인자라고 부름

 

 

parameter는 값,참조로 전달 할 수 있다.

 

function changeName(obj) {
	obj.name = `coder`;
}
const ellie = { name: `ellie` };
changeName(ellie);
console.log(ellie); // > {name: "coder"}

 

• Default parameters (기본 매개 변수)

function showMessage(msg, from = `unknown`) {
  console.log(`${msg} by ${from}`);
}
showMessage(`Hi!!`);

//파라미터의 기본값을 지정해준다.

 

• Rest parameters (ES6에서부터 추가됨)

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]); // > dream, coding, ellie: 순서대로 출력됨.
  }
}
printAll(`dream`, `coding`, `ellie`);

//배열 인자를 받을때 유용하다

 

매개변수를 보면 ...이 있는데 이것이 rest 매개변수

dream, ellie, good의 인자를 받는데 3개의 값이 담겨져 있는 배열로  printAll에 전달

그리고 for문으로 하나씩 출력

---

 

함수에서는 Return 있다.

 

리턴이 없으면 알아서 undefined을 리턴한다.

 

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // > 3
console.log(result)

//매개변수 a,b에 1,2를 넣고 리턴하면 1+2 그 값이 result에 들어간다.
//그리고 출력

 

여기서, 중요!

 

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

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

bad 부분은 괄호 안에 로직이 많으면 가독성이 떨어진다. 

good부분은 조건이 틀릴때 빠르게 리턴 하고 괄호 밖에 로직을 작성하면 가독성이 좋다.

 

 

2. 함수 표현(function expression)

 

• 함수 선언은 정의 된 것보다 더 일찍 호출 될 수 있습니다. (호이스팅됨)
• 함수 표현식은 실행이 도달하면 생성됩니다. (정상적)

여기서 호이스팅이란?

1. 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 범위의 최상단엔 선언하는 것
2. var변수 선언과 함수선언문에서만 호이스팅이 일어난다.
3. var변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
4. let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
5. 함수가 호출되기도 전에 위에 작성을 해도 호출이 된다.

 

// print(); // > error : 당연히 선언 전에 호출하니 error 발생!
const print = function () { // 함수를 변수에 할당
	// 익명 function
  console.log(`print`);
};
print(); // > print
const print2 = print; // print2 변수는 print 변수와 같은 메모리 주소의 function을 바라보고 있음
print2(); // > print

// console.log(sum(1, 3)); // > 4 : 함수 호이스팅되서 error 발생 안함.
function sum(a, b) { // 함수 선언식
  return a + b;
}
const sum2 = sum; // 선언한 함수도 변수에 할당 쌉가능
console.log(sum2(1, 3)); // > 4

 

• 콜백함수(callback function)

 

파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수

콜백함수는 '익명함수'를 쓴다. 어차피 내부에 실행되기 때문에 

이름을 붙이지 않아도 된다.

function randomQuiz(answer, printYes, printNo) {
  if (answer === `love you`) {
    printYes();
  } else {
    printNo();
  }
}

// anonymous function
const printYes = function () {
  console.log(`yes!`);
};

// named function
// 스택 추적 디버깅 할 때 더 나은 방법
// 재귀
const printNo = function print() {
  console.log(`no!`);
  // print(); // 재귀
};

randomQuiz(`wrong`, printYes, printNo);
randomQuiz(`love you`, printYes, printNo);

 

 

• Arrow(화살표) function

항상 익명

함수를 간결하게 만들어준다.

배열/리스트에서 효과적이다.

 

const simplePrint = () => console.log(`simple~!!`);
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
	// do something more
	return a * b;
};