나만의공간

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 키워드 옆에 함수의 이름작성 

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

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

1.변수

=이름을 가진 저.장소

규칙
1. 변수명 = $ 기호와 _ 기호를 제외한 다른 기호는 사용할 수 없다
2. 변수명= 맨 앞에는 숫자를 사용할 수 없다
3. 변수명= 예약어를 사용할 수 없다.

※ 할당 뜻 = 변수의 특정 값을 저장하는 것을 우리는 변수의 값을 대입 또는 할당 이라고 한다.

   변수의 새로운 값을 할당하는 것을 변수 값의 재 할당 이라고 함 

2 상수 

•  변하지 않는 값을 저장하는 저장소 .
• 어떠한 값이 변경될수 없다고 확실 할때 변수의 값이 변경되는 것을 방지 함
• 기억하기 어려운 값을 저장해두는 별

ex) 생일,이름,이메일,홈페이지,

ex ) const

3.자료형

• 원시 타입 = 숫자, Bigint , 문자, boolean , null , undefined , symbol 
• 비원시 타입 = 객체 (한번에 여러개의 값을 가지는 타입)

• -num 변수처럼 어떠한 자료형이든 한번에 단 하나의 값을 가지는 자료형을 원시
• -Array 변수처럼 한 번에 여러 개의 값을 가지고 있는 변수의 타입을 비 원시 타입

console.log(num === null);  ture

※자바스크립트가 다른 프로그래밍 언어들과는 다르게 변수 선언 시 변수의 자료형을 미리

   작성하지 않는 이유는 프로그램 실행 중에 자료형이 변환되는 언어이기 때문

• let num = '100' 을 넣을 수 있고 str
•  num  = 10 을 넣었을 때는 number 

즉, 이렇게 하나의 변수에 다른 타입의 값을 저장해도 아무런 에러 없이 유연하게 값과 함께

타입이 변경되는 언어를 동적 타입 언어이다 

형 변환 

묵시적 형 변환 = 의도해서가 아니라

자동으로 변하는 형 변환 

명시적 형 변환 = 자료형이 자동으로 변하는 것이 아니라 

우리가 직접 의도적으로  자료형을 변환하는 것

4.연산자

후위 연산은 변수에 1을 더하거나 빼기 바로 직전의 값을 출력

전위 연산은 현재 변수에 담긴 값에 1을 더하거나 뺀 결과 

대입 연산자

변수에 특정 값을 대입하는 역할을 하는 연산자로 변수의 값을 대입하거나 할당하거나 결과를 변수에 저장할 때 사용됨

대표적인 연산자는 = 

 비교연산자

• ===  값만을 비교하는 것이 아니라 두 변수의 자료형까지 같은지를 비교하는 연산자
• ==  오직 값만 일치하는 연산자

논리연산자

• OR = || 표기 하나라도 true 라면 true
• NOT =! 표기 
• AND = &&  하나라도 false라는 값이 존재한다면 false 

null 병합연산자

삼항연산자