JavaScript Koans
Section1도 막바지이다. 어제, 오늘간 페어와 짝을 이뤄 JavaScript Koans 과제를 수행하는 시간을 가졌다. JavaScript Koans는 Section1에서 다룬 개념들과 관련한 51가지의 질문이 주어진다. mocha와 chai를 통해 과제 제출자가 입력한 답이 맞는지 확인한다. js파일에 있는 스크립트를 통해 오답 상태를 정답으로 수정하거나 채워야할 공간에 문제가 원하는 정확한 출력에 대해 작정하면 된다.
주된 유형은 타입, 스코프, 화살표 함수, 배열, 객체, 구조분해할당 주제로 등등이 있다. 특히 타입에 대한 복습을 잘 안했으면 혼자서 조금 해매는 문제가 있었을 것 같다. 구조 분해 할당에 아래와 비슷한 문제가 있었다. 문제를 풀면서 이러한 방식으로도 정말 다양한 방식으로 구조분해 할당이 가능하다는 것을 학습시키는 의도가 느껴졌다.
const arr = ['a', 'b', 'c', 'd'];
const [first, second] = arr;
// first의 value는 ? 'a'
// second의 value는 ? 'b'학습하면서 symbol 타입이나 Iterable, 화살표 함수에서의 this 등등 잘 모르던 것들이 많았다. 모르던 것들을 정리해보았다.
symbol
symbol은 ES6에서 발표된 새로운 형태의 타입이다. symbol은 이름의 충돌 없이 객체 프로퍼티의 키를 사용하기 위해 생성하고 사용할 수 있다.
let madeSymbol = Symbol();
const obj = {};
obj[madeSymbol] = true;
obj // {Symbol(): true}
위의 방식으로 symbol을 호출하면, 문자열이나 숫자열 등 어느 타입의 값과도 다른 키를 생성할 수 있다. 때문에 어떠한 키와도 충돌하지 않는다. 충돌을 피하고자 만든 타입이기 때문에 키의 타입이 symbol일 경우 객체 조사 기능들은 symbol을 건너뛴다. (for...in, Object.key() 등등)
symbol은 다른 타입들과 다른 값이고, 변경되지 않는다. 그리고 각 심볼은 고유하다. 그리고 숫자, boolean 등 다른 타입과 다르게 문자열과 합치려하면 TypeError가 발생한다.
symbol을 사용하기 위한 방법은 3가지가 있다.
- Symbol() 호출
- Symbol.for(string): Symbol.for('현우') 등을 호출하면 고유한 Symbol()와 달리 매번 '현우'라는 symbol을 호출한다. symbol을 공유할 필요가 있을 때 사용한다.
- Symbol.iterator
Iterable
Iterable 하다는 것은 객체가 @@iterator 메소드를 구현해야 한다는 것이며, Symbol.iterator key 의 속성을 갖고 있어야 한다. @@iterator는 values() 속성의 초기 값과 같은 함수 객체이다. Iterable 프로토콜은 JavaScript의 객체가 for..of 반복문 같은 구조에서 값들이 반복하는 것과 같은 동작을 허용한다. 위의 Symbol.iterator는 객체에서 객체에 대응하는 iterator를 지정한다.
화살표 함수
// 함수 표현식
let foo = function (param1, param2) {
let sumParams = param1 + param2;
return sumParams;
}화살표 함수를 사용하면 다음과 같이 표현할 수 있다.
// 화살표 함수
let foo = (param1, param2) => {
let sumParams = param1 + param2
return sumParams;
} // 3
// 위와 같이 평가해야 할 표현식이 있거나, 구문, 개인 함수 등이 있을 경우에 화살표 함수는 메리트가 없다고 생각 할 수 있다.그래서 이렇게 한줄로 표현 가능한 경우 사용하는 줄 알았다.
// 함수 표현식
let sum = function(a, b) {
return a + b;
};
// 화살표 함수화
let sum = (a, b) => a + b;
// 매개변수가 하나라면 괄호를 생략할 수 있다.
let hi = name => `${name}님 환영합니다.`;
// 매개변수가 필요 없는 경우에는 이렇게 사용할 수 있다.
let log = () => alert("안녕하세요!");단순히 함수를 짧게 표현하기 위해 사용하는 것만은 아니다. 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따른다. 현재 범위에서 this를 찾을 때 없다면 바로 윗 스코프에서 this를 찾고 검색을 끝낸다.
또한, 화살표 함수는 new 등을 사용하여 생성자 함수로 쓸 수 없다. 마지막으로 아래와 같이 일반 함수와 다르게 인수가 전달되지 않는다.
function func() {
console.log(arguments); // Arguments(3) [1, 2, 3]
}
func(1, 2, 3);
const arrow = () => {
console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};
arrow(1, 2, 3);마무리
JavaScript Koans 과제를 풀면서 자연스럽게 모르는 개념에 부딪히도록 유도하는 방식이 좋았다. 불친절하다고 할 수 있지만 이렇게 학습하는게 머리에도 더 남는 것 같다. 어제 밤에 회고를 작성하면서 공부해야 할 내용을 오늘 보완해서 적어보았다. 아무래도 A를 모른다고 찾아보면 A.~ 아니면 B를 알아야 A를 알고 하는 설명이 많다.
그렇기 때문에 복습 개념으로 이렇게 회고를 작성하는게 큰 도움이 된다. 작성해둔 글을 보면 이때 뭔 상황때문에 쓰려고 했는지 메모와 함께 보면 다시 한 번 상기되는게 정말 큰 도움이 된다.
참조 - javascript.info / 화살표 함수
참조 - MDN / 반복기 및 생성기
참조 - ES6의 심볼, 이터레이터, 제네레이터에 대해 알아보자
참조 - The iterable protocol
