1. flex 이용해서 두 줄의 상품 목록 만들기
2. 3번째 상품에서 다음 줄로 넘어가도록 하기

🚨 문제발생

상품카드에 margin, padding등을 주려고 하면 
너비를 계산해서 작성해도 두줄이 아니라 여러줄로 깨짐

🏋 해결과정

1. div > ul > li 로 마크업
2. div의 너비는 지정 안함 : 컨텐츠 크기에 따라 정해지도록
3. ul의 너비를 제한하고 flex 지정
4. ul에 flex-wrap: wrap으로 설정, 컨텐츠의 크기가 더 크면 다음줄로 넘어가게됨
5. ul의 크기와 두줄로 넘어가는 범위를 고려해서 상품 너비와 마진 지정 : 원하는 지점부터 다음줄로 넘어감

✨ 목표

1. 상품의 가격과 로켓배송 이미지가 높이가 맞도록 정렬하기

🚨 문제

align-items: center 로 정렬하면 의도한대로 나오지 않음

🏋 해결과정

1. 컨테이너에 높이를 주고
2. 인라인 요소로 마크업된 가격과 로켓 이미지에 vertical-align:middle 로 정렬

메뉴 버튼을 클릭하면 정보가 보이거나 정보를 입력하면 서버에 저장되는 등 웹사이트는 수많은 기능을 제공한다. 이런 기능을 이용하기 위해 마우스, 키보드를 조작하는 행위를 이벤트라고 한다.

이벤트가 발생하면 '그래서 이벤트가 생기면 어떻게 할건데?' 라는 의문이 생길것이다. 이때 이벤트의 발생을 감지하고 처리하는 역할을 하는 것이 이벤트 처리기 이다.

처리기에는 이벤트 핸들러 와 이벤트 리스너 가 있다.

📌 이벤트 핸들러 (handler)

1. HTML 태그에 설정

<button onclick="showMenu();">

• HTML과 자바스크립트가 섞여서 유지보수하기 힘들다.
• HTML 문서에 여러개의 자바스크립트 파일이 import되고 핸들러 명이 같을 경우 오류가 생길 수 있다.

2. DOM 요소 객체에 설정

let menu = document.getElementById("menu");
let btn = document.getElementById("btn");

btn.onclick = showMenu(); // btn DOM 요소를 가져와서 클릭되면 menu의 display 설정 바꾸기

function showMenu(){
    menu.style.display = "block";
}

HTML과 자바스크립트를 분리할 수 있지만 하나의 이벤트 핸들러만 등록할 수 있다.

📌 이벤트 리스너 (addEventListener)

target.addEventListener(type, listener, useCapture);

• 이벤트를 감지하고 싶은 요소를 target으로 설정
• 메서드 인자 : ( 이벤트 type, 이벤트를 처리할 listener, 캡처링 여부 )

예시를 살펴보자

head.addEventListener('mouseover', function(){
    head.style.color = 'cornflowerblue';
})

head.addEventListener('mouseout', function(){
    head.style.color = '#fff';
}

결과

Video edited on Kapwing

리스너는

1. 같은 요소의 같은 이벤트에 여러개의 리스너 등록 가능
2. 버블링, 캡처링 단계에서 모두 활용 가능
3. removeEventListener, stopPropagation, preventDefault 활용해서 이벤트 전파 제어 가능
4. HTML 태그를 포함한 모든 DOM 노드에 이벤트 리스너 등록 가능   다음 포스팅에서 이벤트의 전파, 위임에 대해 알아보자!

출처:

[javascript] 자바스크립트 에벤트 핸들러와 리스너

브라우저 이벤트 소개

async 키워드는 함수 선언시에 앞에 붙여준다. promise 밀접한 연관이 있는데 아래 코드에서 new Promise를 리턴하는 함수를 async 함수로 바꿔보자

// 기존
// function startAsync(age) {
//  return new Promise((resolve, reject) => {
//    if (age > 20) resolve(`${age} success`);    
//   else reject(new Error("Something went wrong"));
//  });
// }

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

setTimeout(() => {
  const promise1 = startAsync(25);
  promise1
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
  const promise2 = startAsync(15);
  promise2
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });
}, 1000);

25 success
Error: 15 is not over 20
    at startAsync (/home/taehoon/Desktop/playground-nodejs/index.js:11:14)
    at Timeout._onTimeout (/home/taehoon/Desktop/playground-nodejs/index.js:23:20)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

이전 Promise 챕터의 코드와 완벽하게 같은 결과를 보여준다(내부적으로 다를 순 있지만)

🚨 async 함수의 리턴값은 무조건 promise

if (age > 20) return `${age} success`;
else throw new Error(`${age} is not over 20`);

코드 자체만 보면 문자열이 리턴될 것으로 예상할 수 있지만

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

const promise1 = startAsync(15)
console.log(typeof promise1); // object
console.dir(promise1) // Promise

짠! async 키워드를 붙인 것만으로 Promise 객체를 리턴하고 있다. 일반 함수처럼 다룰 수 없다는 걸 깨달아 버렸다.. 이제 어떻게 할까?

Promise 객체처럼 then, catch 로 후속처리를 할 수 있지만 새로운 await 키워드를 이용해서 코드를 async 함수를 다뤄보자

await

await은 Promise 가 reject인지 fulfilled인지 상관 없이 일단 끝날 때까지 기다리는 특징을 가지고 있다.

resolve

reject

await 은 resolve 함수가 호출될 때까지 기다린다. reject 가 호출됐을 땐 pending 상태에 머물러 있음을 알 수 있다.

더 자세한 예제를 통해 await을 알아보자

function setTimeoutPromise(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), ms);
  });
}

async function startAsync(age) {
// 리턴한 값은 resolve, reject에 해당하는 값은 error 로 해결

  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

async function startAsyncJobs() {
  await setTimeoutPromise(1000);

  const promise1 = startAsync(25);
  try {
    const value1 = await promise1; // *
    console.log(value1);
  } catch (e) {
    console.error(e);
  }
  const promise2 = startAsync(15);
  try {
    const value2 = await promise2; // *
    console.log(value2);
  } catch (e) {
    console.error(e);
  }
}

startAsyncJobs();

1. 문법 : await + Promise 객체

2. await은 Promise 가 resolve 함수를 호출하기를 기다린다.

3. ✨ async 함수에서 리턴하는 값을 resolve 값으로 간주한다.

   value1 // ${age} success
   value2 // ${age} is not over 20

4. throw error 로 처리되는 값이 reject 값으로 간주되고 catch 절로 넘겨 예외처리한다.

📌 await 의 의의?

비동기 함수로 시작한 작업은 그로부터 파생한 모든 작업도 비동기 작업으로 간주할 수 있다.

이게 무슨 소리지??

말 그대로 동기 환경 에서는 비동기로 처리한 작업을 기다리지 않고 내 할 일을 하고 있기 때문에 비동기 작업 안에서 동기 작업이 발생하는지 신경쓰지 않는다.

하지만 비동기 환경 에서 비동기 작업의 결과를 기다리는 건 의미가 있는데 예를 들어 '이번 달에 생일인 친구들의 목록을 받아온 뒤 생일 파티를 준비' 하려면 일단 이번 달 생일인 친구들을 찾아내서 결과를 받아야 한다. 무작정 아무 친구나 생일 준비를 해줄 수 없으니 말이다.

이럴 때 await 을 사용하는 것이다.

Promise 작업 끝남 
    -> 후속 조치 
       -> resolve : then  
       -> reject : catch

        |
        |
     await 함수
        |
        ↓

Promise 작업 진행
    -> resolve를 기다림(await)
        - 원하는 코드 실행
    -> reject로 error 발생
        - catch 로 예외 처리   

작업이 끝나고 후속처리를 하는 방법대신 하나의 async 흐름에서 기다렸다가 다음 코드를 실행하는, 우리가 그동안 해온 느낌으로 비동기 작업을 다룰 수 있게 된다!

출처:

https://elvanov.com/2597 - [Javascript] 비동기, Promise, async, await 확실하게 이해하기

function str(){
    console.log('I \'m string');
}

console.log(1);
str(); 
console.log(2);
console.log(3);

본래 코드는 위에서 아래 순서로 실행된다.

함수 str은 코드 가장 위에 정의되어 있지만 실행되지 않고 있다가 1이 출력된 이후 호출되어 문자열을 뱉어낸다.

1
I'm string
2
3

다음 예제도 살펴보자

function b() {
  console.log("b called!");
}

function a(another) {
  console.log("a started!");
  another();
  console.log("a ended!");
}

console.log(1);
a(b);
console.log(3);

1
a started!
b called!
a ended!
3

a함수는 another 인자를 받아서 함수처럼 호출하고 있다 이처럼 a함수를 호출할 때 b함수를 전달하는 것을 '콜백함수를 전달한다' 고 한다.

종합해보자면 함수는  

1. 선언과 호출의 시점을 다르게 해서 코드의 실행 흐름을 조작하고
2. 인자로 함수를 받아 실행 할 수 있다

let i = 0;
function decryptData(callback, wait, age) {
  let start = new Date().getTime();
  while (new Date().getTime() < start + wait); 
  callback(`${age}세 은행원`);
}

fetchData(console.log, 1000, 20);
fetchData(console.log, 1000, 37);
fetchData(console.log, 1000, 59);

자 이제부터 익명의 직원 3명의 개인정보를 가져오는 작업을 한다고 가정해보자 정보는 암호로 되어있어 하나의 정보를 해독 후에 가져오는데 시간 1초가 꼭 걸린다고 한다면 한명의 직원 정보를 가져오는 동안 다른 직원의 정보를 동시에 가져오는 일은 할 수 없다. 즉 3초를 꽉 채워 기다려야 한다는 뜻이다.

하지만 해독을 다른 누군가가 대신 해주고 나는 답변을 기다리기만 한다면, 또 3대의 컴퓨터로 3명의 정보를 동시에 받아오면 어떨까?

비동기 - 동시에 여러개 작업

function finishJob(num) {
  console.log(`${num}번 요원의 정보를 받아왔습니다.`);
}

setTimeout(finishJob, 2000, 1);
setTimeout(finishJob, 1500, 2);
setTimeout(finishJob, 1000, 3);
console.log("정보 요청을 모두 보냈습니다.");

정보 요청을 모두 보냈습니다.
3번 요원의 정보를 받아왔습니다.
2번 요원의 정보를 받아왔습니다.
1번 요원의 정보를 받아왔습니다.

위 코드는 3명의 정보를 동시에 받아서 정해진 시간 뒤에 출력하고 있다. 그런데 결과값이 조금 이상하다. 마지막 console.log 함수 결과가 가장 먼저 출력되었다. 어떻게 된 일일까?

setTimeout ( ) 때문이지

setTimeout(기다린 후 호출할 콜백함수, 기다릴 밀리초, 콜백함수에 넘길 인자(옵션))

1. setTimeout 은 기다리는 함수로 일정한 ms 뒤에 콜백함수를 호출한다.
2. 그러나 setTimeout 함수 자체는 '~~ms 뒤에 이 함수를 호출해'하고 예약만 한 후에 바로 함수를 끝내버린다.
3. 이때 기다리지 않는 console.log는 즉식 실행되어 가장 상단에 출력되고
4. 콜백 함수들은 예약된 시간이 되면 finishJob을 호출해서 문자열을 출력하기 때문에 위와 같은 결과가 나오는 것이다.

위를 아래와 같이 표현해보면 setTimeout이 비동기 방식임을 알 수 있다. -> 예약이 끝나자마자 동시에 각자의 예약 시간을 기다리고, 이때 하나의 콜백함수가 다른 콜백함수의 기다림에 영향을 주지 않기 때문이다.

setTimeout(callback1, 1000ms, arg (옵션)) -> 함수 끝 , 예약됨
setTimeout(callback2, 1500ms, arg (옵션)) -> 함수 끝 , 예약됨
setTimeout(callback3, 2500ms, arg (옵션)) -> 함수 끝 , 예약됨
     |              |                    |                |
 'hi' 출력             |              |                   |
                callback1         |                   |    
                 1000ms          callback2         |    
                                  1500ms            |
                                             callback3
                                              2500ms

📌 비동기 - 문제점

위에서 본 것처럼 비동기 작업은 한번에 여러 작업을 동시에 수행할 수 있는 장점이 있지만, 의존성이 길게 이어져 있는 경우 일이 복잡해진다

왜냐하면 비동기 작업은 함수가 호출되는 시점에 시작되고 이때 다음 작업(콜백함수)도 넘겨줘야 하기 때문이다.

Promise

기본적인 형태부터 알아본 후 사용 예제까지 살펴보자.

const promise1 = new Promise((resolve,reject) => {
    // 비동기 작업
}) 

• const로 선언해서 재할당이 되지 않도록 하면 하나의 변수로 끝까지 관리하면 가독성이 좋고 유지보수에 용이하다.
• new Promise 생성자 함수로 새로운 promise1 객체를 생성한다.
• 특별한 함수(화살표 함수) 하나를 인자로 받는다.

📌 executor

• promise 생성자 함수가 받는 특별한 함수를 executor 라고 한다.
• executor는 인자 2개를 받는데 하나는 resolve, 다른 하나는 reject이다.
• 이 두개의 인자 역시 함수이고 비동기 작업의 성공 / 실패를 표현한다.
• resolve -> 비동기 작업 성공 reject -> 비동기 작업 실패

비동기 작업은 언제 끝날 지 알 수 없기 때문에 성공, 실패에 따른 후작업까지 해 주어야 한다.

• resolve -> then 으로 성공 후 작업 연결
• reject -> catch 로 오류나 실패를 잡아냄

📌 then, catch

Promise 작업이 끝난 뒤의 후속작업을 처리하는 메소드이다.

then : 비동기 작업이 성공하면 실행할 동작 지정, 함수를 인자로 받음 catch : 비동기 작업이 실패하면 실행할 동작, 함수를 인자로 받음

const promise1 = new Promise((resolve, reject) => {
  resolve(); // reject();
});

promise1
  .then(() => {
    console.log("then!"); 
  })
  .catch(() => {
    console.log("catch!");
  });

결과

then! //catch!

위에서 설명한 것처럼 resolve는 then으로 처리, reject는 catch로 처리되는 것을 볼 수 있다.

📌 재사용

비동기 작업을 수행할 때마다 new Promise 를 이용해 객체를 만들기는 번거롭다. 이럴땐 new Promise 의 결과를 바로 리턴하는 함수를 만들어 재사용하면 된다.

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve();
    else reject();
  });
}

