나만의공간

1 웹과 DOM

자바스크립트는

웹 페이지를 동적으로 만들어주기 위해 개발된 프로그래밍 언어이다.

DOM을 통해 웹 페이지의 요소에 접근할 수 있다

DOM 이란

Document Object Model의 약자로 직역하면 문서 객체 모델 이라고 할 수 있음

DOM 은 HTML로 작성된 여러 요소들에 자바스크립트가 접근하고 조작할 수 있도록 브라우저가 변환시킨 어떠한 객체이다

즉,  HTML 로 작성된 요소들을 자바스크립트가 이해할 수 있도록 객체로 변환한 것 

웹의 구성요소

• 인터넷에서 사용자들이 정보를 공유할 수 있는 공간 
• HTML로 작성된 페이지를 웹 페이지라고 부름
• 웹 페이지가 여러 개 모여있는 웹 페이지들의 집합을 웹 사이트라고 부름
• 웹 사이트는 URL에 접속해서 볼 수 있는 웹 페이지들을 통트렁 부르는 말로 홈페이지라고 함

HTML 
Hyper Text Markup Language 
웹 페이지의 요소들이 어떻게 구성되어 있는지 알려주는 역할

CSS
Cascding Style Sheets
웹 페이지의 요소들을 꾸며주는 역할( 색상,크기 등)

Javascript 
웹 페이지를 동적으로 만들어 사용자와 상호작용을 가능하게 만드는 역할

DOM 트리DOM은 웹 브라우저가 HTML로 작성된 요소들을 Javascript 가 이용할 수 있도록 객체 형태로 변환한 모델임

태그 요소들은 각각 노드라고 부르며 하나의 객체 형태로 이루어져 있음

document는 문서노드이며 파란색으로 표시된 노드들은 요소노드, 분홍색으로 표시된 노드는 텍스트 노드임

2) DOM API -1

DOM은 JavaScript가 자신에게 접근해서 조작할 수 있는 방법을 제공함

JavaScript 를 사용해 DOM 요소에 접근하려면 DOM 이 제공하는 방법인 DOM API 를 사용해야 함

DOM API 

getElementByid = 특정 요소를 id 값으로 가져온다는 의미로 특정 요소의 객체 값을 반환함

DOM에서 어떠한 요소를 찾을 때에는 가장 먼저 문서노드 -> 다큐먼트에 접근해야 함

DOM  API를 사용해서 특정 요소를 변수에 할당할 때에는 일반적으로 요소를 할당할 변수의 이름 앞에 

$라는 기호를 붙여서 작성하거나 변수명의 뒤에 element를 작성함 

querySelector

css선택자로 요소 노드를 반환하는 API 

JavaScript의 DOM API 에는 조건을 만족하는 요소가 여러 개일 경우 사용하는  DOM API 

• querySelectorAll
• getElementByClassName
• getElementsByTageName

querySelectorAll 

전달받은 클래스 이름을 갖고 있는 여러 요소들을 전부 찾은 다음 반환하는 DOM API 

getElementsByClassName 

css 선택자가 아닌 클래스의 이름만으로 여러 요소들을 찾는 DOM API

getElementsByTagName

요소들의 태그 네임을 통해 요소들을 찾을 수 있음. 태그는 div, img, 버튼과 같은 HTML 요소들의 태그 이름임

특정 태그로 이루어진 여러 개의 요소들을 출력할 수 있음 

요소들의 속성값과 텍스트 등을 변경할 수 있는 즉, 조작할 수 있는 DOM API 

• 요소의 클래스 이름을 변경하는 방법

• ID값을 변경하는 방법 

classList는 className처럼 특정 요소의 클래스 속성에 접근 가능한 프로퍼티이지만 add, contains, item과 같은

여러 가지 메서드들을 제공함 

classList  add() , remove() 사용해 보기

텍스트 노드의 값을 조작해 보기

textContent ()

요소 노드의 스타일을 조작해 보기 

02 비동기와 API

1.async와 await

