나만의공간

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 병합연산자

삼항연산자

배열은 1개의 변수에 여러개의 값을 순차적으로 저장할때 사용한다

자바스크립트의 배열은 객체이며 , 유용한 내장 메소드를 포함하고 있다

배열은 Array 생성자로 생성된 Array 타입의 객체이며 , 프로토 타입 객체는 Array.prototype이다

1.1 배열 리터럴 

( 리터럴 뜻 = 데이터 그 자체를 뜻함 )

예를 들어 const a = 1; 에서  a는 상수이고 , 1은 리터럴이다 

0개 이상의 값을 쉼표로 구분하여 대괄호  ([])로 묶는다 .

첫번째 값은 인덱스 '0' 으로 읽을 수 있다 

존재 하지 않는 요소에 접근하면 undefined 를 반환한다 

1.2 Array() 생성자함수

배열은 일반적으로 배열 리터럴 방식으로 생성하지만 , 배열 리터럴 방식도 결국 내장 함수(  자바스크립트에서 자체적으로 제공하는 함수) Array() 생성자 함수로 배열을 생성하는 것을 단순화 시킨 것이다

Array() 생성자 함수는 Array.prototype. constructor 프로퍼티로 접근할수 있다

즉 배열의 프로토타입 객체에 속해 있으며, 배열을 초기화하고 생성하는 역할을 한다 

const myArray = new Array(1,2,3) 
이 코드에서 Array 생성자 함수를 사용하여 myArray 라는 배열을 만들었다  배열을 요소는 1,2,3, 초기화가 되었다
생성자 함수를 사용하여 배열을 만들때는 new Array (...) 형태를 사용하며, 원하는 요소를 인자로 전달할수 있다
매개변수( 함수를 정의할때 사용하는 변수 ) 
인자 ( 함수를 호출할때 실제로 넘겨주는 값)

2 배열 요소의 추가와 삭제

2.1 배열 요소의 추가

객체가 동적으로 프로퍼티(객체와 관련있는 값,js에서 정렬되지 않은 프로퍼티의 모음)를 추가할수 있는 것처럼

배열도 동적으로 요소를 추가 할 수 있다 

이떄 순서에 맞게 값을 할당할 필요는 없고 , 인덱스를 사용하여 필요한 위치에 값을 할당한다 

배열의 길이(length ) 는 마지막 인덱스를 기준으로 산정한다 

object.key() 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다 

object에서 직접 찾은 열거 가능한 문자열 키 속성 이름에 해당하는 문자열을 요소로 하는 배열을 반환한다

이는 for in 루프가 프로토타입 체인의 속성도 열거한다는 점을 제외하면 for .. in 루프를 사용하여 반복하는 과정과 동일하다 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

2.2배열 요소의 삭제

배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용할수 있다

이떄 length 에는 변함이 없다

해당 요소는 완전히 삭제하여 length 도 반영되게 하기 위해서는 Array.prototype.splice 메소드를 사용한다 .

3. 배열의 순회

(순회 = 배열에 저장된 여러 개의 값에 순서대로 하나씩 접근하는 것을 의미합니다)

객체의 프로퍼티를 순회할 때 for ... in 문을 사용한다 

그러나 배열은 객체 이기 때문에 프로퍼티를 가질수 있다 

for ... in 문을 사용하면 배열 요소뿐만 아니라 불필요한 프로퍼티까지 출력될수 있고 요소들의 순서를 

보장하지 않으므로 배열을 순회하는데 적합하지 않다 

즉 배열의 순회에는 forEach 메소드 , for문 , for of 문을 사용하는 것이 좋다 

p235-286

날아가서 다시작성..

4.2 DOM 사용하기 

• 선택자 사용하기

document.querySelector('선택자');

• 여러개의 선택자 사용하기

NodeList 라는 특수한 객체임

id 속성으로 특정 태그 선택하기 / class 속성으로 여러 태그 선택하기 

document.querySelector('#<id 속성 값>');

