JavaScript/freeCodeCamp - Full Course for Beginners 2:36:57~3:15:06

PART2: ES6

원래는 var만 썼는데,

2015년 ES6 이후로

let과 const도 쓸 수 있게 되었다.

 

let does not let you declare a variable twice.

 

var은 괜찮은데

 

let은 에러가 뜬다.

 

let을 지우면 에러가 없어진다.

 

"use strict"
- enables strict mode
which catches common coding mistakes
and unsafe actions

 

at the top of a full JavaScript file
or maybe just in a function

 

another major difference
between the var and let keywords
is that when you declare a variable with var,
it is declared globally
or locally if declared inside a function.

however the scope of let
is limited to the block statement or expression
that it was declared in.

 

var - global

     - 함수 안에서 선언되면 local

 

let - 그것이 선언된 block statement 또는 expression 안에서만

 

i를 var로 했을 때와 let으로 했을 때의 결과 차이

 

 

Even though we set i
inside this block
to "block scope"

(a block is just anything inside these squiggly braces here)

but then when we get out here
it's now back to "function scope"

because of this (처음에 선언한 i)

 

---

첫번째 let 선언을 주석처리하고 실행시켰을 경우,

we set the var
inside this block here
to "block scope"
결과: block scope is block scope

but then when we're outside of the block
when we're outside of these squiggly braces here
we can still access i here
결과: "block scope"

 

 

 

var를 let으로 바꾸면:

when we get outside the block
we get an error because it's not defined

 

so that's another reason
why people use let instead of var
is so that they can make sure
the variable is only defined
in the area they want to be defined in.

 

Const has all the features of let
but it's also read-only.
you cannot reassign a Const.

 

if we run that it should work
it prints "free code camp is amazing" many time

 

const로 바꾸니 에러가 뜸

 

const는 대문자로 쓰는 것이 일반적이다.

 

i를 var 대신 let으로 바꿨다.

let을 쓰는게 좋으니까.

 

const로 declare된 변수를 reassign할 수 없지만,

array는 mutate할 수 있다.

 

이렇게 하면 에러가 뜬다.

하지만 bracket notation을 이용해서 update할 수 있다.

 

 

const만으로는 data를 mutation으로부터 보호할 수 없다.

- object나 array의 경우.

→ object.freeze로 가능

 

PI = 99로 바뀌었다.

 

PI가 바뀌지 않는다.

 

익명의 함수이다.

익명의 함수는 arrow 함수로 변환할 수 있다.

→ 좀 더 빨리 쓸(write) 수 있다.

 

심지어 한 줄로 쓸 수도 있다.

var를 const로 바꾸는 것이 좋다.

 

↓

 

var를 const로 바꾸는 것이 좋다.var를 const로 바꾸는 것이 좋다.

 

high order functions - map filter, reduce 등

이런 함수들은 함수들을 argument(인자)로 취한다.

 

어떤 함수가 다른 함수를 인자로 취할 때는

arrow 함수를 쓰기 좋은 타이밍이다.

 

we want to compute
the square of
only the positive integers in the array

and we want to filter out
everything that's not a positive integer

so I'm going to use
the filter and map functions to do that

 

but the main thing I want you to look at
is the arrow functions that I'm passing in to filter a map

 

Before I showed you
that you pass in arguments 'in parentheses'
for an arrow function

but if you only have a single argument like this (the number argument)
you don't need parentheses around the argument

you can just put the argument
and then the arrow

so this is the beginning of the arrow function
and then we'll see what's returned from the arrow function

 

first we want to filter this array
so we only have numbers
that are integers and numbers
that are more than 0

so we'll do number that is integer
and then we will pass in the number
and number is more than 0.

so let me complete the parentheses here

now the result of this filter command
will be an array
with all the numbers that are more than 0

(4, 42, 6)

 

after we get that new array
we want to get the square of
each number in that array

so that's where we're going to use
the map function

now the map function
takes a function as an argument

but instead of writing a full function out
we can use an arrow function

so we're going to pass in x to the function
and there's gonna be an arrow function

now x just means every element from the array
that's being passed to it.

 

so remember the map is getting the array [4, 46, 6]
x means for every element in the array

this is what we're gonna do to it
x * x because it's gonna be squared

again the main point of this lesson
is not to understand the filter and map functions
but to see that we can put an arrow function

we can pass in an arrow function
and it makes it
so we can fit everything really succinctly
on one line

so let's reload this and see if it works
now we have [16, 1764, 36]

 

 

↑ 제목이 ↓이건데 잘못 나옴

Set Default Parameters for Your Functions

 

in order to create more flexible functions
you can use default parameters

 

the default parameter kicks in
when the argument is not specified or is undefined 

 

인자를 두 개 넣으면 앞의 숫자가 뒤의 숫자만큼씩 커지고,

인자를 하나만 넣으면 앞의 숫자가 1씩 커지는 것을 디폴트로 하고 싶다.

 

 

the rest operator allows you to create

a function that takes a variable number of arguments

 

the rest operator is 3 dots

 

so we have this function here
and it's taking three arguments (x, y, z)
and it's summing them

so at first it's converting these (x, y, z)
into an array called args
and then it's reducing them