async 와 await 은 프로미스 객체를 더욱 쉽게 작성할 수 있게 도와주고 코드를 직관적으로 해석할 수 있게 도와줌

• delay 함수가 호출하면 생성한 프로미스 객체를 반환할 수 있도록  리터문으로 작성
• delay 함수를 호출하는 start라는 함수를 작성해 줌
• delay 함수는 프로미스 객체를 반환하기 때문에 함수 호출문 뒤에 then 메세드를 사용해서 resolve함수를 통해 전달받은 결과 값을 출력하는 코드를 작성함 

async라는 키워드를 작성해 볼 경우 

• async는 비동기를 수행할 함수의 오른쪽에 작성함 
• 어떠한 함수에 async라는 키워드를 작성하면 해당 함수는 항상 자동으로 프로미스 객체를 반환함
• await 키워드는 async 키워드가 작성된 함수의 내부에서 사용하는 키워드임 
• await 키워드가 작성된 코드가 실행되면 해당 작업이 종료될 때까지 프로그램의 실행이 중단됨

• await이라는 키워드는 프로미스 객체가 처리 완료될 때까지 함수의 실행을 기다리게 만듦
• 비동기 작업들을 소요되는 시간을 예측할 수 있게 

다만 await 키워드는 프로미스 객체를 반환하는 어떠한 함수의 내부에서만 사용이 가능하기 때문에

async 키워드가 붙어 있는 함수의 내부에서만 사용 가능함 

try 문 내부에는 우리가 실행할 코드를 작성해 주고 catch 문의 내부에는 에러 객체를 전달받고 

에러가 발생했을 때 실행 될 코드를 작성해 주면 에러처리를 쉽게 할 수 있음

• start()라는 함수는 비동기 작업을 처리하는 함수이기 때문에 async 키워드를 작성해 주고 try와 catch 문을 사용함 
• 비동기 처리했음에도 불구하고 await이라는 키워드를 사용해서 작업을 순차적으로 처리하고 있기 때문에 18초씩이나 오래 걸림 
• await이라는 키워드는 해당 작업이 처리 완료 될 때까지 다음 작업들을 중단한다는 특징이 있기 때문에 전부 처리가 완료 될 때까지 해당 작업들이 실행되지 않아 이렇게 한 번에 순서대로 출력

이를 해결하기 위해 promise all 사용함

훨씬 빠르게 10초 만에 모든 작업이 완료됨

promise all은

• 자바스크립트에서 제공되는 메서드로 여러 개의 프로미스를 병렬로 실행하고
• 모든 프로미스가 완료될 때까지 기다렸다가 결과를 한 번에 반환하는 역할을 함
• 전달된 프로미스 배열이 모두 Fulfilled 성공될 때까지 대기하며 하나라도 실패 상태가 된다면 즉시 실패 상태가 되어 오류를 출력하게 됨
• async와 await 키워드는 API 호출과 함께 자주 사용되는 키워드임

2.API 호출

비동기 처리는 대표적으로 웹 사이트에서 데이터를 주고받는 통신을 할 때 사용됨

• 웹 브라우저는 API를 사용해서 웹 사이트에 필요한 데이터를 요청하고 전달받음
• API를 호출하기 위해서는 가장 먼저 API 호출에 응답할 수 있는 어떠한 서버가 필요함
• API는 API 주소를 통해 호출할 수 있고 API 주소를 사용해 API를 호출하면 서버는 화면에 표시된 데이터들을 웹 브라우저에게 전달함

https://jsonplaceholder.typicode.com/ 에 Resources에 user 10 API 

데이터는 다음과 같이 어떤 하나의 배열로 이루어져 있고 배열 안에는 각각의 데이터가 객체 형태로 저장되어 있음

이러한 자바스크립트의 데이터 구조를 제이슨 JSON (JavaScript Object Notation )이라고 부름

JOSN (JavaScript Object Notation )