document.querySelectorAll('.<class 속성 값')

태그안의 태그 선택하기 

document.querySelector('선택자 내부 선택자 내부 선택자 ')

태그의 값에 접근하기

• 텍스트와 태그 가져오기 

태그.textContent // 태그 내부의 문자열 가져옴

• 내부의 HTML 태그까지 전부 가져오고 싶다면 ?

태그.innerHTML // 태그 내부의 HTML 태그를 포함한 문자열을 가져옴

• 텍스트와 태그 변경하기 

태그.textContent = 값; // 태그 내부의 문자열을 해당 값으로 설정함

• 태그를 추가하는 방법

태그.innerHTML = 값; // 태그 내부의 태그를 해당 값으로 설정함

• 입력 태그의 값 가져와 변경하기 

기본적으로 태그 내부의 값을 선택할떄는textContent 를 사용하지만 

입력태그만 value 를 사용합니다 

또다른 입력 태그로는 select 와 textarea 가 있음

현재 아무것도 없기 때문에 ' ' 이다 

<입력태그>.value // 입력창의 값을 가져옴
<입력태그>.value = 값; // 입력창에 값을 넣음 
<입력태그>.focus() // 입력창에 값을 넣음

4.3 이벤트와 이벤트 리스너 

이벤트 리스너 추가하기 

태그.addEventListener('<이벤트 이름>', <이벤트 리스트>)

-변수를 사용해서 이벤트 리스너를 한 작업

onClickButton () 같은 이벤트 리스너도 콜백 함수이다 

콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다.

이는 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출됩니다.

버튼을 클릭해서 click 이벤트가 발생한 후에 onClickButton () 함수가 추가로 실행되므로 콜백함수라고 볼수 있다 변수를 사용하는 대신 한번에 코딩할수도 있지만 변수를 사용해서 작성하는 것이 더 좋음 

왜냐면 읽기가 더 쉽고 이벤트를 제거할 떄도 재사용 하기 유용함 

한번에 이벤트 리스너를 한 코드 

-매개변수는 함수에 전달되는 이름이 있는 변수입니다.

매개변수를 의미하는 변수는 인자를 함수로 가져오는 데 사용됩니다.

이벤트 리스너인 onInput() 함수의 매개변수로 event 가 존재한다는 점

여기서 event .target.value 로 input 태그에 입력한 값을 알아낼수 있음

객체의 메서드 내부에서는 this 가 바뀔수 있음

addEventListener() 메서드가 this 로 바꾸는 대표적인 예시이다 

이떄 콜백함수는 화살표 함수가 아닌 함수 선언문이어야한다

코드가 실행하고 화면을 클릭하면 this 가 document로 출력된다 

document.addEventListener()가 this 를 document로 바꾼것이다 

• 함수선언문을 화살표 함수로 바꾼 버전 

• 이벤트 리스너 제거하기

function 함수() {}
태그.addEventListener('이벤트',함수)
태그.removeEventListener('이벤트',함수)

4 다음 이벤트 리스너를 removeEventListener() 메서드로 제거해보세요

removeEventListener() 를 설명하면서 addEventListener()에 넣은 함수와 === 연산자로 연산 할 때 결과가 true가 되어야 한다고 하지만 연산을 해보면 항상 false 가 나온다 

고차함수인 fun() 은 항상 새로운 함수를 반환하기 때문이다

같은 함수가 아니므로 이벤트가 제거가 되지 않는다 

따라서 이벤트를 제거하고 싶다면 fun (1)을 fun1 변수에 저장해서 같은 함수라는 것을 보장해야한다 

• 마우스 이벤트

다음 이벤트 리스너를 window 객체에 추가한다

마우스 이벤트 속성에서 x, y 좌표를 얻을 수 있음

다양한 DOM 속성

태그 속성 다루기 

태그.속성 // 조회 시 사용
태그.속성 = 값; // 수정 시 사용

예를 들어 Input 태그의 type , name , value 속성은 다음과 같이 접근할수 있음

