정리_JavaScript/유튜브 fcc - 2. ES6_1차 정리

처음에 이 ES6 부분을 들었을 때는

뒷부분으로 갈 수록 도대체 무슨 말인지 이해가 안 돼서 괴로웠는데,

 

알고리즘 푸는게 너무 재밌어서

나흘 동안 푹 빠져서

JavaScript를 계속 써보고,

여러 method를 익혔더니

이제 이 강의가 쏙쏙 들어온다 ㅎㅎ

 

실력이 쑥 늘은 것 같아서 뿌듯하고 기쁘다!

 

 

"use strict"

흔한 코딩 실수와 안전하지 않은 actions를 잡아내준다.

 ex) 변수를 create해놓고 declare하지 않는 것

 → 제일 윗줄이나 함수 안의 제일 윗줄에 쓴다.

 

 

 

변수 - let과 var

let으로는 같은 변수를 두 번 declare할 수 없다.

 

var로 변수를 declare하면

- global / 함수 안에서 declare하면 local

 

let으로 변수를 declare하면

- 그것이 declare된 block statement나 expression으로 한정된다.

※ block이란: {}로 감싸진 것

 

↓예시)

 

(1) var

if문 위에서 i를 function scope로 set했고

if문 안에서는 i를 block scope로 set했다.

→ if문 밖에서도 i의 값이 block scope이다.

 

(2) let

둘 다 let을 붙여줬더니

→ if문 밖에서는 i의 값이 function scope으로 돌아왔다.

 

 

(3) block안에서만 var로 선언한 경우

block 밖에서도 var i에 접근할 수 있고,

block 안에서 set한 값을 여전히 가진다.

 

 

(4) block 안에서만 let으로 선언한 경우

block 밖에서는 not defined.

 

 

 

변수 - const

let의 모든 특성을 갖고 있으면서

read-only이다. = reassign할 수 없다. → 실수 방지

 

const를 변경하려고 하면 에러가 뜬다.

 

 

const 변수의 이름은 대문자로 쓰는 것이 일반적이다.

 

for 문 안의 i도 let으로 선언해주자.

 

 

 

변수 - const - array

const로 declare된 변수를

reassign할 수는 없지만,

mutate할 수는 있다.

 

이렇게 하면 에러가 뜨지만

 

이렇게 []를 이용해서 update하는 것은 가능하다.

 

 

 

변수 - const - object.freeze();

앞에서 봤듯이,

const로 선언하는 것은

mutation으로부터 data를 보호하지 못한다.

 

object.freeze();로 data mutation을 방지할 수 있다.

 

 

이렇게 하면 const 객체 안의 PI 값이 3.14에서 99로 바뀌어버린다.

 

이렇게 7행에 object.freeze();를 사용하면 에러가 뜨면서

PI의 값이 바뀌지 않는다.

 

 

 

Arrow Function

→ Consise Anonymous Function을 만들기

(간결한 익명의)

 

function이 magic이라는 변수에 대해서 assign되었지만,

function 앞에 funcition의 이름을 지정해줄 단어가 없다.

 

익명의 function은 arrow function으로 바꿀 수 있다.

→ 좀더 짧게 write할 수 있다.

 

 

 

function이라는 단어를 지우고

대신 화살표를 쓴다.

이것을 더 짧게 쓸 수도 있다. ↓

 

 

만약 우리가 하나의 value만을 return한다면,

return키워드도 쓸 필요가 없다.

그리고 { }도 필요 없다.

 

앞의 var를 const로 바꾸면 더 좋다.

 

 

 

Arrow Function - Parameter를 가진 것

 

 

같은 방식으로 바꾸는데, 괄호 안에 parameter를 쓴다.

var를 const로 바꿔주면 더 좋다.

 

 

 

Arrow Function - Higher Order Functions

high order functions

- map, filter, reduce 등과 같이

함수를 argument(인자)로 취하여

collections of data를 process하는 함수

 

이렇게 함수가 다른 함수를 argument로 취할 때,

arrow function을 쓰면 좋다.

 

3~6행의 함수를 간결하게 변경해볼 것이다.

오직 양수인 정수만 제곱한다.

- filter와 map function을 이용한다.

먼저 4행에 arr.filter라고 썼다.

만약 하나의 argument만 있다면,

( )를 쓰지 않아도 된다.

 

 

먼저 이 array를 filter해서 정수이고 0보다 큰 것만 남긴다.

(4, 42, 6)

 

 

그 다음에는 그 양의 정수들을 제곱해야 한다.

x는 그 array 중에서 pass된 모든 element(4, 42, 6)를 뜻한다.

 

 

 

Default Parameters

→ 더 flexible한 function을 만들 수 있다.

 

argument가 specify되어 있지 않거나

undefined일 때 kicks in.

 

이 함수에서 value를 따로 지정해주지 않으면

1씩 증가하도록 하려면,

 

 

value=1이라고 써주면 된다.

 

 

 

Rest operator(...)

→ 인자의 갯수가 정해져 있지 않을 때 사용하여

 인자를 몇 개 넣든지 상관없는 함수를 만들 수 있다.

 