• 자바스크립트 객체 표기법이라는 뜻으로 자바스크립트에서 데이터를 문자열 형태로 나타내기 위해서 사용함
• 보통 웹 애플리케이션에서 데이터를 전송할 때 사용되며 Key와 Vaule 쌍으로 이루어져 있음

API 호출

fetch라는 내장함수를 사용해서 API를 호출할 수 있음 

fetch 메서드의 괄호 안에는('사용하고자 하는 API 주소')를 작성

주의

fetch함수와. then 메서드 연결 문제: fetch 함수 뒤에. then 메서드를 연결할 때는 줄 바꿈 없이 연결해야 함.

• response 변수를 출력하면 Fulfilled 상태인 promise 객체가 출력됨
• promise 객체를 반환하는 함수는 비동기 처리 함수이고 이러한 함수는 then 메서드를 사용해 결과 값을 출력할 수 있음

async와 await 키워드 사용한다면?

fetch 메서드가 반환하는 프로미스 객체가 처리될 때까지 함수의 실행을 중단할 수 있도록 fetch 메서드의 앞쪽에는 

await 키워드를 작성함 

JSON 형식의 데이터는 javaScript 에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 하나의 표기법이기 때문에

javaScript 에서 JSON 형식의 데이터를 javaScript  가 활용할 수 있는 어떠한 객체 형태로 변환하기 위해서는

JON();이라는 메서드를 사용해야 한다 response에 담긴 값을 (parsing 파싱) 한 결과를 data라는 변수에 할당함

fetch 메서드의 반환값인 response 에는 json 형식의 데이터가 담겨 있기 때문에 json 메서드를 사용해서 해당 변수에 담긴 값을 자바스크립트가 활용할 수 있는 어떠한 객체의 형태로 변환함

fetch 메서드는 비동기적으로 처리되는 함수이기 때문에 API 호출이 완전히 끝난 후에 response 객체를 객체로 변환할 수 있도록 다시 해당 코드에도 await 키워드를 작성해야 함

※ 데이터가 JSON(); 로 인해 배열에 담겨서 출력됨 

JavaScript에서 "파싱(parsing)"이란 특정 형식의 데이터를 다른 형식으로 변환하는 과정을 의미합니다. 주로 문자열을 더 쉽게 다룰 수 있는 객체나 배열 등으로 변환하는 작업을 말합니다

• API 호출처럼 성공할 수도 실패할 수도 있는 비동기 작업은 항상 에러를 처리할 수 있도록 처리해야 함

1. try 문의 내부에는 fetch 메서드를 사용해서 API를 호출하는 코드를 작성 
2. JSON 형태의 데이터를 알맞게 파싱 해서 출력하는 코드를 작성
3. catch 문 내부에는 매개변수로 err 객체를 전달받아 에러가 발생하면 에러를 출력하는 코드를 작성

※ API 호출을 async와 await를 사용해서 비동기로 처리하게 되면 가독성이 좋고 코드의 실행 순서와 코드의 역할을 직관적으로 알 수 있어 좋고 에러 처리 또한 편리하게 할 수 있음 

1. 비동기

1) 동기와 비동기란

동기란 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식, 즉 순차적인 방식 

※ 비동기
작업이 종료되기를 기다리지 않고 다른 작업을 병렬적으로 수행하는 방식 
동시에 여러 작업을 한 번에 처리할 수 있기 때문에 훨씬 빠르게 작업할 수 있음 

• 작업을 수행하는 어떠한 주체를 스레드라고 함
• 자바스크트는 싱글스레드 언어로 한 번에 하나의 작업만 수행할 수 있음
• 멀티스레드 작업 방식으로는 작업을 할수 없음
• 하나의 스레드에서 여러 개의 작업을 한 번에 비동기로 처리해야 함

'종료'라는 단어가 먼저 출력된 이유는 

SetTimeout 함수 안에 있는 콜백 ㅎ마수가 실행이 종료될 때까지 즉 3초라는 시간을 기다리지 않고 

아래 작성된 '종료'를 출력하는 코드가 바로 실행 되었기 때문이다

※ 비동기 필요성