태그.className = '클래스1 클래스 2';
태그.classList.contains('클래스')
태그.classList.add('클래스', '클래스2') // 추가
태그.classList.replace('<기존 클래스>', '<수정클래스>') //수정
태그.classList.remove('클래스1', '클래스2') 제거
태그.style.<CSS 속성> = "값";

부모와 자식 태그 찾기 

새로운 태그 만들기 

document.createElement() 와document.createTextNode

다른 태그 내부에 만든 태그를 추가하려면 

<부모 태그>.appendChild(<자식 태그>)
<부모 태그>.append(<자식태그1>,<자식태그2>,)

4.5 window 객체

대화상자 사용하기 

alert('여러줄에 걸쳐 \n 표시됩니다.');

Math 객체 

키보드와 마우스 이벤트에서 절댓값을 구하는 Math.abs() 사용한적이 있다

올림 , 반올림 , 내림할 떄 사용하는

Math.ceil() , Math.round(), Math.floor() 가 있음

무작위로 숫자를 뽑는 코드

Math.randowm() 

Date 생성자 함수

const<날짜 객체> = new Date (연,월,일,시,분.초,밀리초);
const<날짜 객체> = new Date (타임스탬프)

p209-233

후 .. 진도가 많이 밀려있다

공부해야할 시간도 길어지고

직접 콘솔창에 찍어보면서 공부하고 있다

요번주안에 진도 따라잡는것이 목표

조금더 부지런 해져야겠다

  호출 스택과 이벤트 루프 

• 호출 스택은 동기코드를 담당 
• 이벤트 루프는 비동기 코드를 담당한다 

동기코드란 = 직렬적 방식 , 앞선 작업이 끝난 후 다음 작업이 시작됨

비동기 =  병렬적 방식 , 앞선 작업이 끝나지 않았는 데도 다음 작업이 실행됨
               ex ) Web API , setTimeout ,Ajax , 
                 백르라운드와 태스크 큐

1. 백그라운드

는 타이머를 처리하고 이벤트 리스너를 저장하는 공간

 setTimeout ()  과 같은 타이머 함수가 실행되면 백르라운에서 시간을 재다가 지정된 시간이 되면 콜백함수를 태스크 큐로 보냄 

콜백 함수란 함수의 인자로 전달되는 함수로, 다른 함수의 작업이 완료된 후 호출됩니다. 이러한 콜백 함수는 자바스크립트에서 비동기 작업을 처리하는 데 주로 사용되며, 이벤트 리스너, 타이머 함수 및 AJAX 요청과 같은 다양한 상황에서 사용됩니다

2. 태스크 큐 

실행될 콜백함수들이 대기하는 공간

직접 실행하지는 않고 호출 스택에서만 실행됨

태스크 큐에서 호출 스택으로 함수 이동시키는 존재가 이벤트 루프임 

3. 호출스택 

이벤트 루프는 함수 호출과 밀접한 관련이 있음

위의 예제에서 첫번쨰로 함수가 호출되는것은 a(); 이다

js코드가 처음 실행되는 순간도 하나의 함수가 실행된다고 봄

이 함수에는 이름이 없으므로 (anonymous) 로 표기함 우리말로 익명 

메서드 (Method) 메서드는 클래스 (Class)의 내부에 존재하는 영역으로,

특정 기능을 하는 코드를 묶어서 나타내는 것이다.

즉, 특정 기능을 수행하기 위한 코드들의 집합체이다.

console.trace () 는 함수의 호출 스택을 보여주는 메서드이다 

a보다 (anonymous) 함수가 먼저 실행됨을 알수 있음 

그런데 왜 ? a , b, console.trace 순으로 쌓였을까 

그것은 호출스택이 무엇인지 알면 이해할수있음 

호출스택은 바딕이 막히고 천장은 뚫린 하나의 통이다 

마지막에 넣은 물건이 뺄때는 가장 먼저 빠진다 . 이러한 구조를 프로그래밍에서는  스택 (stack) 이라고 한다 

