(4/18 ~4/28) The Web Developer 부트캠프 2022 강의 내용 정리
범위 : JavaScript 기초! ~ Javascript 최신 기능들(섹션 14 ~23)

1. 자바스크립트란

JavaScript는 움직임, UI 효과, 정보를 실시간으로 업데이트 하는 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어

2. 기본 요소 및 콘솔

기본 요소

타입

보관하고 다룰 수 있는 다양한 정보의 타입

• Primitive Type (원시타입)
  
  원시 타입은 프로그래밍 언어에서 쓰기로 정해진 타입 - Number - String - Boolean - Null - Undefined - bigint - symbol

콘솔

브라우저에서 코드를 실행하고 결과 값을 확인할 수 있는 창

clear() 콘솔창 지우기

3. Javascript 숫자

Numbers

1 // 정수
-1 // 음수
3.14 // 실수

Math Operations

50 + 5 // 55

90 - 1 // 89

11111 * 7 // 77777

400 / 25 // 16

27 % 2 // 1

2 ** 4 // 16

// : 주석

// 연산순서 (PEMDAS): parentheses(괄호) > exponent(지수) > multiplication(곱하기)
//									 > division(나누기) > subtraction(빼기)

4. NaN은 또 뭘까?

NaN(NOT A NUMBER)

0 / 0; // NaN

1 + NaN; // NaN

typeof 4; // "number"

typeof 4.231314; // "number"

typeof NaN; // "number" -> 숫자로 간주됨

5. 변수와 Let

Variables

데이터를 담는 공간( 재사용을 위해 값에 이름을 넣어 저장하는 것 )

let someName = value; // let 변수명 = 저장 하고자 하는 값

let year = 1985; // 변수 선언할때 세미콜론 있어야함

let numHens = 5;

let numRoosters = 1;

numHens + 1; // 6

numHens + numRoosters; // 6

let totalchicken = numHens + numRoosters;

totalchicken; // 6

6.변수 업데이트하기

숫자 업데이트

let score = 0;

score = score + 5; // 5, 자신에게 5를 더한 값을 score에 저장

score += 5; // 10, 위랑 같은 의미

score -= 5; // 5, 다른 연산자도 가능

score *= 2; // 10

score /= 2; // 5

score++; // 1증가, score+=1; 같은 의미

score--; // 1감소

7.Const와 Var

const

상수(항상 일정하고 바꾸지 않는 값)을 선언할 때 사용하는 키워드

const luckyNum = 26; //26

luckyNum += 1; //error, 변경할수 없다.

luckyNum = 7; //새로운 값을 할당할수 없다.

var

옛날 방식.. 권장하지 않음(금지)

let과 차이점이 있지만 추후에 다시 다룸

var runDistance = 26.2; //26.2

runDistance += 1; //27.2

8. Boolean

True / False 두개의 값이 있다.

let isActiveGame = true; // true

isActiveGame = false; //false

Variable Can change Types

type을 변경하는 변수를 가질수 있다.

let isLoggedIn = false; // false

isLoggiedIn = 2342324; // 타입을 변경해서 저장할수 있다. 권장 X

9.변수 명명과 규칙

변수 명명과 규칙

1. 숫자로 시작할수 없다.
2. 공백을 사용할수 없다.
3. 대소문자를 구별한다.
4. $, _는 첫글자로 자유롭게 올수 있다.

통상적인 관례

카멜 케이스 :

한단어 이상을 써야 할경우 변수의 첫단어를 제외한 각단어의 첫문자를 대문자로 쓰는방법

let currentYear = 1999;

let userInputNumber = 1234;

let isLoggedIn = true;

let n = 9; // 의미없는 짧은 변수는 피해라, 간결성은 중요X

10. 문자열 개요

" ", ' ' 로 묶어야 한다.

let favAnimal = 'Dumbo Octopus';

11. Indices와 Length

Indices

문자열의 문자에는 각각 관련된 인덱스가 있다.

let animal = 'Octopus';
//animal[0]  "O"
//animal[1]   "c"

문자열에 없는 인덱스인 경우 undefined가 나온다

let animal = 'Octopus';
//animal[7]  undeifned

Length

문자열의 길이를 출력하는 함수

let animal = 'Octopus';
animal.length; // 7

문자열은 바꿀 수 없음

