JavaScript & Node.js

#.6 function

Haksae 2022. 1. 9. 15:34
  • 절차지향 프로그래밍(procedural language)에서는 함수가 프로그래밍에서 굉장히 중요함
  • JS는 클래스가 추가되어 객체지향 같아 보이지만, 추가된 클래스도 프로토타입 베이스로한 객체지향임
  • 그래서 자바스크립트도 여전히 절차지향 프로그래밍이기에, 함수가 중요함
  • 함수가 중요하기에 function을 sub-program이라고도 부름
  • function은 parameter를 받아서 이것들을 잘 처리하여, return 하는 것
  • 함수에는 input과 output, functions의 이름을 잘 정하는 것이 중요

1. function이란?

  • fundmental building block in the program
  • subprogram can be used multiple times
  • performs a task or calculates a value

2. functions declaration

  • function name (param1, param 2) {body... return;}
  • one function === one thing
  • naming: doSomething, command, verb
    • 변수 이름과는 다르게 동사 혹은 명령어 형태로 지어야함
  • e.g. createCardAndPoint → createCard, createPoint
    • 너무 길거나 너무 많은 비지니스 로직을 함수에 넣지 않아야함.
  • functions is object in JS
    • 자바스크립트에서 함수는 객체임.
    • 그래서 함수를 변수나 파라미터에 전달 가능. 함수 리턴도 가능
function name (para1,para2) {
	비지니스 로직 return;

// ex
function print(message) {
	console.log(message);
}
log('Hello!'); // Hello! 출력
  • 단점 : interface에서 타입을 명시해주지 않기에, 파라미터의 타입이 중요한 함수의 경우, 위와 같이 선언하면 난해해질 수 있음
  • TypeScript 에서 해당 단점을 보완
    • 타입스크립트에서는 항상 파라미터의 타입이나, 리턴 값의 타입을 명시하게 되어있음
function log (message: string): number {
	console log(message);
	return 0;
}  // string은 매개변수 타입을 정해주는 것, number는 리턴 값 타입 정해주는 것

3. parameters (매개변수)

  • primitive parameters : passed by value
    • 메모리에 밸류가 저장되어있기 때문에 값이 전달
  • object parameters : passed by reference
    • 메모리에 래퍼런스가 저장되어있기 떄문에, 레퍼런스가 전달
//ex
function changeName(obj) {
	obj.name = 'coder';
}
const haksae = {name: 'haksae'};
changeName(haksae);
console.log(haksae);

4. default parameters (added in ES6)

  • 파라미터의 디폴트 값을 지정하는 것
function showMessage(message, from) {
	console.log(`${message} by ${from}`);
}
showMessage('Hi');
// by값을 지정 안하면 undefined로 출력

//방법 : from 값을 디폴트로 지정
function showMessage(message, from = 'unknown')

5. Rest parameters (added in ES6)

  • 파라미터에 ...를 넣으면 rest parameter로 배열 형태로 전달됨
function printAll(...args) {
	for (let i = 0; i < args.length; i++) { // 배열의 순서만큼 반복
		console.log(args[i]);
	}
}
printAll('dream','coding','hak');

// for문 다른 방법
for (const arg of args) {
	console.log(arg);
}

// 배열 함수 방법
args.forEach((arg) => console.log(arg));

6. Local scope

  • 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.
  • scope 원칙은 어디서나 적용이 된다.
  • 밖에서도 보려면 클로져를 사용해야한다.

7. Return

  • 모든 함수에는 리턴 값이 있다.
  • 리턴 값이 없는 함수는 return undefined; 가 있다고 생각하면 된다.

8. Early Return, Early Exit

  • 블럭 안에서 코드를 많이 작성하면 가독성이 떨어진다.
  • 이런 경우 빨리 조건 실행문에 return을 넣어서 함수를 종료
// bad
function upgradeUser(user) {
	if (user.point > 10) {
		//long upgrade logic..
	}
}

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

9. Function Expression

  • First-class function
    • funtions are treated like any other variable
    • can be assigned as a value to variable (변수에 할당 가능)
    • can be passed as an argument to other functions (파라미터로 전달 가능)
    • can be returned by another function (리턴 값으로도 리턴 가능)
    → 이것을 가능하게 하는 것이 Function Expression
  • annonymous functions : 함수에 이름이 없는 함수
  • named functions : 이름이 있는 함수
    • named function은 디버깅 할 때 함수 이름이 나오는 특징
    • 혹은 함수 안에 또 다른 함수를 호출 할 수 있음(디컬젼)
  • annonymous function을 변수에 할당하여 사용 가능
const print = function () { //annnonymous function
	console.log('print');
};
print();
const printAgain = print; // function을 할당
console.log(printAgain(1,3));
  • hoisting
    • function declaration도 var처럼 호이스팅이 된다.
    • function expression으로 선언된 함수는 호이스팅이 안된다.

10. Callback function using function expression

function name (para1, para2(func1), para3(func2))
// para1에는 입력값, para2,3은 1에 대한 콜백 함수 값을 넣는다.

//ex
function randomQuiz (answer, printYes, printNO) {
	if (answer === 'love you') {
		printYes();
		} else {
		printNO();
		}
}

const printYes = function () { // annonymous function
	console.log('yes');
};
const printNO = function print() { // named function
	console.log('no');
};

randomQuiz('wrong', printYes, printNO);
randomQuiz('love you', printYes, printNO);
  • callback function : 위의 para1에 대한 반응으로 para에 전달된 함수

11. Arrow Function

  • 항상 annonymous functions으로, 함수를 간결하게 만들어주는 함수
//일반적인 annonymous function
const simplePrint = function () {
	console.log('simplePrint');
};
// Arrow function
const simplePrint = () => console.log('simplePrint');
 
//ex add
const add = function (a, b) {
	return a + b;
};

const add = (a,b) => a + b;

// 블럭이 필요한 경우
const simpleMultiply = (a, b) => {
	// logic
	return a * b;
};

12. IIFE (Immediately Invoked Function Expression)

  • 함수 선언과 동시에 호출하는 방법
  • 최근에 잘 쓰이지는 않지만 유용
function hello() {
	console.log('IIFE');
}) ();

 

출처 : 드림코딩엘리 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w