setTimeout(() => {
  const promise1 = startAsync(25);

  promise1
    .then(() => {
      console.log("1 then!");
    })
    .catch(() => {
      console.log("1 catch!");
    });

  const promise2 = startAsync(15);

  promise2
    .then(() => {
      console.log("2 then!");
    })
    .catch(() => {
      console.log("2 catch!");
    });

}, 1000);

• setTimeout() 은 1000밀리초 뒤에 { } 안의 내용을 실행한다.
• 2개의 변수는 25, 15 인자로 보내 startAsync 함수를 호출한다.
• 호출하는 순간 new Promise 가 실행되어 비동기 작업이 시작된다.
• then 혹은 catch 로 후속 작업을 처리한다.

결과

promise1 -> resolve ( ) -> then -> // 1 then!
promise2 -> reject ( ) -> catch -> // 2 catch!

📌 작업 결과 전달

위에서 startAsync를 호출하여 변수를 만들 때 인자를 전달했었다. 이 인자를 new Promise 에서 resolve, reject 일 때 각각 다르게 처리해 then, catch 에 전달할 수 있다.

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve(`${age} success`);    
    else reject(new Error(`${age} is not over 20`));
  });
}

setTimeout(() => {
  const promise1 = startAsync(25);

  promise1
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });

  const promise2 = startAsync(15);

  promise2
    .then((value) => {
      console.log(value);
    })
    .catch((error) => {
      console.error(error);
    });

}, 1000);

결과

25 success
Error: 15 is not over 20
    at /home/taehoon/Desktop/playground-nodejs/index.js:4:17
    at new Promise (<anonymous>)
    at startAsync (/home/taehoon/Desktop/playground-nodejs/index.js:2:10)
    at Timeout._onTimeout (/home/taehoon/Desktop/playground-nodejs/index.js:17:20)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

📌 기타사항

executor 를 만들 때 조금 더 알아두면 좋은 점들을 살펴보자

1. executor 내부에서 에러가 throw 되면 reject가 수행됨

const throwError = new Promise((resolve, reject) => {
  throw Error("error");
});
throwError
  .then(() => console.log("throwError success"))
  .catch(() => console.log("throwError catched"));

2. executor 의 리턴 값은 무시된다.

// 아무런 영향이 없습니다.
const ret = new Promise((resolve, reject) => {
  return "returned";
});
ret
  .then(() => console.log("ret success"))
  .catch(() => console.log("ret catched"));

Promise {<pending>} // 아직 아무 값도 받지 못함, (성공 / 실패) 여부 불확실

3. 첫번째 reject 혹은 resolve 만 유효하다.(throw 역시 이전 함수가 호출되면 무시됨)

// resolve 만 실행
const several1 = new Promise((resolve, reject) => {
  resolve();
  reject();
});
several1
  .then(() => console.log("several1 success"))
  .catch(() => console.log("several1 catched"));

// reject 만 실행
const several2 = new Promise((resolve, reject) => {
  reject();
  resolve();
});
several2
  .then(() => console.log("several2 success"))
  .catch(() => console.log("several2 catched"));

// resolve 만 실행
const several3 = new Promise((resolve, reject) => {
  resolve();
  throw new Error("error");
});
several3
  .then(() => console.log("several3 success"))
  .catch(() => console.log("several3 catched"));

결과

// 위의 코드들 결과(순서대로)

throwError catched
several1 success
several2 catched
several3 success

어차피 첫번째 resolve, reject만 영향을 주기 때문에 해당 함수가 호출되면 리턴해서 비동기 작업을 빠져나가는 것이 좋다.

위에서 봤던 startAsync를 조금 바꿔보자

function startAsync(age) {
  return new Promise((resolve, reject) => {

    if (age > 20) {
      return resolve(`${age} success`);
    }

    return reject(new Error(`${age} is not over 20`));

    // 이 아래의 코드들은 이제 실행되지 않는다!
  });
}

(위의 코드는 무언가를 기다리는 작업은 하고 있지 않다 단순예제로만 보기를!)

• 비동기 작업이 성공하면 resolve가 실행되면서 then으로 정보를 보낸 후 리턴되고 다음 코드가 실행되지 않는다.
• 비동기 작업이 실패하면 reject를 실행, catch로 정보를 보낸 후 리턴되고 역시 이 다음의 코드들은 실행되지 않는다.

정리해보자면

• 함수는 코드가 적힌 순서를 떠나 내가 원할때 코드 조각을 불러와 실행 할 수 있다.
• 콜백은 이런 함수를 인자로 보내 함수 실행의 권한을 다른 함수에 넘기는 것을 말한다.
• 비동기 작업은 이런 함수 여러개가 동시에 실행되고 언제 결과가 나올 지 알 수 없고
• 비동기 작업이라도 서로 의존성이 있는 경우 곤혹을 치를 수 있다.
• 이런 비동기 작업의 문제를 해결하기 위해 Promise 를 이용하고
• 언제끝날지 모르는 비동기 작업의 후속처리를 then,catch로 처리할 수 있다.

출처:

https://elvanov.com/2597 - [Javascript] 비동기, Promise, async, await 확실하게 이해하기

실행 컨텍스트 Lexical scope closure private 비동기

📌 실행 컨텍스트

자바스크립트엔진은 스크립트를 실행하다가 함수를 만나면 실행컨텍스트를 생성한다. 이 실행컨텍스트에 함수가 실행될 때의 환경을 저장하며 이렇게 만들어진 실행컨텍스트는 자신만의 스코프(유효범위)를 갖게된다.

var x = 10
var y = 20

function print(){
  var x = 5
  console.log(x, y)
}

print() // 5,20

실행 컨텍스트 입장에서 살펴보자면

1. GO ( x= 10, y= 20, print= function )
2. print 함수 컨텍스트 ( x= 5 )
3. 참조한 변수 : x= 5, y= 20

🚥 우선 자바스크립트가 실행되면 글로벌 오브젝트(GO)를 생성한다. GO에는 전역 변수들과 함수들이 프로퍼티로 저장된다 ( x = 10, y = 20, print = function )