변수에 있는 문자열을 하나하나 바꿀 수 없다.
새로운 문자열을 저장해야함

let animal = 'Octopus';
animal[0] = 't';
animal[0]; // 출력 결과: O

animal = 'tctopus'; //새로운 문자열로 저장
animal[0]; // 출력 결과 :t

문자열 + 숫자

숫자를 문자열로 바꿔서 합침

let year = '1999';
year + 1; // "19991"

12. 문자열 메서드

let msg = 'hello';
msg.toUpperCase(); // "HELLO" 대문자로 변경
msg.toLowerCase(); // "hello" 소문자로 변경

msg = ' hello world ';
msg.trim(); // "hello world" 앞 뒤 공백 제거 가운데 공백은 제거 안함

msg.trim().toUpperCase(); // "HELLO WORLD" 메소드를 연결해서 사용 가능
' hello world '.trim(); // "hello world" 문자열에 바로 메소드 사용 가능

13. 인수가 있는 문자열 메서드

인수

메서드로 전달되어서 메서드의 동작을 변경하는 입력 값

let tvShow = 'catdog';
//문자열에서 cat이라는 인수에 해당하는 인덱스 위치의 시작값을 반환
tvShow.indexOf('cat'); // 출력 결과:0
//5인덱스 끝까지 자름
tvShow.slice(5); //출력 결과: "g"
//0인덱스부터 5인덱스까지 자름
tvShow.slice(0, 5); // 출력 결과: "catdo"
//뒤에서부터 해당 인덱스만큼 자름
tvShow.slice(-5); //출력 결과: "atdog"

let annoyingLaugh = 'teehee so funny! teehee!';
annoyingLaugh.replace('teehee', 'haha'); // 출력결과 : 'haha so funny! teehee!'
//해당 문자열 인수만큼 반복
annoyingLaugh.repeat(2);
//'teehee so funny! teehee!teehee so funny! teehee!';

14. 문자열 템플릿

``(back-tick)을 사용한다. 표현식은 ${}로 감싼다.

문자열 안에 표현식을 내장할 수 있는 문자열들을 만들고 해당 표현식은 평가된 후에 문자열로 바뀐다.

let count = 10;
let string = `back tick ${count}`; // 출력 결과: "back tick 10"
let string = `back tick ${count * 2}`; // 출력 결과: "back tick 20"

15. Undefined와 Null

Undefined

정의된 값이 없다.

Null

값을 일부러 지정하지 않음을 명시적으로 표시

16. Math 객체와 난수

Math 객체

수학과 관련된 특성과 메서드의 모음

Math.PI; // 3.141592... 수학적 상수
Math.round(4.9); //5 소수점 한자리가 5이상이면 올림
Math.abs(-456); // 456 절대값
Math.pow(2, 5); // 32  제곱수
Math.floor(3.999); //3 버림

난수

무작위로 생성되는 수

Math.random(); // 0~1 사이의 수를 무작위로 생성

// 특정 범위의 수를 구하기 위해선 범위의 끝 수를 곱하고, 자연수를 얻기 위해서 Math.floor를 사용해야함
Math.floor(Math.random() * 5); // 0~5사이의 자연수

17. 비교연산자

>
<
>=
<=
==
!=
=== // strict equality
!== // strict non-equality

boolean 판단에 대한 결과 값은 true, false이다.

문자열 비교는 유니코드값으로 비교된다.

18. 이중 등호 vs 삼중 등호

이중 등호 (==)

값에 대한 비교만 하며 타입에 대해선 하지 않는다.

10 == '10'; // true
null == undefined; //true
0 == false; // true
true == false; // false

삼중 등호 (===)

값과 타입을 모두 비교한다.

10 === '10'; // false
null === undefined; // false
0 === false; // false
true === false; // false

엄격한 비동등 연산자 (!==)

값과 타입에 대해 비동등한지 비교

19. Console, Alert, Prompt

Console

실시간으로 자바스크립트를 실행하고, 에러 메시지등을 출력해주는 기능

console.log('hi'); // 'hi';
console.log(3 + 4); // 7;
console.err('err'); // 'err' 출력
console.warning('warning'); // 'warning' 출력
console.clear(); //콘솔 비우기

Alert

사용자에게 팝업창으로 메세지를 표시한다.

alert('alert!');

Prompt

