yeonlisa - modern javascript

modern-js-koans/01_AboutArrowFunction.js

@@ -8,27 +8,27 @@ describe('화살표 함수에 관해서', function () {
       return x + y
     }
 
-    expect(add(5, 8)).to.eql(FILL_ME_IN)
+    expect(add(5, 8)).to.eql(13)
   })
 
   it('화살표 함수 사용법을 익힙니다', function () {
     // function 키워드를 생략하고 화살표 => 를 붙입니다
     const add = (x, y) => {
       return x + y
     }
-    expect(add(10, 20)).to.eql(FILL_ME_IN)
+    expect(add(10, 20)).to.eql(30)
 
     // 리턴을 생략할 수 있습니다
     const subtract = (x, y) => x - y
-    expect(subtract(10, 20)).to.eql(FILL_ME_IN)
+    expect(subtract(10, 20)).to.eql(-10)
 
     // 필요에 따라 소괄호를 붙일 수도 있습니다
     const multiply = (x, y) => (x * y)
-    expect(multiply(10, 20)).to.eql(FILL_ME_IN)
+    expect(multiply(10, 20)).to.eql(200)
 
     // 파라미터가 하나일 경우 소괄호 생략이 가능합니다
     const divideBy10 = x => x / 10
-    expect(divideBy10(100)).to.eql(FILL_ME_IN)
+    expect(divideBy10(100)).to.eql(10)
   })
 
   it('화살표 함수를 이용해 클로저를 표현합니다', function () {
@@ -38,19 +38,19 @@ describe('화살표 함수에 관해서', function () {
       }
     }
 
-    expect(adder(50)(10)).to.eql(FILL_ME_IN)
+    expect(adder(50)(10)).to.eql(60)
 
     const subtractor = x => y => {
       return x - y
     }
 
-    expect(subtractor(50)(10)).to.eql(FILL_ME_IN)
+    expect(subtractor(50)(10)).to.eql(40)
 
     const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
-    expect(htmlMaker('div')('code states')).to.eql(FILL_ME_IN)
+    expect(htmlMaker('div')('code states')).to.eql('<div>code states</div>')
 
     const liMaker = htmlMaker('li')
-    expect(liMaker('1st item')).to.eql(FILL_ME_IN)
-    expect(liMaker('2nd item')).to.eql(FILL_ME_IN)
+    expect(liMaker('1st item')).to.eql('<li>1st item</li>')
+    expect(liMaker('2nd item')).to.eql('<li>2nd item</li>')
   })
 })

modern-js-koans/02_AboutDestructuring.js

@@ -7,8 +7,8 @@ describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {
     const array = ['code', 'states', 'im', 'course']
 
     const [first, second] = array
-    expect(first).to.eql(FILL_ME_IN)
-    expect(second).to.eql(FILL_ME_IN)
+    expect(first).to.eql('code')
+    expect(second).to.eql('states')
 
     const result = []
     function foo([first, second]) {
@@ -17,14 +17,14 @@ describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {
     }
 
     foo(array)
-    expect(result).to.eql(FILL_ME_IN)
+    expect(result).to.eql(['states', 'code'])
   })
 
   it('rest/spread 문법을 배열 분해에 적용할 수 있습니다', () => {
     const array = ['code', 'states', 'im', 'course']
     const [start, ...rest] = array
-    expect(start).to.eql(FILL_ME_IN)
-    expect(rest).to.eql(FILL_ME_IN)
+    expect(start).to.eql('code')
+    expect(rest).to.eql(['states', 'im', 'course'])
 
     // 다음과 같은 문법은 사용할 수 없습니다. 할당하기 전 왼쪽에는, rest 문법 이후에 쉼표가 올 수 없습니다
     // const [first, ...middle, last] = array
@@ -39,22 +39,22 @@ describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {
       age,
       level: 'Junior',
     }
-    expect(person).to.eql(FILL_ME_IN)
+    expect(person).to.eql({name: '김코딩',age:28,level:'Junior'})
   })
 
   it('객체를 분해합니다', () => {
     const student = { name: '박해커', major: '물리학과' }
 
     const { name } = student
-    expect(name).to.eql(FILL_ME_IN)
+    expect(name).to.eql('박해커')
   })
 
   it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #1', () => {
     const student = { name: '최초보', major: '물리학과' }
     const { name, ...args } = student
 
