다시보는 자바스크립트 - 02

Javascript 헷갈렸던 내용, 새로 알게된 내용 정리
→ Parameter, function

Default parameters (added in ES6)

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

// ↓결과값 
// Hi! by undefined

이렇듯 넘어오지 않은 파라미터는 ‘undefined’라고 출력되는데 실무에서는 보통 이에 대한 예외처리를 아래처럼 한다.

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

// ↓결과값
// Hi! by unknown

그런데, ES6부터 default parameters 기능을 지원.

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

// ↓결과값
// Hi! by unknown

Rest parameters (added in ES6)

function printAll(...args){
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printAll('A', 'B', 'C');

// ↓결과값 
// A
// B
// C

‘…args’라는 부분은 ‘‘인덱스 크기가 유동적으로 열린 배열’ 형태로 받을 수 있는 문법

참고로 위와같은 for문(반복문)은 아래처럼 작성 가능

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

Early return, early exit

//bad
function updateUser(user) {
  if (user.point > 10) {
    긴 로직...
  }
}

//good
function updateUser(user){
  if(user.point <= 10){
    return;
  }
  긴 로직...
}

Function expression

/* function declaration */
// -> 호이스팅 가능
function test(){
  console.log('tset');
}


/* function expression */
// -> 호이스팅 안되지만,
const test = function (){
  console.log('test');
}
// 다른 변수에 할당 가능하다는 차이
const test2 = test;
test2();

Callback, anonymous, named

// Callback function using function expression
function randomQuiz(answer, printYes, printNo){
  if(answer === 'Yes'){
    printYes();
  } else {
    printNo();
  }
}

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

// named function
const printNo = function print() {
  console.log('no!');
  //print();
}

randomQuiz('Yes', printYes, printNo);

named function방식의 경우

1. 추후 debugger의 stack traces면에서 더 나은 장점을 제공
2. 함수 안에서 자기 자신을 호출할 때 유용(사용시 무한루프 및 스택사이즈 풀 현상 주의)

Arrow function

anonymous function 방식에서 function 이라는 키워드와 블럭(중괄호{})만 빼주고 화살표를 써주면 됨

// 일반적인 anonymous function 방식
const test = function () {
  console.log('success');
}

// ↓ Arrow function 방식 적용
const test = () => console.log('success');

/**==========================================**/

// 일반적인 anonymous function 방식 2
const add = function(a, b){
  return a + b;
}

// ↓ Arrow function 방식 적용 2
const add = (a, b) => a + b; 

만약 arrow function 방식에서 더 많은 코드 작성이 필요한 경우 블록(중괄호{}) 사용

const add = (a, b) => {
  console.log(`#a : ${a} | #b : ${b}`);
  return a + b;
}

IIFE : Immediately Invoked Function Expression

함수 선언과 동시에 실행하는 방법

function hello(){
  console.log('Hello!');
}
hello();

↓ IIFE 방식으로 변환 ↓

(function hello(){
  console.log('Hello!');
})();