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}${tag}>`
- 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..140237f 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', '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])
})
})