본문 바로가기

code-states

[code-states][we-win] 35일차 - linting, testing

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.

→ table with eg code

 

arrow function : execution context 를 만들지 않는다

bind 를 써줘도 되는데, arrow function 을 통해서 해도 된다

추가로 알아둬야 할 것들

arrow function 의 특징들

setTimeout 이 바로 실행되는 이유는 무엇인가? 즉시실행함수?