[JS 강의]

참고)
ex. let testValue = 3
변수 = 데이터 = 3
식별자 = 변수명 = testValue

객체 (딕셔너리, key:value 페어, {}, object)

object.key명 : 객체 접근법

객체[key명] : 객체 접근법 (동적 접근)

object.keys(변수명) : key를 배열 형태로 가져오는 매서드

object.values(변수명) : value를 배열 형태로 가져오는 매서드

object.entries(변수명) : (2차원 배열) [key:value], [], []..

object.assign(빈객체의변수명1, 복사당할변수명2) : 객체 복사
응용 예시)
object.assign(빈객체의변수명1, 복사당할변수명2, { (복사당할변수명의)key : value}) => 복사당할변수명2 안의 키, 밸류 값을 바꾸고 싶을 때 중괄호 쓰고 바꾸면 쏙 바뀐다.

... (spread operator) : 객체 병합
예시) 객체1, 객체2를 합치고 싶을 때 객체3 = {...객체변수명1, ...객체변수명2}

일급 객체로서의 함수

1. 변수에 함수를 할당할 수 있다. => 함수가 값으로 취급, 함수가 나중에 사용될 수 있다.
2. 함수가 인자로 다른 함수에 전달할 수 있다.=> 매개변수로 받은 변수가 사실 함수 => 콜백 함수(:매개변수로 쓰이는 함수), 고차 함수(:함수를 인자로 받거나 반환하는 함수)
3. 키 밸류에서 함수 가능함.
   
   예시) hello : function() ~

배열 (리스트, 순서 중요, [], array)

array[숫자] : 배열 접근법

array.push("추가할 것") : 배열의 마지막 요소 추가

array.pop() : 배열의 마지막 요소 삭제

array.shith() : 배열의 첫번째 요소 삭제

array.unshift("추가할 것") : 배열의 첫번째 요소 추가

array.splice(시작할 위치 번호", 삭제할 개수 "추가할 것") : 삭제 및 추가
예시) array.splice(1, 1, "포도")
=> 첫번째 요소부터 첫번째 요소까지 삭제하고 거기에 "포도" 넣어줘

array.slice(추출 시작할 위치 번호, 추출 끝낼 위치 번호) : 배열 추출 및 반환
예시) 배열1에서 요소 추출하고 싶을 때, 배열 2 = 배열1.slice(1, 2)
=> 묘하게 그리드 느낌으로 해당 예시가 1개만 추출된다. 실제로 코드 찍어보면 앎...

배열의 매서드

콜백함수란? 매개변수 자리 <- ()에 함수를 넣는 것

array.forEach(function(item)) {} : return 값이 없음

array.map(function(item)) {} : return 값 **있음** => **새로운 배열**로 받아야 한다. 원본 배열의 길이만큼 return

array.filter(function(item)) {} : return 값 **있음** => **새로운 배열**로 받아야 한다. 조건에 해당하는 것 전부 return. return (조건);

array.find(function(item)) {} : return 값 **있음** => **새로운 배열**로 받아야 한다. 조건에 해당하는 첫번째 요소 return. return (조건);

for문, while문

for(초기값; 조건식; 증감식)
``` => 대표 예시 for (let i = 0; i < array.length; i++) ```

for ~ in 문 : **객체 속성**을 출력 (객체 속성의 이름에 접근함)
=> 대표 예시 for (let 새로운 변수 in 객체변수명) {} 이렇게 하면 key값 출력, 두 개 다 같이 가져오고 싶을 경우?
for (let key in 객체변수명) {console.log(key + person[key]}

for ~ of 문 : **배열이나 이터러블 객체의 요소**들을 반복할 때 사용
추정... 참고) for ~ in 문으로 배열 등 반복문 쓸 수 있지만 표현식(배열변수명[i])이 더 귀찮아져서 일반적으로 for ~ of 를 사용하는 듯 하다...
=> 대표 예시 for (let 새로운 변수 of 배열변수명) {}

