From 0a84953275ba1e452e99f97eeb0700960eb714f2 Mon Sep 17 00:00:00 2001 From: yeonlisa Date: Thu, 5 Aug 2021 18:23:07 +0900 Subject: [PATCH 1/2] yeonlisa --- modern-js-koans/01_AboutArrowFunction.js | 20 ++++---- modern-js-koans/02_AboutDestructuring.js | 38 ++++++++++----- modern-js-koans/03_AboutThis.js | 20 ++++---- modern-js-koans/04_AboutFunctionMethods.js | 56 +++++++++++----------- 4 files changed, 73 insertions(+), 61 deletions(-) diff --git a/modern-js-koans/01_AboutArrowFunction.js b/modern-js-koans/01_AboutArrowFunction.js index 5605831..c469f1a 100644 --- a/modern-js-koans/01_AboutArrowFunction.js +++ b/modern-js-koans/01_AboutArrowFunction.js @@ -8,7 +8,7 @@ describe('화살표 함수에 관해서', function () { return x + y } - expect(add(5, 8)).to.eql(FILL_ME_IN) + expect(add(5, 8)).to.eql(13) }) it('화살표 함수 사용법을 익힙니다', function () { @@ -16,19 +16,19 @@ describe('화살표 함수에 관해서', 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}` - expect(htmlMaker('div')('code states')).to.eql(FILL_ME_IN) + expect(htmlMaker('div')('code states')).to.eql('
code states
') 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('
  • 1st item
    • ') + expect(liMaker('2nd item')).to.eql('
  • 2nd item
    • ') }) }) \ No newline at end of file diff --git a/modern-js-koans/02_AboutDestructuring.js b/modern-js-koans/02_AboutDestructuring.js index 42a17e4..03a10b8 100644 --- a/modern-js-koans/02_AboutDestructuring.js +++ b/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 + }) }) }) \ No newline at end of file diff --git a/modern-js-koans/03_AboutThis.js b/modern-js-koans/03_AboutThis.js index 85c2aa6..eab2287 100644 --- a/modern-js-koans/03_AboutThis.js +++ b/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) }) }) \ No newline at end of file diff --git a/modern-js-koans/04_AboutFunctionMethods.js b/modern-js-koans/04_AboutFunctionMethods.js index e7009f5..93981ee 100644 --- a/modern-js-koans/04_AboutFunctionMethods.js +++ b/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', 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]) }) }) From e06c07c5aa2bd4a0d4b70b5a0095c5305e66c764 Mon Sep 17 00:00:00 2001 From: yeonlisa Date: Thu, 5 Aug 2021 18:28:09 +0900 Subject: [PATCH 2/2] yeonlisa --- modern-js-koans/04_AboutFunctionMethods.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modern-js-koans/04_AboutFunctionMethods.js b/modern-js-koans/04_AboutFunctionMethods.js index 93981ee..140237f 100644 --- a/modern-js-koans/04_AboutFunctionMethods.js +++ b/modern-js-koans/04_AboutFunctionMethods.js @@ -115,7 +115,7 @@ xdescribe('call, apply의 유용한 예제를 확인합니다', () => { }) it('prototype의 기능을 빌려 쓸 수 있습니다', () => { - expect(Array.prototype.concat.call(array1, array2, arrayNumbers)).to.eql(['code', 'states', 5, 10, 4, 9]) + 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']) })