-    expect(name).to.eql(FILL_ME_IN)
-    expect(args).to.eql(FILL_ME_IN)
+    expect(name).to.eql('최초보')
+    expect(args).to.eql({major:'물리학과'})
   })
 
   it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #2', () => {
@@ -64,7 +64,7 @@ describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {
       return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
     }
 
-    expect(getSummary(student)).to.eql(FILL_ME_IN)
+    expect(getSummary(student)).to.eql('최초보님은 B+의 성적으로 양자역학을 수강했습니다')
   })
 
   it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #3', () => {
@@ -100,10 +100,22 @@ describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {
       }
     }
 
-    expect(changedUser).to.eql(FILL_ME_IN)
+    expect(changedUser).to.eql({name: '박해커',company: {name: 'Code States',department: 'Development',
+        role: {name: 'Software Engineer'}
+      },
+      age: 20
+    })
 
-    expect(overwriteChanges).to.eql(FILL_ME_IN)
+    expect(overwriteChanges).to.eql({name: '김코딩',company: {name: 'Code States',department: 'Development',
+        role: {name: 'Software Engineer'}
+      },
+      age: 35
+    })
 
-    expect(changedDepartment).to.eql(FILL_ME_IN)
+    expect(changedDepartment).to.eql({name: '김코딩',company: {name: 'Code States',department: 'Marketing',
+        role: {name: 'Software Engineer'}
+      },
+      age: 35
+    })
   })
 })

modern-js-koans/03_AboutThis.js

