💡 과제를 진행하면서 느꼈던 점
Koans는 불교에서 유래된 단어인데, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미라고 한다. 이번 과제는 왜 정답이 되는지 깊게 생각해보고, 지난 3주 동안 다룬 Javascript 핵심 개념과 주요 문법들을 되짚어보며 복습할 수 있는 좋은 기회가 되었다.
부트캠프에 들어오기 이전에 인강을 통해 Javascript에 대한 기본적인 문법을 어느 정도는 학습한 상태여서 3주 동안 따라가는 데 큰 무리가 없었지만, 이번 과제를 진행하면서 사소한 부분에서 내가 놓치고 있었던 개념들이 많았다는 것을 깨닫게 되었다. 아무래도 복습보다 예습에 치중한 결과인 것 같다. 과제 협업에서 부족한 모습을 보이고 싶지 않다는 생각에 다음날 학습 내용을 미리 공부하고는 했었는데, 매일매일 학습 내용이 빽빽하게 구성되어 있다보니 복습을 소홀히 하게 되어 배웠던 내용을 잊어버리게 된 것이다.
밑 빠진 독에 물 붓는 상황이 되자 코치진들의 말대로 예습보다는 복습을 우선하는 것이 옳은 학습 방법이라는 생각이 들었다. 또 내가 이해하지 못하거나 부족한 부분을 상대방에게 설명을 요청하는 용기는 계속 시도해봐야 생기는 것 같다. 아무래도 뒤로 갈수록 내가 이해하지 못하는 부분들은 점점 더 많아질 것이고, 상대방의 코드에서 어느 부분을 이해하지 못했는지 파악하고 설명을 요청하는 경험은 반드시 필요할 것이다. 앞으로는 부족한 점을 있는 그대로 받아들이고, 학습에 있어 예습보다는 복습에 더 비중을 두면서 협업 시 질문에 대한 두려움에 직면해야겠다.
🚩 새롭게 알게 된 것
Type
- number와 string을 뺄 때 string의 내용이 숫자라면 연산이 되어 뺀 결과값 number가 리턴
- true를 Javascript가 1로 인식한다.
1 + true === 2 - 물론 숫자와 문자열로 연산하는 것은 지양
- 원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어남 (함수를 실행한다고 해서 전역변수의 값이 바뀌지 않음)
- 함수를 호출하면서 넘긴 전달인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언됨
- 두 배열이나 객체의 주소값이 같을 때
===해보면 같음.true
Scope
호이스팅: Javascript는 위에서 아래로 크게 한 번 훑은 다음에 함수 선언식으로 표현되는 함수가 있다면 전부 위로 끌어올린 후 위에서부터 아래로 출력을 함- 그렇기 때문에 위에서 선언되지 않고 아래에 선언된 변수에 대해 typeof 연산자를 써도 undefined가 뜨지 않고 아래에 있는 변수에 대한 type을 리턴
default parameter: 매개변수가 없을 때 매개변수의 초기값 설정
function defaultParameter(num = 5) {
return num;
}
Closure
팩토리 함수A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.
클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
- 함수가 객체를 반환할 때 이것을
function factories라고 부른다. - 객체를 찍어내기 때문에 붙여진 이름
출처
Array
slice는 복사-붙여넣기라고 생각하면 됨 + 새로운 배열 리턴slice범위가 대상 배열의 인덱스 범위를 넘어서거나 시작 인덱스와 끝 인덱스가 같으면, undefined가 아니라 빈 배열 리턴[]
- 메서드가 뭘 반환하는지 파악!
shift()나pop()은 배열을 반환하는 것이 아니라, 배열에서 빠지는 값을 반환
- 배열에다
unshift()나shift(),pop(),push(),splice()를 적용한 값을 새로운 변수에 할당해도, 배열에 변화가 적용됨 - 배열이 아닌, object에 대해
Array.from()을 적용해도, 인자 object의 value 값들로 이루어진 배열이 리턴됨
Object
Object.keys().length: Object.keys 객체 안에 있는 key 값들만 모아서 배열로 만든 후, 그 길이를 재는 것- ❌ 오브젝트 자체에 .length하면 undefined가 뜸
Object.assign()객체를 복사- reference variable은 주소만 복사
- 원본 객체에서 원시값 value를 수정해도
Object.assign()을 통해 복사된 객체에 영향이 가지 않지만, 참조값을 수정하면 복사된 객체에도 영향이 감 - 즉, 참조값이 복사됨
window.접두사 없이도 참조가 가능하기 때문에(window.foo()라고 사용해도 됨), 생략하고 쓰는 것뿐임. method는 항상 '어떤 객체'의 method임- 화살표 함수는 자신의
this가 없음. 화살표 함수 바로 바깥 범위에서 this를 찾음 .repeat()인자 안의 수만큼 앞의 string을 반복함 (반복 간 띄어쓰기 있음)
Spread Syntax
arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'
function getAllParamsByArgumentsObj() {
return arguments;
}- 위 코드에 주어진 인자에
Object.keys()적용하면 '0', '1', '2'.. 리턴
rest parameter는 항상 배열임rest/spread문법을 객체 분해에 적용하면 객체 리턴
구조 분해 할당 (Destructing Assignment)
- 객체의 단축(shorthand) 문법: 객체 내 key의 이름과 value가 되는 전역변수로 선언된 변수의 이름이 같다면, value를 쓰지 않고 생략해 key만 쓸 수 있음
const name = 'kim'
const age = 28
const person = {
name,
age,
level: 'Junior',
}- 객체 분해를 하면서 key 값에 대해
key: 다른 key이렇게 작성하면 기존 key 이름이 콜론 뒤 다른 key 이름으로 바뀜 (key에 대한 value 값은 동일)
🔥 추가 학습이 필요한 것
- 깊은 복사와 얕은 복사
- spread로 새로운 변수에 object를 할당했다면, 해당 object의 value일까 reference일까? 만약 값(value, 데이터)이 복사된 것이라면, shallow copy일까, deep copy일까?
