근래에 취직하게 되서 내가 원하던 프론트엔드 개발에 몰두 할 수 있는 기회를 갖게 되어 더없이 기쁘다.
회사 근무시간 대부분을 자바스크립트에 열중하고 있고... 모처럼 카페에 나와서 개발지식을 넓히고 있다.
학부시절에는 채용 과정 통과를 위해 문제 풀이에 대한 역량을 확보해 왔다면 현업을 위해서는
협업 및 커뮤니케이션 능력, Clean Code에 대한 욕심, 내가 맡은 분야의 전문성을 갖추는 것
이 더 큰 Needs로 다가온다.
잡담은 여기까지 하고 ES6에 들어와 새롭게 추가된 원시타입인 Symbol에 대해 알아볼 시간을 가졌다.
먼저, 심볼의 인스턴스 생성은 두가지 방법이 있다.
/*
* 함수를 통한 심볼의 생성
* 함수로 생성된 모든 심볼은 고유의 참조를 가지므로 UUID로 활용할 수 있지 않을까?
*/
const mySymbol = Symbol()/*
* Symbol.for(key)
* 전역 Symbol 레지스트리에 key를 가진 심볼을 반환, 존재하지 않는다면 생성 후 반환
* 이후 Symbol.for(key)로 접근한 모든 심볼은 동일한 참조를 갖는다.
*/
const mySymbol = Symbol.for('apple')
const mySymbol2 = Symbol.for('apple')
mySymbol === mySumbol2 // true순회 가능한 요소 ?(Iterable)
Map, Set, Array, String, NodeList, HTMLCollection 같은 자료형이 순회 가능한 이유는 ?
new Array()[Symbol.iterator]() // Array Iterator {}
new String()[Symbol.iterator]() // String Iterator {}
new Map()[Symbol.iterator]() // Map Iterator {}
new Set()[Symbol.iterator]() // Set Iterator {}
NodeList.prototype[Symbol.iterator]() // Array Iterator {}
HTMLCollection.prototype[Symbol.iterator]() // Array Iterator {}
/*
* 자바스크립트의 모든 순회가능한 데이터 타입은 내부적으로 Symbol.iterator를 구현한다.
*/실습
function cart(){
this.items = []
}
const c1 = new cart()
const c2 = new cart()
console.log(c1.items === c2.items) // false
/ ***** ***** ***** ***** /
function cart(){
}
cart.prototype.items = []
const c1 = new cart()
const c2 = new cart()
console.log(c1.items === c2.items) // true
/*
* 이 코드에서 object.prototype.something을 통한 프로토타입 명시는
* 객체지향 클래스 문법의 static 변수 혹은 메소드의 선언과 문맥이 비슷함을 알 수 있을 것이라 기대한다.
*/실습 - 순회가능한 객체 만들기
/*
* 1. 객체는 `Symbol.iterator`키 값을 갖는다.
* 2. 해당 키 함수를 실행 할 경우 객체를 반환하며 내부적으로 next()라는 인자 없는 함수를 구현한다.
* 3. 요소를 순회중인 경우 값과 done: false를 반환한다. 이것은 순회문에서 done의 키값을 보고 요소가 완전히 순회되었는지 판단 하는 키로 사용된다.
*
*/
function cart(){
return {
items: [1,2,3,4,5],
itemIndex: 0,
[Symbol.iterator](){
return {
next: () => {
if(this.itemIndex <= this.items.length - 1){
const value = this.items[this.itemIndex++]
return {
value,
done: false
}
} else {
this.itemIndex = 0
return {
done: true
}
}
}
}
}
}
}
for(const item of cart){ console.log(item) } // 1,2,3,4,5처음 레퍼런스 문서들을 확인하며 작성한 글들이라 부족함이 많습니다. 잘못된 내용이 있다면 정정하도록 하겠습니다. :D
