다시, 자바스크립트 (4) - 함수 기본값 인수 + 템플릿 리터럴

Junho Yun·2023년 3월 17일
0
post-thumbnail

함수 기본값 인수

ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았습니다.
하지만 ES6에서는 함수 기본값 인수를 쉽게 설정할 수 있습니다.

function calculatePrice(total, tax=0.1, tip=0.05){
	// tax와 tip을 할당하지 않으면 각각 기본값 0.1과 0.05가 쓰인다
  return total + (total + tax) + (total * tip);
}

디스트럭처링(destructuring)을 활용한 매개변수 전달

function calculatePrice({total = 0, tax=0.1, tip=0.05} = {}){
	// tax와 tip을 할당하지 않으면 각각 기본값 0.1과 0.05가 쓰인다
  return total + (total + tax) + (total * tip);
}
// 인수를 = {} 사용해서 기본적으로 객체로 설정하는 것이 포인트 입니다.
// 이럴 경우 인수를 전달하지 않아도 에러를 발생시키지 않습니다. 

const bill = calculatePrice({tip: 0.15, total:150});
// 187.5 
// 디스트럭처링을 활용하면 키에 맞는 값을 할당할 수 있다.

템플릿 리터럴

템플릿 리터럴은 문자열 내에서 변수나 표현식을 쉽게 삽입할 수 있도록 해주는 기능으로, 백틱(backtick)(`)을 사용하여 문자열을 감싸고 ${} 안에 변수나 표현식을 넣으면 해당 값을 문자열에 삽입할 수 있습니다.

ES6 이전에 템플릿 문자열(template string)이라고 부르던 것이 ES6 이후에는 템플릿 리터럴(template literal)이라고 부르게 되었습니다. ES6에서 문자열을 삽입하는 방식을 알아봅시다.

문자열, 표현식 삽입

백틱(`)을 사용하면 쉽게 사용할 수 있습니다.

const name = 'jun'
const greeting = `hello ${name}`

console.log(greeting)
// hello jun
// 쉽게 문자열 (name) 삽입 완료 

const a = 1;
const b = 10;
console.log(`1 * 10 is ${a*b}`);
// 1* 10 is 10
// 쉽게 표현식 삽입 완료 

const multiString = `백틱 안에서 
작성하면 줄 바꿈까지 인식해
줍니다 아주 편하죠`
// 여러 줄 문자열 생성 완료 

추가적으로, 중첩으로도 사용할 수 있으며 삼항 연산자를 추가하여 로직을 넣을 수도 있습니다.

profile
의미 없는 코드는 없다.

0개의 댓글