(초기값) while(조건식) {//메인로직 //증감식} => 대표 예시 ``` let i = 0; while (i < 10) {메인로직; i++;} ```

do~ while~ : 최초 1회 실행(do)

break, continue 문

break : 거기서 멈춤
continue : 해당 값만 빼고 실행

es6 문법

let 변수 재할당 가능 (선언 중복 불가능) / const 상수 재할당 불가능 (선언 중복 불가능)

구조분해할당 (destructuring)

배열이나 객체에서 필요한 값만 추출하여 변수에 할당

해당되는 값이 없을 때는 undefined
왜 쓰는지 아직 의문... 이 많다! 좀 더 공부하기로.

단축 속성명 (property shorthand)

키 = 밸류면 생략 가능

전개 구문 ... (spread operator)

풀었다가 다시 묶는 구문
객체, 배열 둘 다 가능 ...변수명

나머지 매개 변수 (rest parameter)

...arg 면 나머지 매개 변수 그냥 출력
arg 쓰면 나머지 매개 변수가 배열 형태로

템플릿 리터럴 (template literal)

백틱 : 멀티 라인 지원
${} : 변수나 표현식 쓸 때. 백틱 내부에서만 쓸 수 있음 (화살표 함수에서는 불가)

Map, Set

: 기존의 객체 또는 배열보다 효율적인 데이터의 구성, 검색, 사용

Map

key-value 페어
어떤 데이터 유형(타입)도 다 들어올 수 있다.
키가 정렬된 순서로 저장
기능 : 검색, 삭제, 제거, 여부 확인

const myMap = new Map();
myMap.set('key', 'value');
myMap.get('key')
반복할 시 -> keys(), valuse(), Entries() /
=> for ~ of ~문 사용 가능 of 뒤에 map.entries() 등으로 쓰면 된다.

Set

고유한 값을 저장하는 자료 구조
키 저장 안 함 (밸류만 있음)
값이 중복되지 않는 유일한 요소
기능 : 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
like 집합...

const mySet = new Set();
mySet.add('value1');
.
.
같은 값 추가를 하면 알아서 합쳐짐
반복할 시 -> for of 문 (*밸류만 있으므로 밸류로 진행!)

불변성 수행 방법

얕은 복사, 깊은 복사

데이터가... 루프를 돌면서... 수정이 되니까... 예? (*다시 공부하기)

JSON

json 방법도 있음

undefined, null

undefined

보통 컴퓨터가 왜 없어? 할 때는 undefined
변수 값이 지정되지 않을 경우
해당 데이터가 없는 경우
return 없는 경우

null

개발자가 없는 것을 명시할 경우는 null

실행 컨텍스트

실행 컨텍스트란? 환경 정보를 모아놓은 객체
1. 호이스팅 (hoistiong) : 선언된 변수를 위로 끌어올림
2. 외부 환경 정보 구성
3. this 값 설정

스택 vs 큐

스택 (stack) : last in, fist out
마지막에 들어간 게 처음으로 나온다.
1,2,3,4,5 순서로 들어가는데 5번이 먼저 나옴

큐 (Queue) : first in, first out
처음으로 들어간 게 처음으로 나온다.
1,2,3,4,5 순서로 들어가고 1번이 먼저 나옴

콜 스택 : 코드의 순서를 보장

전역 -> 아우터 -> 이너 -> 이너 삭제 + 아우터 재개 -> 아우터 삭제 + 전역 재개 => 종료

실행 컨테스트 객체에 담기는 정보

1. variableEnvionment = VE
   식별자 정보를 가지고 있음 record
   외부 환경 정보를 가지고 있음 outer
   변경사항 반영 x = 스냡샷 유지
2. LexicalEnvironment = LE
   VE = LE (record, outer 가지고 있음)
   단, 변경 사항 실시간 반영 = 스냅샷 유지 x
3. thisBinding
   this 식별자(변수명)가 바라봐야 할 객체

record와 호이스팅

reocrd : 컨테스트와 관련된 코드의 식별자 정보를 저장(기록)
수집 대상 정보 : 식별자(변수명), 함수 자체
순서대로 수집 => 실행과는 다름

호이스팅 : 가상 개념으로, 식별 정보를 맨 위로 끌어올린다는 뜻 (위로 변수 수집하기)

=> 즉, 레코드의 수집 과정이 호이스팅임

-> 기본 정보
함수 선언문과 함수 표현식
함수 선언문? function a () {}
함수 표현식? let a = function () {}

함수 선언문의 경우) 전체를 hosting
함수 표현식의 경우) 변수만 hosting : 즉, 변수만 위로 올라가고 아래 쪽만 영향을 받게 됨
=> 함수 선언문은 전체에 영향을 주기 때문에, 협업 과정 혹은 복잡한 코드를 다룰 때는 함수 표현식을 활용하는 습관을 들이기

outer, 스코프 그리고 스코프 체인

스코프란? 식별자에 대한 유효 범위
스코프 체인이란? outer가 현재 호출된 함수가 선언될 당시 LE를 참조

전역 -> 아우터 -> 이너 -> 이너 삭제 + 아우터 재개 -> 아우터 삭제 + 전역 재개 => 종료

선언될 당시의 LE정보가 들어있으니 outer 입장에서는 전역 컨텍스트가 가지고 있음

[오늘의 충격 깨달음]

image url 은 base url + file size + file path 로 구성한다.
-> 이 뜻을 한참 몰라서 이게.... 뭔가.... 엄청 고민했다.... 바보다...
이미지 url을 보면 보통

https://image.tmdb.org/t/p/w500/1E5baAaEse26fej7uHcjOgEE2t2.jpg

이렇게 나오는데, 여기서

1. base url

   https://image.tmdb.org/t/p/

2. file size

   w500

3. file path

   1E5baAaEse26fej7uHcjOgEE2t2.jpg

였다. 즉, 나의 경우 tmdb를 사용해서 웹사이트를 만드는 것이기 때문에 예시를 이걸로 들고 왔는데, 1과 2는 똑같이 쓸 생각이기 때문에 고정시키고 (값을 안 불러와도 되고), file path만 들고 오면 됐다.

2.document.querySelectorAll('')에는 addEventListener() 메서드가 없다.
-> 왠지 .누르고 add 누르는데 안 뜨더라... 이걸 쓸 때는 forEach !!