@@ -23,7 +23,7 @@ describe('this 키워드에 관해서', () => {
     counter.increse()
     counter.increse()
     counter.decrease()
-    expect(counter.getValue()).to.eql(FILL_ME_IN)
+    expect(counter.getValue()).to.eql(1)
   })
 
   it('화살표 함수로 작성된 메소드 호출시 this를 확인합니다', () => {
@@ -45,7 +45,7 @@ describe('this 키워드에 관해서', () => {
     counter.increse()
     counter.decrease()
     counter.decrease()
-    expect(counter.getValue()).to.eql(FILL_ME_IN)
+    expect(counter.getValue()).to.eql(99)
 
     // 메소드 선언시에는 화살표 함수를 사용을 피하거나,
     // 화살표 함수를 사용할 경우 this 사용을 피해야 합니다
@@ -65,16 +65,16 @@ describe('this 키워드에 관해서', () => {
     }
 
     const mycar = new Car('mini', 'bmw', 'red')
-    expect(mycar.name).to.eql(FILL_ME_IN)
-    expect(mycar.brand).to.eql(FILL_ME_IN)
-    expect(mycar.color).to.eql(FILL_ME_IN)
-    expect(this_value_in_constructor).to.eql(FILL_ME_IN)
+    expect(mycar.name).to.eql('mini')
+    expect(mycar.brand).to.eql('bmw')
+    expect(mycar.color).to.eql('red')
+    expect(this_value_in_constructor).to.eql(mycar)
 
     const yourcar = new Car('911', 'porsche', 'black')
-    expect(yourcar.name).to.eql(FILL_ME_IN)
-    expect(yourcar.brand).to.eql(FILL_ME_IN)
-    expect(yourcar.color).to.eql(FILL_ME_IN)
-    expect(this_value_in_constructor).to.eql(FILL_ME_IN)
+    expect(yourcar.name).to.eql('911')
+    expect(yourcar.brand).to.eql('porsche')
+    expect(yourcar.color).to.eql('black')
+    expect(this_value_in_constructor).to.eql(yourcar)
 
   })
 })

modern-js-koans/04_AboutFunctionMethods.js

@@ -13,9 +13,9 @@ describe('함수 메소드에 관해서', () => {
     expect(foo).to.have.property('apply')
     expect(foo).to.have.property('bind')
 
-    expect(foo()).to.eql(FILL_ME_IN)
-    expect(foo.call()).to.eql(FILL_ME_IN)
-    expect(foo.apply()).to.eql(FILL_ME_IN)
+    expect(foo()).to.eql('bar')
+    expect(foo.call()).to.eql('bar')
+    expect(foo.apply()).to.eql('bar')
     expect(foo.bind()).to.exist
   })
 
@@ -32,9 +32,9 @@ describe('call에 관해서', () => {
     const context1 = { msg: 'welcome everyone' }
     const context2 = { msg: 'good bye' }
 
-    expect(foo.call(context1)).to.eql(FILL_ME_IN)
-    expect(foo.call(context2).msg).to.eql(FILL_ME_IN)
-    expect(foo.call()).to.eql(FILL_ME_IN)
+    expect(foo.call(context1)).to.eql({ msg: 'welcome everyone' })
+    expect(foo.call(context2).msg).to.eql('good bye')
+    expect(foo.call()).to.eql(global)
   })
 
   it('call의 두번째 인자 이후로는 파라미터로 전달됩니다', () => {
@@ -45,9 +45,9 @@ describe('call에 관해서', () => {
     const developer = { type: '개발자', feature: '언어' }
     const artist = { type: '아티스트', feature: '노래' }
 
-    expect(printProfile.call(developer, '김코딩', 30)).to.eql(FILL_ME_IN)
-    expect(printProfile.call(developer, '박해커', 20, 'JavaScript')).to.eql(FILL_ME_IN)
-    expect(printProfile.call(artist, 'BTS', 7, 'ON', 'Dynamite')).to.eql(FILL_ME_IN)
+    expect(printProfile.call(developer, '김코딩', 30)).to.eql('개발자 김코딩 나이:30')
+    expect(printProfile.call(developer, '박해커', 20, 'JavaScript')).to.eql('개발자 박해커 나이:20 언어:JavaScript')
+    expect(printProfile.call(artist, 'BTS', 7, 'ON', 'Dynamite')).to.eql('아티스트 BTS 나이:7 노래:ON,Dynamite')
   })
 
 })
@@ -60,8 +60,8 @@ describe('apply에 관해서', () => {
 
     const context = { msg: 'welcome you!' }
 
-    expect(foo.apply(context)).to.eql(FILL_ME_IN)
-    expect(foo.apply()).to.eql(FILL_ME_IN)
+    expect(foo.apply(context)).to.eql({ msg: 'welcome you!' })
+    expect(foo.apply()).to.eql(global)
   })
 
   it('apply의 두번째 인자는 배열입니다', () => {
@@ -72,9 +72,9 @@ describe('apply에 관해서', () => {
     const developer = { type: '개발자', feature: '언어' }
     const artist = { type: '아티스트', feature: '노래' }
 
-    expect(printProfile.apply(developer, FILL_ME_IN)).to.eql('개발자 김코딩 나이:30')
-    expect(printProfile.apply(developer, FILL_ME_IN)).to.eql('개발자 박해커 나이:20 언어:JavaScript')
-    expect(printProfile.apply(artist, FILL_ME_IN)).to.eql('아티스트 BTS 나이:7 노래:ON,Dynamite')
+    expect(printProfile.apply(developer, ['김코딩', 30])).to.eql('개발자 김코딩 나이:30')
+    expect(printProfile.apply(developer, ['박해커', 20, 'JavaScript'])).to.eql('개발자 박해커 나이:20 언어:JavaScript')
+    expect(printProfile.apply(artist, ['BTS', 7,'ON,Dynamite'])).to.eql('아티스트 BTS 나이:7 노래:ON,Dynamite')
   })
 
 });
@@ -89,15 +89,15 @@ describe('bind에 관해서', () => {
     const context = 'almost finish'
 
     const boundFoo = foo.bind(context)
-    expect(typeof boundFoo).to.eql(FILL_ME_IN)
-    expect(boundFoo()).to.eql(FILL_ME_IN)
+    expect(typeof boundFoo).to.eql('function')
+    expect(boundFoo()).to.eql('almost finish')
   })
 
   it('bind의 인자 순서는 call과 동일합니다', () => {
     const context = 'bind'
 
     const boundFoo = foo.bind(context, ' is', ' useful')
-    expect(boundFoo()).to.eql(FILL_ME_IN)
+    expect(boundFoo()).to.eql('bind is useful')
   })
 })
 
