13강 / Template literals / tagged literals 연습문제 2개와 풀이
문제 1.
단어 순서를 바꾸는 해체분석기 제작하기
이런 문자가 있다. 그냥 쇼핑몰 재고 안내 문구라고 생각하면 된다.let pants = 20; let socks = 100; `바지${pants} 양말${socks}`;이렇게 백틱기호를 이용하면
바지20 양말100이라는 문자가 완성된다.
하지만 쓰고보니 단어 순서가 약간 잘못된걸 발견한다.
양말이라는 단어가 왼쪽, 바지라는 단어가 오른쪽에 와야한다.
그래서 문자가양말20 바지100으로 바뀌게 만들고 싶다.
Q. tagged literal
analyzer를 이용해서 단어순서를 바꾸려면 어떻게해야할까?(analyzer
바지${pants} 양말${socks};이렇게 코드를 실행하면 콘솔창에양말20 바지100이라는 문장이 떠야한다.)
풀이
let pants = 20;
let socks = 100;
function analyzer(text, variable1, variable2) {
console.log(text);
}
analyzer`바지${pants} 양말${socks}`;먼저 array에 들어가는 text를 확인하기 위하여 위와같이 analyzer 함수를 만들었다.
현재 text에는 순수문자인 바지와 양말이 들어가있다. 우리는 양말이 먼저나와야하기 때문에 위치를 바꿔주어야한다.
또한 variable1에는 첫번째 변수인 pants의 값 20이 들어가있고 variable2에는 socks의 값 100이 들어가있다.
위 정보를 통해 정답을 맞추어보자!
let pants = 20;
let socks = 100;
function analyzer(text, variable1, variable2) {
console.log(text[1] + variable2 + text[0] + variable1);
}
analyzer`바지${pants} 양말${socks}`;위와같이 코드를 작성해서 원하는대로 양말과 바지 순서가 바뀌어서 나오는 것을 볼 수 있다.
문제 2.
바지가 0개면 '바지다팔렸어요'라는 문자를 대신 표시해주고 싶다.
이번에도 역시 이런 문자가 있다. 그냥 쇼핑몰 재고 안내 문구라고 생각하면 된다.let pants = 20; let socks = 100; `바지${pants} 양말${socks}`;이렇게 백틱기호를 이용하면
바지20 양말100이라는 문자가 완성된다.
하지만pants라는 변수가0인 경우바지0이렇게 출력되는게 싫어서
바지다팔렸어요 양말100이라고 문자를 아예 바꿔버리고 싶다.
Q. tagged literal
analyzer를 이용해서 위 기능을 만들어보십시오.(analyzer
바지${pants} 양말${socks};이렇게 코드를 실행하면pants가0인 경우 콘솔창에바지다팔렸어요 양말100이라는 문장이 떠야한다.)
풀이
현재 아래와 같은 정보를 갖고있다.
text[0]: 바지text[1]: 양말variable1: 20 (pants 변수의 값)variable2: 100 (socks 변수의 값)
여기에서 pants의 값을 0으로 바꿀 것이다.
코드를 바꾸어서 완성시켜보자
let pants = 0;
let socks = 100;
function analyzer(text, variable1, variable2) {
if (variable1 == 0) {
console.log(text[0] + "다팔렸어요" + text[1] + variable2);
}
}
analyzer`바지${pants} 양말${socks}`;
if문을 활용하여 pants가 0이라면 바지다팔렸어요 양말100이라는 문구가 나오도록 바꿔주었다.
14강 / 모든 괄호를 없애주는 Spread Operator 활용방법 1
ES6 Spread Operator 라는 문법을 알아보자
그냥 마침표를 연달아서 3개... 찍으면 그게 spread operator라는 문법이다.
한글로는 펼침연산자이렇게 번역가능한데
무슨 역할을 하냐면 아주 쉽게 설명하자면
"괄호제거 해주는 연산자" 이다.
Array에 붙여보자.
let arrayTest = ['hello', 'world'];
console.log(arrayTest);
console.log(...arrayTest);그럼 arrayTest라는 array에 붙어있던 괄호를 제거해준다.
▲ 3번줄처럼 spread operator를 붙여서 출력해보면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력된다.
이게 spread operator의 기능 끝이다.
문자에 붙이면 문자에 붙은 괄호를 제거해준다.
괄호가 어디에있냐? 문자도 array 자료형과 매우 비슷하다. 안보이는 대괄호가 쳐져있다고 보면 된다.
(실제로 비슷한건 아니고 느낌이요느낌)
let textTest = 'hello';
console.log(textTest[0]);
console.log(textTest[1]);문자를 이런식으로 array처럼 출력할 수 있다.
hello라는 문자에도 뭔가 대괄호 쳐있는 ['h', 'e', 'l', 'l', 'o'] 느낌이 난다.
그럼 문자에 spread를 붙이면 어떻게 될까?
대괄호를 제거해준다.
let textTest = 'hello';
console.log(textTest);
console.log(...textTest);위 코드 셋째줄을 출력해보면 콘솔창에 h e l l o 라는 문자들이 출력된다.
console.log('h', 'e', 'l', 'l', 'o') 이렇게 한거랑 똑같다고 보면 된다.
그래서 spread를 문자에 붙이면 알파벳을 하나씩 펼쳐준다.
(혹은 그냥 문자의 안보이는 대괄호를 제거해준다고 외우자!)
1. Array 합치기/복사에 매우 자주 쓴다.
array 두개를 합치고 싶으면 어떻게 해야할까.
let a = [1,2,3];
let b = [4,5];
let c = [여기엔 1,2,3,4,5 가 들어오게 만들려면?];옛날엔 뭐 이상한 방식을 마구 썼는데 spread operator를 사용하시면 매우 쉽다.
spread operator의 기능은? 대괄호 제거해준다!
그럼 이렇게 써보자.
let a = [1,2,3];
let b = [4,5];
let c = [...a, ...b];
console.log(c)이렇게 한 뒤에 c라는 array를 출력해보면 [1,2,3,4,5]가 되어있다.
... 연산자를 이용해서 괄호를 없앤 a와 b를 집어넣는다는 소리이다.
array 합치기 완성이다. 매우 쉽다.
그럼 array 복사의 경우도 알아보자.
▼ a라는 array를 복사해서 b를 만들고 싶으면 보통 이렇게 하지않을까?
let a = [1,2,3];
let b = a;
console.log(a);
console.log(b);등호 = 를 이용하면 쉽게 a에 있던 값을 b에 집어넣을 수 있다. ( [1,2,3] 복사완료!)
그런데 자바스크립트에선 복사를 이렇게 하면 큰일난다.
등호로 복사를 하면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어난다.
그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 신기한 버그가 일어난다.
(나중에 자료형배울 때 다룰 것이지만 왜 그러냐면 등호를 쓰면 값을 복사한게 아니라 [1,2,3] 값이 저기있어요~ 라고 가리키는 화살표를 복사한 것이다.)
그래서 값을 공유하지 않고 각각 독립적인 값을 저장하도록 array를 복사하려면 옛날엔 이상한 방법을 많이 썼는데
요즘은 spread를 이용하면 된다.
let a = [1,2,3];
let b = [...a];
console.log(a);
console.log(b)spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 것이다.
그렇게 하면 아까처럼 a와 b 변수의 값 공유가 일어나지 않는다.
2. Object 합치기/복사에 매우 자주 쓴다.
object 두개를 합치고 싶으면 어떻게 해야할까?
let objectTest1 = { a : 1, b : 2 };
let objectTest2 = { c : 3, 그리고 objectTest1에 있는거 전부.. }objectTest2를 만들고 싶은데 objectTest1에 있던 내용들을 그대로 가져다가 추가하고 싶다.
그럼 어떻게 해야되냐면 고민하지말고 spread operator를 떠올리면 된다.
이 연산자는 대괄호 뿐만아니라 중괄호도 제거해준다.
그래서 이렇게 쓰면
let objectTest1 = { a: 1, b: 2 };
let objectTest2 = { c: 3, ...objectTest1 };
console.log(objectTest2);objectTest2라는 object를 출력해보면 a, b, c키값이 다 들어있다.
왜냐면 objectTest1를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 때문이다.
object shallow copy도 비슷한 방식으로 한다. (강의에선 deep copy라고 한거같은데 deep copy는 object 안의 object까지도 엮임현상없이 카피하는걸 뜻한다. shallow는 그냥 맨 위의 object하나만 카피하는걸 뜻한다.)
결론은 object나 array나 spread를 유용하게 사용할 수 있다.
참고1.
오브젝트의 key값 중복이 발생하면 어떻게될까?
let objectTest1 = { a: 1, b: 2 };
let objectTest2 = { a: 3, ...objectTest1 };
console.log(objectTest2);objectTest2를 objectTest1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있는 것이다.
이렇게 a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 이긴다.
그래서 출력해보면 a : 1 이라는 자료가 담겨져있다.
참고2.
spread 연산자는 함수소괄호, object 중괄호내, array 대괄호내에서 보통 사용해야한다.
다른 곳에서 그냥 썼다간 에러가날 수 있다.
