자바스크립트 뽕숀

임홍렬·2022년 8월 16일
0

자바스크립트 공부

목록 보기
5/12
post-thumbnail

function

  • 프로그램의 기본 빌딩 블록이다.
  • 서브 프로그램은 여러 번 사용할 수 있다.
  • 작업을 수행하거나 값을 계산한다.

함수 선언

  • function name(param1, param2) { 본문... return; }
  • 한 가지 기능 === 한 가지만
  • 이름 지정: doSomething, 명령, 동사
  • 예를 들어 createCardAndPoint -> createCard, createPoint (좀 더 세분화)
  • 함수는 JS에서 객체이다.
function printHello() {
  console.log('Hello');
}
printHello();

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

parameter 매개변수

기본 매개변수: 값으로 전달
객체 매개변수: 참조로 전달

function changeName(obj) {
  obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);

default parameters

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

rest parameters

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');

Local Scope

let globalMessage = 'global'; // global variable
function printMessage() {
	let message = 'hello';
    console.log(message); // local variable
	console.log(globalMessage);
    function printAnother() {
	console.log(message);
    let childMessage = 'hello';
    }
    // console.log(childMessage); //error
}
printMessage();
  • 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

Return a value

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

Early return, early exit

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

함수는 다른 변수처럼 취급됩니다.
변수에 값으로 할당 가능하다.
다른 함수에 인수로 전달할 수 있다.
다른 함수에서 반환될 수 있다.

함수표현

  • 함수 선언은 정의된 것보다 먼저 호출될 수 있다.(호이스팅!)
  • 실행이 도달하면 함수 표현식이 생성된다.
const print = function () {
  // anonymous function
  console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum; // d위에 선언한 것이 있음.
console.log(sumAgain(1, 3));

함수 표현식을 사용한 콜백함수

function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}
// anonymous function
const printYes = function () {
  console.log('yes!');
};

이름있는 함수

  • 디버거의 스택 추적에서 더 나은 디버깅
  • 재귀
const printNo = function print() {
  console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

화살표 함수

  • 항상 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: 즉시 호출되는 함수 표현식

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

숙제
// Fun quiz time❤️
// function calculate(command, a, b)
// command: add, substract, divide, multiply, remainder

profile
뜨내기 FE 개발자

0개의 댓글