사용자로부터 입력값을 받는 창을 띄우며 입력한 값을 받는다.

prompt('저장하시겠습니까?');

20. javascript 실행하기

1. 실행하려는 javascript 코드를 script 태그로 감싼다.

<!DOCTYPE hmtl>

<html>
    <head> </head>

    <body>
        <script>
            consoel.log('hi');
        </script>
    </body>
</html>

2. 외부에 script코드를 작성하고 src에 해당 경로 및 파일명을 기입한다.

app.js

console.log('javascript!')'

index.html

<!DOCTYPE hmtl>

<html>
    <head>
        <script src="app.js"></script>
    </head>

    <body></body>
</html>

=> 콘솔에 javascript!가 찍힌다.

이 방법의 경우 javascript를 넣을 이상적인 위치는 body 끝 부분이다.

index.html

<!DOCTYPE hmtl>

<html>
    <head> </head>

    <body>
        <h1>javascript!</h1>
        <script src="app.js"></script>
    </body>
</html>

21. If 구문

조건에 대한 판단 값이 true이면 실행

if (1 + 1 == 2) {
    console.log('If Execute');
} // 출력 값 : 'If Execute';

if (1 + 2 == 2) {
    console.log('true');
} // 출력 값 : undefinded

22. Else-If 구문

If 조건에 대한 판단 값이 false이면
해장 조건문 판단 후 true이면 실행

if (1 + 2 == 2) {
} else if (1 + 1 == 2) {
    console.log('Else-If Execute');
} // 출력 값 : 'Else-If Execute'

23. Else

조건문이 없으며 if문 또는 else-if문에 대한 조건문 판단 값이 false이면 실행

if(false)
else if(false)
else {
    console.log('Else Execute');
} // 'Else Execute'

24. 조건부 네스팅(Nesting)

조건문 안에 조건문 넣기

let password = 'cat dog';

if (password.length >= 6) {
    if (password.indexOf(' ') === -1) {
        console.log('Valid password!');
    } else {
        console.log('Password cannot include spaces');
    }
} else {
    console.log('Password too short!');
}

25. Truth-y 값과 False-y 값

Javascript의 모든 값에는 고유 truth-y, false-y가 있다.

Falsy values :
false
0
""(empty string)
null
undefined
NaN

Everything else is truthy!

26. 논리함수 AND

두 조건이 다 참이여야 참

true && true; // true
true && false; // false
false && false; // false

27. 논리함수 OR

한 조건이라도 참이면 참

true || true; // true
true || false; // true
false || false; // false

28. 논리함수 NOT

표현식에 대한 boolean 값을 반전시킴

!true; // false
!false; // true

29. Switch 조건문

switch문에 들어가는 인수에 따라 실행되는 코드가 다르다.

const day = 2;
switch (day) {
    case 1:
        console.log('MONDAY');
        break; // break를 넣어주어야 다음 case 코드가 실행되지 않는다.
    case 2:
        console.log('TUESDAY');
        break;
    default:
        console.log('INVALID NUMBER!'); // case에 해당하지 않는 값일 경우 해당 코드 실행
} // 출력 값 : "TUESDAY";

30. 배열 개요

배열

순서가 있는 값의 집합
여기서 순서란 인덱스 순서를 의미한다.

const colors = ['red', 'blue', 'green'];
// colors[0]='red'
// colors[1]='blue'
// colors[2]='green'

자바스크립트에서 배열은 여러 타입에 대한 값을 가질
수 있다.

const array = [1, '1', null, undefined];

31. 배열 임의 접근

인덱스 접근으로 특정 요소를 찾거나 값의 변경이 가능하다.

let colors = ['red', 'blue'];
colors[0] = 'green';
colors[0]; // 'green'

let colors = ['red', 'blue'];
colors[10] = 'yellow';
//이렇게 하면 인덱스 2~9까지 undefined로 값이 들어간다.

32. Push 와 Pop 메소드

Push

배열에 마지막에 해당 값을 저장 후 배열의 길이 값을 반환한다.

let colors = ['red'];
arr.push('blue'); // 2

Pop

배열에 마지막 값을 꺼낸다. 배열에 있던 값은 삭제한다.

let colors = ['red', 'blue'];
colors.pop(); // blue
colors; // ['red']

33. Shift 와 Unshift

Shift

배열 시작부터 제거하고 그 값을 반환

