오늘은 그동안 배웠던 개념들을 문제로 풀어보면서 학습했던 내용에 대해전반적으로 복기하는 시간을 가졌다.
확실히 문제를 풀어보니 내가 어떤 개념들 잘 이해하고 있고, 어떤 부분이 보충이 필요한지 몸소 느낄 수 있는 경험이었다. 👍
작성한 함수가 주어진 입력값에 대해서 리턴하는 값이 기대하는 값과 같은지를 비교하는 함수
이 함수를 활용하여 풀이한 문제의 결과를 확인할 수 있었다.
expect(테스트하는값).기대하는조건
expect(isEven(3)).to.be.true => 'isEven(3)의 결과값은 참(true)이어야 한다'
expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'
matcher
라고 한다.'참인 것이어야 한다' => to.be.true
'3과 같아야 한다' => to.equal(3)
matcher
가 있다. 자세한 건 다음 링크를 참고하자.this
란 무엇인가?method
는 '어떤 객체의 속성으로 정의된 함수'를 말한다.
전역 변수에 선언한 함수도 웹페이지에서 window
객체의 속성으로 정의된 함수라고 할 수 있다.(method
는 항상 '어떤 객체'의 method이다.)
따라서 호출될 때마다 어떠한 객체의 method
일 텐데, 그 '어떠한 객체'를 묻는 것이 this
이다. 참고자료
예시로, obj
이라는 객체 안에 foo
라는 메서드를 선언하고, this
를 반환한다고 했을 때
let obj = {foo: function() {return this}};
console.log(obj.foo() === obj); // true
this
는 함수의 호출에 따라서 값이 달라지기도 한다.this
가 사용된 예시 코드
const megalomaniac = {
mastermind: 'Brain',
henchman: 'Pinky',
getFusion: function () {
return this.henchman + this.mastermind;
},
battleCry(numOfBrains) {
return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
},
};
console.log(megalomaniac.getFusion()); // PinkyBrain
console.log(megalomaniac.battleCry(3)); // They are Pinky and the Brain Brain Brain
this
가 없다)this
가 없다.this
는 자신을 감싼 정적 범위(lexical context)이다.this
를 찾을 때, 화살표 함수 바로 바깥 범위에서 this
를 찾는다.mdn에 따른 클로저의 정의
클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있다.
예시 코드
let color = 'red';
let name = 'apple';
let price = 1000;
function outerFn() {
let color = 'yellow';
name = 'banana';
let price = 2000;
function innerFn() {
color = 'purple';
let name = 'grape';
return price;
}
innerFn();
console.log(color); // 'purple'
console.log(name); // 'banana'
return innerFn;
}
const innerFn = outerFn();
console.log(color); // 'red'
console.log(name); // 'banana'
console.log(innerFn()); // 2000
예시 코드
const adder = x => {
return y => {
return x + y
}
}
console.log(adder(50)(10)); // 60
const subtractor = x => y => {
return x - y
}
console.log(subtractor(50)(10)); // 40
const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
console.log(htmlMaker('div')('code states')); // <div>code states</div>
const liMaker = htmlMaker('li')
console.log(liMaker('1st item')); // <li>1st item</li>
console.log(liMaker('2nd item')); // <li>2nd item</li>
slice
arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴한다.
배열 전체를 복사
const arr = ['peanut', 'butter', 'and', 'jelly'];
console.log(arr.slice(0)); // ['peanut', 'butter', 'and', 'jelly'] 0번째부터 끝까지
기존 배열의 일부를 복사
const arr = ['peanut', 'butter', 'and', 'jelly'];
console.log(arr.slice(1)); // ['butter', 'and', 'jelly'] 1번째부터 끝까지
console.log(arr.slice(0, 1)); // ['peanut'] 0번째부터 1번째 전까지
console.log(arr.slice(0, 2)); // ['peanut', 'butter'] 0번째부터 2번째 전까지
console.log(arr.slice(2, 2)); // [] 2번째부터 2번째 전까지
===
)을 사용하자.==
)는 프로그램의 작동을 예측하기 어렵게 만든다. (비효율적)===
)을 사용하자!==
와 ===
비교const
로 선언한 변수const
로 선언된 변수에는 재할당(reassignment)이 금지된다.let
으로 선언한 변수는 에러가 발생하지 않고 재할당이 된다.const
로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다.const
로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.const
키워드를 굳이 사용하는 이유는 뭘까? 🤷♀️function
키워드를 생략하고 화살표 =>
를 붙일 수 있다.
const add = (x, y) => {
return x + y
}
console.log(add(10, 20)); // 30
리턴(return
)을 생략할 수 있다.
const subtract = (x, y) => x - y
console.log(subtract(10, 20)); // -10
필요에 따라 소괄호(()
)를 붙일 수 있다.
const multiply = (x, y) => (x * y)
console.log(multiply(10, 20)); // 200
파라미터가 하나일 경우 소괄호(()
) 생략이 가능하다.
const divideBy10 = x => x / 10
console.log(divideBy10(100)); // 10