IE11미만 버전 const,let 지원하지 않아 오류 발생 => var사용해야함.
회사에서 var ,for 만 주로 사용할 확률이 높다.
(IE지원 때문에)
babel: 하위 호환성

함수

함수는 입력, 출력, 기능을 하나로 묶어 재사용할 수 있도록 만드는 것.
js는 실행 코드들이 들어있는 독립 블록 단위의 객체인 함수를 사용할 수 있다. 여기서 객체란 데이터와 그 데이터를 포함한 모든 동작에 대해 말한다.

<p id="result"></p>
<script>
function myFunction(x,y){  //함수의 정의
	z = x + y  //함수의 기능
	return z;  //함수의 결과값
}
// 함수의 호출 
document.getElementById("result").innerHTML = myFunction(4,3);
</script>

// 함수
// 참고 : function은 python에 def과 같습니다.
// 읽어볼만한 문헌 : https://ko.javascript.info/function-basics

//함수선언
function circleWidth(r){
	let width = r*r*3.14;
	return undefined;
}
document.write(circleWidth(10)); //함수호출
function test(){
	document.write('hello world!!');
}

화살표 함수

같은 동작을 한다.

재귀함수

1.종료조건 체크
2.반복문으로 구현할 수 있는 것은 재귀함수로 모두 구현 가능,
재귀함수로 구현 가능한 것은 반복문으로 대부분 구현 가능

팩토리얼, 문자열뒤집기, 피보나치 외우기

코드 순서대로 동작을 확인할 수 있는 사이트

  
function sigma(n) {
    if(n<=1) {
        return n }
    return n + sigma(n-1)
}
//sigma(5) ==5+ sigma(4) 
  sigma(4) ==4+ sigma(3)
  sigma(3) ==3+ sigma(2)
  sigma(2) ==2+ sigma(1)
  sigma(1) ==1
  1+(2+1)+(3+3)+(4+6)+(5+10)

브라우저에서 어디에서 작동될 것이다. 메모해두기 >코드마다 .
slice(1) 1번인덱스부터 끝까지 잘라낸다

function fib(n) {
text += ''
if(text.length <= 1) {
return text
}
return reverse(text.slice(1)) + text[0]
}
// reverse('hello') == reverse('ello') + 'h' == 'olle' + 'h'
// reverse('ello') == reverse('llo') + 'e' == 'oll' + 'e'
// reverse('llo') == reverse('lo') + 'l' == 'ol' + 'l'
// reverse('lo') == reverse('o') + 'l' == 'o' + 'l'
// reverse('o') == 'o'

#외우면 좋은 코드!

------
function factorial(n){
    if(n <= 1) {
        return n
    }
    return n * factorial(n-1)
}

// factorial(5) == 5 * factorial(4) == 5 * 24
// factorial(4) == 4 * factorial(3) == 4 * 6
// factorial(3) == 3 * factorial(2) == 3 * 2
// factorial(2) == 2 * factorial(1) == 2 * 1
// factorial(1) == 1

------

function reverse(text) {
    text += ''
    if(text.length <= 1) {
        return text
    }
    return reverse(text.slice(1)) + text[0]
}

// reverse(‘hello’) == reverse (‘ello’) + ‘h’ == ‘olle’ + ‘h’
// reverse(‘ello’) == reverse (‘llo’) + ‘e’ == ‘oll’ + ‘e’
// reverse(‘llo’) == reverse (‘lo’) + ‘l’ == ‘ol’ + ‘l’
// reverse(‘lo’) == reverse (‘o’) + ‘l’ == ‘o’ + ‘l’
// reverse(‘o’) == ‘o’

-------

피보나치 수열

 // 1, 1, 2, 3, 5, 8, 13, 21

function fib(n){
    if(n <= 2) {
        return n
    }
    return fib(n-1) + fib(n-2)
}

// 왼쪽 function만 따라갔으니
// fib(4) == fib(3) + fib(2)
// fib(3) == fib(2) + fib(1) == 3
// fib(2) == 2
// fib(1) == 1

// 오른쪽 값인 fib(2)를 다시 해야하는 상황!!
// fib(2) == 2

in연산자 mdn문서

in 연산자

in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환
속성 in 객체명

• 인자
  1) 속성 : 속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값
  2) 객체명: 객체의 이름

in 연산자 = index 확인

js에서는 in 은 인덱스를 말한다.
배열의 내용이 아닌, 인덱스 값을 명시해야 한다.
배열의 최대 인덱스 in 배열 : true
나머지 넘는 값 도는 문자값 in 배열: false

익명함수

선언적 함수는 무조건 전체 코드를 실행하기 전에 만들어지고, 익명함수는 코드를 하나하나 실행하며 만들어진다.

html 코드 내부에서 scipt태그는 하나씩 전체가 실행. 실행 예측이 훨씬 더 힘들어진다. => 선언함수 잘 사용하지 않는다.

