[TIL007] 스프레드, 템플릿 리터럴 문법

SEONG CHAN LEE·2024년 4월 23일

TIL

목록 보기
7/53

20240423 7일차

💻오늘 배운 것들 요약!

자바스크립트 문법 강의 수강
코딩 테스트 문제 풀이


하루회고

오늘은 하루종일 문법 강의를 들었다. 강의 내에 코딩 테스트 문제 풀이가 있어서 문제도 같이 풀었다. 꽤 난이도가 있다보니 아직 기초 단계를 배우고 있는 나에게는 너무 어려워서 시간이 꽤나 걸렸다... 하나하나 이해를 짚어가며 공부를 하고 있는데 이렇게 공부하면 시간이 너무 지체되기 때문에 내일부터는 빨리 배속으로 강의를 듣고 프로젝트 진행을 하며 막히는 부분만 찾아 보는 방식으로 공부를 해야겠다.


자바스크립트 문법 정리

문법 강의를 들으면서 헷갈렸던 것들을 내가 이해한 방식으로 정리하려고 한다.

ES6 문법

- 전개 구문 (Spread Operator)

배열을 예시로 하면,

let arr = [1, 2, 3];

let newArr = [...arr, 4];

...을 적고 원하는 배열을 뒤에 적으면, 그 배열이 다시 전개가 된다.
전개란 그냥 내가 해당 배열의 요소를 다시 입력한 것과 같은 것이다.
그래서 newArr 배열을 출력하면,

[1, 2, 3, 4]

기존 arr 값이 그대로 전개되어 값이 출력이 된다.

템플릿 리터럴 (Template Literal)

const name = 'John';
const age = 30;

// 템플릿 리터럴을 사용한 문자열 표현
const message = `안녕하세요, 

제 이름은 ${name}이고, 

나이는 ${age}살입니다.`;

console.log(message);
// 안녕하세요,

제 이름은 John이고, 

나이는 30살입니다.

위처럼 따옴표를 사용하지 않고 백틱 (`)을 이용하면 문자열을 더 편리하게 작성할 수 있게 도와준다.

1. 멀티라인 문자열 지원

일반적으로 따옴표 문자열을 사용하면 줄 바꿈을 하기 위해선 \n을 사용해야하지만 단순히 엔터만으로 쉽게 줄 바꿈이 가능하다.

2. 표현식 삽입

${} 안에는 위 처럼 변수를 넣을 수 있을 뿐만 아니라, 유효한 표현식도 삽입 가능하다.

profile
Develop myself

0개의 댓글