@@ -108,15 +108,15 @@ xdescribe('call, apply의 유용한 예제를 확인합니다', () => {
   const arrayNumbers = [5, 10, 4, 9]
 
   it('spread operator, rest parameter가 탄생하기 이전엔 apply가 많이 쓰였습니다', () => {
-    expect(array1.concat(array2)).to.eql(FILL_ME_IN)
-    expect([...array1, ...array2]).to.eql(FILL_ME_IN)
-    expect(Math.max(...arrayNumbers)).to.eql(FILL_ME_IN)
-    expect(Math.max.apply(null, arrayNumbers)).to.eql(FILL_ME_IN)
+    expect(array1.concat(array2)).to.eql(['code', 'states', 'immersive', 'course'])
+    expect([...array1, ...array2]).to.eql(['code', 'states', 'immersive', 'course'])
+    expect(Math.max(...arrayNumbers)).to.eql(10)
+    expect(Math.max.apply(null, arrayNumbers)).to.eql(10)
   })
 
   it('prototype의 기능을 빌려 쓸 수 있습니다', () => {
-    expect(Array.prototype.concat.call(array1, array2, arrayNumbers)).to.eql(FILL_ME_IN)
-    expect(Array.prototype.concat.apply(array1, [array2])).to.eql(FILL_ME_IN)
+    expect(Array.prototype.concat.call(array1, array2, arrayNumbers)).to.eql(['code', 'states', 'immersive', 'course', 5, 10, 4, 9])
+    expect(Array.prototype.concat.apply(array1, [array2])).to.eql(['code', 'states', 'immersive', 'course'])
   })
 
   it('유사 배열을 다루기에 용이합니다', () => {
@@ -127,8 +127,8 @@ xdescribe('call, apply의 유용한 예제를 확인합니다', () => {
       2: 'span#new'
     };
 
-    expect(Array.prototype.slice.apply(nodeList, [0, 1])).to.eql(FILL_ME_IN)
-    expect(Array.prototype.map.call(nodeList, node => node.split('#')[0])).to.eql(FILL_ME_IN)
+    expect(Array.prototype.slice.apply(nodeList, [0, 1])).to.eql(['div#target'])
+    expect(Array.prototype.map.call(nodeList, node => node.split('#')[0])).to.eql(['div', 'li', 'span'])
   })
 })
 
@@ -165,7 +165,7 @@ xdescribe('bind의 유용한 예제를 확인합니다', () => {
 
     function callback(user) {
       let btn = createUserButton(user)
-      btn.onclick = handleClick // 이 부분을 bind를 이용해서 테스트가 통과하도록 바꿔보세요
+      btn.onclick = handleClick.bind(user) // 이 부분을 bind를 이용해서 테스트가 통과하도록 바꿔보세요
       btn.trigger()
     }
 
@@ -190,11 +190,11 @@ xdescribe('bind의 유용한 예제를 확인합니다', () => {
     }, 1000)
 
     clock.tick(1001) // 1초가 흘렀습니다
-    expect(result).to.eql(FILL_ME_IN)
+    expect(result).to.eql([1])
 
     setTimeout(pushCount.bind(counter), 1000)
 
     clock.tick(1001) // 1초가 흘렀습니다
-    expect(result).to.eql(FILL_ME_IN)
+    expect(result).to.eql([1, 2])
   })
 })