🚥 자바스크립트엔진이 print() 함수를 실행하게되면 새로운 실행컨텍스트가 생성된다. ( print 컨텍스트는 x = 5를 속성으로 저장한다. )

🚥 print 컨텍스트에 y 변수가 없으니 바로 상위 컨텍스트에서 y를 찾게된다.

🚥 만약에 GO에도 y가 선언되어있지 않다면 'y is not defined' 라는 컨퍼런스 에러가 발생한다.

즉, 변수를 참조할 땐 함수가 실행된 컨텍스트 내부를 먼저 살펴보고 없으면 상위 컨텍스트를 계속해서 찾는데 이것이 '스코프 체인'이다.

📌 Lexical Scope

Lexical Scope는 함수와 변수의 Scope를 선언된 위치를 기준으로, Dynamic Scope는 함수나 변수의 Scope를 호출된 시점을 기준으로 사용한다.

자바스크립트는 Lexical Scope를 사용하는 점을 유념해서 아래 코드를 살펴보자

var x = 1;

function print() {
    console.log(x); // 1
}

function dummy() {
    var x = 999;
    print();
}

dummy();

• dummy 함수를 호출하면 변수 x를 새롭게 선언, 할당하고 print 함수를 호출한다.
• print 함수가 호출되면 선언된 위치를 파악하고 x가 전역 변수로 선언, 1을 할당 받은 뒤니까 전역 변수 x의 값을 출력한다.

만약 Dynamic Scope로 스코프를 정한다면 실행 중 동적으로 변하니까 x값을 999로 출력한다.

var x = 1;

function outer() {
    var x = 2;
    function inner() {
        console.log(x)
    }

    inner();
}

outer();

• inner 함수가 선언된 위치를 중심으로 x변수를 찾는다면 inner 함수 (없음) -> 외부함수 outer 접근 (발견) -> x = 2 출력

function init() {
    var name = "Mozilla"; 

    function displayName() { 
        alert(name); 
    }

    displayName();
}

init();

위에서본 설명들을 조합해서 코드를 살펴보자면

• init 함수가 실행되면 name 변수와 displayName 함수가 선언되고 실행된다.
• displayName 함수가 선언된 위치를 기준으로 현재 실행 컨텍스트에는 name 변수가 없으니 외부 함수(init)를 살핀 후 name을 찾아 그 값인 Mozilla를 출력한다.

그럼 다음 예제도 같이 살펴보자

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        console.log(name); // Mozilla
    }
    return displayName;
}

var myFunc = makeFunc();

myFunc();

• 위의 예제 코드와 같은 결과를 출력하지만 displayName을 바로 출력하지 않는다.
• 대신 displayName 함수를 리턴값으로 myFunc에 저장 후 myFunc를 실행한다.
• 마찬가지로 displayName 함수 컨텍스트에는 name 변수가 없기 때문에 현재 함수 위치에서 외부 함수에 접근하고 name 값을 찾아 출력한다.

🚨 잠깐! 어떻게 '이미 리턴된' 함수와 그 지역변수에 접근 할 수 있는거지?

몇몇 프로그래밍 언어에서, 함수 안의 지역 변수 들은 그 함수가 처리되는 동안에만 존재한다. 따라서** makeFunc() 실행이 끝나면(displayName함수가 리턴되고 나면) **name 변수에 더 이상 접근할 수 없다고 예상하는 것이 일반적이다.   그러나 위의 코드에선 이미 호출이 끝난 함수의 실행 컨텍스트에 접근해서 name 변수값을 받아와 출력할 수 있었다. 이게 어떻게 가능한 것일까?

📌 closure

자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

_조금 더 쉽게 설명해보자면 _

Closure란 자신이 생성된 시점의 환경을 기억하는 함수 즉, Closure는 자신의 외부 함수 호출이 종료되었음에도 그 외부함수의 변수 or 인자에 접근 할 수 있는 함수이다.

다시 예제를 살펴보자

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        console.log(name); // Mozilla
    }
    return displayName;
}

var myFunc = makeFunc();

myFunc();

• makeFunc가 리턴되면서 클로저가 생성되고 displayName이 생성될때의 위치를 기준으로 함수와 그 지역변수를 기억하게 된다.
• 이 클로저를 myFunc가 참조할 수 있게 되고
• myFunc 함수가 호출되는 순간 클로저에서 name 변수를 찾을 때까지 scope chain으로 상위 실행 컨텍스트를 살핀다.
• makeFunc 함수의 지역변수인 name을 발견해 Mozilla를 출력한다.

📌 private 흉내내기

자바스크립트는 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.

var counter = (function() {
    var privateCounter = 0;
    function changeBy(val) {
        privateCounter += val;
    }
    return {
        increment: function() {
            changeBy(1);
        },
        decrement: function() {
          changeBy(-1);
        },
        value: function() {
          return privateCounter;
        }
   };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

• counter 변수에는 익명 함수가 즉시 실행되어 리턴값이 저장된다.
• 같은 어휘적(lexical) 환경을 공유하는 세개의 클로저가 생성된다.
• 이 어휘적 환경은 익명함수 안에서 만들어진 privateCounter 변수, changeBy 함수를 포함한다.
• 세개의 메서드에 의해서만 두 값이 조작될 수 있다.

✨ 클로저 역할? 세개의 메서드는 클로저 환경의 값만 조작하기 때문에 공용 공간을 더럽히지 않고 private 변수나 함수에 외부에서 직접적으로 접근하여 조작할 수 없어 값을 보존할 수도 있다.

값이 보존되는 또다른 예제를 살펴보자

var makeCounter = function() {
    var privateCounter = 0;
    function changeBy(val) {
        privateCounter += val;
    }
    return {
        increment: function() {
            changeBy(1);
         },
        decrement: function() {
            changeBy(-1);
        },
        value: function() {
            return privateCounter;
        }
    }
};

var counter1 = makeCounter();
var counter2 = makeCounter();

counter1.increment();
counter1.increment();

console.log(counter1.value()); /* 2 */
console.log(counter2.value()); /* 0 */

• 아까전의 코드와 다르게 익명함수를 즉시호출하지 않고 변수에 저장했다.
• 변수를 호출해서 counter1, counter2 등 여러 버전을 만들 수 있다.

✨ 독립성 유지 방법? 각 클로저는 그들 고유의 클로저에서 privateCounter 변수의 다른 버전을 참조한다. 따라서 각 카운터가 호출될 때마다 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.   이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.

📌 실용적 클로저

function makeSizer(size) {
    return function() {
           document.body.style.fontSize = size + 'px';
    };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

• 세개의 사이즈 변수에는 각자 다른 사이즈 값을 기억하는 클로저가 할당된다.
• 이 함수는 실행되지 않고 있다가 dom에서 onclick 이벤트를 감지하면 실행된다.

✨ 비동기 작동에도 사용해 이처럼 자신만의 고유한 환경을 참조하면 다른 환경에서 값이 변해도 영향을 받지 않고 인자로 받은 값을 기억하고 있기 때문에 나중에 호출 되더라도 그 값을 유지한 채 작동된다.

출처:

https://medium.com/sjk5766/lexical-scope-closure-%EC%A0%95%EB%A6%AC-41f5d1c928e4 - 클로저

https://imki123.github.io/posts/33/ - 실행 컨텍스트

https://elvanov.com/2597 - 비동기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures - 클로저

생성자 함수와 프로토타입

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.isAdult = function(){
    if(this.age > 20) return '성인입니다.';
    else return '청소년입니다.';
}

const mark = new Person('Mark', 23);
const bob = new Person('Bob', 14);

console.log(mark.isAdult());
console.log(bob.isAdult());

• 생성자 함수는 파스칼 케이스로 이름을 설정해 구별
• 생성자 함수로 만들어진 인스턴스에서 인자를 받아 속성 정의
• 메서드는 prototype 객체에 정의
• 생성자 함수로 만드는 인스턴스는 상위 객체에 접근해서 메서드를 사용한다.

생성자 함수: 데이터는 생성자 함수에서, 이를 조작하는 것은 프로토 객체에 따로 작성 class: 객체를 생성하기 위한 템플릿으로 데이터와 이를 조작하는 코드를 하나로 추상화한다. -> 비록 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다

# class

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    isAdult(){
        if(this.age > 20){
            return `${this.name}은 성인입니다.`
        }else{
            return `${this.name}은 청소년입니다.`
        }
    }
}


const mark = new Person('Mark', 23);
const bob = new Person('Bob', 14);

console.log(mark.isAdult()); // 'mark은 성인입니다.'
console.log(bob.isAdult()); // 'bob은 입니다.'

📌 class 선언

Class를 정의하는 방법 중 하나는 class 선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 class 키워드를 사용해야 한다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

• 인자는 constructor 메서드가 받아서 속성을 정의한다.
• new 키워드로 인스턴스를 만들 수 있다.

📌 consturctor

• constructor 메서드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.
• 클래스 안에 한 개만 존재할 수 있다.
• 만약 클래스에 여러 개의 constructor 메서드가 존재하게 되면 SyntaxError가 발생한다.

class 확장

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    isAdult(){
        if(this.age > 20){
            return `${this.name}은 성인입니다.`
        }else{
            return `${this.name}은 청소년입니다.`
        }
    }
}

생성자 함수 확장

function Person2 (name, age){
    Person.call(this,name,age); // Person이 생성자 함수라고 가정    
}

Person2.prototype = Object.create(Person.prototype);
Person2.prototype.constructor = Person2;

class 확장

class Person2 extends Person {
    constructor(name, age){
        super(name, age);
    }
}


const mark = new Person2('Mark', 23);
const bob = new Person2('Bob', 14);

console.log(mark.isAdult()); // 'mark은 성인입니다.'
console.log(bob.isAdult()); // 'bob은 청소년입니다.'

console.log(mark instanceof Person2); // true
console.log(mark instanceof Person); // true

• 기존 Person 클래스 함수를 extends 키워드로 Person2로 확장하고
• super 함수로 Person 클래스의 인자를 사용한다.
• 메서드까지 추가 코드 작성 없이 사용할 수 있다

• 두 줄로 연결되어 있어서 pointer가 prev, next 두 개 존재한다.
• 리스트 뒤에서부터 노드에 접근할 수 있어 편하다.
• 리스트를 조작하는 경우엔 업데이트해야 하는 값이 늘어나서 주의해야 한다.
  ```javascript // 기본 코드 function Node(data){ this.prev = null; this.data = data; this.next = null; }

function DoubleLinkedList(){ this.head = null; this.tail = null; this.length = 0; }

DoubleLinkedList.prototype.size = function(){ return this.length; }

DoubleLinkedList.prototype.isEmpty = function(){ return this.length === 0; }

---

## 📌 append
```javascript
// append(): 연결 리스트 가장 끝 부분에 노드 새로 생성 후 추가
DoubleLinkedList.prototype.append = function(data){
    let node = new Node(data);

    if(this.head === null){
        this.head = node;
        this.tail = node;
    }else{
        this.tail.next = node;
        node.prev = this.tail;
        this.tail = node;
    }

    this.length++;
}

let dll = new DoubleLinkedList();


dll.append(1);
dll.append(10);
dll.append(100);

✅ 연결 리스트와 다른점? 똑같이 리스트 끝에 노드를 추가하더라도 이중연결 리스트는 끝에 tail과의 연결도 신경써야 한다.

• 리스트가 비어있는 경우: this.head, this.tail 모두 node를 가리킴
• 노드가 1개 이상 있는 경우: this.tail.next = node -> 원래 연결됐던 노드에 새 node 연결 node.prev = this.tail -> node.prev로 원래 노드 가리킴(연결) this.tail = node -> this.tail랑 새 node 연결

📌 printNode, printNodeInverse

// printNode(): 연결 리스트 내에 노드 모두 출력
DoubleLinkedList.prototype.printNode = function(){
    process.stdout.write('head -> ');

    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }
    console.log('null');
}