이 함수는 세 개의 arguments(x, y, z)를 취하고 있고,

그것들을 더한다.

 

먼저 x, y, z를 args라는 array로 변환한다.

그리고 나서 그것들을 reduce한다.

다 더해서 결과를 return한다.

 

이것을 rest operator를 이용해서 바꿔보자.

 

...args는 pass in되는 모든 것을

args라는 array로 변환할 것이다.

그러면 3행을 지워도 똑같이 작동한다.

 

 

이제 세 개(x, y, z)뿐만이 아니라 더 많거나 적은 숫자를 넣어도

똑같이 작동된다.

 

 

 

Spread Operator(...)

Rest Operator와 모양은 같다.

 

이미 존재하는 array를 expand하거나 spread out한다.

array를 취해서 그것을 개별적인 parts로 spread한다.

 

spread operator를 이용해서

arr1를 개개의 month로 spread할 수 있다.

 

in an argument to a function

또는 in an array of literal에서만 사용할 수 있다.

 

 

이 코드를 실행시켜보면, 

arr1[0]을 potato로 바꿨지만,

arr2[0]까지 potato로 바뀐 것을 알 수 있다.

 

왜냐하면 4행에서 둘이 같다고 했기 때문이다.

 

그렇다면 arr2가 단지 arr1의 copy가 되게 하려면 어떻게 해야할까?

spread operator를 사용하면 된다.

 

 

 

앞에 ...을 찍고

[ ]로 감싸주면 (array라는 뜻)

 

arr1의 contents를

arr2라는 새로운 array에 spread out한다.

 

이렇게 하고 실행을 시켜보면

arr2[0]는 "JAN"으로 출력된다.

 

 

 

Destructuring assignment - from Objects

: a special syntax
for neatly assigning values
taken directly from an object

to a variable

 

객체의 value를 변수에 assign

 

3개의 element를 가진 voxel이라는 객체가 있다.

만약 우리가 이 객체의 각각의 element를 취해서

각각의 변수에 assign하고 싶다면,

 

원래는 3~5행과 같이 해야한다.

 

destructuring을 이용해서

이것을 더 간단하고 빠르게 할 수 있다.

↓ 요렇게

 

 

 a, b, c라는 변수를 만들고

그것을 객체의 value인 x, y, z에 assign한다.

{ }로 감싸고, = 객체 이름을 써준다.

 

즉, 이런 뜻이다.

 

객체로부터 x의 field를 가져와서(복사해서)

value a에 붙여넣어라.

 

객체로부터 y의 field를 가져와서(복사해서)

value b에 붙여넣어라.

 

객체로부터 z의 field를 가져와서(복사해서)

value c에 붙여넣어라.

 

 

예제)

AVG_TEMPERATURES라는 객체에서

tomorrow의 값을 가져와보자.

 

뜻: AVG_TEMPERATURES 라는 객체에서

 tomorrow field를 가져와서

 그것을 tempOfTomorrow value에 assign해라.

 → 79 출력

 

 

 

Destructuring assignment - from Nested Objects

 

 

 

 

Destructuring assignment - from Arrays

변수 z와 x를

array의 처음 두 숫자에 assign하고 있다.

 

array로부터 destructure할 때,

object로부터 destructure할 때와는 다른 점:

 

array로부터 '어느 element가'

변수로 들어갈지 specify할 수 없다.

차례대로 들어간다.

 

그러나, 숫자 4가 변수에 들어가기를 원한다면

,를 이용할 수 있다.

 

 

또한 array를 destructure하는 것을 이용하여,

변수의 자리를 바꾸는 것도 가능하다.

 

8행 → a = 6, b = 8

 

 

 

Destructuring assignment - with the Rest Operator → reassign array elements

 

함수를 이용해서 앞의 두 elements를 제거해보겠다.

 

뜻: 첫번째와 두번째 element에 대해서는 아무 것도 하지 말아라.

 나머지 모두는 arr 변수에 집어넣어라.

 

※ 이렇게 하는 방법도 있다.

 이렇게 하면

 const a = 1;

 const b = 2;가 된다.

 

 

 

Destructuring assignment - 객체를 함수의 인자로 pass하기

 

 

최대값과 최소값의 평균을 출력하는 함수이다.

 

 

이것은 보통 API calls와 함께 쓰인다.

 

an ajax request나 an api request로부터 정보를 받을 때,

그것은 우리가 원하는 정보보다 훨씬 많은 정보를 포함하고 있을 것이다.

 

그 때, destructuring을 사용해서

 get it down to what we actually want to work with할 수있다.

 

 

 

Template Literals

