Linting & Testing
코드 퀄리티에 대한 평가 기준이란?
1. 우리가 작성한 코드가 의도한 대로 동작하는가
2. 우리가 작성한 코드에 결함, 문제가 없는가
3. 우리가 작성한 코드가 읽기 쉽고, 유지 보수가 용이한가
→ 이 코드 퀄리티를 높이는 게 Linting 과 Testing
* 추가로, 상술한 Testing 의 방법론으로는 다음과 같은 게 있다
1. End - to - End Test
2. Integration Test
3. Unit Test → 이번 시간엔 Facebook 에서 만든 Jest 라는 툴을 이용할 것
Scope in ES6
정의 : 유효범위
변수와 그 값이 어디서부터 어디까지인지를 보여주는 것
Lexical Scope VS Dynamic Scope
Lexical Scope : 유효범위가 코드를 작성할 때 결정됨
Dynamic Scope : 유효범위가 실행순서에 의해 결정됨
스코프의 규칙 첫째. LOCAL vs GLOBAL
1. Scope 는 중첩이 가능하다
2. 하위 Scope 가 상위 Scope 에 접근할 수 있다
eg. 함수 속의 함수는 상위 함수의 변수들에 접근할 수 있다
3. Global Scope 는 어디서도 접근 가능하다
4. 지역 변수는 함수 내에서 전역 변수보다 높은 순위이다
스코프의 규칙 둘째. BLOCK vs FUNCTION
1. var 은 function 단위, let 은 block 단위
밑의 두 코드는 두 변수 선언 방식의 차이점
for (var i=0; i<5; i++) {
console.log(i);
}
console.log('what is final i? : ' + i);
//이 경우 iteration 이 5가 되는 순간 멈췄으니, i엔 5가 할당되었고, 호출이 가능
//5
for (let i=0; i<5; i++) {
console.log(i);
}
console.log('what is final i? : ' + i);
//ReferenceError
그 외에도, JS 의 모든 것들은 window 객체와 연결이 된다는 특성이있다 (최상위객체)
(node 에서는 global 이 그 역할을 한다)
유효 범위 되짚어보기
lexical scope : 코드를 작성할 때 결정됨
dynamic scope (this 로 대변이 되는) : 함수가 ‘실행될 때' 결정됨 (run time dynamically)
var 이 성능에선 ‘약간 우세' 하나, scope 관련 명시적인 표현이 가능하다는 점에서 let 을 권장하는 바
const 는 ‘상수 선언' 임
+ 호이스팅에 대해서 한 번 더 알고 가자!
console.log(a);
var a = 1;
이 코드에서, a의 선언과 할당 전부가 위로 끌어올려지는(hoisted)게 아니다!!
선언만이 끌어올려지는 것일 뿐이다
→ 왜냐면, var 를 통한 변수 선언은 hoisting 이 가능하기때문이다
그래서 위의 코드는 사실상 아래의 코드처럼 실행된다
var a;
console.log(a);
a = 1;
Closure in ES6
정의 : return 되는 함수 속의 함수
외부 함수의 변수를 내부 함수(익명 함수, clousre 함수)가 자유자재로 주고받는 형식으로 사용
closure 를 주로 사용하는 이유?
functional programming 을 위해서 배워놓는 게 좋다
functional programming 은 무결한 각각의 함수를 만들어서 그 함수를 조합하여 기능을 만드는 형식
그런 과정에서, function 이라는 키워드를 계속 사용하기 귀찮으니, arrow function 스타일을 활용하는 것을 다들 추천하는 것이다
template literal
c언어에서 %d 등으로 문자열을 찍어줄 때 변수를 직접 갖고오는 과정과 비슷하다고 보면 됨
우리가 아는 흔한 따옴표가 아니라, backtick 을 사용하는 게 차이점
맥의 경우 영문 자판에서
(2016년 이후 버전, 나는 2018년형) 물결표시(~) 를 shift 없이 그대로 누르면 된다
영문 자판을 입력기로 놓은 상태에서 저 버튼을 누르면 ` 이 잘 나옵니다
+ 한국어 자판을 입력기로 놓은 상태라면 option 버튼과 함께 저 버튼을 누르면 잘 나옵니다
(option 버튼을 누르지 않을 시, KRW sign(₩) 이 나옵니다)
예시 코드
바로 html template 에서의 사용이다이것을 가지고 할 수 있는 게 또 하나 있다
기존대로라면?
let userName = 'inseob'
<div>
‘my name is’ + userName
<div>
그런데 아얘 template 을 만들어준다면?
var template = (username) => `<div>
${userName}
<div>`
이렇게 arrow function 으로 form 을 만들어준다면 앞으로도 편하게 더 편하게 응용이 가능하다
var template = (userName) => `<div>
${userName}
<div>`
undefined
template('dog');
"<div>
dog
<div>"
rest parameter
몇 개의 인자가 들어올 지 모르는 상황에서 인자를 배열로 받아 넘겨주는 기능을 의미한다
함수에 parameter 를 쓸 때, 앞에 … (three dot) 을 붙여주면 사용할 수 있다
그런데 이거 저번에도 쓴 거 같은데? ㅋㅋ
var getMax = (...params) => {
console.log(Math.max(...params))
}
이런 식으로 사용하는 것인가
가장 큰 차이점은, 저렇게 parameter 를 받아주는 것이 배열의 꼴이라는 점이다!
유사 객체(array-like object) 인 arguments 랑은 다르다
var returnTypeOfRestParams = (...params) => {
console.log('spread operator parameter is ' + params);
console.log('and their type is ' + typeof(params));
console.log('finally, are they array? ' + Array.isArray(params));
}
returnTypeOfRestParams(1,2,3,4,5,5,6,7);
//spread operator parameter is 1,2,3,4,5,5,6,7
//and their type is object
//finally, are they array? true
깔끔하게 이렇게 볼 수 있다
array type 으로 받아준다
rest parameter 를 볼 때 더 보면 좋은 거 : 비구조화 할당 (MDN 링크, 클릭 시 이동)
Default Parameter
: parameter 에 아무것도 전달하지 않아도 기본적으로 인자를 전달하는 방법
예제 코드는 다음과 같다
var template = (userName) => `<div>
${userName}
<div>`
var template = (userName = 'dog') => `<div>
${userName}
<div>`
//default parameter 를 적용하여 template 함수를 재 선언
template();
"<div>
dog
<div>"
template('cat');
"<div>
cat
<div>"
//인자가 없이 함수를 실행하면 default parameter 로 설정한 'dog' 이 나오지만
//인자를 넣고 실행하면 그 인자가 나오는 것이 default parameter 이다
parameter 에 대입하는 식으로 선언해 주면 default parameter 를 선언할 수 있다
legacy 에 대해서 먼저 알고 난 뒤 es6 style 을 알게 되어야 legacy code 를 쓰는 회사에 가서도 바로 일을 할 수 있으니
바로 es6 style 을 알려주지 않았다고 한다, 합리적이다!
this in ES6
* pre course 의 this section 을 다시 한 번 봅시다!
this 의 가장 큰 특징 : call time 에 결정된다 (lexical, 즉 static 하지 않고 dynamic 하다는 점)
|
binding pattern name |
this |
what is for? |
1 |
global reference |
window |
not useful, anyway it remind us in this case we use this, then we can see window object |
2 |
free function invocation |
||
3 |
.call or .apply invocation |
the first argument to .call or .apply |
to manually specify a ‘this’ binding, like real arguments (using .call and .apply) |
4 |
construction mode |
a new object created for invocation (using by ‘new’ keyword) |
so constructors operate on the instance they are creating |
5 |
method invocation |
object on left of the call time dot |
so methods run in the context of an object they are found on |
* invocation : using somthing specific to explain or support other (한국말로, 인용 쯤)
* instance : in short, copied object. object constructed from some original thing.
arrow function : execution context 를 만들지 않는다
bind 를 써줘도 되는데, arrow function 을 통해서 해도 된다
추가로 알아둬야 할 것들
arrow function 의 특징들
setTimeout 이 바로 실행되는 이유는 무엇인가? 즉시실행함수?
'code-states' 카테고리의 다른 글
[code-states][we-win] 37일차 - Data Structure : stack, queue (0) | 2020.06.11 |
---|---|
[code-states][we-win] 36일차 - refactoring with ES6 (0) | 2020.06.11 |
[code-states][we-win] 34일차 - git pingpong (0) | 2020.06.09 |
[code-states][we-win] 프리코스 수강 후기 (0) | 2020.06.05 |
[code-states][we-win] 26일차~33일차 - underbar, recursion, pass me (0) | 2020.06.05 |