y=> s+=y ( 콜백함수 )
(reduce너무 옛날 문법)
[1,2,3,4]

y => s+=y 는 이름이 없으니까 익명함수가 들어간 것으로 보면 된다. (화살표 함수는 항상 익명함수)
forEach처럼 함수의 매개변수로 함수를 받게 되면 그때 괄호 안에 들어가는 함수가 콜백함수.

function getScore(x) { return x.중간고사점수;}
function sumScore(y) {s+=y;}
data.map(getScore).forEach(sumScore);
y => s+=y는 이름이 없으니까 익명함수가 들어간 것으로 보시면 됩니다. (화살표 함수는 항상 익명함수입니다)
forEach처럼 함수의 매개변수로 함수를 받게 되면 그때 괄호 안에 들어가는 함수가 콜백함수입니다.

지영님 말씀처럼 이름으로 받아도 됩니다.
function getScore(x) { return x.중간고사점수; }
function sumScore(y) { s += y; }
data.map(getScore).forEach(sumScore);

이게 이름으로 받는 방법이고요

data.map(x => x.중간고사점수).forEach(y => s+=y)

호준님 코드는 화살표함수(익명함수)를 그대로 안에 집어넣은 것입니다.
왜냐하면 코드가 길지 않아서 함수를 따로 정의하는 것보다 이게 더 편하기 때문입니다.

화살표 함수가 아니라 일반 익명함수를 콜백함수에 직접 넣을 수도 있습니다.
data.map(function (x) { return x.중간고사점수; }).forEach(function (y) { s += y; });

굳이 이렇게 할 필요는 없지만 이름이 있는 함수도 직접 넣어도 됩니다.
data.map(function getScore(x) { return x.중간고사점수; }).forEach(function sumScore(y) { s += y; });

콜백함수

function( value, index, array) {} 형태

즉시 실행함수

(제일 먼저실행)
1. 즉시 실행하고 외부에서 컨트롤 할 필요가 없는 함수
2. function scope, 메모리 효율

// 익명 즉시 실행 함수
(function () {
let a = 1;
let b = 2;
return a + b;
}());

// 기명 즉시 실행 함수
(function foo() {
let a = 3;
let b = 5;
return a * b;
}());

foo(); // ReferenceError: foo is not defined
// 어차피 실행하지 못해서 의미가 없음.
// 메모리 효율적으로 관리하기 위해 바로 실행해야 하는 것들을 즉시 실행함수로 관리

map 데이터 뽑아내기 (중요)

원소 하나하나마다 곱하기 2를 해주어라.
x=> x*2 (화살표 함수)

콜백함수 - 나중에 호출되는 함수
함수 이름을 받아.

리스트, 오브젝트 안 공백 다 변환시켜준다. (?)
그래서 보기좋게 바꾼다.
array 안에 object!
엄격하게 줄 것이면 " " 쌍따옴표로 표기

• 객체 통으로 찾기 or 키 값으로 value 찾기
  

for each

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"

const arrya=['사과','배']
array.forEach(function (value, index) {
console.log(index)} >>> 0,1
array.forEach(function(value, index) {
console.log(value)} >> 사과 배

+)
자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수 리터럴을 표현식이 아닌 문인 함수 선언문으로 해석하는 경우와 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문이다.
함수 선언문은 함수 이름을 생략할 수 없다는 점을 제외하면 함수 리터럴과 형태가 동일하다. 이는 함수 이름이 있는 기명 함수 리터럴은 함수 선언문 또는 함수 리터럴 표현식으로 해석될 가능성이 있다는 의미다.

call by value, reference, sharing

• js는 call by value만 존재한다. 참조타입을 넘기면 주소가 넘어가는 것이 아니라 주소값을 복사한 복사본이 넘어간다.
  (call by reference x - 다른언어에서만 o)
• 해당되는 자료형 : Object , Array, function
  array, object는 넘겨줄 때 주의 필요. 값이 바뀔 수 있다.

  let array = [100,200,300];
  function test(a) {
  a[0] =1000;}
  test(array) => 값바뀜
  array =>바뀐 값 호출

• 재할당 되는 순간에는 다른 값을 가리킴
• 해당되는 자료형 : Number, String, boolean, null, undefined

  let v = 100;
  function test(a) {
  a = 1000;
  }
  test(v) 10 = 1000;
  v v값은 바뀌지 않음

filter

조건에서 참인 것만 반환

마지막 요소 값 , 넣는 이유 > 데이터 추가될 수 있기 때문에.
filter 는 다찾는다. 메모리 효율이 매우 안좋음
find는 찾으면 멈춘다.
따라서 아이디는 중복될 일 없으므로 find로 !

디스코드는 아이디 중복 허락 왜냐하면. #5378 등 숫자가 붙는다.(tag)
비밀번호 틀리면 > id 또는 pw 틀렸습니다. (보안을 위해)
ex) 정치적 민감 페이지 - 다른 사람 평소에 쓰는 아이디 넣고 아이디가 틀렸다고 알려주면 그 사람의 가입 여부 유추 가능. So 하지말아야한다!

