2021. 5. 14. 19:39ㆍTIL/자바스크립트
// Function
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculates a value
// 1. Function declaration
// function name(param1, param2) { body... return; }
// one function === one thing
// naming: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, createPoint
// function is object in JS
function printHello(){
console.log('Hello');
}
printHello();
function log(message){
console.log(message);
}
log('Hello!');
log(1234);
// 자바스크립트는 타입을 지정하지않아도 되기때문에 문자, 숫자 상관없이 입력이 가능하다
// 2. Parameters
// premitive parameters: passed by value
// object parameters: passed by reference
function changeName(obj) {
obj.name = 'coder';
}
const bella = { name: 'bella' };
changeName(bella);
console.log(bella);
// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown') {
console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// 4. 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('dream', 'coding', 'ellie');
// 5. Local scope
let globalMessage = 'global'; // global variable
function printMessage(){
let message = 'hello';
console.log(message); // local variable
console.log(globalMessage);
}
printMessage();
// 안에서는 보이지만 밖에서는 보이지 않는다.
// 자식함수에서는 부모함수에 속한 변수를 부를 수 있지만 부모함수에서는 자식함수에 속한 변수를 부를 수 없다
// 6. Return a value
function sum(a, b) {
return a + b;
}
const result = sum(1,2); //3
console.log(`sum: ${sum(1,2)}`);
// 7. Early return, early exit
// bad
function upgradeUser(user) {
if (user.point > 10) {
// long upgrade logic...
}
}
// good, 로직이 긴 경우 함수 안에 return을 먼저 선언해주고 그 뒤에 로직을 실행해주는 게 좋다
function upgradeUser(user) {
if (user.point <= 10){
return;
}
// long upgrade logic...
}
// First-class function
// functions are treated like any other varable
// can be assigned as a value to variable
// can be passed as an argument to other functions.
// can be returned by anotherfunction
// 1. Function expression
// a function declaration can be called earlier than it is defiend. (hoisted)
// a function expression is created when the execution reaches it.
const print = function () { // anonymous function
console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));
// 2. Callback function using function expression
function randomQuiz(answer, printYes, printNo) {
if (answer === 'love you') {
printYes();
} else {
printNo();
}
};
// anonymous function
const printYes = function () {
console.log('yes!');
};
// named function
// better debugging in debugger's stack traces
// rercursions
const printNo = function print() {
console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);
// Arrow function
// always anonymous
const simplePrint = function () {
console.log('simplePrint!');
};
// const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
//do something more
return a * b;
};
// IIFE: Immediately Invoked Function Expression
(function hello() {
console.log('IIFE');
})();
// Quiz
// function calculate(command, a, b)
// command: add, substract, divide, multiply, remainer
function calculate(command, a, b) {
switch (command) {
case 'add':
add1(a,b);
console.log(`a + b : ${add1}`);
break;
case 'substract':
substract(a,b);
console.log(`a - b : ${substract}`);
break;
case 'divide':
divide(a,b);
console.log(`a / b : ${divide}`);
break;
case 'multiply':
multiply(a,b);
console.log(`a * b : ${multiply}`);
break;
case 'remainer':
remainer(a,b);
console.log(`a % b : ${remainer}`);
break;
default:
console.log('undefined');
break;
}
}
function add1(a, b){
add1 = a + b;
}
function substract(a, b){
substract = a - b;
}
function divide(a, b){
divide = a / b;
}
function multiply(a, b){
multiply = a * b;
}
function remainer(a, b){
remainer = a % b;
}
calculate('divide', 5, 2);
어렵다..😵
function calculate(command, a, b) {
switch (command) {
case 'add':
return a + b;
case 'substract':
return a - b;
case 'divide':
return a / b;
case 'multiply':
return a * b;
case 'remainer':
return a % b;
default:
throw Error('unknown command')
}
}
console.log(calculate('add', 2, 3));
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ와
이렇게 간단한 코드로 가능한걸 난 뭐한다고 따로 함수를 만들고 난리부르스를 췄던 것인가
갈수록 어려운데 제대로 하고있는건지 모르겠다
'TIL > 자바스크립트' 카테고리의 다른 글
Object (0) | 2021.05.18 |
---|---|
class object 객체지향 (0) | 2021.05.17 |
자바스크립트 연산자, if문 for문 switch문 (0) | 2021.05.13 |
변수 var, let, const (0) | 2021.05.12 |
JavaScript를 html에 연결하는 효율적인 방법 (0) | 2021.05.12 |