성능과 반응성을 향상시키고 가독성과 유지보수성이 높은 코드를 작성할 수 있도록 도와줌

• 성능 향상 : 비동기 처리를 통해 코드가 실행되는 동안 다른 작업을 동시에 처리할 수 있음
• 반응성 향상 : 긴 작업이 백그라운드에서 처리 되는 동안 UI는 계속 사용자 입력에 반응할 수 있음
• 효율적인 리소스 사용 : 여러 작업을 동시에 처리함으로써 시스템 자원을 효율적으로 활용
• 코드 간결성 및 유지 보수성 

2. 프로미스 객체

자바스크립트에는 작업을 비동기로 처리할 때 사용하는 프로미스라는 객체가 있다.

1. 프로미스 객체는 new 키워드와 생성자를 사용해서 생성할 수 있다
2. 객체 생성시 인수로 executer라는 생성함수를 전달받는다
3. executor라는 실행 함수에는 매개변수로 resolve와 reject라는 콜백함수를 전달받음
4. 비동기 처리 작업은 항상 작업처리의 성공 여부에 따라 함수를 다르게 호출해야 한다는 특징이 있음

생성자를 통해 생성된 프로미스 객체는  state와 result라는 프로로퍼티를 갖는다

promis객체가 생성되면 바로 executor함수가 실행됨

• then 메서드의 첫번째 인수로는 프로미스 객체가 Fulfilled 상태, 즉 성공일 때 실행되는 함수 
• catch 메서드는 해당함수가 실패 해쓸때 자동으로 실행되는 함수로 괄호 안의 에러를 작성할 수 있음 

※ 자바스크립트를 사용해 개발을 할 때 프로미스 객체를 사용하는 이유는 자바스크립트의 비동기 처리 방식의 문제점 중 하나인 콜백 지옥을 해결 할 수 있기 때문이다 

콜백 지옥이란 ? 프로미스 객체가 이를 어떻게 해결할 수 있는지 해결책 알아보기

자바스크립트에서 비동기 함수의 결과 값을 이렇게 또 다른 비동기 함수에서 사용하기 위해서는

다음과 같이 콜백 함수 안에 다시 콜백함수를 전달하는 방식으로 전달해주어야 함

-> 비동기 함수를 이러한 방식으로 처리하면 함수의 실행 순서를 알기 쉽고 유연한 프로그램을

할 수 있다는 장점이 있지만 코드가 매우 복잡하고 가독성이 떨어지면서 오류를 발생시킴 

workA는 현재 리턴문을 통해 프로미스 객체를 반환하고 있고 객체는 이렇게 then 메서드를 사용할 수 있기 때문에

workA 함수의 호출 결과에는 이렇게 then 메서드를 사용할 수 있음

동일하게 workA를 호출해 주고 then 메서드를 사용해서 resA라는 매개변수를 전달받는 콜백함수를 작성해 주고

return 문을 사용해서 workB 함수를 사용해서 호출한 값을 반환해 줌

반환하는 값 또한 promise 객체 이기 때문에 해당 값에도 then 메서드를 사용할 수 있음

- 콜백지옥 해결방안 -

이렇게 계속해서 프로미스 객체를 반환해서 then 메서드를 연속적으로 사용하는 방식을

프로미스 체이닝이라고 함

->  코드를 아래쪽으로 계속해서 작성할 수 있기 때문에 훨씬 더 직관적으로 해석, 깔끔함

1. 배열과 객체의 구조분해 할당

구조 분해 할당이란 

배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값을 각각의 변수에 할당하는 표현식

구조 분해 할당을 이용하면 배열이나 객체 안에 있는 값을 쉽고 간편하게 추출가능.

선언분리 할당

-변수를 선언을 분리해서 배열의 값을 할당하는 방

- 두 변수의 값을 서로 바꾸는 코드

• 두 변수의 값을 교환하기 위해 tmp라는 임시 변수가 필요

-배열의 구조분해 할당을 통한 두 개의 변수의 값을 서로 바꾸는 코드