back tick(`)을 이용

 

장점

1) 줄바꿈 가능

2) escaping 없이 '나 " 사용 가능

3) ${변수}로 변수 사용 가능

 

코딩 챌린지)

makeList라는 함수를 이용해서

pass in되는 array에 따라서 list를 만들고 싶다.

 

31행처럼 makeList함수를 call하면

result.failure(17행)를 pass in하게 된다.

 

이 때, 이런 형식의 list가 출력되게 하고 싶다.

 

list의 각각의 줄은 emplate literal이다.

그리고 HTML이 들어있고,

pass in된 no-var, var-on-top, linebreak가 있다.

 

null 대신에 empty array로 시작하자.

 

이것을 하는 방법은 여러가지가 있지만,

classic for loop을 사용해보자.

 

이 for loop 안에 push 메소드를 넣고

 

template literal을 쓴다.

no-var, var-on-top, linebreak 부분은 변수로 대체한다.

 

 

 

Simple fields

→ concise object literal declarations

object literal을 쉽게 define하기

반복된다.

 

객체를 만드는데,

key = 변수의 이름이고,

value = 변수의 value일 때

 

 

 

 

Write Concise Declarative Functions with ES6

객체가 함수를 포함할 수 있다.

↓ 간단하게 쓰기

 

 

 

 

Use class Syntax to Define a Constructor Function

class 키워드를 사용해서 객체를 만들 수 있다.

 

↑ 옛날 방법: new 키워드를 사용해서 만들기

 

1~3행의 constructor 함수가 있어야 한다.

이 함수를 이용하여 객체를 construct한다.

 

class syntax가 constructor 함수를 대체한다.

그리고 { } 안에 constructor가 있다.

 

예제)

 

 

 

 

Use getters and setters to Control Access to an Object

 

※ 참고: PHP 접근 제어자 - Getters & Setters

https://act-think.tistory.com/83?category=871087

5/31(2) freeCodeCamp - PHP

https://act-think.tistory.com/78?category=868570

5/30(3) 생활코딩

class object가 있을 때,

- object로부터 value를 얻거나

- object 안에 있는 property에 value를 set하고 싶을 때가 있다.

→ 이것들을 getters and setters라고 부른다.

 

Book이라는 class object 안에

constructor가 있고,

getter과 setter가 있다.

 

※ private 변수: _author

 변수의 첫글자가 _이면 그것이 private 변수임을 알린다.

 → 그 scope나 class 밖에서 access할 수 없다.

 

getter 함수

- private 변수에 직접적으로 접근하지 않고도

 그것의 value를 return 또는 get할 수 있게 해준다.

 

setter 함수

- _author와 interact하지 않으면서

 writer를 set할 수 있다.

 

예제) Thermostat class의 getter&setter를 만들어보자.

class를 만들 때, 화씨의 온도를 accept할 것이다.

그러나 getter과 setter를 만들어서

섭씨의 온도를 obtain할 것이다.

 

constructor를 통해 들어온 화씨 온도를 섭씨 온도로 변환한다.

 

getter와 setter는 섭씨 온도이다.

 

30행 - makeClass 함수는 Thermostat object를 return할 것이다.

 

31행 - object를 instantiate할 때,

 항상 new 키워드를 사용해야 한다.

 → new Thermostat

 

 76을 pass in한다.

 그러면 76이 17행의 constructor의 temp로 간다.

 그러면 화씨를 섭씨로 변환해주는 계산을 한다.

 

32행 - thermos.temperature은 getter를 사용할 것이다.

 그리고 this._temp를 return한다.

 

 중요한 것은 32행 뒤에 괄호가 없다는 것이다.

- 함수 뒤에는 ()를 쓴다.

- 변수나 property 이름 뒤에는 ()를 쓰지 않는다.

 

 

33행 - setter

 → 23행의 undatedTemp를 26으로 set한다.

34행 - 이제 temp와 thermos.temperature가 equal하다고 할 수 있다.

35행 - new temperature가 26으로 출력된다.

 

Understand the Differences Between import and require

과거에는 require 함수를 사용해서

다른 파일로부터

함수나 코드를 import했다.

 

그러나 이제는 import와 export를 사용할 수 있다.

하나의 파일에 code를 export할 수 있고,

다른 파일에서 그것을 import할 수 있다.

 

또한 파일로부터

특정한 함수나 변수만을 import할 수 있다.

 

이 index.js 파일 안에는 capitalizeString 함수가 존재하지 않기 때문에 에러가 뜬다.

 

string_function.js 파일 안에 capitalizeString 함수가 있다.

export statement가 있다.

→ 이 함수를 export하고 있다.

 

capitalizeString는 변수이다.

arrow function이다.

대문자로 변환한 string과 equal하도록 set되어있다.

 

from에 .js는 안써도 된다.

 

 

 

Use export to Reuse a Code Block

 

아까는 const 앞에 export를 썼지만,

이번에는 다른 방식으로 해보겠다. (아래 그림의 5행)

 

 

Use * to Import Everything from a File

 

as 뒤에 import 받을 object 이름을 지어서 쓴다.

 

 

Create an Export Fallback with export default

 

export default: fallback export.

파일에서 one thing만 export하고 싶을 때 사용

 

이것이 나의 fallback export라고 하자.

= 나는 파일에서 이 one thing만 export하고 싶다.

 

 

 

Import a Default Export

math functions라는 파일이 있다고 가정하자.

그 파일에는 substract라는 이름의 default export가 있다.

그것을 어떻게 import하는지 알아보자.

 

차이: subtract를 { }로 감싸지 않는다.

 

 

 

 

 

youtu.be/PkZNo7MFNFg