Function

이 JavaScript는 드림코딩 자바스크립트 기초강의를 보며 정리한 자료 입니다.

https://www.youtube.com/@dream-coding 

https://www.youtube.com/@dream-coding

---

 

 

펑션은 프로그램을 구성하는 기본적인 빌딩 블록이고 서브 프로그램이라고 부르기도 한다. 여러번 재사용 가능하다는 장점이 있고, 한가지의 테스크나 어떠한 값을 계산하기 위해 사용된다.

문법

문법 funcrion name(param1, param2) { body …. return; }
함수를 만들때는 한가지의 기능만 하도록 한다. 네이밍을 할 때는 동사형태로 지정한다. 네이밍이 애매한 경우 한가지 이상의 기능을 하고 있는지 생각 해 본다.

 

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

⬇️

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

Parameters

function changeName(obj) {
	obj.name = 'coder';
}

const tom = { name: 'tom' };
changeName(tom);

console.log(tom); // coder;

Default Parameters (added in ES6)

function showMessage(message, from) {
	console.log(`${message} by ${from}`);
}
console.log('Hi!'); // Hi by undefind

⬇️

function showMessage(message, from = 'tom') {
	console.log(`${message} by ${from}`);
}
console.log('Hi!');

Rest parameters (added in ES6)

// 배열 형태로 전달한다.
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('magic', 'show', 'now');

Local scope

// 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.
let globalMessage = 'global'; // global variable

function printMessage() {
	let message = 'hello'; // local variable
	console.log(message); // hello
	console.log(globalMessage); // global
	
	function printAnother() {
		console.log(message);
		let childMessage = 'hello';
	}
	console.log(childMessage); // X error
}

pringMessage();

Return a value

// 모든 펑션은 return한다. 없는 펑션은 return undefind이다. return undefind는 생략 가능하다.
function sum(a, b) {
	return a + b;
}

const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`); // sum: 3

Early return, early exit

// 조건이 맞지 않는 경우, undefind, -1인 경우 빨리 리턴하고 true를 수행하는 것이 좋다.
function upgradeUser(user) {
	if(user.point > 10) {
		// logic
	}
}

⬇️

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

Function Expression

// anonymous function 이름이 없는 펑션
const print = function () {
	console.log('print');
}
print(); // print
const printAgain = print;
printAgain(); // print

const sumAgain = sum;
console.log(sumAgain(1, 3));// 4

First-class Function
Js에서는 펑션을 변수에 할당 할 수 있고 펑션의 파라미터 값으로 넣을 수 있고, 리턴값으로 리턴이 가능하다. 그것을 가능하게 하는 것이 Function Expression 이다.
Function Declaration
선언 되기전에 사용가능 하게 호이스팅이 된다. 그러기에 주의를 요하며 function expression을 사용하는 것이 안전하다.

 

Callback Function

// 함수를 전달해서 상황에 맞게 함수를 사용하는 것을 Callback Function이라고 한다.
function randomQuiz(answer, printYes, printNo) {
	if(answer === 'love you') {
		printYes();
	} else {
		printNo();
	}
}

const printYes = function () { // anonymous function 이름이 없는 펑션
	console.log('yes!');
}

const printNo = function print() { // named function 이름이 있는 펑션
	console.log('no!');
}

Arrow Function

// anonymous function
const simplePrint = () => console.log('simplePring!');
const add = function (a,b) { return a + b; }

⬇️

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

**or**

const multiply = (a, b) => {
	return a * b;
}; // 블럭을 사용하는 경우 리턴이 있어야 한다.

IIFE: Immediately Invoked Function Expression

(function hello() {
	console.log('IIFE');
})(); 

/*
일반적으로 선언 후 hello(); 별도로 함수를 호출하지만 괄호로 묶어주면 선언과 동시에 함수가 호출 된다.
요즘은 잘 사용하지 않는다.
*/