14일차
2021. 08. 05 목요일
1. Today's Key points!
오늘은 앞서 배워왔던 것을 복습하는 느낌으로 Koans를 진행했다.
- 원시 자료형, 참조 자료형
- 얕은 복사, 깊은 복사
- scope, closure
- Spread syntax/ Rest parameter
- Destruction(구조분해)
2. 정리해보자!
- 얕은 복사 : 아래 사진은 arr2에 arr1을 얕은 복사를 한 것이다. 아래에 보이듯이 얕은 복사를 하면 배열안의 배열까지는 복사를 안한다. 즉, 바깥 부분의 배열은 다른 주소를 사용해서 arr2를 바꿔도 arr1에 영향을 주지 않지만, 안쪽의 배열은 같은 주소를 사용하기 때문에 arr2에서 바꾸면 arr1에서도 바뀌게 된다. 이는 객체에서도 동일하다.
- 깊은 복사 : 얕은 복사에서 설명했듯이, 깊은 복사는 안쪽의 배열 또는 객체를 복사한 것이다. 아래 사진에서 arr3, arr4는 깊은 복사를 한것이다. arr3의 0번째 index를 '4'로 바꿨지만, arr1에서는 바뀌지 않은 것을 볼 수 있다. 이렇게 안쪽 배열을 복사하면 기존 배열의 안쪽 배열까지 영향을 받지 않는 것을 볼 수 있다.
- Rest parameter : 이것은 함수에 들어가는 매개변수이다. 아래 사진에서 보이듯이 a에는 one, b에는 two가 들어가고 ...manyMoreArgs에는 [three, four, five, six]이 나머지 매개변수가 들어가게 된다.
- Spread syntax : const arr = [1, 2, 3, 4] 라는 배열이 있을 때, ...arr을 해주면 bracket이 없어지고 1, 2, 3, 4만 나오게 된다. 그냥 콘솔창에 ...arr만 치게되면 value 4개가 한번에 나올수 없기 때문에 그냥 ...arr만 써주는 것은 불가능하다. spread syntax를 사용하는 여러가지 경우가 있는데, 배열을 복사할 때 등등 배열안에 배열을 추가하는데, 배열자체를 추가하는것이 아니고 값만 넣고 싶을 때 spread syntax를 활용하면 된다. 위의 얕은복사, 깊은복사를 할 때도 spread syntax를 활용한 것이다.
- Destruction(구조분해) : 바로 예제를 통해서 이해하는 것이 빠를 것이다. 아래의 사진을 보면 whois함수에 user라는 매개변수를 넣고 실행시켰다. user객체 안에는 많은 내용들이 담겨있지만, 함수에서 필요한 구조만 분해해서 인자로 넣었을 때 user객체에서 필요한 정보만 받아서 활용할 수 있다.
3. 복습하기!
오늘은 Koans 스프린트 과제를 페어와 함께 진행했다. 아래 사진에서 보이듯이 테스트 통과하는 것은 어렵지 않았다. 그런데 이번 과제의 목표는 테스트에 통과하는 것이 아니고 어떻게, 왜 통과할 수 있었는지를 고민해보는 과제였다.
과제를 하는 중에 가장 헷갈렸던 부분이다. 스코프에 관련한 문제인데, age, name 이러한 변수가 어디서 불러오느냐에 따라 어떻게 변하는지를 알아가는 문제였다. outerFn함수 스코프 내에서 age와 name이 무엇일까? outerFn 내에서 innerFn이 실행되지 않았다면 age = 24, name = 'jimin' 으로 끝이다. 그런데 innerFn이 실행되었기 때문에, age = 26으로 재할당 되고, name은 'suga'로 선언되었는데, return 하고 있는 것이 height이기 때문에 name은 외부에서 접근할 수 없다. 따라서 age = 26, name = 'jimin'이 된다. 이제 outerFn바깥에서 age, name, innerFn을 실행시켰을 때 값이 무엇인지 알아보자. 여기서 const innerFn과 outerFn 안에있는 innerFn은 다르다는 점을 알아두자 이것을 색깔로 구분하겠다. age는 outerFn 함수내에서 따로 선언했기 때문에 접근이 안된다. 따라서 age = 27이 된다. name은 outerFn 함수내에서 'jimin'으로 재할당 했다. 따라서 name = 'jimin'이 된다. innerFn은 outerFn을 실행시키고 리턴값을 받는다. outerFn은 innerFn을 리턴하고 있다. 따라서 innerFn 리턴값을 받으면 되는데, innerFn 에서 height가 선언되어 있지 않기 때문에 밖에 선언되어있는 let height = 178을 가져오게 된다. 따라서 innerFn은 178이 된다.
문제를 풀때는 헷갈렸는데, 다시 한번 차근차근 개념대로 생각해보니 답을 찾아갈 수 있었다.