4 이벤트 루프

호출 스택이 비어있을때 태스크 큐에서 호출스택으로 함수를 이동시키는 역할이다

1.setTimeout() 함수는 콜백 함수를 백그라운드로 보내고 종료된다

2. setTimeout() 는 함수는 종료되면서  호출스택을 빠져나간다

3.다음줄의 console.log ('내가먼저'); 가 실행된다 

   setTtimeout() 함수가 콘솔에 아무런 출력을 하지 않고 빠져나가므로

  console.log() 가 setTimeout() 함수보다 먼저 실행되는 것처럼 보일 뿐이다 

대부분 비동기 함수는 콜백함수를 백그라운드로 보내는 경우가 많다

- (anonymous) 함수가 빠져나간 후 백그라운드와 태스크 큐에도 함수가 없어야 전체 코드가 실행됨

5 재귀 함수

어떤 함수가 내부에서 자기 자신을 다시 호출하는 함수를 재귀 함수라고 한다 (recursive function )

호출 스택은 함수를 담을 수 있는 크기가 정해져 있지만 초과하면 에러가 발생한다

만약 함수가 호출 스택의 최대 크기보다 더 쌓여야 한다면 ?

비동기 함수를 사용하는 방법이 가장 간단하다

재귀함수의 내부를 대표적인 비동기 함수인 setTimeout() 으로 감싸고 시간은 0 초로 즉시 호출하면 됨

- 재귀함수를 사용 할떄는 연산량이 많으면 웹 브라우저가 느려지는 현상이 발생함으로 

연산량을 최소화할수 있게 코드를 작성해야한다

6 프로미스 

- 비동기 코드를 작성하다 보면 코드의 실행순서가 작성 순서와 달라 불편함

이러한 불편함을 개선하기 위해 프로미스와 anync / await 를 사용함

프로미스 는 Promise 라는 클래스를 사용함

new 를 붙여 Prommise 클래스를 호출 하면 프로미스 객체를 생성함

이때 인수로 콜백함수를 넣는다  

( 인수(Argument)는 함수를 호출할 때 건네주는 변수입니다. )

resolve(); 성공

reject()(; 실패 

프로미스 객체에는 then() 메서드 나 catch () 메서드를 붙일수 있음

프로미스를 실행된 결과 값을 저장하고 있으며 언제든지 필요할 때 그 값을 꺼낼 수있는 객체 라고 함

프로미스에는 finally () 메서드도 있다

then () 과 catch() 실행이 끝난후에 finally ()가 있으면 무조건 실행됨

Promise는 현재 객체가 프로미스 객체라는 것을 알려주고 <> 안 값은 각 프로미스의 상태를 의미함

fulfilled 는 성공

rejected 실패

pending은 성공이나 실패 결과를 기다린다는 뜻임 

pending 은 resolve () 나 reject() 가 비동기 함수 내부에서 호출될떄 볼수 있음

프로미스도 비동기 인데 이벤트 루프를 사용한다 
resolve ()  나 reject () 되는 순간 then () 이나 catch () 의 콜백함수가 태스크 큐에 들어간다 이떄 프로미스 콜백함수 ) 태스크 큐에 있는 프로미스 콜백함수는 프로미스가 아닌 콜백 함수보다 먼저 호출 스택으로 올라감
프로미스 콜백함수의 우선순위가 더 높음 

 7. anync / await

프로미스로 작성된 코드는 여전히 코드의 작성 순서와 실행순서가 다르다

이것을 개선하기 위해 async/awit문법을 사용해야함

await는 프로미스가 resolve() 할때까지 기다리라 라는 뜻이다

         사용하면 프로미스인 비동기 코드를 순서대로 생성하게 한다

단 프로미스가 아닌 비동기 코드에 await를 적용하는것은 의미가 없다

setTimeout() 은 프로미스가 아니므로 await가 적용되지 않는다 이럴떄는 await를 붙어야 한다 