해쉬 : 단방향 암호화

패스워드를 까먹었을 때 패스워드를 다시 알려주는 게 아니라 비밀번호 재설정을 시키는 것 ==회사에서도 비밀번호 모르기때문에 보통 비밀번호 재설정하도록 한다.
소금을 친다(비밀번호 변수를 더해주고, 다른 곳에 저장한다.)
해커가 암호문알아도 한 글자 차이!
해쉬화

object에서 불만 => Map객체

불만: o.keys 가 안되는 것. reterable(순회) 안된다!
Map 객체는 키 - 값 쌍을 가지는 객체 자료형의 한 종류.

let m = new Map();
// Map에 값을 넣기
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);
// Map의 값에 접근하기
console.log(m.get('하나'));
//Map의 값이 있는지 확인
console.log(m.has('하나'));
//Map의 값을 제거
console.log(m.delete('하나'));
//Map크기 확인
console.size(m);
//Map의 순환
for (var variable of m) {
console.log(m을 순회. ${variable[0]})
console.log(m을 순회. ${variable[1]})
}

### 여기서 `은 백틱 !! 작은 따옴표 쓰면 안나온다. 또 당황.. 

//Map의 값에 접근
console.log(m.keys());
console.log(m.values());
console.log(m.entries());
//인덱스를 가지는 자료형 맵핑
let temp = new Map([[1, 10],
[2, 20],
[3, 30],
[4, 40]]);

key만 나옴

let m= new Map();
for (let i in o) {
console.log(i)}

에러 나옴

let m= new Map();
for (let i of o) {
console.log(i)}

정리

set은 자료를 넣겠다. get은 넣은 자료의 값을 얻겠다

let m = new Map();

for (let i of m) {
console.log(i); }

Map과 Object의 차이

Map객체와 Object는 둘 다 key-value 관계를 가진다는 점에서 비슷, 몇 가지 차이점.

• Object 키는 문자열 타입으로만 지정해야하지만, Map의 키는 모든 값을 가질 수 있다.
• Object 크기는 사용자가 직접 수동으로 알아내야 하지만, Map은 size를 통해 크기를 쉽게 얻을 수 있다.
  objMap = new Map();
  objMap.set('one',1);
  objMapt.set('two',2);
  console.log(objMap.size) //2
  obj= {hi:1, hi2:2, hi3:3, hi4:4};
  console.log(obj.length); //undefined
  console.log(obj.size); //undefined
• Map은 데이터를 추가하거나 제거하는 작업에서 object보다 더 나은 성능을 보인다.

Set?

모든 타입 값을 저장하는 객체 자료형의 한 종류. 이때 객체 안의 값은 중복을 허용하지 않는다.
let s= new Set('abcdeeeee');
set 을 Array로 바꾸고 length 구할 수 있다.
set은 순서가 없다.
set은 중복을 허락하지 않는다.
set은 인덱스로 호출할 수 없다.
let s =new Set([iterable]);

• set() 은 value들로 이루어진 컬렉션("집합"이라는 표현이 적절)
• Array와는 다르게 Set은 같은 value를 2번 포함할 수 없음
  따라서 Set에 이미 존재하는 값을 추가하려고 하면 아무 일도 없음

//비어있는 새로운 set을 만듬
let setA = new Set();
//새로운 set을 만들고 인자로 전달된 iterable로 인자를 채움
let setB = new Set().add('a').add('b')

setB.add('c');
console.log(setB.size); //3

//has() 주어진 값이 set안에 존재할 경우, true 를 반환
//indexOf()보다 빠름. 단, index가 없음
console.log(setB.has('b')); // true

//set에서 주어진 값을 제거
setB.delete('b');
console.log(setB.has('b')); //false

//set안의 모든 데이터 제거
setB.clear();
console.log(setB.size); //0
has()는 indexOf()보다 빠르다. 다만, index이 존재하지 않기때문에 index로 접근할 수없다.

++몰랐던 것. js는. key, value 1개만 대응됨. !
++심볼형에 대한 지식
js는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능.

심볼(symbol)

유일한 식별자(unique identifier)를 만들고 싶을 때 사용
//id는 새로운 심볼이 된다
let id = Symbol();
심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다. 심볼 이름은 디버깅 시 아주 유용
//심볼 id에는 "id"라는 설명이 붙는다.
let id= Symbol("id");
심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 한다.
설명이 같은 심볼 두 개를 만들고 이를 비교. 동일 연산자( == )로 비교 시 false가 반환되는 것을 확인할 수 있다.
let id1 = Symbol("id");
let id2 = Symbol("id");
alert(id1 ==id2); // false

심볼은 문자형으로 자동형 변환되지 않습니다.

다음주 진도 ...어마무시

this, json, json 렌더링, html form, 이벤트, 정규표현식, callback, promise, async, await, import...

필수..

filter , find , form, for , while