-객체 구조분해 할당

= 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당하는 배열의 구조분해와는 달리 키값을 기준으로 객체를 분해해

변수에 할당함

2. spread 와 rest ( 스프레드와 레스트 문법)

spread... 

• ... 점 세 개의 기호를 사용해 특정 객체가 가진 프로퍼티들을 펼쳐주는 역할을 함
•  객체나 배열에서 반복적인 값을 퍼트려주는 역할
• 스프레드는 직역하면 확산, 퍼짐 , 전파라는 뜻이다
• 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 한다 

배열에서도 spread ...  스프레드 문법을 사용할 수  있음

-rest 

= 특정 부분들을 하나의 배열이나 객체로 묶어주는 문

= 나머지 매개 변수 , 점... 를 사용하지만 다른 역할

= 객체에서 rest는 구조분해 할당과 함께 사용된다

= rest 문법은 spread와는 다르게 순서에 상관없이 여러 번 작성할 수 없고 항상  맨 마지막에 작성해야 함

※ rest 문법은 가장 마지막에 작성해야 함

배열에서의 rest문법 사용해 보기 

-함수에서 rest문법 사용해보기

rest 매개변수는 함수의 매개변수가 매우 많거나 몇 개가 될지 모를 때 함수에서 받아 온

매개변수들을 배열로 나타낼 때 유용

spread와 rest 문법 모두 사용하는 코드

1, spread

• 배열에 10개가 넘는 요소가 존재했다면 코드가 길어지고 작성하기 어려움 그래서 spread를 사용할 것임
• spread는 배열이나 객체의 값을 퍼뜨리는 역할을 함 
• 문법은 객체나 배열에서 중복된 부분을 퍼뜨릴 때 혹은 함수를 호출할 때인수로 전달할 값을 퍼뜨릴 때 사용됨

2. rest

• 매개변수를 rest로 전달받을 때 깔끔한 코드가 됨
• 문법은 객체나 배열로 묶어야 할 때 혹은 구조분해 할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때
• 함수의 매개변수로 많은 값들을 전달받거나 특정 매개변수들을 제외한 나머지 매개변수들을 묶어서  사용되는 문법

1 자바스크립트 배열 내장 함수 -1

1) 배열 요소들에 하나씩 접근해야 할 때,

    배열을 순회해야 할 때 사용하는 내장함수들과 방법 4가지

forEach 메서드에는 매개변수로 함수를 전달할수 있음 _ 이 함수를 callblck(콜백함수)라고 함

콜백함수는 3가지의 매개변수를 전달할 수 있음

1.CurrentValue , 즉 처리할 현재 요소를 매개변수로 넣을 수 있음

2. index 실제 배열 요소의 순서 전달 

3. array()

forEach 라는 내장함수는 배열에서 for문을 대체해 사용되며 콜백함수의 여러 가지 매개변수들을 통해 더 다양한 기능을 할 수 있는 유용한 배열 메서드이다.

4. map()

map이라는 내장함수는 배열 안에 모든 원소를 변환할 때 유용하게 사용되는 메서드 

이 map 이라는 내장함수는

전달한 콜백함수를 호출한 결과를 모아서 새로운 배열로 반환해 주는 내장함수로 배열의 모든 요소에 적용하고 그 결과 새로운 벼열로 돌려받을 수 있는 내장 함수 

2) 배열에서 특정 요소를 찾는 함수

at 이라는 매개변수 안에 인덱스 번호를 적으면 그에 해당하는 배열의 값을 알려줌 

include 메서드

• 매개변수로 받은 요소를 배열이 포함하고 있는지 판별하여 분리한 값으로 반환함  
• include 메서드는 배열의 요소 중 특정 값이 존재하는지 쉽게 확인할 수 있는 메서드임

include 메서드는 매개변수로 또 다른 값을 전달할수 있음 

- indexOf

• 메서드는 특정값을 지닌 요소가 몇번째 위치하는 요소인지를 찾아주는 함수
• 배열의 값이 객체 형태이거나 배열의 형태일때 인덱스는 찾아주지 못함