so it's summing them all up here
and then returning the result

so right now
if we just run this it's going to log 6
because 1+2+3=6

 

↓

... = Rest operator

it will convert everything that's passed in into one array

and the array is called args

 

so now we don't need 3행 anymore

and it should work the same

 

 

we can also now add any number of numbers

it's going to add those numbers together

 

so before we can only pass in three arguments

and now we can have any number of arguments

 

spread operator도 ...이다.

 

it expands an already existing array

or it spreads out an array

 

so it takes an array

and spreads out into its individual parts

 

the spread operator can spread arr1

into the individual months

instead of the actual array here

 

you can only use it

in an argument to a function

or in an array of literal

 

4행:

we're setting arr2 to equal arr1

 

in this example,

we're not actually copying it

 

because if we set the index 0 of the arr1 to potato

arr2’s index 0 becomes potato

 

because these are equal.

arr2 and arr1 are the same.

 

but what if we want arr2 to be a copy of arr1?

we can use the spread operator

 

it will spread out the contents of arr1

into this new array(arr2)

 

so we're not making arr2 to equal arr1

we are making array to equal

all of the contents of arr1

so they'll be different

 

so if we run this again

you'll see that it says January for the first element

instead of potato

 

1행과 같은 객체가 있을 때,

if we want to take each individual element in this object

and assign it to its own variable

this is the old way of doing it

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

 

with destructuring,

there's a simpler and quicker way

to assign variables for each element in an object

 

you can read it like this:

 

get the field of x from the object

copy into the value a

 

get the field of y from the object

copy into the value b

 

get the field of z from the object

copy it into the value c

 

so this is just a quicker way of assigning things

from an object into variables

 

now we're going to use destructuring

to obtain the average temperature for tomorrow

from the object average temperatures.

 

이렇게 바꾸면 된다.

 

 

 

1행:

we're assigning the variables z, x

to the first two numbers of the array 1, 2

 

the difference between

destructuring from arrays

and destructuring from objects

 

is that you cannot specify

which element from the array

to go into a variable

it just goes in order

 

however if we wanted number 4

to be going to a variable

we could just do like this:

 

we would just add some commas with nothing in it

two commas in a row and

I'll put a Y here

 

so now we have

the first element the second element

e skip the third element

and then we have the fourth element

 

 

here's another thing you can do:

you can use destructuring of arrays

to switch the places of variables

 

what I'm going to do is

use destructuring

to switch the places of a and B

 

[a, b] = [b, a]

so now it's just taking this

and switching the places

 

so instead a=8, b=6,

it's now gonna be

a=6, b=8.

 

we want to return the array

with the first two elements removed

 

so let's use the rest operator inside an array

and to remove the first two,

I just have to put two commas here

with nothing in

 

so it's saying

do nothing for the first element

do nothing for the second element

everything else put into the arr variable

 

※ 이렇게 해서 a=1, b=2로 할 수도 있지만 굳이.

 

we have this half function

and it's getting the stats argument

so the stats is being passed

when it's called down here

 

and it's passing in this whole object

= this whole stats object

 

but you can see within this function

we're only using stats.Max and stats.Min

 

so instead of passing the entire stats into this function

we can just pass in what we need

 

this is commonly used

with API calls

 

when you are getting information

from an ajax request or an api request

 

it will often have a lot more information

than what you need

 

and you can use destructuring

to get it down to what we actually want to work with

 

template literals

: a special type of string

that makes creating complex strings easier

you make them with backtick

 

advantages of using template literals (back ticks)

instead of quotation marks

 

1) you can make multi-line strings

 

2) you can add quote single or double quotation marks

right in the string

and you don't have to escape them

 

3) you can put variables right in the string

so if we see the dollar sign and curly braces,

anything in between these curly braces that start with the dollar sign

is JavaScript

 

코딩 챌린지

 

we have this makeList function

and we want it to create a list

based on the array that's passed in

 

so when we call makeList

we pass in result.failure

 

result.failure은 17행에 있다.

우리가 원하는 array 결과는 ↓다음과 같다.

each element in the array

is a template literal

that has some HTML in it

 

and then it also has

no-var, var-on-top and linebreak

that comes right from this array(failure) that's passed in

 

so let's use template literal

to create that

 

so instead of setting this to equal null (21행)

I'm going to start this off to be an empty array

 

now there's many ways to do this

but I'm gonna use the classic for loop

 

inside this for loop

will do resultDisplayArray.push

 

and then here is

where I'm going to use the template literal

 

put a back kick and

I'll put this HTML code here

 

li class equals text warning

and now this next part is going to be a variable

 

because it changes for each array element here

so I'm gonna do dollar sign and then the curly braces

 

중복의 발생

if you know that you want to create an object

with where the key is the name of the variable

and the value is the value of the variable

there's an easier way to do it

 

an object can contain a function

 

 

 

the class syntax replaces the constructor function creation

예제

 

 

with a class object

you often want to obtain values from the object and

set a value of a property within an object

 

these are often called getters and setters

 

 

 

나머지 내용은 여기에 있다. ↓

https://act-think.tistory.com/182

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

 

 

 

 

 

 

 

https://www.youtube.com/watch?v=PkZNo7MFNFg&t=7817s