// printNodeInverse(): 연결 리스트 노드를 뒤에서부터 모두 출력
DoubleLinkedList.prototype.printNodeInverse = function(){
    let temp = []; 
    process.stdout.write('null <- ');
    for(let node = this.tail; node != null; node = node.prev){
        temp.push(node.data);
    }

    for(let i = temp.length-1; i >= 0; i--){
        process.stdout.write(`${temp[i]} <- `);
    }

    console.log('tail');
}


dll.printNode();
dll.printNodeInverse();

head -> 1 -> 10 -> 100 -> null // printNode
null <- 1 <- 10 <- 100 <- tail // printNodeInverse

두 결과는 거의 비슷하기 때문에 printNode 메서드를 이용한 트릭으로 tail 리스트를 출력할 수도 있지만 tail과 prev 포인터를 적극 이용해서 노드를 출력 했다.

• 빈 배열 temp를 만든다.
• 가장 마지막 값인 null을 문자열로 출력한다.
• this.tail부터 시작 -> node.prev로 업데이트 하면서 노드에 접근한다.
• 접근한 노드의 값을 빈 배열에 인덱스 0부터 차례로 push한다.
• prev가 가리키는 노드가 빈 경우 반복문을 끝낸다.
• 출력 순서는 printNode와 같지만 화살표 방향과 시작 끝이 다르게 출력하기 위해 배열을 거꾸로 출력한다.
• 시작점인 tail을 문자열로 출력한다.

📌 insert

//insert(): position 위치에 노드 추가
DoubleLinkedList.prototype.insert = function(value,position = 0){
    if(position < 0 || position > this.length){
        return false;
    }

    let node = new Node(value),
        current = this.head,
        count = 0,
        prev;

    if(position === 0){
        if(this.head === null){
            this.head = node;
            this.tail = node;
        }else{
            node.next = current;
            current.prev = node;
            this.head = node;
        }

        this.length++;
    }else{
        if(position === this.length){
            current = this.tail;
            current.next = node;
            node.prev = current;
            this.tail = node;
        }else{
            while(count++ < position){
                prev = current;
                current = current.next;
            }

            node.next = current;
            prev.next = node;

            current.prev = node;
            node.prev = prev;
        }

        this.length++;
    }

}

let dll = new DoubleLinkedList();


dll.insert(1);
dll.insert(10);
dll.insert(100);
dll.printNode(); // head -> 100 -> 10 -> 1 -> null
dll.printNodeInverse(); // null <- 100 <- 10 <- 1 <- tail

dll.insert(2,1);
dll.insert(3,3);
dll.printNode(); // head -> 100 -> 2 -> 10 -> 3 -> 1 -> null
dll.printNodeInverse(); // null <- 100 <- 2 <- 10 <- 3 <- 1 <- tail

✅ 연결 리스트와 다른점? 이중 연결에서는 this.tail의 존재때문에 노드를 넣고 싶은 자리의 조건을 세세하게 나눠야 한다. (value,position을 인자로 받고 position 값을 받지 못하면 디폴트 값 0)

• position == 0

    + this.head === null : 리스트가 빈경우
    + 노드가 1개 이상 있는 경우

• position == this.length

    this.tail과 연결 해야함

• 위 둘 다 아닌 경우

    prev, current 이용해서 노드 중간에 연결

📌 remove

// remove(): value 데이터를 찾아서 노드 삭제
DoubleLinkedList.prototype.remove = function(value){
    let current = this.head,
        prev;

    while(current.data != value && current.next != null){
        prev = current;
        current = current.next;
    }

    if(current.data != value) return null; //리스트에 없는 경우 null, 리스트가 텅 빈 경우도 current.next == null, current.data != value이므로 캐치

    if(current === this.head){
        this.head = current.next;

        if(this.length == 1) this.tail = null; // if(current.next == null) 보다 명시적임
        else this.head.prev = null;
    }else if(current === this.tail){ // 이미 위 조건에서 노드가 1개인 경우 캐치,
        this.tail = current.prev;
        this.tail.next = null;
    }else{
        prev.next = current.next;
        current.next.prev = prev;
    }

    this.length--;

    return current.data;
}


let dll = new DoubleLinkedList();


dll.insert(1);
dll.insert(10);
dll.insert(100);
dll.insert(2,1);
dll.insert(3,3);

console.log(dll.remove(1000));
dll.printNode();
dll.printNodeInverse();
console.log(dll.remove(1));
dll.printNode();
dll.printNodeInverse();
console.log(dll.remove(2));
dll.printNode();
dll.printNodeInverse();
console.log(dll.remove(100));
dll.printNode();
dll.printNodeInverse();

• 지우고 싶은 노드를 current에 저장하기 위해서 while문 이용
• 리스트를 모두 돌았는데 current.data != value면 null 반환
• 지우고 싶은 노드가 첫 노드인 경우 current.next 값을 this.head에 할당한다.
  • 노드가 1개만 있는 경우 -> this.tail = null +2개 이상 있는 경우 -> this.head.prev = null

    this.head 는 지운 노드의 다음 값이고 이제는 첫 노드가 된다.
    첫 노드의 경우 prev 값이 null 이니까 this.head.prev = null 초기화

• 지우고 싶은 노드가 마지막인 경우 this.tail에 current.prev값을 연결한다.

  첫 번째 조건에서 노드가 1개인 경우는 이미 해결 했으니까 this.tail은 
  2개 이상인 경우만 신경쓴다.

• 지우고 싶은 노드가 노드 중간에 있는 경우엔 while문으로 찾아낸 prev, current값을 이용해서 연결해준다.

📌 removeAt

// removeAt(): position 위치 노드 삭제
DoubleLinkedList.prototype.removeAt = function(position = 0){
    if( position < 0 || position >= this.length) return null;

    let current = this.head,
        count = 0,
        prev;

    if(position === 0){
        this.head = current.next;

        if(this.length == 1) this.tail = null;
        else this.head.prev = null;

    }else if(position === this.length-1){
        this.tail = this.tail.prev;
        this.tail.next = null;
    }else{
        while(count++ < position){
            prev = current;
            current = current.next;
        }

        prev.next = current.next;
        current.next.prev = prev;
    }

    this.length--;

    return current.data;
}

• remove 메서드에서는 value값과 일치하는 노드를 지웠다면 removeAt은 position으로 위치를 찾는다.
• 지울 노드가 this.head,this.tail과 연결되는 경우
• 지울 노드가 노드 중간에 있는 경우

# 📌 indexOf, remove2

// indexOf() : value 값과 일치하는 노드의 인덱스를 반환
DoubleLinkedList.prototype.indexOf = function(value){
    let current = this.head,
        count = 0;

    while(current != null){
        if(current.data === value) return count;

        current = current.next;
        count++
    }

    return -1;
}

// remove2 (): indexOf() + removeAt() = remove2()
DoubleLinkedList.prototype.remove2 = function(value){
    let index = this.indexOf(value);
    return this.removeAt(index);
}

• current != null로 리스트가 비어있는 경우와 모든 노드를 돌고도 찾는 값이 없는 경우 모두를 캐치할 수 있다.
• while 문에서 리턴이 되지 않으면 무조건 -1
• remove2는 indexOf로 해당 값의 인덱스를 받아서 removeAt으로 인덱스의 노드를 삭제하고 삭제한 노드를 반환하는 메서드.

📌 암시적 바인딩

chrome 브라우저에서 this는 window, this.alert('hi')가 잘 작동하고 있다.

node 환경에서 this는 존재하지만 this.alert()는 존재하지 않는다.

전역공간 이외에도 함수에서의 this와 메서드의 this는 또 다를 수 있다. 이처럼 예상하기 어려운 this를 좀 더 안전하게 사용하는 방법을 살펴보자

📌 명시적 바인딩

Function.prototype.apply( ) Function.prototype.bind( ) Function.prototype.call( )

# call