let arr = [1, 2, 3];
arr.shift(); // 1
arr; // [2,3]

Unshift

배열 시작에 추가하고 배열 길이 반환

let arr = [1, 2, 3];
arr.unshift(5); // 4
arr; // [5,1,2,3]

34. Concat, indexOf, includes, reverse

Concat

2개의 배열을 붙여서 새로운 배열을 만든다.

let arr1 = [1, 2];
let arr2 = [3, 4];

arr1.concat(arr2); // [1,2,3,4]

indexOf

인수가 배열에 있으면 해당 값의 인덱스 값을 반환한다. 없으면 -1을 반환한다.

let colors = ['green', 'yellow'];
colors.indexOf('blue'); // -1
colors.indexOf('green'); // 0

includes

인수가 배열에 있으면 true 없으면 false를 반환한다.

let arr = [1, 2];
arr.includes(1); // true

reverse

파괴메서드로 원본 배열을 바꾼다.
해당 배열의 값을 뒤집는다.

let arr = [1, 2, 3];
arr.reverse(); // [3,2,1]

35. Slice, Splice, Sort

Slice

배열을 잘라 새로운 배열을 만든다.

인수가 1개 일 땐 slice(startIndex)
2개일 땐 slice(startIndex,endIndex)

let arr = [1, 2, 3];
arr.slice(); //인수가 없을 땐 원본 배열 그대로를 복사한다.

arr.slice(2); // [3]
arr.slice(0, 1); // [1] startIndex부터 endIndex이전까지 자른다

Splice

파괴메소드이며 원본 배열을 바꾼다.

배열에 삽입하거나 결합시킨다.

splice(startIndex, deleteCount, "넣을 값")

deleteCount가 0이면 삽입만을 한다.

let arr = [1, 2, 3];
arr.splice(0, 0, '3'); // [3,1,2,3]

Sort

배열에 있는 모든 값을 문자열로 바꾼 후 유니코드 값으로 대소 비교를 한 후 정렬한다.

let arr = [1, 30, 200, 1000];

arr.sort(); // [1,1000,200,30,] 정렬이 제대로 되지 않는다.

/*
정렬 기준을 정해주는 함수를 넣어주면 제대로 대소비교가 된다.
1을 리턴하면 순서를 앞으로
0을 리턴하면 순서 변동x
-1을 리턴하면 순서를 뒤로한다.
*/
arr.sort(function (a, b) {
    if (a > b) return 1;
    else if (a == b) return 0;
    else return -1;
});

36. 참조 타입과 동일성 테스트

참조타입

자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다. 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적

여기서 참조란 메모리 주소상에서 해당 데이터가 위치한 주소를 가리키는 것이다.

let arr = [1, 2, 3];
arr === [1, 2, 3]; //false
let arr2 = arr;
arr2 === arr; //true

37. 배열 + Const

배열에 컨텐츠는 바꿀 수 있지만
참조하는 배열은 바꾸지 못함

const arr = [1, 2, 3];
arr[0] = 2; // [2,2,3]
let arr2 = [1, 2, 3, 4];
arr = arr2; //  Uncaught TypeError: Assignment to constant variable.

38. 다차원 배열

2차원 배열

3차원 배열

const colors = [
    ['red', 'blue'],
    ['grren', 'orange'],
];
colors[0][0]; // 'red'
colors[1][1]; // 'orange'

39. 객체 리터럴 개요 및 생성

객체 리터럴

중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트
객체도 배열처럼 데이터 구조의 한 종류
객체는 key:value(프로퍼티) 형식으로 데이터 저장

key는 다 문자열로 변환되어 저장

// 객체 선언 및 초기화
const object = {
    totalSteps: 30867,
    totalMiles: 211.7,
};

40. 객체 외부 데이터에 액세스하기

점 구문

const movie = {
    name: 'superman',
    date: '2021.10.10',
    price: 6500,
};

movie.name; // "superman"

대괄호 구문

변수 같은 유동적인 값을 객체에서 key로 쓰고 싶을 때 사용

const year = {
    1999: 'Ok',
    2000: 'Good',
};
let targetYear = '1999';
movie[targetYear]; // "Ok"

41. 객체 수정하기

객체.key = value
객체[key] = value
문자열은 "key" 숫자는 key 형식으로로 한다.

형식으로 수정을 한다.