-findIndex()

= 배열의 모든 요소에 대해 순차적으로 callback 함수를 수행하며 조건을 가장 먼저 만족하는 배열 요소의 인덱스를 반환

화살표 함수는 중괄호와 리턴을 통해 반환하는 방법도 있지만 

바로 코드를 작성해서 반환하는 방법도 있음 

- find ()

= 찾아낸 값 그 자체를 반환하는 함수임

• find () 를 사용하면 객체 그대로를 출력시켜 줌
• 특정 배열에서 원하는 요소들을 추출할 수 있는 메서드

3) 특정 배열에서 원하는 요소들을 추출할 수 있는 메서드

-fillter ()

= 조건을 만족하는 모든 값들을 새로운 배열에 담아서 반환하는 내장함수 

= 여기서 조건은 elm.id > 1  

 -slice(being, end -1)

= 배열에서 특정 값들만 다로 추출해서 새로운 배열을 생성하는 내장 함수

원하는 부분만 잘라서 가져올 수 있음 

• Slice 메서드는 두 개의 매개변수로 Begin과 End를 전달받음
• 전달받은 매개변수로 Begin부터 End 보다 1 작은 인덱스의 요소까지 배열을 복사해서 새로운 배열 객체로 반환함 
• 즉, 1부터 시작해서 3보다 1 작은 2를 = > 인덱스 1번과 2를 반환

1 자바스크립트 배열 내장 함수 -2

- concat()

= 두 개의 배열을 이어붙일 수 있음

두개의 배열을 하나로 합쳐 새로운 배열로 반환함 

- join ()

= 배열을 하나로 합치지만 / concat과 다른 점은 하나의 배열에서 배열 요소 값들을 문자열로 이어주는 메서드임

• join 메서드에 아무런 매개변수를 넣어주지 않으면 쉼표가 나오고 
• join 메서드에 "" 스페이스를 적으면 공백문자열이 구분자로 출력이 됨

-sort()

= 기본적으로는 오름차순(작은 것부터 큰 것 차례) 방식임

그렇다면 내림차순(큰 순서대로)으로 하려면?

compare(a, b) = 배열 요소의 크기를 비교하는 함수

• compare( a, b) 함수 
• 반환값이 음수면 a가 b보다 앞에 위치합니다.
• 반환값이 양수면 b가 a보다 앞에 위치합니다.
• 반환값이 0이면 두 값의 순서가 유지됩니다.

내림차순으로 숫자 크기

forEach를 통해 배열의 숫자합 구하기

-reduce 

= 배열의 각요소에 대해 함수를 실행하고 누적된 값을 출력할 때 사용

• callback 함수와 initialValue라는 초기값을 전달하고
• callback 함수의 매개변수로는 accunmulator, currentValue, currentIndex 가 있음
• 배열의 모든 요소들에 대해 확인하고 누적된 값들을 출력하고 싶을 때 유용함

-isArray

= 전달된 매개변수가 배열인지 아닌지 판별하는 내장함수 

배열이라면 true 아니라면 false 

자바스크립트를 사용하다 보면 특정변수가 담고 있는 값이 배열인지 , 객체인지 혹은 숫자인지 헷갈릴 때 사용

1. 생성자 함수 

생성자 함수는 일반적으로 동일한 구조를 갖는 여러 개의 객체를 쉽게 생성하기 위해 사용됨

여러 객체 생성

이러한 경우 생성자 함수를 사용하면 코드를 훨씬 간단하게 작성할 수 있음

• 생성자 함수는 대문자로 작성 !
• new 키워드로 생성자 함수가 새로 생성한 객체를 할당해 줌
• 생성자 함수는 새로운 객체를 생성하는 데 사용되는 특수한 함수로 이와 같이 같은 구조를 여러 개 생성해야 하는 경우에 사용되며 객체의 초기 프로퍼티 인스턴트 값을 설정하거나 메서드를 정희 하는데 유용함 
• 생성자 함수를 호출한 결과 즉 새로 생성한 객체를 인스턴스 라고 함

