11강 / 변수 연습문제 해설
10강에 해설과 답 모두 있기 때문에 10강을 참고하자!
10강 변수 연습문제
12강 / 자바스크립트가 문자 다루는 신기한 방법 (Template literals)
1. 문자 중간 엔터키 입력이 가능합니다
자바스크립트 문자열은 문자 중간에 엔터키치시면 안된다.
하지만 백틱으로 문자를 만드시면 엔터키가 자유롭게 가능하다.
let text = `안녕
하세요`;
console.log(text)
2. 문자 중간에 변수를 집어넣을 때 편리합니다.
자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야한다.
하지만 백틱으로 문자를 만들면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있다.
let name = "손흥민";
let text = `안녕하세요 ${name} 입니다`;
console.log(text);
자바스크립트를 문자로 HTML을 작성할 때도 유용히다.
let text = `
<div>
<div>
${변수명}
</div>
</div>`;HTML 템플릿 같은걸 보기쉽게 만들 수 있다.
Tagged Literals
ES6는 Tagged literals라고 해서 함수로 문자 해체분석기능을 만들어줄 수도 있다.
문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용하다.
뭘 어떻게 쓰는지는 살펴보자.
let name = '손흥민';
function analyzer(){
return 10
}
analyzer`안녕하세요 ${name} 입니다`;▲ 맨 마지막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다.
실행할 함수이름을 쓰고 소괄호 대신 백틱 문자를 붙여주면 된다.
그럼 함수가 실행된다. 위의 예제코드에선 analyzer()라는 함수가 실행되고 있다.
그런데 함수를 실행하는거 자체가 신기하긴 한데 왜 하는 거냐면
함수뒤에 문자를 붙여 실행하면 그 문자열을 해체분석할 수 있기 때문이다.
해체분석용 함수를 한번 만들어보자.
let name = '손흥민';
function analyzer(text, variable){
console.log(text);
console.log(variable);
}
analyzer`안녕하세요 ${name} 입니다`;
▲ 함수의 파라미터 두개를 추가해준다.
이제 이 함수는 막줄처럼 문자열을 이용해서 실행시키면 그 문자열 해체분석역할을 할 수 있다.
첫째 파라미터 text은 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고,
둘째 파라미터 variable은 백틱 내의 ${} 변수를 담는 파라미터이다. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가해주면 된다)
이제 이 파라미터들로 문자열을 재조합하거나 분석하거나 할 수 있다.
Q. 첫째 파라미터가 Array라는데 뭘 어떻게 만든 Array인지 이해가 안가요
A. 뭘 기준으로
Array를 만들어주냐면.. 그림으로 봐보자.
${}기호를 기준으로 양옆에 있는 모든 문자 덩어리를
Array안에 집어넣어준다는 소리이다.
각각 파라미터를 출력해보면 파라미터가 뭘 의미하는지 눈에 보인다.
let name = '손흥민';
function analyzer(text, variable){
console.log(text[1] + variable);
}
analyzer`안녕하세요 ${name} 입니다`;▲ 그럼 이 코드는 실행하면 콘솔창에 뭐가 출력될까?
문자들을 모아놓은 Array중 1번째 문자 + name을 출력해준다.
그래서 '입니다손흥민' 이라는 문자가 출력된다.
이렇게 ``백틱 내의 문자들을 해체해서 내 맘대로 다시 나열할 수 있게 도와주는 함수를 제작한 것이다.
예시만 보면 이해가 안되니 다음 강의에서 실전에서 만날법할 예제문제를 풀어보자.