const object = {
    color: 'blue',
};
object.color = 'skyblue';
object.color; // 'skyblue'

object['color'];

41. 배열과 객체 네스트 구성하기

const comments = [
    {username:'Tammy', text="haha", votes:9},
    {username:'Tammy', text="haha", votes:9}
]

42. For 루프

for(
  [initialExpression]; //초기표현식
  [condition] //조건식
  [incrementExpression] // 증감식
)

for (let i = 0; i < 3; i++) console.log(i);
// 1
// 2
// 3

43. 배열 루프

const animals = ['lions', 'tigers', 'bears'];

for (let i=0;i<animals.length;i++>){
    console.log(animals[i]);
}
// 'lions'
// 'tigers'
// 'bears'

44. 네스트 구성 루프

//구구단
for (let i = 1; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        console.log(`${i}*${j}=${i * j}`);
    }
}

// 2차원 배열 원소 출력

const seatingChart = [
    ['Kristen', 'Erik', 'Namita'],
    ['Geofferey', 'Junita', 'Antonio', 'Kevin'],
    ['Yuma'],
];

for(let i=0;i<seatingChart.length;i+++){
    const row = seatingChart[i]
    for(let j=0;j<row;j++){
        console.log(row[j]);
    }
}

45. While 루프

while (조건식)
{ 실행문}

let num = 0;
while (num < 10) {
    console.log(num);
    num++;
}

// 조건이 참이될 때가지 계속 실행문을 실행시킬 수 있음
const SECRET = 'CODE';

let guess = prompt('enter ther secret code...');

while (guess !== SECRET) {
    guess = prompt('enter ther secret code...');
}

46. 정지/break 키워드

break

반복문을 벗어나게 하는 키워드

let num = 0;

while (num < 5) {
    num++;
    if (num == 3) break; //3번 수행되고 반복문을 빠져나온다.
}

47. For루프의 유용함

for of

순서가 있는 배열 리스트에 사용

const items = ['1', '2', '3'];
for (let item of items) {
    console.log(item);
}
// 1
// 2
// 3

for in

for in은 순서가 없는 경우에 사용

const obj = {
    name: 'test',
    color: 'brown',
};

for (key in obj) {
    console.log(key);
    // name
    //color
}

48. 객체 루프

객체는 iterable이 아니기 때문에
반복을 하기 위한 방법이 따로 존재함

1. for in

2. key,value 배열을 사용하는 방법

   Object.keys() => key 배열 반환

   Object.values() => value 배열 반환

   Object.entries() => [key,value] 배열 반환

const testScores = {
    A: 80,
    B: 90,
    C: 95,
};

for (let person in testScores) {
    console.log(`${person} scored ${testScores[person]}`);
}

for (let person of Object.keys(testScores)) {
    console.log(`${person} scored ${testScores[person]}`);
}
for (entry of Object.entries(testScores)) {
    console.log(entry);
}
// ['A',80]
// ['B',90]
// ['C',95]

49. todo list 프로젝트

let isQuit = false;
let todos = [];
let todo = null;

while (!isQuit) {
    let input = prompt('what would you like to do');
    switch (input) {
        case 'new':
            todo = prompt('Insert todo');
            if (todo) todos.push(todo);
            console.log(todos);
            break;
        case 'list':
            for (let entry of Object.entries(todos)) {
                console.log(`${entry[0]}:${entry[1]}`);
            }
            break;
        case 'delete':
            const index = parseInt(prompt('Ok, enter an index to delete'));
            if (!Number.isNaN(index) && index < todos.length) {
                const deleted = todos.splice(index, 1);
                console.log(`Ok, deleted ${deleted[0]}`);
            } else {
                console.log('Unknown index');
            }
            break;
        case 'quit':
        case 'q':
        case null:
            isQuit = true;
            break;

        default:
    }
}
console.log('Ok QUIT THE APP!');

50. 함수 개요

함수

코드의 재사용 가능한 일부로서 언제든 사용할 수 있도록 이름을 붙인 것이다.

코드의 가독성, 재사용성을 향상시킨다.

51. 함수 정의 및 호출

function first() {} //함수 정의

first(); // 함수 호출

52. 인수와 매개변수 개요

인수

함수에 입력하는 값을 의미한다.

매개변수

함수 선언식의 괄호안에 작성되는 변수