※ 생성자 함수는 자바스크립트에서 객체를 효율적으로 생성하고 관리하는 중요한 도구임

•  동일한 구조의 객체 쉽게 생성
•  코드의 재사용성 높아짐
•  반복되는 코드 작성 감소 

2. 반복문

특정 작업을 반복적으로 수행할 때 사용  

for ( 초기화식, 조건식 , 증감식,){
실행해야 할 코드 }

while 문은 특정 조건이 참이라면 해당코드를 반복 수행하는 반복문/ 언젠가는 이 해당 조건문을 만족하지 않아 false 가 반환되어 종료될 수 있게 해야 함

 i를 선언한 후 초기값
while(조건 condition) {
실행코드 statement}

배열의 모든 요소들에 접근해야 할 때 

3. 객체를 배열로 변경하는 방법

1. 객체의 프로퍼티도 반목문을 활용해 순회가능 -> 객체를 배열의 형태로 변경해주어야 함

key값들로만 이루어진 배열로 변환해

2. object.values를 이용하는 것

object.values메서드는 매개변수로 객체를 넘기면 해당 객체의 value들을 모두 찾아 배열로 반환함

3. Object.entries 메서드를 사용하는 것

객체를 받으면 키와 value쌍의 형태로 반환함 

objet.entries 메서드는 key와 values 값을 배열에 담아 새로운 배열로 반환해 주는 메서드임

 for - of 반복문 

= 배열의 모든 요소에 접근해야 할 때 사용함

for - in 반복문 

= 주로 객체에서 사용되며 for문과는 달리 객체의 모든 프로퍼티들을 바로 순회할 수 있도록 도와줌 

1 객체 Object

• (비 원시 타입 자료형 ) 객체는 한 번에 여러 개의 데이터값을 저장할 수 있는 자료형이다
• ex) person => 이름 , 나이, 전화번호, 거주지 등을 저장할 수 있음
• 즉, 객체는 서로 연관된 여러가지 정보들을 하나로 모아 놓은 것이라 볼 수 있음
• 자바스크립트에서 객체를 생성하는 방법엔 1. 생성자 함수 2. 리터럴 

- 객체를 {} 중괄호로 나타낼수 있음

객체의 프로퍼티 (객체의 속성) 

= >객체의 중괄호 내부에 들어갈 데이터로 key : value 쌍으로 이루어진 데이터

객체의 값을 꺼내 사용하는 방법 

• 1. 점표 기법
• 2. 괄호표기법

※ const 키워드로 선언하더라도 객체는 왜 프로퍼티 값을 수정할 수 있을까?

객체 프로퍼티 값을 수정하는 것과 이 cat 이라는 객체 자체를 수정하는 것은 다른 것임

객체는 생성될 때 고유한 id를 갖는다 id를 변경하는 것이 아니기 때문에 프로퍼티의 값은 변경가능

이 메서드는 객체 내부의 프로퍼티들에 접근할 수 있는 특별한 기능이 있음 

템플릿 리터럴을 사용해서 제 이름은 this.name 사용하면 자신이 속해있는 객체를 가리킬 수 있음

this 키워드가 person 객체를 가리키기 때문

※메서드를 생성할 때에는 화살표 함수보다는 위에 처럼 function 키워드를 사용해서 생성하는 것이 좋음

그 이유는 화살표 함수 내부에 this라는 키워드는 해당 메서드를 한 이 객체를 가리키지 못하고 가장 바깥에 있는

글로벌 객체인 윈도 객체를 가리키기 때문이다 그로 인해 객체의 또 다른 프로퍼티 값들을 사용하지 못하기 때문이다

2. 배열 

• 순서가 있는 집합 여러 개의 데이터 리스트 
• 대괄호로 나타냄 []

-배열요소 추가

push() 맨 뒤쪽에 추가 

unshift() 맨 앞쪽에 추가

수정하는 법

const