이런식으로 작성해야 한다 

try-catch 문으로 에러 처리하기 

promise 에는 catch() 에러 처리 메서드가 있지만 await 에는 없다 

이럴 경우 try -catch 문으로 감싸줘야 한다 

p193 -208

비동기와 타이머

• 동기 = 앞선 작업이 완전히 끝난 후 다음작업이 실행됨
• 비동기 = 앞선 작업이 끝나지 않았는데도 다음작업이 실행 됨 , 비동기 대표적인 예는 타이머가 있음

setTimeout ()

타이머 함수임 

지정한 시간 뒤에 코드가 실행됨 

특정 작업이후에 추가로 실행되므로 콜백 함수로 볼 수 있음

setTimeout(함수 , 밀리초 );

 setTimeout ()에 넣은 함수는 동기 코드가 모드 실행된 난뒤 실행됨

setinterval()

setInterval(함수 , 밀리초)

주기적으로 지정한 함수를 실햄함

clearTimeout() 과 clearInterval()

const 아이디 = setTimeout (함수, 밀리초);
clearTimeout (아이디);
const 아이디 = setInterval(함수,밀리초);
clearInterval(아이디);

스코프와 클로저 

스코프 (scope) = 범위가 있다  

블록 스코프와 함수 스코프 

모든 변수는 스코프가 있다 

• var 는 함수 스코프 
• let 은 블록 스코프 

함수 스코프 = 함수를 경계로 접근 가능 여부가 달라지는 것 / 함수가 끝날 떄 함수 내부의 변수도 같이 사라짐

블록 스코프 = 블록은 if 문 for문 while 문 함수에서 볼 수 있는 중괄호 ({}) 를 의미하빈다 

                       즉 블록안에 있는 let 에 접근 할 수 없음 

클로저와 정적 스코프

클로저 (closure)는 간단히 말해 외부 값에 접근하는 함수 

func () 함수는 자신의 외부에 있는 변수 a를 사용하고 있다 그래서 fun() 함수는 클로저 이다 

반환값인 익명 함수는 자신의 외부에 있는 msg 매개변수를 사용하고 있기 떄문에 클로저이다

클로저가 외부 값에 접근 할 수 있는지 판단하는 기준은 스코프 이다 

• 정적스코프 = 함수가 선언된 위치에 따라 접근할 수 있는 값이 달라지는 현상  = 자바스크립트는 정적스코프를 따른다
• 동적스코프 = 선언된 위치가 아니라 호출된 위치에 따라 접근할수 있는 값이 달라지는것

let 과 var 를 사용한 결과가 다른이유

문제점 setTimeout() 인수인 1000 * (i+1) 은 반복문을 돌 떄 실행되고 클로저는 지정한 시간뒤에 호출된다 

           반복문은 매우 빠른 속도로 돌아서 클로저가 실행될떄는 이미 i 4 가 되어있다

let 은 반복문을 돌 떄마다 새로운 블록을 생성한다 

i 변수의 값이 고정된다 이것도 스코프의 특성

클로저 내부의 i 변수도 setTimeout () 함수를 호출할 때의 i 변수와 같은 값이 들어간다 

var 문제를 해결하고 싶다면 i 변수의 값을 고정해야한다 

let 의 변수가 블록마다 값이 고정되는 것처럼 var 의 i 변수도 고정해야함 

helper() 함수는 매개변수  j를 갖고 있는데 j는 i 변수의 값을 고정하는 역할을 함 

setTimeout () 의 클로저는 j를가리키고 있다 

P 179 -191

음.. 어렵다 ..

클래스

this 이해하기 

기본적으로 window 객체를 가리킴 그외 경우에 어떤 값을 가리키는지 알아두어야 함

= // window 

new 를 붙이지 않고 생성자 함수를 호출하면 this.name = name ; 에서 window.name  의 값을 바꾸게 됨

1. 객체 매서드로 this 를 사용하면 this 는 해당 객체를 가르킴