53. return 키워드

return

함수안에서 처리된 값을 외부에서 사용할 수 있게 해주거나
함수를 빠져나오게 하는데 사용된다.

54. 함수 범위

함수 내 변수

함수 안에서 정의한 변수들은 그 함수로 범위가 한정됨

변수 액세스 범위

함수 밖에 있는 변수에 액세스 가능


안에 있는 변수가 액세스 우선순위가 더 높음

let color = 'blue';

function f() {
    console.log(color); // blue
}

function t() {
    let color = 'green';
    console.log(color); // green
}

55. 블록 범위

블록

함수를 제외하고는 기본적으로 중괄호가 있는 모든 곳을 의미함

블록에서 선언된 변수는 블록안에서만 유효함 (var타입 제외)

let radius = 8;
if (radius > 0) {
    const PI = 3.14159;
    let msg = 'Hi';
} // if문 내부도 block임

56. 렉시컬 범위

함수를 선언하는 시점에서 상위 스코프가 결정된다.

부모 함수의 안에 중첩된 내부 함수는 해당 외부 함수내 변수 또는 범위 내에서 정의된 변수에 액세스할 수 있다.

외부 함수는 내부함수의 변수에 액세스할 수 없다.

동일한 스코프에서 함수를 선언한 경우

let x = 1;
function external() {
    let x = 10;
    internal(); // 선언한 시점에서 x=1이 internal의 상위 스코프이므로 출력결과는 1이다.
}

function internal() {
    console.log(x);
}

중첩된 내부 함수의 경우

let color = 'green';

function external() {
    let color = 'blue';
    internal();
    function internal() {
        console.log(color); // 선언 시 internal의 상위 스코프는 external이기 때문
    }
}

external(); //출력 값 : blue

57 함수 표현식

함수를 정의한 것을 변수에 할당하는 것


이것이 가능한 이유는 javascript에서 함수가 값으로 처리되기 때문 이 의미는 함수를 반환,저장할 수 있다는 의미이다.

const f = function (parameter) {};

58. 고차함수

다른 함수를 인수로 받아서 보통은 그 인수로 어떤 작업을 하는 함수이자 또 함수를 반환할 수 있는 함수

function callFunc(func) {
    func();
}

function func() {
    console.log('call');
}

callFunc(func); // call

59. 반환함수

함수 내에서 함수를 반환하는 함수

팩토리 함수를 설정하는 패턴에 사용함

function makeBetweenFunc(min, max) {
    return function (num) {
        return num >= min && num <= max;
    };
}
/* 아이,어른,노인인지 여부를 판단하는 코드는 같으므로 이를 반환함수를 사용하면
 코드를 재사용하여 처리할 수 있다.*/

const isChild = makeBetweenFunc(0, 18);
const isAdult = makeBetweenFunc(19, 64);
const isSenior = makeBetweenFunc(65, 120);

console.log(isChild(18)); //  true
console.log(isAdult(30)); // true
console.log(isSenior(115)); // true

60. 메서드 정의하기

메서드

메서드는 객체에 종속된 특성으로 함수에 포함되는 개념

const obj = {
    add(a, b) {
        return a + b;
    }, // 속기법
    minus : function(a-b){
        return a-b
    }

};

61. this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

사용된 함수 호출 컨텍스트에 따라 this값이 바뀜

// 객체 안에서 this는 객체 자신을 가리킴
const cat = {
    name : 'cat';
    meow(){
        console.log(this.name);
    }

}

// 최상위 객체 window
function meow(){
    console.log(this) // window 객체를 가리킴
}

62. Try/Catch 사용하기

try {
    //실행 부분
} catch (e) {
    //에러 처리 부분
}

63. foreach

배열 아이템 각각에 대해 인수로 넣은 함수를 실행함

let nums = [1, 2, 3];

function print(num) {
    console.log(num);
}

nums.foreach(print);
//1
//2
//3

64. Map 메서드

배열 아이템 각각에 대해 인수로 넣은 함수를 실행하고 콜백의 반환 값을 이용해서 새로운 배열을 만듬

let nums = [1, 2, 3];

nums.map(function (num) {
    return num * num;
});
// nums = [1,4,9]

65 화살표 함수

function 키워드 함수명을 쓰지 않고 => 를 사용하여 함수 정의
(매개변수) => { }
매개변수가 한개일 땐 ()