자바스크립트에서 배열은 객체로 분류되는 자료형으로 볼 수 있다.

배열 삭제하는 방법 

• pop() 배열의 마지막 요소 삭제
• shift() 배열의 첫 번째 요소 삭제

splice(start , deletCount)

첫 번째 매개변수인 starts는 배열요소의 특정 인덱스를 

두 번째 매개변수는 배열에서 삭제할 요소의 개수 

배열의 길이 length

= 배열의 크기를 알아보기 위해서는 length라는 배열 프로퍼티를 사용

1. 조건문

특정 조건에 따라 코드를 실행하거나, 실행하지 않을 때 사용하는 구문

if( 조건) {
실행될 코드}

서로 다른 코드를 실행해야 할 때 if / else if 

 switch case

1. let 변수 = ' '
2. switch(특정변수, 조건식 ) {
3. case = 일치하는 것을 찾음
    break ;
4. 실행될 코드를 작성
   default;
}

• break 작성하지 않으면 이 모든 케이스들이 모두 실행됨 (무한반복 방지)
• case와 일치하지 않을 경우 default에 값을 보여줌 ( 가장 아래에 작성해야 함)

2. 함수

• 동일한 기능을 하는 코드를 묶어 하나의 명령으로 처리할 수 있게 도와주는 문법 
• 깔끔하고 가독성 좋은 코드를 만들 수 있음 

• return 문을 사용했을 때

Early return pattern 

compare = 함수를 비교하는 함수

3. 스코프 Scope

• 변수 또는 함수는 모두 유효범위가 있다 
• 유효범위란 변수와 함수가 영향을 미치는 범위로 영어로는 스코프라고 부름

전역 = 어디서든지 접근할 수 있음 ( 전역변수, 외부변수 )

지역스코프 =

• 블록스코프와
• 함수 스코프로도 나눌 수 있음 

※ let 키워드와 var라는 키워드의 차이점은 let 키워드로 선언된 변수는 blook스코를 갖고

•  var 키워드로 선언된 변수는 함수 스코프를 갖는다 
•  var 이미 선언되어 있는지 판단하기 어려울 뿐만 아니라 어디에서 어떻게 사용되고 있는지를 파악하기 힘듦

4. 호이스팅

자바스크립트에서 변수와 함수의 선언문이 해당 범위의 가장 위쪽으로 끌어올려지는 듯한 현상으로

종류로는 함수 호이스팅과 변수 호이스팅이 있음

-> 이는 num1 변수가 초기화되기 전에 num1변수에 접근할 수 없다는 에러임.

let과 const변수는 변수 스코프의 가장 위쪽에서 변수의 초기화가 완료될 때까지 TDG라는 공간에 있기 때문
Temporal Dead Zone = 일시적인 사각지대, 변수를 사용하는 것을 허용하지 않음 

즉 VAR 키워드는 변수를 생성한 다음 바로 메모리 공간에 변수를 메모리 공간에 할당해 주지만

let과 const 키워드는 변수가 초기화될 때까지 메모리 공간이 확보되지 않음 

그러므로 let과 const 키워드로 생성된 변수는 사용할 수 없는 공간인 Temporal Dead Zone에 들어가게

※ 호이스팅은 자바스크립트의 기본 성질이지만 많이 발생하면 가독성이 좋지 않고 해석하기 어려움

= > 변수와 함수의 선언문 이후에 변수와 함수에 접근하는 코드를 작성하는 게 좋음 

5. 함수 표현식과 화살표 함수 

함수 표현식 1 = 변수에 함수를 마치 하나의 값처럼 할당하는 방법

함수표현식 2 = 화살표 함수를 사용하지 않고도 function 키워드를 사용해 이름을 작성하지 않는 익명함수의 형태로

함수를 생성하고 이를 특정 변수에 할당하는 방식도 함수 표현식임

함수 선언식 

function 키워드 옆에 함수의 이름작성 

• 함수 선언식과 함수 표현식의 차이점 

콜백함수 = 다른 함수의 매개변수로 넘겨준 함수