2. 함수의 this 는 bind() 메서드를 사용해 값을 바꿀 수 있습니다.

bind() 메서드는 자바스크립트에 내장된 메서드로 this 를 수정하는 역할을 함

하지만 화살표 함수는 bind() 를 해도 this 를 바꿀 수 없음 window 객체 그대로 나옴

따라서 this 가 외부 요인 때문에 바뀌는 것을 원하지 않는 다면 함수 선언문 대신 

화살표 함수를 사용하면 됨

여기서 화살표 함수의 this 가 무조건 window 객체라고 오해할수 있지만

기존 this 를 유지할 뿐 어떤값으로 바꾸지는 않는다

클래스로 객체를 생성하는 방법

class <클래스 이름 >{
constructor (매개변수1, 매개변수2, .... ) {//생성자 함수 내용
           }
}

클래스 상속하기

class <자식 클래스> extends <부모클래스>{
constructior (매개변수1,매개변수2 .... ){
super (인수 1, 인수 2 ...);
this.매개변수 = 값;
}
메서드 () {
super.메서드 ();
}메서드(매개변수1,매개변수2...){
}
}

p108-178

4일차.. 오늘은 양이 좀 많다?? 

그래도 해야지 

반복문

프로그램을 어떻게 만들어야 하는가 

프로그램 사고력은 어떻게 길러야 하는가 

while (조건식)
실행문

for 문으로 반복해서 출력하기 

for  1.시작 ; 2. 조건식 ; 4 .종료식 
3 .실행문

 순서 = 1. 시작 2 조건식 3 실행문 4 종료식 

중첩 반복문 사용하기

객체

•  자료형의 일종인 객체 ( object ) 는 다양한 값을 모아 둔 또 다른 값
• 객체의 종류는 크게  배열 (array) 함수/ function / 배열이나 함수가 아닌 객체 로 나눌수 있다

배열 ex ) 

자릿수를 인덱스 index라고 한다 

이때 인덱스는 0부터 시작한다 

- 배열의 요소 개수 구하기 

-퀴즈 arr라는 배열이 있을 때 , 배열의 마지막에서 세번째 요소 찾는 방법

배열의 요소 추가하기 

배열 요소 삭제하기

• pop() 사용하면 마지막 요소 삭제
• shift() 사용하면 첫번쨰 요소 삭제 
• splice() 중간요소 삭제 하고 싶을때

배열에서 요소 찾기 

• includes() 에 주어진 값을 찾으면 true 가 되고 존재하지 않으면 false

배열 자르고 합치기

• 배열.slice (<시작 인덱스> , <종료 인덱스 > )  배열 자를떄 
• 배열 concat (값1 , 값 2.... )  값 합치기 

배열과 비슷한 문자열의 특징

• 문자열 [자릿수]
• 문자열.[length]

set 으로 중복요소 제거하기 

함수

함수 선언하기 
function () {};
() = >{};
function 이름() {실행문}

이름 = functio (){ 실행문}

() => {실행문}

// 또는 

() => 반환식 

함수 호출 하기 

return 문으로 반환값 지정하기 

매개변수와 인수 사용하기 

함수를 호출 할때 넣은 'argument' 같은 값을 인수( argument) 라고 하며 

함수를 선언할때 사용한 parameter 같은 변수를 매개 변수( parameter  ) 라고 한다 

객체 리터럴 

객체는 여러 변수를 하나의 변수로 묶을 때 사용 

{

 <속성 이름 > : <속성 값 >,

}

매서드 이해하기 

객체의 속성값으로 함수가 들어가면 이 속성을 메서드라고 한다 

forEach() 와 map () 

• for 문을 사용하지 않고도 배열에서 제공하는 메서드로 반복문 역할을 수행함

배열.foreach(함수);

 배열.map(<콜백함수>);

새로운 배열을 반환한다는 점이 forEach와 다르다 

= 배열에서 요소를 찾을때
배열.find(<콜백 함수>); 
배열.findIndex(<콜백 함수>); 
배열.filter(<콜백 함수>); 