const me = {
    name: 'suyeon',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

const zero = {
    name: '베이스',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

function sayFullName(lastName){
    return lastName + this.sayName();
}

const result = sayFullName.call(me,'kim');
const result2 = sayFullName.call(zero, '제로');

console.log(result); // kimsuyeon 입니다.
console.log(result2); // 제로베이스 입니다.

# apply

const me = {
    name: 'suyeon',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

const zero = {
    name: '베이스',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

function sayFullName(lastName){
    return arguments[0] + this.sayName();
}

const result = sayFullName.apply(me,['kim','김']);
const result2 = sayFullName.apply(zero, ['zero', '제로']);

console.log(result); // kimsuyeon 입니다.
console.log(result2); // zero베이스 입니다.

call과 같지만 배열을 인자로 받은 후 arguments[index] 형식으로 요소를 선택할 수 있다

bind

const me = {
    name: 'suyeon',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

const zero = {
    name: '베이스',
      sayName: function(){
        return this.name + ' 입니다.';
    }
}

function sayFullName(lastName){
    return lastName + this.sayName();
}

const sayFullNameMe = sayFullName.bind(me);
const sayFullNameZero = sayFullName.bind(zero);

console.log(sayFullNameMe('kim')); // kimsuyeon 입니다.
console.log(sayFullNameZero('제로')); // 제로베이스 입니다.

HTTP(Hyper Text Transfer protocol) 브라우저와 서버가 통신할 수 있도록 만들어주는 여러 프로토콜 가운데 한 종류로 웹 브라우저와 웹 서버 사이에 HTML(웹 문서를 만들기 위한 언어) 문서를 주고받는데 쓰이는 통신 규약이다.

원래는 HTML 문서를 주고 받기 위함이었지만 지금은 이미지나 json파일 등도 주고 받는다.

Ajax

Asynchronous JavaScript and XML의 약자로 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분을 갱신할 수 있다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분만 표시할 수 있다.

👀 페이지 전체를 로딩하지 않고도 검색어와 비슷한 검색어를 실시간으로 보여준다.

✅ 구성 요소

• 웹 페이지의 표현을 위한 HTML과 CSS

• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델

• 데이터의 교환을 위한 JSON이나 XML

• 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

• 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트

✅ 동작 원리

Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신하기 때문에 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있다.

1. 사용자 요청으로 이벤트가 발생한다.

2. 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출되고

3. 자바스크립트는 XMLHttpRequest 객체 생성 -> 서버로 요청을 낸다

( 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업 처리 가능)

4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리하고

5. 그 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.

( 이때 전달되는 응답은 새로운 페이지 전부 X, 필요한 데이터만 O )

7. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출하면

8. 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

XMLHttpRequest 객체

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState === xhr.DONE){
        if( xhr.status === 200){
            console.log(xhr.response);
        }else{
            console.error('error');
        }
    }
}

xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1');
xhr.send(); 

// 결과
VM597:6 {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

위처럼 XMLHttpRequest 객체를 이용해서 json 형식의 정보를 불러 올 수 있다.

Fetch API

XMLHttpRequest의 단점을 보완해서 나온 api로 훨씬 간단하게 작성해서 사용할 수 있다.

fetch('http://example.com/movies.json') // 1. URL fetch 요청
  .then((response) => response.json()) // 2. Fetch 응답 객체를 받아옴
  .then((data) => console.log(data)); // 3. 응답 객체가 JSON => 순수 JS 객체로 변환

네트워크 통신을 하고 json 형식으로 데이터를 받아오면 javascript 객체로 바꿔서 다루는 과정을 코드로 작성한 것이다.

JSON

Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다. JSON은 문자열 형태로 존재하며 네트워크를 통해 전송할 때 유용하다.

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

JOSN은 Javascript 객체 리터럴 문법을 따르는 문자열이다.

데이터에 억세스하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있어서 Javascript가 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원한다.

# JSON.stringify( )

자바스크립트 객체를 JOSN 문자열로 변환하는 메서드로 서버로 데이터를 보낼 때 시용한다.

const obj = {x : 5, y: 6};

const jsonObj = JSON.stringify(obj);

console.log(jsonObj); // {"x":5,"y":6}

# JSON.parse( )

JSON 문자열을 다시 javascript 객체로 반환하는 메서드로 서버에서 데이터를 가져올 때 사용한다

const obj = {x : 5, y: 6};

const jsonObj = JSON.stringify(obj);

const jsonParse = JSON.parse(jsonObj);

console.log(jsonParse); // { x: 5, y: 6 }

정리: 우리는 HTTP 통신을 활용하고 ajax로 통신을 하는데 사용할 수 있는 API는 XMLHttpRequest, fetch API 가 있고 주고 받는 데이터는 XML이 아니라 JSON 형식이며 자바스크립트 객체로 바꾸어 다룬다.

1. Object.keys()
2. Object.values()
3. Object.entries()
4. 배열 추가 / 제거 : push,unshift,pop,shift
5. 배열 병합 : concat
6. 배열 고차함수 : map, reduce, filter
7. 배열 정렬 : sort
8. 배열 검색 : includes

1. Object.keys()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

객체의 속성들을 배열로 반환한다.

2. Object.values()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

객체의 값들을 배열로 반환한다.

3. Object.entries()

const object1 = {
  a: 'somestring',
  b: 42
};

console.log(Object.entrie(obejct1)) 
// [ [ 'a', 'somestring' ], [ 'b', 42 ] ]

객체에서 각 키 : 값을 한쌍의 배열로 반환한다. 이 때 키는 string으로, 값은 자료형에 따라 반환된다.

4. 요소 추가/삭제/병합

# push, pop, unshift, shift

let arr = ['js', 'css', 'java', 'python'];


arr.push('Go');
console.log(arr); // ['js', 'css', 'java', 'python', 'Go']

arr.pop();
console.log(arr); // ['js', 'css', 'java', 'python']

arr.unshift('typeScript'); 
console.log(arr);
// ['typeScript', 'js', 'css', 'java', 'python']

arr.shift();
console.log(arr); // ['js', 'css', 'java', 'python']

위의 메소드는 요소를 추가 / 삭제 할 수 있지만 원본을 훼손하는 단점이 있다.

# concat

let arr = ['js', 'css', 'java', 'python'];

console.log(arr.concat('Go')); // ['js', 'css', 'java', 'python', 'Go']

console.log(arr); // ['js', 'css', 'java', 'python']

5. 고차 함수로 배열 다루기

# map

내가 가진 배열을 새롭게 조작해서 새로운 배열로 반환할 때 사용

let langs = ['js', 'css', 'java'];

const newLangs = langs.map(function(lang){
    return lang.toUpperCase() + ' 언어';
});

console.log(newLangs); // ['JS 언어', 'CSS 언어', 'JAVA 언어']

# filter

조건에 맞는 모든 요소를 배열로 반환

let langs = ['js', 'css', 'java', 1, 2];

const numbers = langs.filter(function(el){
    if(typeof el === 'number'){
        return el;
    }
});

console.log(numbers); // [1,2]

# reduce

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

let numbers = [1, 3, 5, 7, 9];

const acc = numbers.reduce(function(accumulation, current){
    return accumulation + current;
},0); // 0 초기화 안하면 1부터 누적된 값으로 따짐

console.log(acc); // 25

6. 배열 검색

# find

배열에서 찾는 값 하나를 리턴해줌 (filter는 찾는 값 모두를 배열로 리턴) 찾는 값이 없으면 undefined

const members = ['도록', '읻도록', '제로', '베이스'];

const result = members.find(function(member){
    return member === '제로';
});

console.log(result); // 제로 

// 없으면 undefined

# findIndex

배열에서 찾는 값의 인덱스를 반환, 없는 경우 -1을 반환한다

const members = ['도록', '읻도록', '제로', '베이스'];

const result = members.findIndex(function(member){
    return member === '제로';
});

console.log(result); // 2

// 없으면 -1

# indexOf

찾는 요소만 인자로 넣어주면 해당 값의 인덱스를, 없는 경우 -1을 반환

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.indexOf('제로');

console.log(result); // 1

• 만약 두번째로 존재하는 '제로'를 찾고 싶다면 찾기 시작하는 인덱스를 따로 지정해주면 된다.

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.indexOf('제로',2); // 인덱스 2부터 찾음

console.log(result); // 3

# includes

배열에서 찾는 값이 존재하면 true, 없으면 false를 반환한다.

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.includes('제로');

console.log(result); // true

• includes 메서드는 배열 내에 찾는 값이 있는지를 불리언으로 반환해준다.

# 싱글 리터럴 객체

// 싱글 리터럴 객체 생성
const object = {
    property: 'value',
    method: function() {},
}

# 생성자 함수로 객체 생성

// 생성자 함수로 객체 생성
function NewObject(name,age) {
    this.name = name;
    this.age = age;
}
const newObject = new NewObject('syeon', 20);

console.log(newObject);  //NewObject { name: 'syeon', age: 20 }  

# Object.create()

자바스크립트에서 제공하는 Object 함수의 내장 메서드로 객체를 생성한다. Object.create(프로토 타입, 객체 서술자(기술자))

const obj = Object.create(Object.prototype, {
    name:{
        value: 'syeon',
        writable: false, // 덮어쓸 수 있나
        enumerable: false, // 열거할 수 있나
        configurable: false, // 객체 서술자를 수정할 수 있나
    }
})

obj.name = 'kim';
console.log(obj.name); // syeon 변하지 않음

for(const key in obj){
    console.log(); // 열거 불가능
}

console.log(obj instanceof Object);

프로토타입 객체 안에 저장될 속성값을 자세하게 서술할 수 있다.

📌 프로퍼티 열거

const obj = {
    prop1: 'value01',
    prop2: 'value02',
    prop3: 'value03',
    prop4: 'value04',
}

for(const key in obj){
    console.log(key); // prop1, prop2, prop3, prop4
}

key는 obj 객체의 키값을 출력하고 있다. 만약 value(값)을 출력하고 싶다면 어떻게 해야할까?

. vs [ ]

객체에서 값을 가져오는 방법은 .(Dot notation)과 [ ](Bracket notation)이 있다.

for(const key in obj){
    console.log(obj.key); // undefined
}

for(const key in obj){
    console.log(obj[key]); // value01 value02 value03 value04
}

console.log('prop1'); // value01

key변수는 string으로 출력이 되기 때문에 dot notation은 사용할 수 없지만 [ ]안에는 표현식이 들어갈 수 있기 때문에 key값을 넣어 출력 가능하다.

# 체이닝 조심

함수에서 체이닝이 일어나는 것처럼 객체는 프로토타입 체이닝이 일어난다. 현 객체에 값이 없으면 상위 프로토타입 객체를 살피면서 값을 찾는다.

만약 현재 객체에서만 값을 찾고 싶다면?

for(const key in obj){
  if(obj.hasOwnProperty('syeon')){
      console.log(obj[key]); // 출력 안됨
  }
}

📌 프로퍼티 접근자 (getter, setter)

const person = {
    _firstName: 'syeon',
    lastName: 'kim',

    get firstName(){
        return this._firstName.toUpperCase();
    },

    set firstName(newFirstName){
        if(typeof newFirstName !== 'string'){
            this._firstName = 'undefined';
            return;
        }

        this._firstName = newFirstName;
    },

    get fullName(){
        return this.lastName + ' ' + this._firstName + ' 입니다.'
    }
}
person.firstName = 'it dorok';
console.log(person.firstName); // IT DOROK
console.log(person.fullName); // kim it dorok 입니다.

person.firstName = 'it dorok'; 

객체 속성을 설정하는 경우 setter가 실행되면서 받는 값이 string 인지 아닌지 판별후 값을 할당한다.

console.log(person.firstName); // IT DOROK
console.log(person.fullName); // kim it dorok 입니다.

속성값을 불러오는 경우 gettr가 실행되면서 조건에 맞게 값을 출력한다.

# 📌 인스턴스 (instance)

const me = {
    name: 'syeon',
    age : 10,
    location: 'Korea',
}

const me2 = {
    name: 'syeon',
    age : 10,
    location: 'Korea',
}

console.log(me == me2); // false

• 두 객체는 속성값이 모두 같지만 비교한 결과 false를 출력하고 있다.

• 객체는 reference value 로서 사실상 변수가 저장된 메모리 주소가 비교되고 당연히 메모리 주소는 다르기 때문에 false가 출력된다.

이 때 특정 메모리에 공간을 차지하고 있는 고유한 객체 하나하나를 instance라고 한다.

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

📌 Document 객체

Document 객체는 웹 페이지 그 자체를 의미하고 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

document.querySelector('.hi');

이 때 Document 객체는 DOM 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

📌 노드 (Node)

• 노드(node)는 계층적 단위로서 정보를 저장한다.

• 노드 트리 ( node tree )는 이러한 노드가 집합한 계층적 구조이다.

• 노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

• 자바스크립트는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

📌 DOM 요소 다루기

# DOM 요소 선택

DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다.

// 태그 이름이 li인 모든 요소 고르기
const listNode = document.getElementsByTagName('li'); 

// id가 red인 요소 하나 고르기
const red = document.getElementById('red'); 

// class가 blue인 모든 요소 고르기
const blue = document.getElementsByClassName('blue'); 

// id가 green인 요소 고르기
const idGreen = document.querySelector('#green'); 

// class가 yellow인 요소 모두 고르기
const classYellows = document.qeurySelectorAll('.yellow'); 

# DOM 요소의 내용 변경

const listNode = document.querySelector('li');
listNode.classList.add('.hi');

console.log(listNode.classList); 
// DOMTokenList ['.hi', value: '.hi']

📌 스코프 (Scope)

• 변수에 접근 가능한 범위

• 함수 실행컨텍스트 내부의 변수 환경

# 컨텍스트 (context)

this 키워드 값, 함수가 선언된 환경을 의미한다. _'어떤 친구가 날 불렀는가?' _

function hi(){
    console.log('hi');

  function ask(){
      console.log('what is your name?');
  }

  ask() // context = function hi 
}

hi() // context = global 

# 함수 스코프

JS는 기본적으로 함수 스코프를 따른다 => 함수가 선언될 때마다 새로운 스코프 발생

if( 5 > 3){
  var num = 12345;
}

console.log(num); // 12345

• 함수가 선언되지 않았기 때문에 같은 컨텍스트 안에 존재, num에 접근 가능

function a(){
 var num = 12345;
}

console.log(num) // ReferenceError

• 함수가 선언되면서 a의 실행 컨텍스트가 생성
• 이 실행 컨텍스트 내부에 존재하는 변수환경(variable environment)에 num 변수가 저장됨
• 따라서 함수 외부에서 num에 접근하려고 할 경우 스코프가 다르기 때문에 해당 변수에 접근이 불가능
• 함수외부는 global scope이고, 함수 내부는 a함수의 scope인데 부모스코프는 자식스코프에서 간섭할 수 없기 떄문에 접근이 불가능

# 블록 스코프

{ } 블록이 생성될 때마다 스코프가 생성됨 let, const의 등장으로 블록 스코프 생성 가능

function index() {
    for(var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('last',i);
}
index();
/*
0
1
2
3
4
'last' 5 
*/

• var 로 변수 i를 초기화 하여 함수 스코프를 따르고
• for문과 console.log('last',i)은 같은 스코프에 있어서 변수에 접근 가능

function index() {
    for(let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('last',i);
}
index(); /* ReferenceError: i is not defined */

• let으로 변수 i를 초기화 하여 블록 스코프를 생성
• for문과 console.log('last',i)의 스코프가 달라서 변수에 접근 불가능

참조👀 https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84

• 특정 작업을 처리하는 코드 묶음

• 코드를 묶어서 원하는 때에 사용 가능
• 아래처럼 다양한 방법으로 선언하고 사용할 수 있다.

// 함수 선언문 (declaration)
function func(){

}

// 함수 표현식 (expression) 
const func = function func(){

}

// 메서드: 객체 안에 속성 값으로 있는 함수
const obj = {
    prop: function () {},
}

// 생성자 함수: 특정 instance를 만들어 낼 수 있다.
function MyObj(){

}

// 화살표 함수 
const arrowFunc = () => {}

📌 hoisting

호이스팅(Hoisting): 끌어 올리다 라는 뜻 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다.

실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.

# 함수 선언문 호이스팅

func(); // 안녕하세요

function func() {
    console.log('안녕하세요');
}

function func() {
    console.log('안녕못해');
}

func(); // 안녕못해

🚨 함수의 중복 선언이나 호이스팅 문제 발생 둘 다 정상 작동: 심지어 두 함수를 동시에 선언하고 맨 마지막에 호출하면 오류는 발생하지 않으며 마지막으로 선언된 '안녕못해'가 출력된다.

# 함수 표현식 호이스팅

func(); 

var func = function() {
    console.log('안녕하세요');
}

var func = function() {
    console.log('안녕하세요');
}

func();

func();

let func = function() {
    console.log('안녕하세요');
}

# 1

var func; // undefined

func(); // TypeError

var func = function() {
    console.log('안녕하세요');
}

var로 선언된 변수에 함수를 저장하고 호출하면 :

함수가 맨 위로 끌어올려지면서 선언된다.

함수를 변수에 저장하기 전에 호출하면 func는 아직 변수기 때문에 TypeError가 발생한다.

# 2

var func; // undefined

var func = function() {
    console.log('안녕하세요');
}

func(); // 안녕하세요

변수가 맨 위로 끌어올려져 선언된다. 변수에 함수가 할당 된 후에 호출 하기 때문에 정상 작동된다.

# 3

// 호이스팅 발생 안함

func(); // ReferenceError

let func = function() {
    console.log('안녕하세요');
}

let, const의 경우 hoisting이 발생하지 않는다

선언과 할당이 동시에 이뤄지기 때문에 선언이 되기 전에 함수를 호출하려고 해서 참조 오류가 발생한다.

변수나 함수의 표현식을 선언하는 경우 let, const 로 하는 것이 좋고 그 중에도 값이 바뀌면 error를 내는 const로 선언하는 것이 좋다

Prototype Object 와 prototype 속성을 기억하면서 메서드를 직접 구현해보자

# Node(), LinkedList()

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

node:

• 값과 포인터가 저장된 덩어리로 생각하면 된다.
• Node 함수로 만들어지는 객체로부터 data값을 받아온다.

linkedlist:

• 노드가 연결, 연결되면서 만들어지는 리스트
• 각 노드가 가진 포인터가 다음 노드를 가리키면서 만들어진다.
• 노드가 하나도 연결되지 않으면 head값은 null, 길이는 0이 된다.

# size, isEmpty

연결리스트에 노드가 몇 개 있는지 확인하는 size메서드와 연결리스트가 비었는지 확인하는 isEmpty메서드는 만들어 보자

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

// 연결리스트의 노드 개수 반환
LinkedList.prototype.size = function(){
    return this.length;
}

// 연결리스트가 비었는지 확인
LinkedList.prototype.isEmpty = function () {
    return this.length === 0;
}

let ll = new LinkedList();
console.log(ll) // LinkedList { head: null, length: 0 }

ll.head = new Node(123);
ll.length++;
console.log(ll); // LinkedList { head: Node { data: 123, next: null }, length: 1 }

# printNode, append

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

LinkedList.prototype.size = function(){
    return this.length;
}

LinkedList.prototype.isEmpty = function () {
    return this.length === 0;
}

// 연결리스트의 노드를 순서대로 출력
LinkedList.prototype.printNode = function () {
    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }

    console.log('null');
}

// 연결리스트의 마지막에 노드 추가
LinkedList.prototype.append = function(data){
    let node = new Node(data),
        current = this.head

    if(this.head === null){
        this.head = node;
    }else{
        while(current.next != null){
            current = current.next;
        }
        current.next = node;
    }

    this.length++;
}

let ll = new LinkedList();
ll.append(1);
ll.append(10);
ll.append(100);
ll.printNode(); /// 1 -> 10 -> 100 -> null
console.log(ll.size()); // 3

# insert

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

LinkedList.prototype.size = function(){
    return this.length;
}

LinkedList.prototype.printNode = function () {
    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }

    console.log('null');
}

// position 위치에 노드 추가
LinkedList.prototype.insert = function (data, position = 0) {
    if(position < 0 || position > this.length){
        return false;
    }
    let node = new Node(data),
        current = this.head,
        count = 0,
        prev;

    if(position === 0){
        node.next = current;
        this.head = node;
    }else{
        while(count++ < position){
            prev = current;
            current = current.next;
        }
        node.next = current;
        prev.next = node;        
    }

    this.length++;

    return true;
}

let ll = new LinkedList();

ll.insert(1);
ll.insert(10); 
ll.insert(100);
ll.printNode();

ll.insert(2,1);
ll.insert(3,3);
ll.printNode();
console.log(ll.size());

while(count++ < position){// while(count != position), count++; 
    prev = current;
    current = current.next;
}
node.next = current;
prev.next = node;        

주석처리한 부분처럼 나눠서 적기 보다 count++ < position 으로 합쳐서 적으면 더 보기 간편하고 좋다.

# remove

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

LinkedList.prototype.size = function(){
    return this.length;
}

LinkedList.prototype.printNode = function () {
    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }

    console.log('null');
}

// position 위치에 노드 추가
LinkedList.prototype.insert = function (data, position = 0) {
    if(position < 0 || position > this.length){ // 말도 안되는 경우를 false로 리턴
        return false;
    }
    let node = new Node(data),
        current = this.head,
        count = 0,
        prev;

    if(position === 0){
        node.next = current;
        this.head = node;
    }else{
        while(count++ < position){
            prev = current;
            current = current.next;
        }
        node.next = current;
        prev.next = node;        
    }

    this.length++;

    return true;
}

// remove() data를 찾아서 노드 삭제 
LinkedList.prototype.remove = function (data){
    let current = this.head,
        prev;

    // 지우고 싶은 노드 찾기
    while(current.data != data && current.next != null){ 
        prev = current;
        current = current.next;
    } 

    // 다 돌았는데 찾는 노드 없으면 null
    if(current.data != data){ // 다음 노드가 더이상 없어서 위의 while문이 끝났는데 여전히 현 노드의 값이 찾는 값과 같지 않으면 null 반환
        return null;
    }

    if(current == this.head){ // 첫 노드인 경우 prev = current, current = this.head 로 prev, current 둘 다 같은 값을 가리키게 되므로 오류 생김 -> 따로 처리
        this.head = current.next; 
    }else{
        prev.next = current.next; 
    }

    this.length--;

    return current.data;
}

let ll = new LinkedList();

ll.insert(1);
ll.insert(10); 
ll.insert(100);
ll.insert(2,1);
ll.insert(3,3);
ll.printNode();

console.log(ll.remove(1000)); // null
ll.printNode();
console.log(ll.remove(1));
ll.printNode();
console.log(ll.remove(2));
ll.printNode();
console.log(ll.remove(100));
ll.printNode();
console.log(ll.size());

this.head == null 이면 current.next == null 이기 때문에 따로 잡을 필요가 없다.

9.22 더 추가 예정 removeAt(), indexOf()

# removeAt

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

LinkedList.prototype.size = function(){
    return this.length;
}

LinkedList.prototype.printNode = function () {
    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }

    console.log('null');
}


LinkedList.prototype.insert = function (data, position = 0) {
    if(position < 0 || position > this.length){
        return false;
    }
    let node = new Node(data),
        current = this.head,
        count = 0,
        prev;

    if(position === 0){
        node.next = current;
        this.head = node;
    }else{
        while(count++ < position){
            prev = current;
            current = current.next;
        }
        node.next = current;
        prev.next = node;        
    }

    this.length++;

    return true;
}

LinkedList.prototype.remove = function (data){
    let current = this.head,
        prev;

    while(current.data != data && current.next != null){
        prev = current;
        current = current.next;
    } 

    if(current.data != data){ 
        return null;
    }

    if(current == this.head){
        this.head = current.next; 
    }else{
        prev.next = current.next; 
    }

    this.length--;

    return current.data;
}

//해당 인덱스의 노드 삭제
LinkedList.prototype.removeAt = function (position){
    if(position < 0 || position >= this.length){
        return null;
    }

    let current = this.head,
        count = 0,
        prev;

    while(count++ < position){
        prev = current;
        current = current.next; 
    }

   if(current == this.head){
        this.head = current.next;
   }else{
        prev.next = current.next;
   }

   this.length--;

   return current.data;
}

let ll = new LinkedList();

ll.insert(1);
ll.insert(10); 
ll.insert(100);
ll.insert(2,1);
ll.insert(3,3);
ll.printNode();
console.log('----------------------------------');

console.log(ll.removeAt(1000));
ll.printNode();
console.log(ll.removeAt(1));
ll.printNode();
console.log(ll.removeAt(2));
ll.printNode();
console.log(ll.removeAt(100));
ll.printNode();
console.log(ll.size());

 if(position < 0 || position >= this.length){
        return null;
    }

• 노드 추가 (insert)와 다르게 position == this.length인 경우도 null로 리턴: 마지막 요소 다음에 끼워넣는 경우 this.length와 값이 같지만 기존에 있는 노드에서 삭제하는 경우 this.length를 인덱스로 갖는 노드는 없기 때문이다.

# indexOf, remove2

function Node(data){
    this.data = data;
      this.next = null;
}

function LinkedList(){
    this.head = null;
      this.length = 0;
}

LinkedList.prototype.size = function(){
    return this.length;
}

LinkedList.prototype.printNode = function () {
    for(let node = this.head; node != null; node = node.next){
        process.stdout.write(`${node.data} -> `);
    }

    console.log('null');
}

LinkedList.prototype.insert = function (data, position = 0) {
    if(position < 0 || position > this.length){
        return false;
    }
    let node = new Node(data),
        current = this.head,
        count = 0,
        prev;

    if(position === 0){
        node.next = current;
        this.head = node;
    }else{
        while(count++ < position){
            prev = current;
            current = current.next;
        }
        node.next = current;
        prev.next = node;        
    }

    this.length++;

    return true;
}

LinkedList.prototype.remove = function (data){
    let current = this.head,
        prev;

    while(current.data != data && current.next != null){
        prev = current;
        current = current.next;
    } 

    if(current.data != data){
        return null;
    }

    if(current == this.head){
        this.head = current.next; 
    }else{
        prev.next = current.next; 
    }

    this.length--;

    return current.data;
}

//해당 인덱스의 노드 삭제
LinkedList.prototype.removeAt = function (position){
    if(position < 0 || position >= this.length){
        return null;
    }

    let current = this.head,
        count = 0,
        prev;

    while(count++ < position){
        prev = current;
        current = current.next; 
    }

   if(current == this.head){
        this.head = current.next;
   }else{
        prev.next = current.next;
   }

   this.length--;

   return current.data;
}

// data 값을 갖는 노드의 인덱스 리턴 
LinkedList.prototype.indexOf = function(data){
    let current = this.head,
        count = 0;

   while(current != null){ //끝까지 돌았는데 노드가 null인 경우 -1 리턴
        if(current.data === data){
            return count;
        }

        count++;
        current = current.next;
   }

   return -1;
}

// data에 해당하는 노드의 인덱스를 이용해서 노드 지우는 메서드
LinkedList.prototype.remove2 = function (data){
    let index = this.indexOf(data);
    return this.removeAt(index);
}

let ll = new LinkedList();

ll.insert(1);
ll.insert(10); 
ll.insert(100);
ll.insert(2,1);
ll.insert(3,3);
ll.printNode();

console.log(ll.indexOf(1000)); // -1
console.log(ll.indexOf(1)); // 4
console.log(ll.indexOf(2)); // 1
console.log(ll.indexOf(100)); // 0

console.log(ll.remove2(1000)); // null
ll.printNode(); // 100 -> 2 -> 10 -> 3 -> 1 -> null
console.log(ll.remove2(1)); // 1
ll.printNode(); // 100 -> 2 -> 10 -> 3 -> null
console.log(ll.remove2(2)); // 2
ll.printNode(); // 100 -> 10 -> 3 -> null
console.log(ll.remove2(100)); // 100
ll.printNode(); // 10 -> 3 -> null
console.log(ll.size()); // 2

• 크게 루프안에 해당 data가 없는 경우를 while로 잡아냄
• while 내에서 현재 노드의 값이 data와 같지 않으면 count(인덱스)와 현 노드를 업데이트 함
• 현 노드의 값이 data와 같으면 count리턴

자바스크립트는 본래 클래스라는 개념이 없었다   -> 상속 개념 없음
대신 프로토타입이 존재한다.   -> 상속 개념을 흉내냄
최근 class가 추가 되었지만 자바스크립트는 여전히 프로토타입 기반이다.

📌 왜 있는 걸까?

function Person() {
  this.job = true;
  this.age = 23;
}

var kim  = new Person();
var park = new Person();

console.log(kim.job);  // => true
console.log(kim.age);  // => 23
console.log(park.job); // => true
console.log(park.age); // => 23

kim, park은 모두 동일한 값을 가지고 있지만 메모리에는 각각 두개씩 4번 할당된다

이런 중복 할당을 해결하는게 프로토타입이다.

function Person() {}

Person.prototype.job = true;
Person.prototype.age = 23;

var kim  = new Person();
var park = new Person():

console.log(kim.age); // => 23
...

Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부터 생성된 객체들은(kim, park) 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있다.

즉 kim, park이 같은 공간을 공유하는 개념이다.

자바스크립트에는 Prototype Link 와 Prototype Object가 존재하고 이 둘을 통틀어 Prototype이라고 부른다.

📌 Prototype Object

객체는 언제나 '함수'로 생성된다.

function Person() {} // => 함수
var personObject = new Person(); // => 함수로 객체를 생성

일반적인 객체 생성도 마찬가지다

var obj = {};

위의 객체 생성 역시 아래의 방법으로 생성된다. Object 함수는 자바스크립트에서 기본으로 제공된다.

var obj = new Object();

Object와 마찬가지로 Function, Array도 모두 함수로 정의되어 있다. 그런데 이게 Prototype Object와 무슨 관련이 있을까?

# 생성자 자격 (constructor) 부여

• 함수가 정의될 때 2가지 일이 동시에 일어나는데 그 중 하나가 생성자 자격이다.

• 생성자 자격이 부여되면 new를 통해 객체를 만들 수 있게 된다. (함수만이 new 키워드 사용가능한 이유!)

obj 는 Object(생성자) 함수로 만들어진 객체일 뿐
함수가 아니기 때문에 new 키워드로 객체를 만들 수 없음

# 해당함수의 Prototype Object 생성 및 연결

드디어 Prototype Object가 등장했다'

• 생성자 자격 부여와 동시에 Prototype Object가 생성되고

• 각각 prototype과 constructor으로 서로에게 접근 할 수 있다.

• 이때 생성된 Prototype 객체는 일반 객체와 같다

위에서의 예시를 다시 살펴보자

function Person() {} 

Person.prototype.job = true;
Person.prototype.age = 23;

var kim  = new Person();
var park = new Person():

console.log(kim.age); // => 23
...

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제 할 수 있다. kim과 park은 Person 함수를 통해 생성되었으니 Person.prototype을 참조할 수 있게 된다.

🚨 그런데 어떻게 참조할 수 있는걸까? (나의 속마음: 아무리 kim,park이 Person함수로 생성됐다지만 kim.Person.prototype.age 가 아니라 kim.age 로 값을 바로 불러 올 수 있을까?)

📌 Prototype Link

• Person 함수가 가진 prototype 속성은 함수만 가질 수 있다면 Person Prototype Object가 가진 __proto__는 모든 객체가 가진 속성이다.

• __proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다. (예시에선 Person Prototype Object을 가리킴)

• 이때 kim객체는 eyes를 직접 가지고 있지 않기 때문에 eyes 속성을 찾을 때 까지 상위 프로토타입을 탐색한다.

• 이렇게 __proto__속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 한다.

• 최상위인 Object의 Prototype Object까지 도달했는데도 못찾았을 경우 undefined를 리턴한다.

이런 프로토타입 체인 구조 때문에 모든 객체는 Object의 자식이라고 불리고, Object Prototype Object에 있는 모든 속성을 사용할 수 있다.

📌 프로토타입 확장

1. 객체 속성, 메서드 정의

function Animal (name, sound){
    this.name = name;
    this.sound = sound;
}

Animal.prototype.getInfo = function(){
    return this.name + '가(이)' + this.sound + ' 소리를 냅니다.';
}

2. 생성자 함수 생성

function Friends(name, sound){
    Animal.call(this, name, sound);
}

이때 call() 함수의 첫번째 매개변수는 다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행할 수 있도록 한다.

• 즉 이미 생성된 Animal 함수를 현재 Friends 함수의 컨텍스트에서 실행할 수 있다.

3. 문제 발생

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냥');

console.log(dog.getInfo()); // getInfo() is not a function
console.log(cat.getInfo()); // getInfo() is not a function

그런데 왜 getInfo 메서드를 사용할 수 없을까?

const isEmptyFriends = Object.getOwnPropertyNames(Friends.prototype);
const isEmptyAnimal = Object.getOwnPropertyNames(Animal.prototype);

console.log(isEmptyFriends); // [ 'constructor' ]
console.log(isEmptyAnimal); // [ 'constructor', 'getInfo' ]

확인 결과 Friends의 프로토타입 객체는 기본 constructor 속성 말고는 Animal 프로토타입 객체의 메서드를 상속 받지 못한 것 을 볼 수 있다. (constructor 속성 덕분에 기본 Animal 속성은 접근 가능)

4. 문제 해결

1 ) Object.create로 Animal의 프로토타입 객체를 Friends의 프로토타입 객체로 설정한다.

Friends.prototype = Object.create(Animal.prototype);

console.log(Friends.prototype.constructor); // Animal

2 ) 생성자 속성을 Friends로 바꾸기