const sum = (x, y) => {
    return x + y;
};

66 화살표 함수의 반환

암시적 반환

함수안에 return문 있을 경우 return 키워드 생략 가능 이 때 중괄호를 생략하거나 ()로 감싸야함

const test = (x) => x; // x
const test2 = (y) => y; // y

67. setTimeout과 setInterval

setTimeout

지정된 시간안에 한번만 수행

//3초 뒤 테스트 출력
setTimeout(() => {
    console.log('테스트');
}, 3000);

setInterval

지정된 시간을 주기로 반복 수행

//3초 주기로 반복
const id = setInterval(() => {
    console.log('test');
}, 3000);

clearInterval(id); // 중단됨

68. filter

배열에서 조건을 충족하는 원소만 모아 새로운 배열 생성

const numbers = [1, 2, 3, 4, 5];

numbers.filter((num) => num % 2 == 0); // [2,4]

69. Some과 every 메소드

Some

배열 원소중 일부만이라도 통과하면 참을 반환
그렇지 않으면 거짓을 반환

const nums = [1, 2, 3];

nums.some((num) => num % 2 == 0); // true

Every

const nums = [1, 2, 3];
nums.every((num) => num % 2 == 0); //false

배열 원소가 테스트를 다 통과하면 참을 반환
그렇지 않으면 거짓을 반환

70. reduce

배열 원소에 함수를 수행시켜 최종적으로 하나의 결과값을 반환

[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}); // 36

두 번째 인수를 주면 초기 값을 주게된다.

[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 100); // 136

71. 화살표 함수와 'this'

화살표 함수에서 this는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

const cat ={

    name :"cat",
    call:()=>{console.log(this)},
    home:function(){console.log(this)}
    walk:function(){
        setTimeout(()=>{
            console.log(this)
        },1000)
    }
}

cat.call() // window 객체
cat.home() // cat 객체
cat.walk() // cat 객체

72. 디폴트 매개변수

인수에 값이 없을 경우 매개변수에 지정한 값이 할당됨

function sum(a, b = 1) {
    return a + b;
}

sum(1); //2
sum(1, 2); //3

73. 스프레드

배열,반복가능한 객체가 펼쳐지고 인수는 따로 들어감

함수 호출시의 스프레드 구문

const nums = [1, 2, 3];
Math.max(nums); // NaN
Math.max(...nums); // //3

행렬 리터럴 스프레드 구문

배열을 다른 배열에 복사

const cat = ['a', 'b', 'c'];
const dog = ['d', 'e', 'f'];
const allCatDog = [...cat, ...dog]; // ['a','b','c','d','e','f']

객체 스프레드 구문

객체를 펼쳐서 복사할 때 사용


객체를 변형하지 않고 복사할 수 있음

const dataFromForm = {
    email: 'test@test.com',
    password: 'tobias123!',
    username: 'titk',
};
const newDataFormForm = { ...dataFromForm, id: 'test', password: '1234' };
/* {
    "email": "test@test.com",
    "password": "1234",
    "username": "titk",
    "id": "test"
} */

74. rest 매개 변수

인수 객체

인수에 ...붙이면 인수를 배열로 받음
인수의 갯수를 정하지 않을 경우 사용

function sum(...nums) {
    return nums.reduce((total, currentValue) => total + currentValue);
}

sum(1, 2, 3, 4, 5); //15

75. 배열 분해

값을 해체하고 꺼내고 선정하는 간편한 방식

const nums = [1, 2, 3, 4, 5];

//배열 앞에서 순서대로 해서 갯수만큼 값이 들어감
const [gold, silver, bronze] = nums;
// gold =>1
// silver =>2
// bronze => 3

76. 객체 분해

객체 속성명을 {}안에 넣고 객체를 할당하면
속섬명에 맞는 값이 할당됨

const obj = {
    name :"phone"
    price : 250000
}
const {name,price} = obj
//name => "phone"
//price => 250000

디폴트 값 객체 분해

const obj = {
    price: 250000,
};
const { name = 'test', price } = obj;
//name => "test"
//price => 250000

77. 매개 변수 분해

함수를 정의할 때 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해할 수 있다.

const obj = {
    name: 'test',
    id: 'test',
};

function test({ name, id }) {
    console.log(name, id);
}

test(obj); // "test test";