함수 선언문

function sayHello(){
	console.log('Hello');
}

sayHello();

-> 어디서든 호출 가능 : sayHello()의 위치가 어디어도 동작 가능함. 

(자바스크립트 내부 동작방식에 의한 현상 - '호이스팅')

함수 표현식

(이름이 없는 함수를 만들고 변수를 선언해서 함수를 할당해줌)

let sayHello=function(){
	console.log('Hello')
}

sayHello();

-> 코드에 도달하면 생성, 그 이후에 사용가능.

1.

function sayHello(name){
  let newName = name || 'friend';
  let msg = `Hello, ${newName}`;
  console.log(msg);
}

sayHello();
sayHello('Judite');

2.

function sayHello(name='friend'){
  let msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello();
sayHello('Judite');

<출력결과>

Hello, friend

Hello, Judite

(동일)

템플릿 리터럴

백틱(``) : ES6부터 새롭게 적용된 문자열 표기법 -> 큰 따옴표("")가 아닌 백틱(``)을 사용해서 문자열을 표기한다.

var str="Hello World"; //일반 문자열 표기법
var templateStr=`Hello World"` //템플릿 문자열 표기법

console.log(str);
console.log(templateStr);

<출력 결과>

Hello World

Hello World

(동일함)

템플릿 리터럴의 기능 (1) 개행

템플릿 리터럴을 사용하면 개행문자(`\n`) 없이도 개행을 수행할 수 있다.

//일반 문자열 방식 줄바꿈
var normalStr="Hello!\nJS";
console.log(normalStr);

//템플릿 리터럴 방식 줄바꿈
var templateStr=`Hello
JS`;
console.log(templateStr);

<출력결과>

Hello

JS

Hello

JS

(동일함)

템플릿 리터럴의 기능 (2) 표현식

템플릿 리터럴의 백틱(``)안에 달러 기호 ${}를 사용하면 변수나 표현식을 표현할 수 있다.

var num=7;
var str="KOFE from ";
var templateStr=`Hello, I'm ${str}${num}.`

console.log(templateStr);

<출력결과>

Hello, I'm KOFE from 7.