Friends.prototype.constructor = Friends;

• 프로토타입을 Animal.prototype으로 설정 했기 때문에 기본 constructor 속성값이 Animal이다.
• 이 값을 Friends로 바꿔주면 Animal 메서드까지 완벽하게 상속 받게 된다.

6. 완성

function Animal (name, sound){
    this.name = name;
    this.sound = sound;
}

Animal.prototype.getInfo = function(){
    return this.name + '가(이)' + this.sound + ' 소리를 냅니다.';
}

function Friends(name, sound){
    Animal.call(this, name, sound);
}

Friends.prototype = Object.create(Animal.prototype);

Friends.prototype.constructor = Friends;

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냥');

console.log(dog.getInfo()); // 개가(이)멍멍 소리를 냅니다.
console.log(cat.getInfo()); // 고양이가(이)냥 소리를 냅니다.

출처 오승환 - [Javascript ] 프로토타입 이해하기 👀 (클릭!)

# 문제 해석 & 해결책

+ 첫줄을 그릴때만 정사각형의 한 변의 크기만큼 그린다.
+ 방향을 바꾸면서 길이는 -1씩 작아지고 2번씩 그린 후 방향을 바꾼다.

+ arr[y][x] 각 인덱스는 x축, y축으로 생각한다.
+ 값을 더해주면서 방향을 바꾸는 변수 선언.

