콘솔에 뭔가를 찍어보자 | Javascript & ES6 공부 노트 #2

프로그래밍 언어를 하나 이상 공부해 봤다면 샘플 코드가 항상 무엇으로 시작하는지 다들 알고 있을 것입니다. "Hello World"를 찍는 예제 코드 말이죠. 이 코드가 중요한 이유는 출력에 해당하는 가장 원초적이면서도 핵심적인 기능을 사용하기 때문입니다.

ES6에서는 Javascript와 같이 console.log를 이용해 콘솔에 내용을 인쇄할 수 있습니다.

console.log('Hello World!')

Javascript와는 다르게 끝에 세미콜론이 없는데 이는 ES6의 특징입니다. ES6에서는 줄 끝의 세미콜론을 생략할 수 있습니다. 개인적으로 Swift를 좋아하기 때문에 이와 비슷하게 세미콜론을 안 써도 되는 점을 굉장히 좋아합니다. 하지만 생략해도 된다는 것뿐인지라 만약 팀에서 세미콜론을 사용하기로 정했다면 거기에 따르시면 됩니다.

이 정도면 이미 이 글에서 할 핵심적인 내용은 다 끝나버렸습니다. 입력을 받아 연산해서 출력하는 3단계 중 출력에 해당하는 가장 기본적인 내용이 이 글의 목적이었으니깐요.

하지만 여기서 끝내면 약간 섭섭하죠? 좀 더 다양한 예제를 살펴봅시다.

출력할 때는 문자열만 출력하는 것은 아닙니다. 예를 들어 문자열과 정수를 함께 출력해봅시다.

var a = 10
console.log('a = ' + a)

기존 Javascript에서 쓰던 더하기(+) 연산자를 이용한 문자열과 다른 데이터와의 조합 기능을 ES6에서도 쓸 수 있습니다. 문자열과 숫자를 아무런 변환 없이 자유자재로 결합할 수 있는 Javascript 특유의 유연함을 볼 수 있습니다.

이제 ES6 방식의 문자열과 데이터 조합법을 살펴봅시다.

var a = 10
console.log(`a = ${a}`)

문자열 표기 방식이 따옴표(single quote)나 큰따옴표(double quote)가 아닌 역따옴표(back quote 혹은 back tick)로 둘러싸여 있다는 점에 주의합시다. 백 따옴표로 둘러싸인 문자열은 마치 Swift에서 쓰던 문자열 조합(String Interpolation)과 비슷한 문법을 쓸 수 있습니다. 즉 ${ 로 시작해서 } 로 끝나기까지 내부에 쓰인 것을 실행(Evaluation)시킨 결과를 문자열에 조합시켜 줍니다.

Swift의 String Interpolation 이야기가 나온 김에 비슷한 예제도 살펴봅시다.

var a = 10
var b = 20
console.log(`a + b = ${a + b}`)

역시나 ${...} 내부에는 변수나 데이터만 들어가는 게 아니라 명령어 구문 자체가 들어갈 수 있습니다. 위처럼 아예 연산하는 코드를 넣어도 원하는 대로 데이터가 화면에 출력됩니다.

function getName() {
  return 'Alice'
}

console.log(`My name is ${getName()}`)

당연하게도 함수도 잘 동작합니다.

역따옴표로 둘러싸여 있으므로 역따옴표 자체를 콘솔에 표시하려면 다른 언어에서 하던 데로 이스케이프(escape)를 사용하면 되겠지요. 이스케이프는 역빗금(back-slash, 백슬래시)을 붙이면 됩니다.

console.log(`1 + 2 = \`${1 + 2}\``)

이렇게 하면 콘솔에 1 + 2 = `3`이라고 표시가 되므로 이제 모든 문자를 표시할 수 있게 되었습니다.

이 이상 예제를 쓰게 되면 콘솔에 문자 찍기라는 주제에서 벗어날 것 같으니 이만 여기서 줄입니다.

이 글은 주석과 세미콜론 | Javascript & ES6 공부 노트 #3 글로 이어집니다.