sort()

배열.sort()
비교 함수의 반환값에 따라 배열을 정렬하는 메서드

reduce()

배열에 있는 반복 메서드의 일종르로 배열의 요소들을 하나의 값으로 합친다

배열.reduce((<누적 값>, <현재 값>) = > {
return <새로운 누적 값>;
}, <초기 값>);

every() 와 some 

배열에서 모든 요소가 조건에 해당하는지 판단하려면 every()

하나라도 조건에 해당하는 지 판단하려면 some()

배열.every(){<조건 함수>);
배열.some()(<조건함수>);

p 80-107

변수 ( variable )

변수를 만드는 행위는 '선언'( declaration ) 이다

대입 ( 할당이라고도 함 ) 연산자 

let 변수명 = 식;

변수명과 값은 메모리에 저장된다 

값을 선언하고 초기화 됬다 

변수명 짓기 

 -변수명은 변수의 값이 무엇인지 알려주는 역할을 하기 때문에 자세하게 짓기 권장

 특수문자는 $ 와 _ 만 사용 가능하고 숫자로 시작해서는 안됨 

또한 예약어 reserved word 는 자바스크립트 내부에서 사용중인 단어라 사용금지 

변수의 값 수정하기 

변수는 변하는 숫자를 의마하지만 실제로는 숫자 자료형 이에도 다양한 자료형의 값을 저장함

- let이 없을때는 코드 자체 식이라서 대입한 값이 결과로 출력되지만

let 이 앞에 붙는 순간 선언문이 된다  

여기서 문 ( statement ) 라는 개념이 나옵니다 

문은 식과 다르게 결과로 나올 값이 없고 식의 자리에 사용할수 없음 

변수에 넣은 값을 비울때 

• undefined; 를 대입하거나 null 을 대입한다

const 로 상수 선언하기

const 는 상수( constant ) 의 줄임말임

변수와 상수 차이

변수 = 변하는 수 

상수 = 변하지 않는 수 

-상수를 왜 사용할까 

= 실수로 값을 수정하는 일을 막기 위해 상수를 사용함 

const 도 식이 아니라 선언문이라 콘솔에서 undefined가 출련된다 

var 알아두기

var 변수의 줄임말로 예전에 많이 사용함

but  let과 const 를 많이 사용함 

var로 변수를 선언하면 해당문장을 특별히 변수문 이라고 합니다

1분 퀴즈 

a와 b라는 변수에 어떠한 값이 들어 있습니다 두 변수의 값을 서로 바꿔 보세요

물론 제로초님 해석보고 알게됨... 

a= b 

b = a 

하면 5가 사라짐

그렇다면 5를 저장할 공간이 필요함

그래서 let c = a 를 저장해놓음

a= b 대입하면 

a = 3 

b = a 가 아니라  b = c 를 넣어야 5 가 나옴 ( c 에 5 를 저장해 놨기 때문 ) 

조건문 

주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문

 if ( 조건식 ) {
실행문1;
실행문2;
실행문3
}

false, ' ' (빈 문자열 ) ,0 , NaN, null , undefined 만 거짓인 값 / 7개인데 이거 6개만 외우삼

else를 사용해 두 방향으로 분기하기

else if 사용해 여러 방향 으로 분기하기 

.. 콜백지옥 ..절대 피하기  매우 지저분함

switch 문으로 분기하기

switch ( 조건식 ) {

  case 비교 조건식 :

    동작문;

}

= 조건식의 값이 case의 비교 조건식과 일치  ===  하면 동작문 실행함

특이점 

콘솔에는 b만 출력될것이라 예상하지만 b부터 c까지 다 출력됨 

원하는 결과만 얻으려면 수동으로 case에서 빠져나와야함

break 문이 사용됨

어떠한 추가로case가 일치하지 않을때 default라는 특수한 예약어를 사용할수 있음

default 는 어디에도 위치할수 있음