// 달팽이 만들기
function answer(length) {
    let result = []

    // 이중 배열 만들기
    for(let i = 0; i < length; i++){
        result[i] = [];
    }

      let x, y, direction, num;
     direction = 1;
      x = y = num = 0;
      x--; // x의 인덱스 0부터 시작하니까

      while(1){
        for(let i = 0; i < length; i++){
             x += direction
            result[y][x] = ++num; // 1씩 누적
        }

          length--; // 길이 줄이기, x축 -> y축으로 바뀜

          if(length == 0) break;

          for(let i = 0; i < length; i++){
              y += direction;
            result[y][x] = ++num;
        }

        direction *= -1; // 방향 바꾸기
    }

    return result;
  }

  /* main code */
  let input = [
    // TC: 1
    3,

    // TC: 2
    5,

    // TC: 3
    6,
  ];

  for (let i = 0; i < input.length; i++) {
    process.stdout.write(`#${i + 1} `);
    console.log(answer(input[i]));
  }

direction *= -1; // 방향 바꾸기

여기서 방향은 x,y축이 아니라 배열에서 증가 혹은 감소하면서 그리는 방향을 의미한다.

# 문제 해석

인자로 들어온 숫자 예) 1245

각 자릿수 별 숫자 빈도수 -
> 0: 0개, 1: 1개, 2: 1개, 3: 0개, 4: 1개, 5: 1개 ... 9: 0개 

위처럼 자리별 숫자의 빈도수를 배열로 반환하는데 없는 수도 포함해야 한다.

> 1245 결과 : [0, 1, 1, 0, 1, 1, 0, 0, 0, 0]가 된다.

# 해결책

+ 각 자리수에 있는 수를 알아내기

+ 인덱스와 해당 인덱스가 의미하는 값이 일치 [0, 1, 2 ...] 하니까
인덱스를 이용해서 바로 배열에 저장 가능

//숫자 빈도수 구하기
function answer(s, e) {
    let result = [];

      for(let i = 0; i < 10; i++){
        result[i] = 0;
    }

      let num;
      for( let i = s; i <= e; i++){
        num = i; // num = 129

        while(num != 0){
            result[num % 10]++; // 129 % 10 == 9, result[9] = 1
              num /= 10; // s = 12.9
              num = parseInt(s) // s = 12 
        }
    }

   return result;
}

/* main code */
let input = [
    // TC: 1
    [129, 137],

    // TC: 2
    [1412, 1918],

    // TC: 3
    [4159, 9182],
];

for (let i = 0; i < input.length; i++) {
    process.stdout.write(`#${i + 1} `);
    console.log(answer(input[i][0], input[i][1]));
}

# 중요 부분 해설

// 0 ~ 9 까지의 값(빈도수)을 0으로 우선 초기화 -> 업데이트 용이
for(let i = 0; i < 10; i++){
    result[i] = 0;
}

// 자릿수를 인덱스에 이용 
let num;
for( let i = s; i <= e; i++){
    num = i;
    while( num != 0){
        result[s%10]++; //일의자리를 나머지로 얻어서 값 업데이트
          s /= 10; // 일의자리를 소수로 만듦
        s = parseInt(s) // 정수로 만드는 함수로 소수 자름, 십의 자리 -> 일의자리
    }
}

//벽돌 옮기기
function answer(blocks) { 
    let result = 0;

      // 옮겨야 하는 경우: 평균보다 벽돌이 넘칠 때
      let avg = 0;
      for(let i = 0; i<blocks.length; i++){
        avg += blocks[i];
    }

      avg /= blocks.length;

      for(let i = 0; i < blocks.length; i++){
        if(blocks[i] > avg){
            result += blocks[i] - avg;
        }
    }

    return result;
  }

  /* main code */
  let input = [
    // TC: 1
    [5, 2, 4, 1, 7, 5],

    // TC: 2
    [12, 8, 10, 11, 9, 5, 8],

    // TC: 3
    [27, 14, 19, 11, 26, 25, 23, 15],
  ];

  for (let i = 0; i < input.length; i++) {
    console.log(`#${i + 1} ${answer(input[i])}`);
  }

# 내 풀이

// OX 퀴즈
function answer(mark) {
    let result = 0;

      // 누적되는 점수를 저장할 변수 선언
      let acc = 0;
      for(let i = 0; i < mark.length; i++){
        if(mark[i] != 0){
            acc += mark[i];
        }else{
            acc = 0;
        }

           result += acc;
    }

    return result;
}

  /* main code */
  let input = [
    // TC: 1
    [1, 0, 1, 1, 1, 0, 1, 1, 0, 0],

    // TC: 2
    [1, 1, 0, 1, 1, 0, 1, 1, 1, 1],

    // TC: 3
    [1, 1, 1, 1, 1, 0, 0, 1, 1, 0],
  ];

  for (let i = 0; i < input.length; i++) {
    console.log(`#${i + 1} ${answer(input[i])}`);
  }

# 강사님 풀이

// OX 퀴즈
function answer(mark) {
    let result = 0;

      // 누적되는 점수를 저장할 변수 선언
      let acc = 0;
      for(let i = 0; i < mark.length; i++){
        if(mark[i] != 0){
            //acc += mark[i];
            result += ++acc;
        }else{
            acc = 0;
        }
           //result += acc;
    }

    return result;
}

  /* main code */
  let input = [
    // TC: 1
    [1, 0, 1, 1, 1, 0, 1, 1, 0, 0],

    // TC: 2
    [1, 1, 0, 1, 1, 0, 1, 1, 1, 1],

    // TC: 3
    [1, 1, 1, 1, 1, 0, 0, 1, 1, 0],
  ];

  for (let i = 0; i < input.length; i++) {
    console.log(`#${i + 1} ${answer(input[i])}`);
  }

# 차이점

for(let i = 0; i < mark.length; i++){
    if(mark[i] != 0){
        //acc += mark[i]; 
        result += ++acc;
    }else{
        acc = 0;
    }

      //result += acc;
}

# 다양한 연산자를 사용 : 단항 연산자

• mark[i]값을 누적하는 대신 ++acc로 1 미리 더한 후 result 값에 할당했다.
• value++ 와 ++value의 차이는 크기 때문에 점수를 부여받고 누적하는 경우엔 value++가 적합
• 루프를 돌면서 인덱스를 1씩 업데이트 하는 경우 ++value가 적합