이 시리즈의 모든 코드는 모던 자바스크립트 입문(徹底マスターJavaScriptの教科書) 에서 인용한 것입니다. [ISBN #978-4797388640]. Copyright 2017 by 磯博

드래그 앤 드롭 API👊

HTML 요소 드래그할 수 있게 만들기

<div draggable="true">드래그 할 수 있습니다.</div>

드래그, 드롭 이벤트

데이터 전달

드래그 앤 드롭 이벤트는 dataTransfer 프로퍼티를 갖고 있고, dataTransfer은 DataTransfer 객체이다.

전달 순서

1. dragstart 이벤트 처리기 안에서 setData 메서드에 데이터 타입을 지정한 데이터 추가

e.dataTransfer.setData("text/plain", value);

2. dragover 이벤트 처리기 안에서 브라우저의 기본 동작을 취소한다.

e.preventDefault();

3. getData 메서드를 사용해서 데이터를 지정한 데이터 타입으로 가져온다.

var value = e.dataTransfer.getData("text/plain");

19-1 예제 19-a 예제

Blob👊

자바스크립트로 이미지, 음성, 영상 등의 이진 데이터를 다룰 수 있다.

데이터베이스 관리 시스템의 BLOB (Binary Large Object) 에서 유래했다. 이미지나 음성 등의 멀티미디어 데이터를 저장하는 DB의 BLOB처럼 자바스크립트의 Blob 객체는 데이터 덩어리를 참조하는 용도로 사용한다.

Blob 생성자

var blob = new Blob(source, { type: contentType });

Blob이 받는 인수의 의미는 다음과 같다.

• source: 버퍼 배열 (ArrayBuffer, TypedArray, String, 기타 모든 데이+터 타입)
• contentType: 생성하는 데이터의 MIME 타입

Blob 객체 가져오기

1. Blob 생성자로 생성
   Blob 생성자의 첫 번째 인수로 ArrayBuffer나 형식화 배열 등이 요소로 담긴 배열을 넘기면 Blob 객체를 가져올 수 있다.

2. XMLHttpRequest로 웹의 데이터를 HTTP 통신으로 가져오는 방법
   

function getBlob(url, callback) {
  var req = new XMLHttpRequest();
  req.onload = function () {
    callback(req.response);
  };
  req.open("GET", url);
  req.responseType = "blob";
  req.send(null);
}

3. postMessage로 다른 윈도우나 스레드에서 가져오는 방법
   postMessage 함수 사용

4. 파일에서 가져오는 방법
   

   <input type="file" />

요소를 사용하면 파일을 읽어들여서 그것을 File 객체로 가져올 수 있다.

File 객체

File 객체는 로컬 파일을 참조하는 Blob 객체이고, 로컬 파일을 읽거나 쓸 수 있다.
File 객체는 Blob 객체를 상속받은 객체이다.

로컬 파일을 File 객체로 불러들이는 방법

1. type="file" 속성을 지정한 input 요소로 불러오는 방법

<!-- 사용자가 input 버튼을 클릭해서 파일을 가져올 수 있다. -->
<input type="file" />

<!-- 사용자가 shift를 눌러서 중복 선택을 할 때 사용 -->
<input type="file" multiple />

<!-- 선택할 수 있는 파일 유형을 MIME 타입으로 지정 가능 -->
<input type="file" accept="image/*" />

2. 드래그 앤 드롭으로 불러들이기 앞에서 배운 드래그 앤 드롭으로 다른 요소가 가진 데이터를 다른 요소에 전달하는 방법을 배웠다.
   드래그한 파일의 File 객체는 이벤트 객체의 dataTransfer 프로퍼티 안에 있는 files 프로퍼티에 저장된다.

element.ondrop = function (e) {
  var files = e.dataTransfer.files;
};

FileReader

Blob 객체에는 데이터를 읽을 수 있는 메서드가 없다.
FileReader 객체를 사용하면 Blob 객체, File 객체의 내용물을 읽을 수 있다.
FileReader 인스턴스 생성

var reader = new FileReader();

읽고자 하는 Blob 객체를 적절한 이벤트 처리기 안에서 4개의 메서드 중 하나에 넘긴다.

Blob URL

Blob은 Blob을 가리키는 URL을 가질 수 있다. 이를 Blob URL 이라고 한다.
Blob URL을 가져오려면 URL.createObjectURL 함수를 사용한다.

var blobURL = URL.createObjectURL(blob);

그러면 "blob : "으로 시작하는 무작위 문자열이 Blob 객체의 Blob URL로 설정되고 이것을 가져올 수 있다.

var a = new Uint8Array([1, 2, 3]);
var blob = new Blob([a], { type: "application/octet-binary" });
var blobURL = URL.createObjectURL(blob);
console.log(blobURL); // blob:null/~~~

// revokeURL 함수로 메모리에서 해제할 수 있다.
URL.revokeURL(blobURL);

Blob URL의 활용

1. 이미지의 Blob URL을 img 요소의 src 속성 값으로 설정하면 그 데이터를 이미지로 표시할 수 있다.

var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.src = blobURL;

2. Canvas의 drawImage 메서드에 그 img 요소 객체를 넘기면 Canvas에 이미지를 그릴 수 있다.

var blobURL = URL.createObjectURL(blob);
var img = document.createElement("img");
img.onload = function () {
  ctx.drawImage(img, 0, 0);
  URL.revokeObjectURL(this.src);
};
img.src = blobURL;

3. XMLHttpRequest가 읽어들일 URL로 설정하면 그 데이터를 텍스트로 읽어 들일 수 있다.

var blobURL = URL.createObjectURL(blob);
var req = new XmlhttpRequest();
req.onload = funtion() {
  callback(req.responseText);
};
req.open("GET", blobURL);
req.send(null);

Blob 응용

1. <'input type="file">로 이미지 파일을 읽어들이는 기능
2. 드래그 앤 드롭으로 이미지 파일을 읽어 들이는 기능
3. 이미지 필터링 기능
4. 이미지 저장 기능

Web Workers👊

클라이언트 측 자바스크립트는 싱글 스레드이다. 하지만 브라우저는 Single Thread로 동작하지 않는다. Web Workers를 사용하면 특정 작업을 멀티 스레드로 실행할 수 있다. Web Workers에서 병렬로 실행되는 스레드는 워커 라고 한다.
워커와 메인 스레드는 다른 전역 객체를 가지며, 상대방의 전역 객체를 참조할 수 없다. 또한 postMessage를 사용한 비동기 통신만 가능하다.

Web Workers의 기본

Web Workers로 멀티 스레드를 처리하는 방법은 다음과 같다.

Worker 객체 생성하기
먼저 워커를 정의할 자바스크립트 파일을 만든다.

var worker = new Worker("worker.js");

워커에 메시지 보내기 / 받기
postMessage로 워커에 메시지를 보낼 수 있다.

worker.postMessage("message");

워커에서 메시지를 받기 위해서 message 이벤트 처리기를 등록해야한다.

self.onmessage = function(e) {
  var message = e.data;
  ...
}

워커에서 메인 스레드로 메시지 보내기 / 받기
워커에서 메인 스레드로 메시지를 보내기 위해 postMessage 메서드를 호출한다.

self.postMessage("message");

워커에서 메인 스레드로 메시지를 받으려면 message 이벤트 처리기를 등록해야한다.

worker.onmessage = function(e) {
  var message = e.data;
  ...
}

워커 스레드 강제종료 / 스스로 종료 강제 종료

worker.terminate();

스스로 종료

close();

외부 스크립트 읽어 들이기

importScripts("scripts.js");

importScripts 함수로 외부 스크립트 파일을 읽어 들일 수 있다.

워커로 할 수 있는 일

Web Workers의 워커를 활용하여 무슨 일을 할 수 있는지 정리해보자. 특히 Blob을 읽어 들이는 작업과 XMLHttpRequest를 사용한 통신 작업을 동기적으로 실행 할 수 있다.

1. 워커에는 코어 자바스크립트의 모든 사양이 포함되어 있다.
   워커의 전역 객체는 self, this로 참조 가능

   
   

2. 클라이언트 측 자바스크립트 객체에 정의된 일부 프로퍼티를 사용할 수 있다.
   setTimeout(), setInterval() 등

   
   

3. 일부 HTML5 API를 사용할 수 있다.
   Blob(), FileAPI() 등

   
   

4. 공유워커를 사용할 수 있다.
   공유 워커는 여러 워커의 전역 객체를 공유할 수 있는 워커이다. ShareWorker생성자로 생성 가능

15.6.1 익명 함수 안에서 실행하기

익명 함수를 이벤트 리스너로 지정하고 이벤트 리스너 안에서 함수를 실행하면 그 함수에 추가적인 정보를 값으로 넘길 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">click me</div>
    <script>
      window.onload = function () {
        var box = document.getElementById("box");
        box.addEventListener("click", changeBgColor("red"), false);
        function changeBgColor(color) {
          return function (e) {
            e.currentTarget.style.backgroundColor = color;
          };
        }
      };
    </script>
  </body>
</html>

15.7 커스텀 이벤트👊

객체와 객체 사이의 관계를 느슨하게 연결하는 수단

15.7.1 커스텀 이벤트를 생성하는 방법

click이나 mousedown등의 표준 이벤트 외에 독자적인 이벤트를 생성할 수 있다.
createEvent 메서드로 이벤트 객체를 생성 -> dispatchEvent 메서드를 호출해서 이벤트를 보냄

15.7.2 이벤트 객체 생성

코드에서 type은 생성할 이벤트 객에의 이벤트 타입을 뜻한다.

var event = document.createEvent(type);

생성된 이벤트 객체는 해당 이벤트의 타입에 따라 초기화 작업을 해야 한다.

event.initEvent(type, bubbles, cancelable);

// type : 이벤트 유형을 뜻하는 문자열("click", "mouseup" 등)
// bubbles : 버블링할지를 나타내는 논리값
// 버블링 설명 : https://ko.javascript.info/bubbling-and-capturing
// cancelable : 취소할 수 있는 이벤트로 만들지를 나타내는 논리값

15.7.3 이벤트 보내기

초기화 작업을 끝낸 후에는 이벤트 타깃 요소를 상대로 이벤트를 보낸다. 이벤트는 요소 객체의 dispatchEvent 메서드로 보낸다.

target.dispatchEvent(event);

앞서 정의한 이벤트 객체를 사용해서 button 객체에 이벤트를 보내려면 다음과 같이 작성한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      <button id="button">버튼</button>
    </p>
    <script>
      window.onload = function () {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("click", true, false);
        var button = document.getElementById("button");
        button.addEventListener("click", function (event) {
          alert(`event.cancelable : ${event.cancelable}`);
        });
        button.dispatchEvent(event);
      };
    </script>
  </body>
</html>

15.7.4 커스텀 이벤트와 표준 이벤트의 차이점

커스텀 이벤트는 이벤트 객체의 isTrusted 프로퍼티로 구별 가능하다. isTrusted 값이 true면 표준이벤트, false면 커스텀 이벤트

15.7.5 커스텀 이벤트의 용도

커스텀 이벤트의 사용 이유
객체와 객체가 통신하는 주요 수단은 인수로 콜백함수를 넘기는 것이며 또 다른 방법은 커스텀 이벤트를 보내는 것이다. 즉, 한쪽 객체에서는 이벤트 발생, 다른 한쪽 객체에서는 이벤트를 처리하는 리스너를 등록해서 처리한다.

15.8 비동기 처리를 간결하게 작성하는 Promise👊

15.8.1 비동기 처리의 예

console.log("A");
setTimeout(function () {
  console.log("B");
}, 0);
console.log("C");

위 코드의 실행 결과는 A -> C -> B 순서로 콘솔에 표시된다. setTimeout함수의 인수로 받은 콜백 함수는 시간이 흐른 후에 처리하도록 예약처리만하고 다음 코드로 넘어가기 때문이다.

다음 코드는 1초 후에 "A" 1초 후에 "B" 1초 후에 "C"를 표시하는 코드이다. sleep 함수는 callback이라는 콜백 함수를 1초 후에 실행하는 방식으로 비동기 처리를 구현했다.

function sleep(callback) {
  setTimeout(function () {
    callback();
  }, 1000);
}

sleep(function () {
  console.log("A");
  sleep(function () {
    console.log("B");
    sleep(function () {
      console.log("C");
    });
  });
});
// A, B, C

위 코드처럼 콜백함수를 여러 개 중첩하면 이해하기 어려워지는데 이를 콜백지옥이라고 부른다. Promise를 사용해서 이와 같은 문제를 해결할 수 있다.

15.8.2 Promise의 기본

Promise는 비동기 처리를 하고 다음 처리를 실행하기 위한 용도로 사용된다. Promise를 사용하려면 객체를 생성해야 한다.

var promise = new Promise(funtion(resolve, reject) {...});

// resolve : 함수 안의 처리가 끝났을 때 호출해야 하는 콜백 함수.

// reject : 함수 안의 처리가 실패했을 때 호출해야 하는 콜백 함수

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    console.log("A");
    resolve();
  }, 1000);)
});
promise.then(function() {
  console.log("B");
})

// A, B

위의 코드에서 Promise에 인수로 넘긴 함수는 비동기 처리를 수행하는 함수이다. 1초 후에 "A"를 표시하고, resolve함수를 호출해서 Promise 안의 처리를 종료한다. resolve 함수가 실행되면 then 메서드에 등록한 함수가 호출된다.

15.8.3 Promise를 종료시키는 resolve 함수와 then 메서드

resolve 함수에 인수로 넘긴 값은 then 메서드에 인수로 넘긴 함수에 전달되어 다음 처리를 위해 사용한다.

promise.then(onFullfilled);

위 코드에서 onFullfilled 함수는 성공 콜백 함수라고 하며 promise 안의 처리가 정상적으로 끝났을때 호출된다.

var promise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    var name = prompt("이름을 입력하세요.");
    resolve(name);
  }, 1000);
});
promise.then(function (name) {
  console.log(`안녕하세요 ${name} 님`);
});

15.8.4 Promise를 실패로 처리하는 reject 함수와 catch 메서드

resolve와 마찬가지로 reject 함수에도 값을 넘길 수 있다. then 대신 catch 메서드에 넘긴 함수가 실행된다.

promise.catch(onRejected);

위 코드에서 onRejected 함수는 실패 콜백 함수라고 하며 promise 안의 처리가 실패로 끝났을때 호출된다.

15.8.5 then의 두번쨰 인수

promise.then(onFullfilled, onRejected);

promise 안의 처리가 성공하면 onFullfilled 함수가 실행되고 실패하면 onRejected 함수가 실행된다.

15.8.6 Promise가 실행하는 콜백 함수에 인수 넘기기

function buyAsync(money) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      var payment = parseInt(prompt("지불하고자 하는 금액을 입력하세요"));
      var balance = money - payment;
      if (balance > 0) {
        console.log(`${payment}원을 지불했습니다.`);
        resolve(balance);
      } else {
        reject(`구매할 수 없습니다. 잔액은 ${money}원 입니다.`);
      }
    }, 1000);
  });
}

buyAsync(500)
  .then(function (balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
  })
  .catch(function (error) {
    console.log(error);
  });

15.8.7 Promise로 비동기 처리 연결하기

function buyAsync(money) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      var payment = parseInt(prompt("지불하고자 하는 금액을 입력하세요"));
      var balance = money - payment;
      if (balance >= 0) {
        console.log(`${payment}원을 지불했습니다.`);
        resolve(balance);
      } else {
        reject(`구매할 수 없습니다. 잔액은 ${money}원 입니다.`);
      }
    }, 1000);
  });
}

buyAsync(500)
  .then(function (balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
    return buyAsync(balance);
  })
  .then(function (balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
    return buyAsync(balance);
  })
  .then(function (balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
    return buyAsync(balance);
  })
  .catch(function (error) {
    console.log(error);
  });

15.8.8 비동기 처리 여러 개를 병렬로 실행하기

Promise.all 메서드 Promise의 all 메서드는 모든 처리가 성공적으로 끝났을 때만 다음 작업을 실행하도록 한다.

Promise.all(iterable);

iterable은 반복 가능한 객체이다.

예를 들어 Promise 객체가 요소로 들어있는 배열을 넘기면 Promise.all 메서드는 그 안의 요소로 들어있는 모든 Promise 객체를 병렬로 실행한다.
resolve 호출 -> then 메서드 실행 (인수로 response라는 배열을 받음)
실패로 끝난 Promise 객체가 하나라도 있다면 가장 먼저 실패로 끝난 Promise 객체에서 실행한 reject 함수의 인수를 실패 콜백 함수에 인수로 넘긴다.

function buyAsync(name, money) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      var payment = parseInt(
        prompt(`${name}님, 지불하고자 하는 금액을 입력하세요.`)
      );
      var balance = money - payment;
      if (balance > 0) {
        console.log(`${name} : ${payment}원을 지불했습니다.`);
        resolve(balance);
      } else {
        reject(`${name} : 잔액은 ${balance}원 입니다. 구매 불가능`);
      }
    }, 1000);
  });
}

Promise.all([
  buyAsync("Tom", 500),
  buyAsync("Huck", 600),
  buyAsync("Becky", 1000),
])
  .then(function (balance) {
    console.log(balance);
  })
  .catch(function (error) {
    console.log(error);
  });

Promise.race 메서드 Promise의 race 메서드는 가장 먼저 종료한 Promise 객체의 결과만 다음 작업으로 보낸다.

function buyAsync(name, money) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      var payment = parseInt(
        prompt(`${name}님, 지불하고자 하는 금액을 입력하세요.`)
      );
      var balance = money - payment;
      if (balance > 0) {
        console.log(`${name} : ${payment}원을 지불했습니다.`);
        resolve(balance);
      } else {
        reject(`${name} : 잔액은 ${balance}원 입니다. 구매 불가능`);
      }
    }, 1000);
  });
}

Promise.race([
  buyAsync("Tom", 500),
  buyAsync("Huck", 600),
  buyAsync("Becky", 1000),
])
  .then(function (balance) {
    console.log(balance);
  })
  .catch(function (error) {
    console.log(error);
  });

14.5.1 노드 생성하기

새로운 요소 노드 객체 생성 createElement

var element = document.createElement(요소의 이름);

예를 들어 h1요소 객체를 만들 때는 이렇게 사용한다.

var headline = document.createElement("h1");

// 위 코드의 headline에 설정된 프로퍼티 값은 다음과 같다.
console.log(headline.nodeName); // "H1"
console.log(headline.nodeType); // "1"

그러나 DOM 트리의 계층 구조를 뜻하는 프로퍼티(parentNode, childNode 등) 값은 모두 null이다. 즉, createElement로 생성한 노드 객체는 메모리에 생성되어 있을 뿐 문서의 DOM 트리와는 관계가 없다.

14.5.2 노드 삽입하기

위 처럼 노드 객체를 만들었으므로 DOM트리에 삽입해 보자. appendChild와 insertBefore 메서드를 사용한다.

요소의 마지막에 삽입하기 : appendChild

요소 노드.appendChild(삽입할 노드)

appendChild 메서드로 노드 객체를 삽입하면 그 객체가 DOM트리에 추가되고 각 노드에 계층 구조를 정의하는 프로퍼티가 바뀐다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="doglist">
      <li>포메라니안</li>
      <li>달마시안</li>
    </ul>
  </body>
</html>

이 문서에 ul 마지막 자식 요소로 <li>불독</li>을 삽입하려면 다음과 같은 코드를 작성한다.

let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");
doglist.appendChild(element);
element.appendChild(text);

지정한 자식 노드의 바로 앞에 삽입 : insertBefore

요소 노드.insertBefore(삽입할 노드, 자식 노드)

앞에서 예로 들었던 HTML문서의 두번째 자식 요소앞에 <li>불독</li>를 삽입하려면 다음과 같은 코드를 작성한다.

let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");

// 자식 노드 바로 앞에(before) 삽입
doglist.insertBefore(element, doglist.children[1]);
element.appendChild(text);

HTML 요소를 생성하는 편리한 함수

• 요소 이름
• 속성 이름과 속성 값
• 자식 노드 목록

14.5.3 노드 삭제하기

노드.removeChild(자식노드)

삭제할 수 있는 노드가 해당 노드의 자식 노드. 즉, 삭제하려는 노드의 부모 노드 객체에서 removeChild 메서드를 호출한다.

node.parantNode.removeChild(node);

14.5.4 노드 치환하기

노드.replaceChild(새로운 노드, 자식 노드)

치환하려는 노드의 부모 노드에서 replaceChild 메서드를 호출한다.

node.parantNode.replaceChild(newnode, node);

대구 달성공원에 놀러 온 지수는 최근에 새로 만든 타일 장식물을 보게 되었다. 타일 장식물은 정사각형 타일을 붙여 만든 형태였는데, 한 변이 1인 정사각형 타일부터 시작하여 마치 앵무조개의 나선 모양처럼 점점 큰 타일을 붙인 형태였다. 타일 장식물의 일부를 그리면 다음과 같다.
그림에서 타일에 적힌 수는 각 타일의 한 변의 길이를 나타낸다. 타일 장식물을 구성하는 정사각형 타일 한 변의 길이를 안쪽 타일부터 시작하여 차례로 적으면 다음과 같다.

1, 1, 2, 3, 5, 8, ...

지수는 문득 이러한 타일들로 구성되는 큰 직사각형의 둘레가 궁금해졌다. 예를 들어, 처음 다섯개의 타일이 구성하는 직사각형(위에서 빨간색으로 표시한 직사각형)의 둘레는 26이다. 타일의 개수 N(1 ≤ N ≤ 80)이 주어졌을 때, N개의 타일로 구성된 직사각형의 둘레를 구하는 프로그램을 작성하시오.

입력

표준 입력으로 다음 정보가 주어진다. 입력은 한 줄로 구성되며 이 줄에는 타일의 개수를 나타내는 정수 N(1 ≤ N ≤ 80)이 주어진다.

출력

표준 출력으로 N 개의 타일이 구성하는 타일 장식물 직사각형의 둘레를 출력한다.

64비트 정수형인 “long long” 자료형을 써야할 수 있음

예제 입력1

5

예제 출력1

26

예제 입력2

6

예제 출력2

42

코드

*✔ 피보나치수열을 이용해서 둘레를 구해주면 된다. 둘레를 구할 때 표를 그려서 이해하면 쉽다.
// 타일 개수 1 2 3 4 5 6 7 // 둘레 4 6 10 16 26 42 68 따라서, f(n) = f(n-1) + f(n-2)의 규칙으로 증가함을 알 수 있다. 1과 2일때는 f(n-2)가 성립되지 않기때문에 배열에 [0,4,6]을 넣어준 뒤 구해지는 값들을 push해준다. 60~70번째까지 가면 숫자 초과 현상이 일어나는데 BigInt를 쓰면 뒤에 n이 붙어서 자꾸 틀렸다고 나온다... 일단 알고리즘은 맞는것 같으니 올리도록 하겠다... (이거 아시는 분 헬프미ㅠ) *

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const range = (start, end) => {
  let array = [];
  for (let i = start; i < end; ++i) {
    array.push(i);
  }
  return array;
};

let answer = [0, 4, 6];
const resultTile = (input) => {
  if (input === 1) return 4;
  if (input === 2) return 6;
  else {
    for (let i of range(3, 81)) {
      answer.push(answer[i - 1] + answer[i - 2]);
    }
    return answer[input];
  }
};

let input = 0;
rl.on("line", (userInput) => {
  input = userInput;
}).on("close", () => {
  console.log(resultTile(input));
  process.exit();
});

캥거루 세 마리가 사막에서 놀고 있다. 사막에는 수직선이 하나 있고, 캥거루는 서로 다른 한 좌표 위에 있다. 한 번 움직일 때, 바깥쪽의 두 캥거루 중 한 마리가 다른 두 캥거루 사이의 정수 좌표로 점프한다. 한 좌표 위에 있는 캥거루가 두 마리 이상일 수는 없다. 캥거루는 최대 몇 번 움직일 수 있을까?

입력

여러개의 테스트 케이스로 이루어져 있으며, 세 캥거루의 초기 위치 A, B, C가 주어진다. (0 < A < B < C < 100)

출력

각 테스트에 대해 캥거루가 최대 몇 번 움직일 수 있는지 출력한다.

예제 입력1

2 3 5 3 5 9

예제 출력1

1 3

코드

** ✔ 캥거루는 3마리로 고정되어 있고 0<A<B<C 이다. 양쪽에 있는 A와 C의 자리에 있는 캥거루 중에 더 많이 움직이는 횟수 구해야하기 때문에 B-A와 C-B를 한 값중 더 큰값을 구해주면 된다.**

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const Result = (one, two, three) => {
  let twoOne = two - one - 1;
  let threeTwo = three - two - 1;

  twoOne > threeTwo ? console.log(twoOne) : console.log(threeTwo);
};

let array = [];
rl.on("line", (userInput) => {
  array = userInput.split(" ");
  const one = parseInt(array[0]);
  const two = parseInt(array[1]);
  const three = parseInt(array[2]);

  Result(one, two, three);
}).on("close", () => {
  process.exit();
});

14.1.1 DOM 트리

웹페이지의 내용은 Document가 관리한다.
웹 브라우저가 웹 페이지를 읽어 들이면 렌더링 엔진은 HTML 문서 구문을 해석하고 DOM 트리라고 하는 객체의 트리 구조를 만든다. DOM 트리를 구성하는 객체 하나를 노드(NODE) 라고 한다. 다음 세 종류가 기본적인 노드다.

• 문서 노드 : 전체 문서를 가리키는 document 객체
• HTML 요소 노드 : HTML 요소를 가리키는 객체
• 텍스트 노드 : 텍스트를 가리키는 객체 HTML은 공백 문자가 여러 개 있어도 무시하지만 DOM트리는 텍스트로 취급하여 텍스트 노드로 생성한다. 이렇게 공백으로 구성된 텍스트 노드를 공백 노드 라고 한다.

14.1.2 노드 객체의 프로퍼티

노드가 가진 이러한 프로퍼티를 활용하면 Document 객체를 타고 내려가 특정 요소 객체나 텍스트 객체를 참조할 수 있다.
노드 프로퍼티를 이용한 HTML문서의 body요소 참조

document.childNodes[0].childNodes[2];
document.firstChild.lastChild;

하지만 이런 방법은 공백 문자의 영향을 많이 받기 때문에 많이 쓰이지 않는다. 보통은 요소의 id와 class 속성을 사용하여 원하는 요소 객체를 직접 가져온다.

HTML 요소의 트리
앞에서 이야기 한 것 처럼 공백 문자의 영향 때문에 노드를 참조하면 불편한 점이 있다. 그래서 각 노드에는 DOM트리 안의 텍스트 노드를 무시하고 HTML 문서에서 요소의 계층 구조만 가져오기 위한 프로퍼티가 마련되어 있다.

HTML문서 요소의 프로퍼티 이용한 HTML문서의 body요소 참조

document.childNodes[0].childNodes[2];
document.firstChild.lastChild;

14.2 노드 객체 가져오기👊

14.2.1 id 속성으로 노드 가져오기

HTML 문서의 요소에 id 속성을 지정할 수 있다. id 속성값은 문서에서 유일한 값이어야하며 id 속성 값으로 요소 하나를 가리킬 수 있다. getElementById 메서드를 사용한다.

document.getElementById(id 값);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="first">첫번째 div</div>
    <div id="second">두번째 div</div>
    <div id="third">세번째 div</div>
    <script>
      var element = document.getElementById("second");
      element.innerHTML = "여기를 수정함"; // 두번째 div 요소의 내용을 수정한다.
    </script>
  </body>
</html>

14.2.2 요소의 이름으로 노드 가져오기

getElementByTagName 메서드를 사용하면 인수로 넘긴 문자열과 같은 이름을 가진 태그 목록을 가져올 수 있다. 인수로 태그 이름을 넘기고 대소문자를 구별하지 않는다.

document.getElementByTagName(요소의 태그 이름);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="first">첫번째 div</div>
    <div id="second">두번째 div</div>
    <div id="third">세번째 div</div>
    <script>
      var elements = document.getElementsByTagName("div");
      elements[2].innerHTML = "여기를 수정함"; // 두번째 div 요소의 내용을 수정한다.
    </script>
  </body>
</html>

getElementsByTagName 메서드는 NodeList 객체를 반환하고 읽기전용이다.

14.2.3 class 속성 값으로 노드 가져오기

getElementByClassName 메서드를 사용하면 특정 class 속성 값을 class 속성 값으로 가지는 객체 목록(NodeList)을 가져올 수 있다.

document.getElementByClassName(class의 이름);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div class="cat black">붐베이</div>
    <div class="cat white">페르시안</div>
    <div class="dog white">스피츠</div>
    <script>
      var cats = document.getElementsByClassName("cat");
      for (var i = 0; i < cats.length; i++) {
        console.log(i + "번째 고양이 : " + cats[i].innerHTML);
      }
    </script>
  </body>
</html>

getElementByClassName 메서드는 요소 객체에서도 사용할 수 있다. HTML 문서 안의 첫 번째 p요소의 자식 요소이면서 class 속성 값이 important인 모든 요소의 NodeList를 가져오려면 다음과 같이 작성한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p>
      <strong class="important">Document Object Model</strong>의 줄임말입니다.
    </p>
    <script>
      var paras = document.getElementsByTagName("p");
      var firstParaImportants = paras[0].getElementsByClassName("important");
      console.log(firstParaImportants);
    </script>
  </body>
</html>

14.2.4 name 속성 값으로 노드 가져오기

name 속성은 그 요소 이름을 지정할 때 사용하며 form과 input 요소 등의 폼 컨트롤 요소, iframe, img, map, object 요소 등에 지정할 수 있다. name 속성 값은 class 속성 값과 마찬가지로 요소 여러 개를 대상으로 같은 값을 사용할 수 있다.
getElementByName 메서드를 사용한다.

document.getElementByName(class의 이름);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <form>
      <input type="checkbox" name="dog" value="pome" />포메라니안<br />
      <input type="checkbox" name="dog" value="dalma" />달마시안<br />
      <input type="checkbox" name="dog" value="bool" />불독<br />
    </form>
    <script>
      var dogs = document.getElementsByName("dog");
      dogs[1].value = "corgi";
      dogs[1].nextSibling.nodeValue = "웰시 코기";
      for (var i = 0; i < dogs.length; i++) {
        console.log(`${i}번째의 값 : ${dogs[i].value}`);
      }
    </script>
  </body>
</html>

14.2.5 CSS 선택자로 노드 가져오기

css 선택자는 요소를 가리키기 위한 조건을 제공한다. 예를 들어 다음 선택자는 class 속성 값이 "subtitle"인 p 요소와 일치한다.

p.subtitle; // 클래스 선택자 : 특정 클래스 이름을 포함하는 요소

CSS 선택자를 사용하는 예시

h1                      // 유형 선택자 : 지정한 요소 이름을 가진 요소
*                       // 전체 선택자 : 모든 요소
#title                  // id 선택자
h1[title]               // 속성 선택자
h1[class="maintitle"]   // 속성 선택자 : 지정한 속성 값을 가진 요소
input:checked           // 선택된 라디오 버튼이나 선택된 체크박스 요소
h1:hover                // 마우스 포인터 아레에 있는 h1 요소
#title span             // id값인 title 자손 요소로 존재하는 span 요소
#title > span           // 직계 자식 요소로 존재하는 span 요소
body > h1:first-child   // body 요소의 첫 번째 h1 요소
p, #title               // p 요소와 id 속성 값이 title인 요소

querySelectorAll 메서드를 사용하면 인수로 넘긴 선택자와 일치하는 요소 객체가 담긴 NodeList를 가져올 수 있다.

document.querySelectorAll("선택자");

앞에 나온 것들과는 달리 querySelectorAll 메서드가 반환하는 NodeList는 "살아있는 상태"가 아니다. NodeList에 포함된 요소는 메서드를 호출한 시점에 일치한 요소이다. HTML 문서의 내용이 바뀌어도 NodeList는 바뀌지 않는다. 또한 일치한 요소가 없을 때는 빈 NodeList를 반환한다.
다음 코드는 class 속성 값이 subtitle인 p 요소의 직계 자식 요소인 span 요소가 담긴 NodeList를 반환한다.

var elements = document.querySelectorAll("p.subtitle > span");

querySelector 메서드는 지정한 선택자와 일치하는 요소 객체 중에서 문저 위치가 첫 번째인 요소 객체를 반환한다.
다음 코드는 class 속성 값이 subtitle인 p 요소의 직계 자식 요소 중 첫번째 span 요소를 반환한다.

var elements = document.querySelector("p.subtitle > span");

14.3 속성 값의 읽기와 쓰기👊

이 절에선 요소의 속성 값을 읽고 쓰는 법을 배운다. 또한 속성이 있는지 확인하는법, 삭제하는법, 목록을 가져오는 방법도 배운다.

14.3.1 요소의 속성 값

<a id="school" href="http://www.naver.com">네이버</a>

이 a 요소에는 id 속성과 href 속성이 설정되어 있다. 이처럼 속성은 속성 이름 = 속성 값으로 표기한다.

14.3.2 요소 객체의 프로퍼티로 요소의 속성을 읽고 쓰기

일반적인 속성의 속성 이름은 다음과 같이 표기한다.

요소 객체.속성 이름

이 프로퍼티는 읽기와 쓰기가 가능하다. 위에서 설명한 a요소의 href속성을 다음과 같이 요소 객체의 href 프로퍼티에서 가져올 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <a id="naver" href="http://www.naver.com">네이버</a>
    <script>
      var anchor = document.getElementById("naver");
      console.log(anchor.href);
    </script>
  </body>
</html>

HTML 요소의 속성 이름은 대소문자를 구분하지 않지만 자바스크립트 요소 객체의 속성 프로퍼티는 대소문자를 구분한다. 속성이름이 여러 단어로 구분되어 있다면 kamelcase 방식으로 두번째 이후 단어의 첫 글자를 대문자로 표기한다.

14.3.3 속성 값 가져오기

요소 객체의 getAttribute 메서드는 요소의 속성을 가져온다. 해당하는 속성이 없을 때는 null 또는 빈 문자열을 반환한다.

요소 객체.getAttribute(속성의 이름)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <form id="favorite">
      <input type="checkbox" name="dog" value="pome" />포메라니안<br />
      <input type="checkbox" name="dog" value="dalma" />달마시안<br />
      <input type="checkbox" name="dog" value="bool" />불독<br />
    </form>
    <script>
      var result = [];
      var fm = document.getElementById("favorite");
      var list = fm.children;
      for (var i = 0; i < list.length; i++) {
        if (list[i].nodeName == "INPUT" && list[i].type == "checkbox") {
          result.push(list[i].getAttribute("value"));
        }
      }
      console.log(result.join(","));
    </script>
  </body>
</html>

14.3.4 속성 값 설정하기

요소 객체의 setAttribute 메서드는 요소의 속성을 설정한다. 해당하는 속성이 없을 때는 그 속성을 새롭게 추가한 후에 설정한다.

요소 객체.setAttribute(속성의 이름, 속성 값)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a id="naver">네이버</a>
    <script>
      let anchor = document.getElementById("naver");
      anchor.setAttribute("href", "http://www.naver.com");
      console.log(anchor);
    </script>
  </body>
</html>

14.3.5 속성이 있는지 확인하기

요소 객체의 hasAttribute 메서드는 속성 이름을 받아서 그 이름을 가진 속성이 있는지 알려주는 논리값을 반환한다.

요소 객체.hasAttribute(속성 이름)

14.3.6 속성 삭제하기

요소 객체의 removeAttribute 메서드는 속성 이름을 받아서 그 이름을 가진 속성을 삭제한다.

요소 객체.removeAttribute(속성 이름)

14.3.7 전체 속성의 목록 가져오기

요소 객체에는 attribute 프로퍼티가 정의되어 있다. 이 프로퍼티틑 NameNodeMap 객체로 그 요소에 설정된 모든 속성의 속성 노드 객체가 담겨 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="controls">
      <input type="button" value="click" onclick="doSomething();" />
    </p>
    <script>
      var para = document.getElementById("controls");
      var list = para.firstElementChild.attributes;
      for (var i = 0; i < list.length; i++) {
        console.log(list[i].name + " : " + list[i].value);
      }
    </script>
  </body>
</html>

console.log(list["type"].value); // -> button
console.log(list["value"].value); // -> click
console.log(list.onclick.value); // -> doSomething();

14.4 HTML 요소의 내용을 읽고 쓰기👊

이 절에서는 요소의 내용을 읽고 쓰는 방법을 배운다.
요소의 내용이라는 단어에는

1. 요소 안의 HTML 코드 (innerHTML)
2. 요소를 웹 페이지에 표시할 때의 텍스트 정보 (textContent, innerText)
3. 요소 객체 안의 노드의 계층 구조라는 세 가지 의미가 함축되어 있다.
   

14.4.1 innerHTML 프로퍼티

innerHTML 프로퍼티를 사용해서 요소 안의 코드를 읽거나 쓸 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>하트</h1>
    <p id="cards">&hearts;하트는 <em>승려</em>라는 뜻입니다.</p>
    <script>
      let para = document.getElementById("cards");
      console.log(textContent(para));
    </script>
  </body>
</html>

이 코드에 innerHTML 프로퍼티로 p 요소의 내용을 수정하면 요소의 내용이 대입한 코드로 바뀐다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="cards">&hearts;하트는 <em>승려</em>라는 뜻입니다.</p>
    <script>
      let para = document.getElementById("cards");
      para.innerHTML = "&diams;다이아는 <string>상인</strong>이라는 뜻입니다.";
      console.log(para.innerHTML);
    </script>
  </body>
</html>

14.4.2 textContent와 innerText 프로퍼티

textContent 프로퍼티는 요소의 내용을 웹 페이지에 표시했을 때의 텍스트 정보를 표시합니다. 또한 textContent 프로퍼티에 텍스트를 대입하면 요소의 내용을 텍스트로 변환할 수 있다.

para.textContent = "&diams;다이아는 <strong>상인</strong>이라는 뜻입니다.";
console.log(para.innerHTML);
// -> &amp;diams;다이아는 &lt;string&gt;상인&lt;/strong&gt;이라는 뜻입니다.
console.log(para.textContent);
// -> &diams;다이아는 <string>상인</strong>이라는 뜻입니다.

textContent와 innerText 프로퍼티는 거의 같은 일을 하지만 다음과 같은 차이점이 있다.

• textContent는 script 요소 안의 텍스트를 반환하지만 innerText는 반환하지 않는다.
• textContent는 공백 문자를 그대로 반환하지만 innerText는 남는 공백 문자를 제거한다.
• innerText는 table, tbody, tr 요소 등의 테이블 요소를 수정할 수 없다.

mongodb를 실행하기 위해서 데몬(mongod)이 실행되어 있어야 한다. 아래 명령어로 mongo shell을 실행한다.

> sudo service mongod start
> mongo

1.1 root 계정 생성

root 계정을 생성하기 위해 admin 데이터베이스를 사용한다.

> show databases
admin  0.000GB
config 0.000GB
local  0.000GB

> use admin
switched to db admin

> db
admin

2. Database

use (DATABASE_NAME) 명령어로 DB를 생성할 수 있다. 말그대로 use이기 때문에 생성과 동시에 그 DB를 사용한다.
이미 존재하는 경우엔 현존하는 DB를 사용한다.

2-1. 생성

use를 사용해서 "mongodb_tut"이라는 DB를 생성한다.

> use mongodb_tut
switched to db mongodb_tut

현재 사용중인 DB를 확인하려면 db 명령어 사용

> db
mongodb_tut

DB 리스트들을 확인하려면 show dbs 명령어 사용

> show dbs
admin  0.000GB
config 0.000GB
local  0.000GB

show dbs명령어로 DB 리스트들을 확인한 결과, 방금 만든 "mongodb_tut" DB가 없다.
내가 만든 DB를 리스트에서 보려면 최소 한개의 Document를 추가해야 한다.

> db.book.insert({"name": "MongoDB Tutorial", "author": "veloger"})
WriteResult({ "nInserted" : 1 })

여기에서 "book"은 collection을 의미한다.
"이 DB의 "book"이라는 collection에 이름은 MongoDB Tutorial이고 작가는 veloger라는 데이터를 저장해줘" 이런 뜻

> show dbs
admin        0.000GB
config       0.000GB
local        0.000GB
mongodb_tut  0.000GB

이제 리스트에 생성된걸 볼 수 있다.
그리고 추가로 db.stats() 로 DB 상태를 확인할 수 있다.

2-2. 제거

DB를 제거할땐 db.dropDatabase()명령어 사용한다.
이 명령어를 사용하기 전엔 use 명령어로 삭제하고자 하는 DB를 선택해줘야 한다.

> use mongodb_tut
switched to db mongodb_tut

> db.dropDatabase();
{ "dropped" : "mongodb_tut", "ok" : 1 }

3. Collection

3-1. 생성

db.createCollection(name, [options]) 으로 컬렉션을 생성한다. name은 컬렉션이름이고, options은 document 타입으로 구성된 해당 컬렉션의 설정값이다.
options 객체의 속성들은 아래와 같다.

• capped : Boolean 타입이다. true로 설정하면 size 값을 꼭 설정해줘야하고 활성화 시킨다.
• autoIndex : Boolean타입이다. true로 설정하면 _id 필드에 index를 자동으로 생성한다.
• size : number 타입이다. Capped collection을 위해 해당 컬렉션의 최대 사이즈를 ~byte로 지정한다.
• max : number 타입이다. 해당 컬렉션에 추가할 수 있는 최대 document 갯수를 설정한다.

예를 들면 아래와 같다.

> db.createCollection("platform", {
    capped: true,
    size: 6142800,
    max: 10000
    })
{ "ok" : 1 }

3-2. 조회

show collections : collections 리스트를 확인할 수 있다.

3-3. 제거

db.컬렉션명.drop() : collections을 제거한다.

3-4. 유틸

db.old컬렉션명.renameCollection(new컬렉션명) : collections 이름을 변경한다.

4. Document

4-1 생성

db.컬렉션명.insert(document) 로 document를 추가한다.
예시는 위에 Database 생성쪽에 했기 때문에 생략하도록 하겠다.

4-2 조회

• db.컬렉션명.find([query, projection]) 로 컬렉션의 document 리스트를 확인할 수 있다.
• 한 줄이 너무 길어 불편할 때는 끝에 .pretty()를 붙이면 json이 이쁘게 나온다.

4-3 제거

db.컬렉션명.remove(criteria[, justOne]) 로 document를 제거할 수 있다.
매개변수로 들어가는 객체의 속성들은 아래와 같다.

• criteria : document 타입이다. 데이터의 기준 값으로서 일치하면 기본적으로 다 삭제한다. 이 값이 { } 이면 컬렉션의 모든 데이터를 제거한다. 꼭 넣어야한다.

• justOne boolean타입이다. Optional 매개변수이며, 이 값이 true면 1개의 document만 제거한다. 이 매개변수가 생략되면 기본값은 false이고 criteria에 해당되는 모든 document를 제거한다.

출처 https://velopert.com/457 https://sjh836.tistory.com/100

JavaScript로 코딩테스트 준비를 하는사람은 C++이나 Python보다 비교적으로 적기 때문에 인터넷 서핑을 많이 해야한다.

fs 모듈

fs 모듈 사용은 알고 리즘 마다 경로가 달라져서 보편적으로 사용할 수 없다.
출처 https://gimgongta.tistory.com/20
fs 모듈 사용 예시

//한줄짜리 입력일 경우 (예 "사과")

// 문자로 입력받은것 정수나 숫자로 입력받기 preseInt(),Number()

var fs = require("fs");

var input = fs.readFileSync("/dev/stdin").toString();

var result = input; // 이 변수에 "사과" 가 들어간다.

// 한줄에 스페이스로 여러 파라미터가 들어가는 경우( 예를들어 "사과 토마토 수박" );

var fs = require("fs");

var input = fs.readFileSync("/dev/stdin").toString().split(" ");

var result1 = input[0]; //입력받은값이 정수이면 parseIn, 소수이면parseFloat(input[0]);

var result2 = input[1];

var result3 = input[2];

// 여러줄로(개행되어) 여러 파라미터가 들어가는경우
// 예를들어
// 사과
// 토마토
// 수박

var fs = require("fs");

var input = fs.readFileSync("/dev/stdin").toString().trim().split("\n");

var result1 = input[0];

var result2 = input[1];

var result3 = input[2];

readline 모듈

위의 fs모듈을 사용하면 자꾸 경로 에러가 나서 가장 많이 사용하는 방법인 readline 모듈이다.
출처 https://velog.io/@exploit017
readline 모듈 사용 예시

//하나 입력
const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.on("line", function (line) {
  console.log(line);

  //기본적으로 매개변수 line에 할당된다.

  rl.close();
}).on("close", function () {
  process.exit();
});

//한 줄에 스페이스로 구분하기
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];

rl.on("line", function (line) {
  input = line.split(" ").map((el) => parseInt(el));
}).on("close", function () {
  //매개변수 input에 할당된다.
  console.log(input[0] + input[1]);

  process.exit();
});

//여러줄 입력//
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];

rl.on("line", function (line) {
  input.push(line);
}).on("close", function () {
  //내용이고 줄바꿈하면 인덱스바뀜 ex) input[0] enter -> input[1]
  process.exit();
});

프로젝트나 다른 이것저것 하다가 다시 문제를 풀려고 하면 자꾸 모듈 사용하는게 기억이 잘 안나서 아예 정리를 해버렸다.
프로그래머스로 넘어가야되나...🤔

N개의 수로 된 수열 A[1], A[2], …, A[N] 이 있다. 이 수열의 i번째 수부터 j번째 수까지의 합 A[i] + A[i+1] + … + A[j-1] + A[j]가 M이 되는 경우의 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 N(1 ≤ N ≤ 10,000), M(1 ≤ M ≤ 300,000,000)이 주어진다. 다음 줄에는 A[1], A[2], …, A[N]이 공백으로 분리되어 주어진다. 각각의 A[x]는 30,000을 넘지 않는 자연수이다.

출력

첫째 줄에 경우의 수를 출력한다.

예제 입력1

4 2 1 1 1 1

예제 출력1

3

예제 입력2

10 5 1 2 3 4 2 5 3 1 1 2

예제 출력2

3

코드

** ✔ 구간의 부분합을 이용하는 문제 투 포인터는 1차원 배열에서 두 개의 포인터를 조작하여 원하는 결과를 얻는 알고리즘이다. 조건은 배열의 원소가 자연수여야 한다는 것이다. start, end라는 두 개의 포인터를 사용해서 구해야하는 값보다 배열의 부분합이 작으면 mid를 한간 이동하여 배열의 크기를 늘리고 반대로 부분합이 크면 mid를 한간 뒤로 이동하여 배열의 크기를 줄인다.**

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});
const numberSum = (limitArr, numArr) => {
  const sumArr = [10001];
  let sum = 0;
  let count = 0;
  let mid = 0;

  const numberArr = Number(limitArr[0]);
  const cutlineNum = Number(limitArr[1]);

  for (let i = 0; i < numberArr; i++) {
    sum += Number(numArr[i]);
    sumArr[i] = sum;
  }
  // unshift를 통해 [0,1,2,3,4...] 배열로 만든다
  sumArr.unshift(0);

  for (let i = 0; i <= numberArr; i++) {
    // start에 포인터 한개, end에 포인터 한개 만든다.
    start = i;
    end = numberArr;

    // 중간지점 mid보다 cutlineNum이 작다면 start를 한칸 앞으로,
    // cutlineNum이 크다면 end를 한칸 뒤로
    while (start <= end) {
      mid = parseInt((start + end) / 2);
      if (cutlineNum > sumArr[mid] - sumArr[i]) {
        start = mid + 1;
      } else if (cutlineNum < sumArr[mid] - sumArr[i]) {
        end = mid - 1;
      } else {
        count++;
        break;
      }
    }
  }
  console.log(count);
};

const inputArr = [];
rl.on("line", (userInput) => {
  inputArr.push(userInput);
}).on("close", () => {
  const limitArr = inputArr[0].split(" ");
  const numArr = inputArr[1].split(" ");
  numberSum(limitArr, numArr);
});

서로 다른 N개의 자연수의 합이 S라고 한다. S를 알 때, 자연수 N의 최댓값은 얼마일까?

입력

첫째 줄에 자연수 S(1 ≤ S ≤ 4,294,967,295)가 주어진다.

출력

첫째 줄에 자연수 N의 최댓값을 출력한다.

예제 입력1

200

예제 출력1

19

코드

** ✔ for문을 돌려서 sum에 계속계속 더해주고 그 값이 입력받은 값보다 클때까지 더해준 후 출력해준다. **

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.on("line", (userInput) => {
  const input = Number(userInput);
  let sum = 0;
  let cnt = 0;

  for (let i = 1; sum < input; i++) {
    if (sum + i <= input) {
      sum += i;
      cnt++;
    }
    if (sum + i > input) {
      console.log(cnt);
      break;
    }
  }
}).on("close", () => {
  process.exit();
});

배열을 정렬하는 것은 쉽다. 수가 주어지면, 그 수의 각 자리수를 내림차순으로 정렬해보자.

입력

첫째 줄에 정렬하고자하는 수 N이 주어진다. N은 1,000,000,000보다 작거나 같은 자연수이다.

출력

첫째 줄에 자리수를 내림차순으로 정렬한 수를 출력한다.

예제 입력1

2143

예제 출력1

4321

코드

** ✔ 입력받은 숫자를 split으로 하나하나 배열에 저장한 후 sort함수로 비교적 쉽게 풀었다. 여기서 주의할 점은 return값이 b-a면 내림차순이고 a-b면 오름차순이다.**

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const arrSort = (arr) => {
  arr.sort(function (a, b) {
    return b - a;
  });
  const answer = arr.join("");
  console.log(answer);
};

let arr = [];

rl.on("line", (userInput) => {
  arr = userInput.split("");
}).on("close", () => {
  arrSort(arr);
});

13.1.1 웹에서 JS가 하는 일

정적인 웹페이지에 자바스크립트를 사용하면 동적으로 만들 수 있다.

1. 웹 페이지의 Document 객체 제어(HTML, CSS 작업)
2. 웹 페이지의 Window 객체 제어 및 브라우저 제어
3. 웹 페이지에서 발생하는 이벤트 처리
4. HTTP를 이용한 통신 제어

최신 웹 브라우저에서는 다음과 같은 기능을 제공한다.

• 파일 읽기와 쓰기
• 데이터베이스 기능
• 비동기 통신
• 2,3차원 그래픽 등등..

이전까지는 자바스크립트의 속도가 매우 느렸으나, 크롬과 파이어폭스가 실행 중에 JS코드를 컴파일하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 빠른 실행 속도를 구현했다.

13.1.2 자바스크립트 코드를 삽입하는 방법 4가지

1. script 요소의 내용물로 작성하기 (인라인 스크립트)

<script>
  console.log("Hello"); // JS 코드
</script>

2. 외부 파일 읽어 들이기 (외부 스크립트)

<script src="../scripts/sample.js"></script>

3. 이벤트 처리기 속성에 작성하기

<input type="button" value="click" onclick="console.log('Hello!');">

4. JavaScript : URL (자바스크립트 의사 프로토콜)

<a href="javascript:console.log('I\'m pretty good!');">What's going on?</a>

최근에는 자바스크립트 코드에서 3번, 4번을 거의 사용하지 않는다. 이벤트 처리기를 등록할 때는 3번 대신 addEventListener 메서드를 사용한다.

13.1.3 웹 브라우저에서의 자바스크립트 실행 순서

웹 브라우저에서 HTML문서를 분석하고 표시하는 프로그램을 렌더링 엔진이라고 한다. 렌더링 엔진은 다음과 같은 처리 과정을 거쳐 HTML 문서의 구문을 분석하고 DOM 트리를 구축한 후에 JS코드를 실행한다.

1. 웹 브라우저로 웹 페이지를 열면 가장 먼저 Window 객체가 생성된다.
   
2. Document 객체가 Window 객체의 프로퍼티로 생성되며 웹 페이지를 해석해서 DOM 트리의 구축을 시도한다. Document 객체는 readState 프로퍼티를 가지고 있고 초깃값은 loading이라는 문자열이다.
   
3. HTML문서는 HTML구문을 작성 순서에 따라 분석하며 Document 객체 요소와 텍스트 노드를 추가한다.
   
4. HTML문서 안에 script요소가 있으면 script코드의 구문을 분석하고 그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행한다. script코드가 실행할 때는 HTML문서의 구문 분석이 일시적으로 멈추고 script코드가 완료하면 다시 HTML문서 구문 분석을 실행한다 (script요소는 동기적)
   
5. HTML문서의 모든 내용을 읽고 DOM 트리 구축을 완료하면 document.readState 프로퍼티 값이 interactive로 바뀐다.
   
6. 웹 브라우저는 Document 객체에 DOM트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.
   
7. 이 시점에 img 등 외부 리소스를 읽어들인다.
   
8. 모든 리소스를 읽어 들인 후에는 document.readState프로퍼티 값이 complete로 바뀐다. 그리고 웹 브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.
   
9. 이 시점부턴 다양한 이벤트(사용자 정의, 네트워크 이벤트)를 수신하고 발생하면 이벤트 처리기가 비동기로 호출된다.

async와 defer 속성
script 요소의 논리 속성으로 HTML5부터 추가된 속성이다. 이 속성들을 사용하면 자바스크립트 코드를 실행할 때 HTML구문 분석을 막지 않는다.

<script async src="../scripts/sample.js"></script>
<script defer src="../scripts/sample.js"></script>

async

• script 요소의 코드가 비동기적으로 실행된다.
• 여러 개의 script 요소에 async 속성을 설정하면 다 읽어들인 코드부터 비동기적으로 실행하므로 순서가 보장되지 않는다.
  

defer

• script 요소의 코드가 DOM 트리 구축이 끝난 후에 실행된다.
• DOM 구축이 끝난 상태이기 때문에 초기화 작업을 할 수 있다. 따라서 DOMContentLoaded 이벤트의 대안으로 활용가능

13.1.4 크로스 브라우징 대책

ECMAScript 5를 지원하지 않는 오래된 웹 브라우저에서도 문제없이 웹 페이지를 표시하고 같은 기능을 사용할 수 있도록 대응하는 작업을 크로스 브라우징 대책 이라고 한다.

1. 기능성 테스트
2. 브라우저 테스트
3. 라이브러리를 사용해서 대응하기

이런 방법들이 있구나 정도로 생각하면 될 것 같다.

13.1.5 Window

클라이언트 측 자바스크립트에서 가장 중요한 객체는 Window 객체이다. 전역 객체이고 전역 변수는 Window 객체의 프로퍼티이다.

Window 객체의 주요 프로퍼티

Window 객체의 주요 메서드

13.2 Location 객체👊

Location 객체의 프로퍼티

Location 객체의 메서드

Location 객체의 사용 예

• 해당 URL이 가리키는 문서를 읽어들인다. (이력이 남기 때문에 뒤로가기 버튼으로 돌아갈 수 있다.)

location.href = "http://www.gulbut.co.kr/";
location.assign("http://www.gulbut.co.kr/");

• URL이 가리키는 문서를 읽어 들일 때 이력을 남기지 않는다. (뒤로가기 버튼으로 돌아갈 수 없다.)

location.replace("http://www.gilbut.co.kr/");

• URL에 상대경로를 지정할 수도 있다. 다음 코드는 3초 후에 같은 사이트의 다른 페이지로 이동하는 코드이다.

setTimeout(function () {
  location.replace("/book/bookList.aspx");
}, 3000);

• reload로 현재 페이지를 다시 읽어들인다.

location.reload();

• hash 프로퍼티에 HTML 요소의 id를 대입하면 그 요소로 스크롤한다.

location.hash = "#header"; // id = "header"인 요소로 스크롤

• search 프로퍼티 값을 바꾸면 서버에 질의 문자열로 보낸다.

location.search = "some data"; // URL 끝에 "?some%20data"를 덧붙여 서버에 보낸다

13.3 History 객체👊

1. 웹 페이지 열람 이력을 진행하거나 되돌아갈 때는 back과 forword메서드를 사용

history.back(); // 웹페이지 열람 이력 하나 되돌아가기
history.forward(); // 웹페이지 열람 이력 하나 진행하기

2. 횟수를 지정해서 돌아가거나 진행할 땐 go 메서드를 사용

history.go(-3); // 웹 페이지 열람 이력 세 개 되돌아가기
history.go(2); // 웹 페이지 열람 이력 두 개 진행하기

3. 페이지 전환을 하지 않고 열람 이력만 추가하고자 할 때는 pushState 메서드를 사용

history.pushState(null, null, "page2.html");

// pushState의 인수는 3가지가 있다.
// state : 새롭게 추가되는 웹 페이지 열람 이력과 연결할 객체
// title : 새로운 열람 웹 페이지 이력을 가리키는 문자열
// url : 새로운 열람 이력의 URL

13.4 Navigator 객체👊

Navigator 객체는 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리한다.

Navigator 객체의 주요 프로퍼티

Navigator 객체의 주요 메서드

13.5 Screen 객체👊

Screen 객체는 화면 크기와 색상 등의 정보를 관리한다.

Screen 객체의 주요 프로퍼티

위의 표에 나와있는 "사용할 수 있는 화면"이란 작업 표시줄 등을 제외한 나머지 부분을 뜻한다.
Screen 객체를 사용하면 스마트폰 등의 작은 화면에 표시할 때 작은 글꼴, 작은 화면을 표시할 떄 사용할 수 있다.

13.6 Document 객체👊

Document 객체는 창에 표시되고 있는 웹 페이지를 관리한다. Document 객체는 클라이언트 측 자바스크립트에서 가장 중요한 객체이다.

Document 객체의 주요 프로퍼티

Document 객체의 주요 메서드

13.7 창 제어하기👊

웹 브라우저는 일반적으로 여러 개의 창과 탭을 표시한다. 각각의 창과 탭은 별도의 브라우징 컨텍스트(사용자에게 표시되는 환경)를 제공한다.

13.7.1 창 여닫기

// 창 열때
var w = open(url, 창의 이름, 옵션);

// 창 닫을 때
w.close();

open 메서드의 인수

• url : 새롭게 여는 창이 읽어 들이는 문서의 URL
• 창의 이름 : 새로운 창의 이름. 같은 이름의 창이 있다면 그 창에 표시하고 이 인수를 생략하면 이름 없는 창을 연다.
• 옵션 : 새로운 창의 설정 값(창의 크기 등). 생략하면 기본 크기

open 메서드로 설정할 수 있는 옵션의 이름

13.7.2 창 제어하기

open 메서드로 연 창은 위치와 크기를 바꾸거나 스크롤 할 수 있다.

위치 변경 moveBy, moveTo 메서드 사용

w.moveBy(10, 20);
w.moveTo(100, 150);

크기 변경 resizeBy, resizeTo 메서드 사용

w.resizeBy(10, 20);
w.resizeTo(200, 150);

스크롤 표시 scrollBy, scrollTo 메서드 사용

w.scrollBy(0, 100); // 아래쪽으로 100px 스크롤
w.scrollTo(0, 0); // 시작 위치로 이동

9.1.1 객체의 생성자

자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합이다. 한 쌍을 이룬 것을 프로퍼티 그것의 이름을 키(key)라고 한다. 값으로는 모든 데이터 타입의 데이터를 저장할 수 있다. 객체를 생성하는 방법에는 다음 세가지가 있다.

1. 객체 리터럴로 생성하는 방법

var card = { suit: "하트", rank: "A" };

2. 생성자로 생성하는 방법

function Card(suit, rank) {
  this.suit = suit;
  this.rank = rank;
}
var card = new Card("하트", "A");
console.log(card); // Card { suit: '하트', rank: 'A' }

3. Object.create로 생성하는 방법

var card = Object.create(Object.prototype, {
  suit: {
    value: "하트",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  rank: {
    value: "A",
    writable: true,
    enumerable: true,
    configurable: true,
  },
});
console.log(card); // Card { suit: '하트', rank: 'A' }

9.1.2 프로토타입

생성자 안에서 메서드를 정의할 때 문제점
생성자 안에서 this 뒤에 메서드를 정의하면 모든 인스턴스에 똑같은 메서드가 추가된다. 따라서 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 그만큼의 메모리를 소비하게 된다.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
  this.area = function () {
    return Math.PI * this.radius * this.radius;
  };
}

// 각각의 인스턴스가 똑같은 메서드 area를 소유한다.
var c1 = new Circle({ x: 0, y: 0 }, 2.0);
var c2 = new Circle({ x: 0, y: 1 }, 3.0);
var c3 = new Circle({ x: 1, y: 0 }, 1.0);

이러한 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결 할 수 있다.

프로토타입 객체
JS는 함수도 객체이기 때문에 기본적으로 prototype 프로퍼티를 갖고 있다.
함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토타입 객체라고 한다. 기본적으로 빈 객체를 가리킴

function F() {}
console.log(F.prototype); // Object {}

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용

F.prototype.prop = "value";
var obj = new F();
console.log(obj.prop); // value

인스턴스의 프로퍼티에 값을 대입했을 때 이름이 같은 프로퍼티가 있으면 그 프로퍼티에 값을 대입한다.

obj.prop = "instance value";
console.log(obj.prop); // instance value
console.log(F.prototype.prop); // prototype value

프로토타입 객체의 프로퍼티를 인스턴스에서 참조할 수 있는 상황을 가리켜 인스턴스가 프로토타입 객체를 상속하고있다 라고 한다. 앞에서 언급한 생성자 안에서 this뒤에 메서드를 정의할 때 생기는 문제를 다음과 같은 코드로 해결할 수 있다.

모든 인스턴스는 area 메서드를 소유하지 않지만 프로토타입 객체의 area 메서드를 사용할 수 있다.

// Circle 생성자
function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
}
// Circle 생성자의 prototype 프로퍼티에 area 메서드를 추가
Circle.prototype.area = function () {
  return Math.PI * this.radius * this.radius;
};
// Circle 생성자로 인스턴스 생성
var c1 = new Circle({ x: 0, y: 0 }, 2.0);
var c2 = new Circle({ x: 0, y: 1 }, 3.0);
var c3 = new Circle({ x: 1, y: 0 }, 1.0);

어떤 수 X가 주어졌을 때, X의 모든 자리수가 역순이 된 수를 얻을 수 있다. Rev(X)를 X의 모든 자리수를 역순으로 만드는 함수라고 하자. 예를 들어, X=123일 때, Rev(X) = 321이다. 그리고, X=100일 때, Rev(X) = 1이다.
두 양의 정수 X와 Y가 주어졌을 때, Rev(Rev(X) + Rev(Y))를 구하는 프로그램을 작성하시오

입력

첫째 줄에 수 X와 Y가 주어진다. X와 Y는 1,000보다 작거나 같은 자연수이다.

출력

첫째 줄에 문제의 정답을 출력한다.

예제 입력1

123 100

예제 출력1

223

코드

require("readline")
  .createInterface(process.stdin, process.stdout)
  .on("line", (line) => {
    main(line);
  })
  .on("close", () => process.exit());

const reverseString = (el) => {
  let newString = "";
  for (let i = el.length - 1; i >= 0; i--) {
    newString += el[i];
  }
  return newString;
};

const main = (line) => {
  const numbers = line.split(" ").map(reverseString).map(Number);
  const sum = numbers.reduce((acc, cur) => (acc += cur));
  const result = reverseString(String(sum));
  console.log(Number(result));
};

10.1.0 자바스크립트 배열 선언

자바스크립트에서 배열을 만드는 방법은 크게 2가지가 있다.

• 배열 리터럴 대괄호[]를 사용하여 만드는 방법
• Array() 생성자 함수로 배열을 생성하는 방법

배열 리터럴 대괄호[]를 사용

// 빈 배열 생성
var arr = [];

arr[0] = "zero";
arr[1] = "one";
arr[2] = "two";

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // zero
  // one
  // two
}

// 초기값 할당 배열
var arr = ["zero", "one", "tow"];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // zero
  // one
  // two
}

// 배열 생성 (배열 크기 지정)
// 쉼표 개수만큼 크기가 지정됨
var arr = [, , ,];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // undefined
  // undefined
  // undefined
}

Array() 생성자 함수로 배열을 생성하는 방법

// 배열 생성 (빈 배열)
var arr = new Array();

arr[0] = "zero";
arr[1] = "one";
arr[2] = "tow";

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // zero
  // one
  // two
}

// 배열 생성 (초기 값 할당)
var arr = new Array("zero", "one", "tow");

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // zero
  // one
  // two
}

// 배열 생성 (배열 크기 지정)
// 원소가 1개이고 숫자인 경우 배열 크기로 사용됨
var arr = new Array(3);

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  // undefined
  // undefined
  // undefined
}

다른 언어와의 다른 점 2가지

• 배열 내부의 데이터 타입이 서로 다를 수 있다.
• 배열 크기는 동적으로 변경될 수 있다.

// 서로 다른 데이터 타입을 담을 수 있다
var arr = [1234, "test", true];

// 배열의 크기를 임의로 변경( 3 -> 5 )
// arr[3], arr[4]는 값이 할당 되지 않았기 때문에 undefined
arr.length = 5;

// 새로운 배열을 추가하면 크기는 자동으로 변경 ( 5 -> 6 )
arr[5] = "apple";

// 새로운 배열 추가로 크기 변경 ( 6 -> 7 )
arr.push("banana");

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  /* 1234
    test
    true
    undefined
    undefined
    apple
    banana */
}

10.1.1 Array.prototype의 메서드 목록

• 수정 메서드 : 원본 배열을 바로 수정한다.
• 접근자 메서드 : 배열을 다른 형태로 가공한 새로운 배열을 반환 (원본 배열은 수정 X)
• 반복 메서드 : 원본 배열의 모든 요소를 순회하며 특정한 작업 수행

10.1.2 수정 메서드

push 메서드

var a = ["A", "B", "C"];
a.push("D"); // ["A","B","C","D"] 반환값 = 4
a.push("E", "F"); // ["A","B","C","D","E","F"]

pop 메서드

var a = ["A", "B", "C"];
a.push(); // ["A","B"] 반환값 = "C"

shift 메서드

var a = ["A", "B", "C"];
a.shift(); // ["B","C"] 반환값 = "A"

unshift 메서드

var a = ["A", "B", "C"];
a.shift("X"); // ["X","A","B","C"] 반환값 = 4
a.shift("Y", "Z"); // ["Y","Z","X","A","B","C"];

splice 메서드
첫번째 인수 : 배열을 수정하기 시작할 위치를 가리키는 인덱스
두번째 인수 : 배열에서 삭제할 요소의 개수
세번째 이후의 인수 : 배열에 삽입할 요소의 값을 쉼표로 구분해서 넘김

var a = ["A", "B", "C", "D"];
a.splice(1, 2, "X", "Y", "Z"); // ["A", "X", "Y", "Z", "D"]; 반환값 = ["B","C"]

// 첫번째 인수만 넘길 시
var a = ["A", "B", "C", "D"];
a.splice(2); // ["A","B"]; 반환값 = ["C","D"]

// 첫번째 인수가 음수일 시
var a = ["A", "B", "C", "D", "E", "F"];
a.splice(-1); // ["A","B","C"]; 반환값 = ["D"]

// 두번째 인수가 0일 시
var a = ["A", "B", "C", "D"];
a.splice(1, 0, "X", "Y"); // ["A","X","Y","B","C","D"] 반환값 = []

sort 메서드

var a = [5, 2, 7, 1, 3, 9, 8];
a.sort(function (a, b) {
  return a - b;
  // function(a,b) < 0 이면 a를 b보다 작은 인덱스로 정렬
  // function(a,b) == 0 이면 순서를 바꾸지 않는다
  // function(a,b) > 0 이면 b를 a보다 작은 인덱스로 정렬
}); // [1,2,3,5,7,8,9]

// 객체 배열을 특정 프로퍼티의 값으로 정렬하기
function compaireFunc(key) {
  return function (a, b) {
    return a[key] - b[key];
  };
}
var persons = [
  { name: "Tom", age: 17 },
  { name: "Huck", age: 18 },
  { name: "Becky", age: 16 },
];
persons.sort(compaireFunc("age"));
/*[
  { name: 'Becky', age: 16 },
  { name: 'Tom', age: 17 },
  { name: 'Huck', age: 18 }
]*/

10.1.3 접근자 메서드

접근자 메서드는 배열을 다른 모습으로 가공한 새로운 배열을 반환한다.

join 메서드

var a = ["A", "B", "C"];
a.join("-"); // "A-B-C"
a.join(""); // "ABC"

concat 메서드 concatenate의 줄임말로 "연결하다"라는 단어의 줄임말

var a = ["A", "B", "C"];
a.concat(["D", "E"]); // ["A","B","C","D","E"]

a.concat(["D", "E"], ["F", "G"]); // ["A","B","C","D","E","F","G"]

a.concat(1, "X", true); // ["A","B","C",1,"X",true]

a.concat("D", ["E", ["F", "G"]]); // ["A","B","C","D","E",["F","G"]]

slice 메서드

• 첫 번째 인수 : 요소를 꺼낼 시작 위치를 뜻하는 인덱스
• 두 번째 인수 : 요소를 꺼낼 마지막 위치를 뜻하는 인덱스

var a = ["A", "B", "C", "D", "E"];
a.slice(1, 3); // ["B","C"]

// 두번째 인수 생략 시
a.slice(3); // ["D","E"]

// 인수가 음수일 시
a.slice(1, -1); // ["B","C","D"]
a.slice(-3, -2); // ["C"]

indexOf와 lastIndexOf 메서드 인수로 지정한 값을 검색해서 찾은 요소를 반환한다. 찾지 못했을 때는 -1 반환

• 첫 번째 인수 : 검색할 값
• 두 번째 인수 : 검색을 시작할 인덱스 값

var a = ["A", "B", "C", "C", "E"];
// 가장 작은 인덱스 부터 검색
a.indexOf("C"); // 2

// 가장 큰 인덱스 부터 검색
a.lastIndex("C"); // 3

// 두 번째 인수로 검색을 시작할 인덱스를 넘기는 예
a.indexOf("C", 3); // 3

toString과 toLocaleString 메서드 배열 요소를 쉼표로 구분한 문자열로 반환, toLocaleString 메서드는 해당 지역에 맞는 언어로 번역한 문자열 반환

["A", "B", "C", date].toString();
[1, 2, 3, date].toString();
[1, [2, 3], date].toString();

var date = new Date();
console.log(["A", "B", "C", date].toString()); // "A,B,C, Wed Jan ~~~ "
console.log(["A", "B", "C", date].toLocaleString()); // "A,B,C, 2021.05.05 오후 ~~"

10.1.4 반복 메서드

배열의 모든 요소를 순회하며 조건을 만족하는 요소를 가져올 때 사용
반복 메서드 공통적인 성질

• 반복 메서드의 인수로 전달한 함수는 배열의 요소마다 호출됨
• 첫번째 인수로 함수를 받고 이 함수는 세 개의 인자를 받는다.

  첫번째 인수 : 현재 처리하고 있는 배열 요소의 값
  두번째 인수 : 현재 처리하고 있는 배열 요소의 인덱스
  세번째 인수 : 메서드가 적용되는 배열의 참조

forEach 메서드

var a = [1, 2, 3, 4, 5];
var sum = 0;
a.forEach(function (value) {
  sum += value;
});
console.log(sum); // 15

a.forEach(function (value, index, array) {
  array[index] = value * value;
});
console.log(a);

map 메서드 인수로 받은 함수를 배열의 요소별로 한 번씩 실행하며, 마지막에는 그 함수가 반환한 값으로 새로운 배열을 생성한다.

var a = [1, 2, 3, 4, 5];
var b = a.map(function (x) {
  return 2 * x; // b = [2,4,6,8,10]
});

// 객체 배열의 요소를 순회
var persons = [
  { name: "Tom", age: 17 },
  { name: "Huck", age: 18 },
  { name: "Becky", age: 16 },
];
var names = persons.map((person) => person.name);
var ages = persons.map((person) => person.age);
console.log(names); // [ 'Tom', 'Huck', 'Becky' ]
console.log(ages); // [ 17, 18, 16 ]

reduce 메서드 배열의 첫 번재 요소부터 마지막 요소까지의 합성 곱을 처리한다.
합성 곱이란 배열 요소 하나를 함수로 처리한 후에 그 반환값을 다음 번 요소를 처리할 때 함수의 입력 값으로 사용하는 처리 방법

reduce 메서드 인수

callback : 합성 곱을 하는 함수
initial : callback이 처음 호출되었을 때의 첫 번째 인수 (생략 가능)

callback 함수 인수

prev : 이전 요소를 처리한 함수의 반환값 or initial or 첫 번재 요소의 값
value : 현재 처리하는 배열 요소의 값
index : 현재 처리하는 배열 요소의 인덱스
array : 메서드를 적용 중인 배열의 참조

initial 지정 여부에 따라 callback 인수 값들이 바뀜

initial 지정 : prev는 initial의 값, value는 배열의 첫 번째 요소, index는 0
initial 지정 X : prev는 배열의 첫 번째 요소의 값, value는 배열의 두 번째 요소 값, index는 1

// 배열 요소의 합
var a = [1, 2, 3, 4, 5];
a.reduce(function (prev, value) {
  return prev + value;
}, 0); // 15 (initial 지정)
a.reduce(function (prev, value) {
  return prev + value;
}); // 15 (initial 지정 X)



// 배열 요소의 곱과 최댓값
var a = [1, 2, 3, 4, 5];
a.reduce(function (prev, value) {
  return prev * value;  // 120 (배열 곱)
}, 1);

a.reduce(function(prev, value) {
  return (prev>value ? prev:value); // 5 (배열의 최댓값)
}

// 배열 안의 모든 순열 목록 구하기
function perm(a) {
  // 순열 목록(list)을 각 순열의 요소(element)로 추가하면서 갱신해 나간다
  return a.reduce(
    function (list, element) {
      var newlist = []; // 새로운 순열 목록 저장하는 배열

      // 각 순열(seq)별로 처리
      list.forEach(function (seq) {
        // seq 배열 끝에서 두번째, 앞에서 두번째 요소에 이르기까지 차례로 element 삽입
        // 그 후 newlist에 추가
        for (var i = seq.length; i >= 0; i--) {
          var newseq = [].concat(seq);
          newseq.splice(i, 0, element); // newseq의 i번째 요소 앞에 element 삽입
          newlist.push(newseq); // newseq을 newlist의 끝에 추가
        }
      });
      return newlist;
    },
    [[]] // 초깃값 (빈 배열이 저장된 배열)
  );
}
var a = [1, 2, 3];
perm(a).forEach(function (v) {
  console.log(v);
});
/*
[ 1, 2, 3 ]
[ 1, 3, 2 ]
[ 3, 1, 2 ]
[ 2, 1, 3 ]
[ 2, 3, 1 ]
[ 3, 2, 1 ]
*/

10.2 다차원 배열👊

배열에 배열을 중첩하여 다차원 배열과 비슷한 기능을 구현할 수 있다.

10.2.1 2차원 배열의 생성

// 2차원 배열을 생성
var x = new Array(3);
for (var i = 0; i < 3; i++) {
  x[i] = new Array(3);
}

// 2차원 배열에 값을 대입
for (var count = 1, i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    x[i][j] = count++;
  }
  ("\n");
}
console.log(x);

// 배열 리터럴
var x = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

크기가 3x3인 모든 마방진 구하기

function perm(a) {
  // 순열 목록(list)을 각 순열의 요소(element)로 추가하면서 갱신해 나간다
  return a.reduce(
    function (list, element) {
      var newlist = []; // 새로운 순열 목록 저장하는 배열

      // 각 순열(seq)별로 처리
      list.forEach(function (seq) {
        // seq 배열 끝에서 두번째, 앞에서 두번째 요소에 이르기까지 차례로 element 삽입
        // 그 후 newlist에 추가
        for (var i = seq.length; i >= 0; i--) {
          var newseq = [].concat(seq);
          newseq.splice(i, 0, element); // newseq의 i번째 요소 앞에 element 삽입
          newlist.push(newseq); // newseq을 newlist의 끝에 추가
        }
      });
      return newlist;
    },
    [[]] // 초깃값 (빈 배열이 저장된 배열)
  );
}

var N = 3;
// 1부터 N*N의 요소를 가진 배열 a를 생성
for (var i = 1, a = []; i <= N * N; i++) {
  a = a.concat(i);
}
// N*N인 2차원 배열 생성
var m = new Array(N);
for (var i = 0; i < N; i++) {
  m[i] = new Array(N);
}
// a의 순열을 생성하고 각각의 순열 p로 2차원 배열 m을 만든다. 그리고 마방진인지 판정
perm(a).forEach(function (p) {
  for (var i = 0, index = 0; i < N; i++) {
    for (var j = 0; j < N; j++) {
      m[i][j] = p[index++];
    }
  }
  // 마방진이면 출력
  if (isMagicSquare(m)) {
    m.forEach(function (v) {
      console.log(v);
    });
    console.log("------");
  }
});
// 마방진인지 판정
function isMagicSquare(m) {
  var n = m.length;
  var isMagic = (n * (n * n + 1)) / 2; // 행, 열, 대각선의 합이 이 값일 경우 마방진
  var sumR = 0; // 오른쪽 대각선 방향 합
  var sumL = 0; // 왼쪽 대각선 방향 합

  for (var i = 0; i < n; i++) {
    var sumRow = 0;
    var sumColumn = 0;
    for (var j = 0; j < n; j++) {
      sumRow += m[i][j];
      sumColumn += m[j][i];
    }
    if (sumRow != isMagic || sumColumn != isMagic) return false;
    sumR += m[i][i];
    sumL += m[i][n - i - 1];
  }
  if (sumR != isMagic || sumL != isMagic) return false;
  return true;
}
/*
[ 6, 1, 8 ]
[ 7, 5, 3 ]
[ 2, 9, 4 ]
------
[ 8, 1, 6 ]
[ 3, 5, 7 ]
[ 4, 9, 2 ]
------
[ 8, 3, 4 ]
[ 1, 5, 9 ]
[ 6, 7, 2 ]
------
[ 4, 3, 8 ]
[ 9, 5, 1 ]
[ 2, 7, 6 ]
------
[ 6, 7, 2 ]
[ 1, 5, 9 ]
[ 8, 3, 4 ]
------
[ 2, 7, 6 ]
[ 9, 5, 1 ]
[ 4, 3, 8 ]
------
[ 2, 9, 4 ]
[ 7, 5, 3 ]
[ 6, 1, 8 ]
------
[ 4, 9, 2 ]
[ 3, 5, 7 ]
[ 8, 1, 6 ]
*/

10.2.2 다차원 배열의 생성

3차원 배열은 중첩된 배열의 배열로 표기해서 만들 수 있다.

// 3차원 배열 생성
var x = new Array(3);
for (var i = 0; i < 3; i++) {
  x[i] = new Array(3);
  for (var j = 0; j < 3; j++) {
    x[i][j] = new Array(3);
  }
}
// 3차원 배열에 값 대입
for (var count = 1, i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    x[i][j] = count++;
  }
}

10.3 유사 배열 객체👊

10.3.1 유사 배열 객체

자바스크립트에서 배열이란 곧 Array 타입의 객체를 말한다. Array 타입의 객체는 다음과 같은 성질이 있다.

1. 0 이상의 정수 값을 프로퍼티 이름으로 갖는다.
2. length 프로퍼티가 있으며 그에 따라 배열 크기가 변한다.
3. 프로토타입이 Array.prototype 이므로 Array.prototype의 메서드를 상속받아서 사용 가능하다.

이런 성질 중에서 프로퍼티 이름이 0 이상의 정수이며 length 프로퍼티가 있는 객체는 대부분 배열로 다룰 수 있다. 이러한 객체를 유사 배열 객체라고 한다.

유사 배열 객체는 다음과 같은 방법으로 생성가능하다.

// 유사 배열 객체를 생성해서 값을 대입
var a = {};
for (var i = 0; i < 10; i++) {
  a[i] = i;
}
a.length = 10;

// 유사배열 객체 요소의 합을 구한다.
for (var i = 0, sum = 0; i < a.length; i++) sum += a[i];
console.log(sum);

유사배열 객체는 배열로 참조하거나 대입할 수 있고 for, for/in 문으로 반복처리가 가능하다. 그러나 요소의 추가와 삭제 또는 length 프로퍼티 값 등 배열처럼 동작하지는 않는다.

10.3.2 Array.prototype 메서드를 유사 배열 객체에서 사용하기

유사 배열 객체는 Array.prototype의 메서드를 직접 사용할 수 없지만 Function.prototype.call 메서드로 간접호출하여 사용할 수 있다.

var a = { 0: "A", 1: "B", 2: "C", length: 3 };
Array.prototype.join.call(a, ","); // -> "A,B,C"
Array.prototype.push.call(a, "D"); // -> "{0:"A", 1:"B", 2:"C", 3:"D", length:4}
Array.prototype.slice.call(a, 0); // -> ["A","B","C","D"] 진짜 배열로 변환

var a = { 0: 1, 1: 2, 2: 3, length: 3 };
Array.prototype.map.call(a, function (v) {
  return v * v;
}); // [1,4,9]

var a = { 0: 1, 1: 2, 2: 3, length: 3 };
Array.prototype.concat.call(a, ["D", "E"]);
// -> [{0:"A", 1:"B", 2:"C", length:3}, "D","E"]

10.4 ES6 배열과 새롭게 추가된 기능👊

10.4.1 비구조화 할당

비구조화 할당은 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장이다.

배열의 비구조화 할당

1. 기본적인 사용법
   

var [a, b] = [1, 2]; // a = 1, b = 2 와 같음
[a, b] = [2 * a, 3 * b]; // a = 2*a, b = 3*b
[a, b] = [b, a]; // a 와 b 값을 교환
[a, b, c] = [1, 2]; // a = 1, b = 2, c = undefined
[a, b] = [1, 2, 3]; // a = 1, b = 2, 3은 무시됨
[, a, , b] = [1, 2, 3, 4]; // a = 2, b = 4와 같음

var array, first, second;
array = [first, second] = [1, 2, 3, 4];
// first = 1, second = 2, array = [1,2,3,4]와 같음

2. 나머지 요소
   

[a, b, ...rest] = [1, 2, 3, 4]; // a = 2, b = 2, rest = [3,4];

3. 요소의 기본값
   

[a = 0, b = 1, c = 2] = [1, 2]; // a = 1, b = 2, c = 2 와 같음

4. 함수가 배열로 반환한 값을 비구조화 할당받기
   

function rotation(x, y, theta) {
  var s = Math.sin(theta),
    c = Math.cos(theta);
  return [c * x - s * y, s * x + c * y];
}
var [a, b] = rotation(1, 2, Math.PI / 3);

객체의 비구조화 할당
위의 배열처럼 객체도 비구조화 할당 할 수 있다. (배열이냐 객체냐의 문제라 생략하도록 하겠다.😅)

반복 가능한 객체의 비구조화 할당

var [a,b,c] = "ABC";  // a = "A", b = "B", c = "C";
function* createNumbers(from, to) {
  while(from <= to) yield from++;
}
var [a,b,c,d,e] = createNumbers(10,15);
// a = 10, b = 11, c = 12, d = 13, e = 14

중첩된 자료 구조의 비구조화 할당

var [a,[b,c]] = [1,[2,3]];  // var a = 1, b = 2, c = 3;
var {a:x, b : {c:y, d:z}} = {a:1, b:{c:2,d:3}}; // x = 1, y = 2, z = 3

10.4.2 전개 연산자

...은 전개 연산자라고 한다. 전개 연산자는 반복 가능한 객체를 반환하는 표현식 앞에 표기하며, 이를 통해 반복 가능한 객체를 배열 리터럴 또는 함수의 인수 목록으로 펼칠 수 있다.

var a = [..."ABC"];   // a -> ["A","B","C"]
f(..."ABC")           // f("A","B","C")

var a = ["A","B","C"];
a.push(...["D","E"]);   // ["A","B","C","D","E"];

var a = [5,2,3,6,1];
Math.max(...a);       // 6

정수 X에 사용할 수 있는 연산은 다음과 같이 세 가지 이다.

1. X가 3으로 나누어 떨어지면, 3으로 나눈다.
2. X가 2로 나누어 떨어지면, 2로 나눈다.
3. 1을 뺀다.
   정수 N이 주어졌을 때, 위와 같은 연산 세 개를 적절히 사용해서 1을 만들려고 한다. 연산을 사용하는 횟수의 최솟값을 출력하시오.

입력

첫째 줄에 1보다 크거나 같고, 10^6보다 작거나 같은 정수 N이 주어진다.

출력

첫째 줄에 연산을 하는 횟수의 최솟값을 출력한다.

예제 입력1

2

예제 출력1

1

예제 입력2

10

예제 출력2

3

코드

** ✔ 이전에 구했던 값들을 배열에 계속 저장함으로써 구했던 값들에 +1을 하는 방식으로 구한다.**

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.on("line", function (line) {
  const num = Number(line); // 배열 크기를 만들기 위해 입력 받은 값 숫자로 형변환
  const arr = new Array(num + 1).fill(0); // 입력받은 크기만큼 배열 공간 만들고 0으로 초기화

  for (let i = 2; i <= num; i++) {
    arr[i] = arr[i - 1] + 1; // arr[2]에 1대입

    if (i % 2 === 0) {
      // i가 2로 나누어 떨어지면
      arr[i] = Math.min(arr[i], arr[i / 2] + 1); // 위에서 대입한  1(arr[i])과 0(arr[2/2]+1)을 비교해서 작은 값을 arr[2]에 대입
    }

    if (i % 3 === 0) {
      // i가 3으로 나누어 떨어지면
      arr[i] = Math.min(arr[i], arr[i / 3] + 1); // 위의 코드와 마찬가지 (3으로 나누어졌던 과거 숫자들을 찾아야되므로 i/3)
    }
  }
  console.log(arr[num]);
}).on("close", function () {
  process.exit();
});

계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. <그림 1>과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점수를 얻게 된다. 예를 들어 <그림 2>와 같이 시작점에서부터 첫 번째, 두 번째, 네 번째, 여섯 번째 계단을 밟아 도착점에 도달하면 총 점수는 10 + 20 + 25 + 20 = 75점이 된다. 계단 오르는 데는 다음과 같은 규칙이 있다.

• 계단은 한 번에 한 계단씩 또는 두 계단씩 오를 수 있다. 즉, 한 계단을 밟으면서 이어서 다음 계단이나, 다음 다음 계단으로 오를 수 있다.
• 연속된 세 개의 계단을 모두 밟아서는 안 된다. 단, 시작점은 계단에 포함되지 않는다.
• 마지막 도착 계단은 반드시 밟아야 한다.
  따라서 첫 번째 계단을 밟고 이어 두 번째 계단이나, 세 번째 계단으로 오를 수 있다. 하지만, 첫 번째 계단을 밟고 이어 네 번째 계단으로 올라가거나, 첫 번째, 두 번째, 세 번째 계단을 연속해서 모두 밟을 수는 없다.
  각 계단에 쓰여 있는 점수가 주어질 때 이 게임에서 얻을 수 있는 총 점수의 최댓값을 구하는 프로그램을 작성하시오.

입력

입력의 첫째 줄에 계단의 개수가 주어진다.

둘째 줄부터 한 줄에 하나씩 제일 아래에 놓인 계단부터 순서대로 각 계단에 쓰여 있는 점수가 주어진다. 계단의 개수는 300이하의 자연수이고, 계단에 쓰여 있는 점수는 10,000이하의 자연수이다.

출력

첫째 줄에 계단 오르기 게임에서 얻을 수 있는 총 점수의 최댓값을 출력한다.

예제 입력1

6 10 20 15 25 10 20

예제 출력1

75

코드

** ✔ 계단을 오르면서 밟아 올라왔던 계단들의 수들을 합하며 올라오는 것이 핵심이다. dp[0]은 첫번째 계단이므로 올라온 계단이 없기 때문에 arr[0]은 dp[0]이다. dp[1]은 두번째 계단이고 첫번째 계단과 두번째 계단을 합친 수와 두번째 계단을 비교해서 큰 수를 대입한다. dp[2]은 세번째 계단이고 첫번째, 세번째 이렇게 밟는 방법과 두번째, 세번째 밟는 방법 두 가지를 비교해서 큰 수를 대입한다. 이렇게 전에 올라왔던 계단들을 비교하고 더하면서 마지막 계단인 dp[stairs-1]를 구할 수 있다.**

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let arr = []; // 입력받는 공간

rl.on("line", (line) => arr.push(line)).on("close", () => {
  const stairs = parseInt(arr.shift()); // arr에 입력한 첫번째 인덱스값 stairs 에 저장 (stairs = 계단의 총 길이)
  arr = arr.map(Number); // arr에 있는 요소들 숫자로 형변환

  dp = Array(301);
  dp[0] = arr[0]; // 첫번째 계단은 고정
  dp[1] = Math.max(arr[0] + arr[1], arr[1]); // (첫번째 + 두번째)계단과 두번째 계단을 비교해서 큰 값을 dp배열에 삽입
  dp[2] = Math.max(arr[1] + arr[2], arr[0] + arr[2]); // (두번째 + 세번째)계단과 (첫번째 + 세번째)계단을 비교해서 큰 값을 dp배열에 삽입

  for (let i = 3; i < stairs; i++) {
    dp[i] = Math.max(arr[i] + dp[i - 2], arr[i] + arr[i - 1] + dp[i - 3]); // 네번째 계단부터는 위에 했던 방식대로 loop 돌림
  }
  console.log(stairs);
  console.log(dp[stairs - 1]);
});

4.1.1 객체

객체는 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것이다.

이름	값
suit	"하트"
rank	"A"

객체에 포함된 데이터 하나(이름과 값의 쌍) 를 가리켜 객체의 프로퍼티라고 부른다. 프로퍼티의 이름 부분 (suit, rank)는 프로퍼티 이름 또는 키라고 부른다.

4.1.2 객체 리터럴로 객체 생성

// 객체 생성
var card = { suit: "하트", rank: "A" };

// 객체 안의 프로퍼티 값을 읽거나 사용 할 때
card.suit; // -> 하트
card["rank"]; // -> A

// 객체에 없는 프로퍼티를 읽을 때
card.color; // -> undefined

// 빈 객체 생성
var obj = {};
console.log(obj); // -> Object{}

프로퍼티 이름과 값은 콜론 :으로 구분하며 중괄호({}) 안에 있는 프로퍼티들은 쉼표 ,로 구분한다. 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표 . 또는 대괄호 []를 사용한다. 객체에 없는 프로퍼티를 읽으려고 시도하면 undefined를 반환하고 객체 리터럴 안에 프로퍼티를 작성하지 않으면 빈 객체가 생성된다.

4.1.3 프로퍼티 추가와 삭제

// 새로운 프로퍼티 추가
card.value = 14;
console.log(card); // -> Object {suit : "하트", rank : "A", value : 14}

// delete 연산자로 프로퍼티 삭제
delete card.rank;
console.log(card); // -> Object {suit : "하트", value : 14}

위의 코드처럼 자바스크립트의 객체는 실행 중에 프로퍼티를 자유롭게 추가하거나 삭제 가능하다.

4.1.4 in 연산자로 프로퍼티가 있는지 확인

in 연산자로 특정 프로퍼티가 객체 안에 있는지 확인가능하다. 객체 안에 포함되어 있다면 true를 반환, 포함되지 않았다면 false를 반환한다.

var card = { suit: "하트", rank: "A" };
console.log("suit" in card); // -> true
console.log("color" in card); // -> false

4.1.5 객체 리터럴 예제

var p = { x: 1.0, y: 2.5 };

var circle = {
  center: { x: 1.0, y: 2.0 },
  radius: 2.5,
};

circle.center.x; // -> 1.0

객체의 프로퍼티 값으로 객체를 대입할 수도 있다. (마침표 뒤에 프로퍼티 이름을 연결)

4.1.6 객체는 참조 타입

객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 참조 (메모리에서의 위치 정보)가 저장된다. 이때 변수 상태를 가리켜 그 객체를 참조하고 있다 라고 한다. 다음 코드를 보자

// 위에서 만든 card 객체를 a 에 대입
var a = card;

// a 가 card 객체를 참조하게 되므로 읽거나 수정할 수 있다.
console.log(a.suit); // -> 하트
a.suit = "스페이드";
console.log(a.suit); // -> 스페이드
console.log(card.suit); // -> 스페이드

4.2 함수의 기초👊

8장에 자세히 나와있지만 기초를 다지기 위해 훑어보자

4.2.1 함수

일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것이다. 함수의 입력 값을 인수 라고 부르고 함수의 출력 값을 반환값 이라고 부른다.

4.2.2 함수 선언문으로 함수 정의하기

function square(x) {
  return x * x;
}

return 문이 실행되면 제어권이 함수를 호출한 코드로 되돌아가고, return 문에 지정된 값은 함수의 반환값이 된다.

4.2.3 함수 이름

함수 이름만 잘 붙혀도 그 함수가 어떤 일을 하는지 알 수 있고 가독성과 유지 보수성이 크게 높아진다. 함수 이름은 일반적으로 동사 또는 동사로 시작되는 어휘로 시작한다. 캐멀 표기법 또는 밑줄 표기법을 사용한다.

function saveImage(img) {...}
function load_file() {...}

4.2.4 함수 호출

함수 이름 뒤에 소괄호로 인수를 묶어 입력한다.

square(3);

함수를 호출할 때 전달하는 값(3)을 인수 (argument), 함수 정의문의 인수를 인자 (parameter) 라고 한다.

4.2.5 인수

함수는 인수를 여러 개를 쉼표 ,로 구분하여 받을 수 있다.

// 인수 여러 개 받기
function dist(p,q) {
    var dx = q.x - p.x;
    var dy = q.y - p.y;
}

var p1 = {x:1, y:1},
var p2 = {x:4, y:5},
var d = dist(p1,p2);

// 인수가 없을 때
var bark = function() {console.log("Wow");};
bark(); // -> "Wow"

4.2.6 함수 선언문의 끌어올림

자바스크립트의 함수 선언문은 프로그램의 어떤 위치에도 작성할 수 있다. 함수를 실행한 후 함수를 정의해도 문제 없이 동작한다.

console.log(square(5)); // -> 25
function square(x) {
  return x * x;
}

4.2.7 값으로서의 함수

자바스크립트에서는 함수가 객체이다. 즉 변수에 함수를 할당하고 그 변수 이름으로 함수를 실행할 수 있다.

var sq = square;
console.log(square(5)); // -> 25

4.2.8 참조에 의한 호출과 값에 의한 호출

function add1(x) {
  return (x = x + 1);
}
var a = 3;
var b = add1(a);
console.log("a = " + a + ", b = " + b); // -> a = 3, b = 4

// 인수가 객체일 때
function add1(p) {
  p.x = p.x + 1;
  p.y = p.y + 1;
  return p;
}
var a = { x: 3, y: 4 };
var b = add1(a);
console.log(a, b); // -> Object {x = 4, y = 5} Object {x = 4, y = 5}

add1은 전달받은 인수에 1을 더하여 반환하는 함수이다. 이 함수가 호출될 떄 변수 a의 복사본이 인자 x에 할당된다. 즉, 인수에 원시 값을 넘기면 그 값 자체가 인자에 전달된다. 이를 가리켜 값의 전달 이라고 부른다. 이때 변수 a 와 x 는 다른 영역의 메모리에 위치한 별개의 변수이기 때문에 x 값을 바꾸더라도 a 값은 바뀌지 않는다.

인수 여러 개를 우아하게 전달하는 방법
함수에 넘겨야 하는 인수 개수가 많아지면 다음과 같은 문제가 발생한다.

• 인수의 순서를 착각하기 쉽다.
• 함수가 받는 인수 개수를 바꾸면 함수의 호출 방법이 바뀌므로 프로그램 전체를 수정해야 한다.

객체의 프로퍼티에 인수를 담아서 넘기면 이러한 문제를 해결 할 수 있다.

// 인자가 많은 함수
function setBallProperties(x,y,vx,vy,radius) {...}
...
setBallProperties(0,0,10,15,5);

// 객체의 프로퍼티에 인수를 담아서 해결
var parameters = {
    x : 0,
    y : 0,
    vx : 10,
    vy : 15,
    radius : 5
}
function setBallProperties(parameters) {...}
...
setBallProperties(parameters);

4.2.9 변수의 유효 범위

전역 유효 범위와 지역 유효 범위
변수에 접근할 수 있는 범위를 그 변수의 유효 범위 라고 한다. 자바스크립트 변수는 변수의 유효 범위에 따라 전역 변수 와 지역 변수로 나뉜다.
전역 변수는 함수 바깥에서 선언된 변수이고 유효 범위가 전체 프로그램이다. 반대로 지역 변수는 함수 안에서 선언된 변수이고 유효 범위는 함수 내부이다.

변수의 충돌
변수에 유효 범위가 있는 이유는 프로그램의 다른 부분에서 이름이 같은 변수끼리 충돌하지 않도록 하기 위해서다. 다른 함수 내부에서 각각의 지역 변수로 선언된 변수는 함수 내에서만 유효하므로 충돌하지 않는다. 하지만 전역 변수는 이름이 같으면 충돌하기 때문에 주의해야 한다.

함수 안에서의 변수 선언과 변수 끌어올림
함수 중간 부분에서 변수를 선언하더라도 변수는 함수 첫 머리에서 선언된 것처럼 함수 안의 다른 문장보다 먼저 선언된다

function f() {
  console.log(a); // -> undefined
  var a = "local";
  console.log(a); // -> local
  return a;
}

함수 안에서의 변수 선언 생략
변수를 선언하지 않은 상태에서 값을 대입하면 전역 변수로 선언된다.

function f() {
  a = "local";
  console.log(a); // -> local
  return a;
}
console.log(a); // -> local

4.2.10 블록 유효 범위 : let 과 const

let과 const는 ECMAScript6 부터 추가된 변수 선언자로 모두가 '블록 유효 범위'를 갖는 변수를 선언한다.

let

// 변수 선언
let x;
// 변수 동시 선언
let a, b, c;
// 선언과 동시에 초깃값 설정
let x = 5,
  y = 7;

var와 let의 가장 큰 차이점은 let으로 선언한 변수의 유효 범위가 블록 안이라는 점이다. 이러한 차이점 때문에 var보다 let을 많이 쓴다.

let x = "outer x";
{
  let x = "inner x";
  let y = "inner y";
  console.log(x); // -> inner x
  console.log(y); // -> inner y
}
console.log(x); // -> outer x
console.log(y); // -> ReferenceError : y is not defined

const
const문은 블록 유효 범위를 가지면서 한번만 할당할 수 있는 변수(상수)를 선언한다. let문으로 선언한 변수처럼 동작하지만 반드시 초기값을 설정해야 한다는 차이점이 있다.

const x = 2;
x = 5; // -> Uncaught TypeError (const문은 값을 바꿀 수 없는 상수이다)

const origin = { x: 1, y: 2 };
origin.x = 3;
console.log(origin); // -> Object {x : 3, y : 2} (상수 값이 객체나 배열이면 값을 바꿀 수 있다.)

4.2.11 함수 리터럴로 함수 정의하기

console.log(square(3)); // -> 호이스팅 X TypeError 등장
var square = function (x) {
  return x * x;
};

// 익명함수에도 이름을 붙일 수 있다.
var square = function sq(x) {
  return x * x;
};

위 코드에서는 function(x) {...} 부분이 함수 리터럴이다. 함수 리터럴은 이름이 없는 함수이므로 익명 함수 또는 무명 함수라고 부른다. 함수 리터럴을 사용할 때는 끝에 반드시 세미콜론을 붙여야 한다. 함수 선언문으로 정의한 함수는 호이스팅이 적용되지만 함수 리터럴로 정의한 함수는 호이스팅이 적용되지 않는다.

4.2.12 객체의 메서드

객체의 프로퍼티 중에서 함수 객체의 참조를 값으로 담고 있는 프로퍼티를 가리켜 메서드라고 부른다.

var circle = {
  center: { x: 1.0, y: 2.0 }, // 원의 중점을 표현하는 객체
  radius: 2.5, // 원의 반지름
  area: function () {
    // 원의 넓이를 구하는 메서드
    return Math.PI * this.radius * this.radius;
  },
};

// 원을 평행으로 이동시키는 translate 메서드 추가
circle.translate = function (a, b) {
  this.center.x = this.center.x + a;
  this.center.y = this.center.y + b;
};

// 메서드 실행
circle.translate(1, 2);
circle.center; //h -> Object {x=2, y=4}

위 코드에 return에 나오는 this는 그 함수를 메서드로 가지고 있는 객체 (위 코드에선 circle)를 가리킨다. 즉, this.radius가 circle.radius 이다. 메서드 또한 프로퍼티의 일종이므로 나중에 추가할 수 있다.

4.2.13 함수의 장점

• 재사용할 수 있다.
• 만든 프로그램을 이해하기 쉽다.
• 프로그램 수정이 간단해진다.

4.3 객체의 기초👊

4.3.1 생성자로 객체 생성하기

자바스크립트에선 C++과 Java와 달리 class가 없다. 대신 생성자라고 하는 함수로 객체를 생성할 수 있다.

function Card(suit, rank) {
  this.suit = suit;
  this.rank = rank;
}

// 생성자로 객체를 생성할 때는 "new" 연산자를 사용
var card = new Card("하트", "A");

console.log(card); // -> Card {suit: "하트", rank: "A"}

위의 코드를 실행하면 suit 프로퍼티에는 "하트", rank 프로퍼티에는 "A"라는 값이 저장된 객체가 생성되고, 마지막으로 그 객체의 참조가 변수 card에 할당된다.

생성자
위의 예처럼 new 연산자로 객체를 생성할 것이라 기대하고 만든 함수를 생성자라고 한다. 생성자의 이름은 첫글자를 대문자로 쓰는 파스칼 표기법을 사용한다. 그리고 생성자와 new 연산자로 생성한 객체를 그 생성자의 인스턴스라고 부른다.

생성자의 역할
생성자는 객체를 생성하고 초기화하는 역할을 한다. 생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 간단히 생성 할 수 있다.

var card1 = new Card("하트", "A");
var card2 = new Card("클럽", "K");
var card3 = new Card("스페이드", "2");

4.3.2 메서드를 가진 객체를 생성하는 생성자

생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면 메서드를 정의할 수 있다.

function Circle(center, radius) {
  this.center = center;
  this.radius = radius;
  this.area = function () {
    return Math.PI * this.radius * this.radius;
  };
}
var p = { x: 0, y: 0 };
var c = new Circle(p, 2.0);
console.log("넓이 = " + c.area()); // -> 넓이 12.566370614359172

4.4 객체의 기초👊

4.4.1 내장 생성자

사용자가 정의하는 생성자 외에도 자바스크립트에 내장되어있는 내장 생성자가 있다. 자주 쓰이는 내장 생성자를 알아보자

4.4.2 기타 내장 객체

객체도 마찬가지로 자바스크립트에 내장되어있는 내장 객체가 있다.

4.4.5 전역 객체

위의 표에서 소개한 전역 객체는 자바스크립트에서 매우 중요한 객체이다. 전역 객체의 프로퍼티는 프로그램의 어느 위치에서나 사용할 수 있다.

4.5 배열의 기초👊

4.5.1 배열 리터럴로 생성하기

배열 리터럴은 쉼표로 구분한 값을 대괄호[]로 묶어서 표현한다.

var evens = [2, 4, 6, 8];

// 배열 리터럴 안에 어떠한 요소도 작성하지 않으면 빈 배열이 생성
var empty = [];
console.log(empty); // -> []

// 배열 리터럴 요소의 값을 생략하면 생성되지 않는다
var a = [2, , 4];
console.log(a); // -> [2, undefined, 4]

// 변수와 마찬가지로 모든 타입의 값이 올 수 있다
var various = [3.14, "pi", true, { x: 1, y: 2 }, [2, 4, 6, 8]];

4.5.2 length 프로퍼티

배열 요소의 최대 인덱스 값 +1이 담겨 있다. 즉, 배열 길이를 구할 수 있다.

var evens = [2, 4, 6, 8];
evens.length; // -> 4

// 배열의 길이를 줄일 수 있다.
var a = [1, 2, 3, 4, 5];
a.length = 2;
console.log(a); // -> [1,2];

4.5.3 Array 생성자로 생성하기

배열을 Array 생성자로 생성할 수 있다.

var evens = new Array(2, 4, 6, 8);
var empty = new Array();
var a = new Array(2, 4);
var v = new Array(3.14, "pi", true);

// Array 생성자의 인수가 한개고 그 값이 양의 정수면 길이를 뜻한다.
var x = new Array(3);
console.log(x.length); // -> 3;

// 음수이면 오류 발생
var x = new Array(-3); // -> 에러

4.5.5 배열은 객체

Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 이용한다. 즉, 배열에 대괄호 연산자를 사용하는 것은 객체에 대괄호 연산자를 사용하는 것과 마찬가지이고, 배여르이 요소 번호로 숫자 값 대신 문자열을 사용할 수 있다.

var a = ["A", "B", "C", "D"];
console.log(a["2"]); // -> C

// 없는 배열 요소를 읽으면 undefined 반환
a[4]; // undefined

4.5.6 배열 요소의 추가와 삭제

없는 배열 요소에 값을 대입하면 새로운 요소가 추가된다.

var a = ["A", "B", "C"];
a[3] = "D";
console.log(a); // ->  ["A", "B", "C", "D"]

// push() 메서드러 추가
var a = ["A", "B", "C"];
a.push("D");
console.log(a); // ->  ["A", "B", "C", "D"]

// delete() 메서드로 삭제
delete a[1];
console.log(a); // -> ["A", undefined, "C", "D"]

8.8.1 함수는 객체

자바스크립트 함수는 Function 객체다. 다음과 같은 특징이 있다.

• 함수는 변수나 프로퍼티나 배열 요소에 대입할 수 있다.
• 함수는 함수의 인수로 사용할 수 있다.
• 함수는 함수의 반환값으로 사용할 수 있다.
• 함수는 프로퍼티와 메서드를 가질 수 있다.
• 함수는 이름 없는 리터럴로 표현 가능하다. (익명함수)
• 함수는 동적으로 생성할 수 있다.

이러한 작업이 가능한 객체를 가리켜 일급 객체 라고 하며 일급 객체인 함수는 일급 함수 라고 한다.

8.8.2 함수의 프로퍼티

함수의 프로퍼티

• caller : 현재 실행 중인 함수를 호출한 함수
• length : 함수의 인자 개수
• name : 함수를 표시할 때 사용하는 이름
• prototype : 프로토타입 객체의 참조

Function.prototype의 프로퍼티

• apply() : 선택한 this와 인수를 사용하여 함수를 호출. 인수는 배열 객체
• bind() : 선택한 this와 인수를 적용한 새로운 함수를 반환
• call() : 선택한 this와 인수를 사용하여 함수를 호출. 인수는 쉼표로 구분
• constructor : Function 생성자의 참조
• toString() : 함수의 소스 코드를 문자열로 만들어 반환

8.8.3 apply와 call 메서드

apply() 와 call() 동작은 this값과 함수의 인수를 사용하여 함수를 실행한다는 공통점이 있다. 차이점은 apply()의 인수는 배열이고, call()의 인수는 쉼표로 구분한다.

function say(greetings, honorifics) {
  console.log(`${greetings} "${honorifics} ${this.name}`);
}

var tom = { name: "Tom Sawyer" };
var becky = { name: "Becky Thatcher" };

say.apply(tom, ["Hello!", "Mr."]); // Hello! "Mr. Tom Sawyer
say.call(becky, "Hi!", "Ms."); // Hi! "Ms. Becky Thatcher

8.9 고차 함수👊

8.9.1 고차 함수

함수를 인수로 받는 함수 또는 함수를 반환하는 함수를 말한다. 고차 함수는 함수형 프로그래밍을 할 때 자주 사용한다. 그 예로는 map, filter, reduce 등이 있다.

패턴이 같은 작업을 고차 함수로 정리하는 예

digits = "";
for (var i = 0; i < 10; i++) {
  digits += i;
}
console.log(digits); // 0123456789;

randomChars = "";
for (var i = 0; i < 8; i++) {
  randomChars += String.fromCharCode(
    Math.floor(Math.random() * 26) + "a".charCodeAt(0)
  );
}
console.log(randomChars); // 무작위 알파벳 문자열

위의 두 코드는 하는 일이 다르지만 로직은 같다. 공통 부분을 고차 함수로 만들어보자

function joinString(n, f) {
  var s = "";
  for (var i = 0; i < n; i++) {
    s += f(i);
  }
  return s;
}
var digits = joinString(10, function (i) {
  return i;
});
var randomChars = joinString(8, function (i) {
  return String.fromCharCode(
    Math.floor(Math.random() * 26) + "a".charCodeAt(0)
  );
});
console.log(digits);        //0123456789
console.log(randomChars);    // 무작위 알파벳 문자열

8.9.2 메모이제이션

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다.

function memorize(f) {
  var cache = {};
  return function (x) {
    if (cache[x] == undefined) cache[x] = f(x);
    return cache[x];
  };
}

memorize 함수는 인수로 받은 함수의 실행 결과를 객체 cache 안에 저장한다. 이 덕분에 인수로 받은 함수를 같은 인수로 실행하면 실제 계산을 하는 대신 cache에 저장된 값을 반환하는 함수가 만들어진다

memorize 함수의 사용 예

// 메모이제이션 피보나치수열
function memorize(f) {
  var cache = {};
  return function (x) {
    if (cache[x] == undefined) cache[x] = f(x);
    return cache[x];
  };
}
var fibonacci = memorize(function (n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});
for (var i = 0; i <= 20; i++) {
  console.log((" " + i).slice(-2) + ":" + fibonacci(i));
}

8.9.3 함수의 합성

함수 f(x)와 g(x)가 있을 때 함수 f(g(x))의 합성 함수라고 한다.

function compose(f,g) {
    return funciton(x) {
        return f(g(x));
    };
}

var square = function(x) {
    return x*x;
}
var add1 = function(x) {
    return x+1;
}
var h = compose(square,add1);
console.log(h2));

인수 여러개도 가능

function compose(f, g) {
  return function () {
    return f.call(this, g.apply(this, arguments));
  };
}

8.9.4 부분 적용

인수를 여러 개 받는 함수의 몇몇 인수를 상수로 지정해서 새로운 함수를 생성하는 기법

function product(x, y) {
  return x * y;
}
product2 = function (y) {
  return product(2, y);
};
product(3); // 6

// bind 사용
product2 = product.bind(null, 2);

// 부분 적용된 함수를 반환하는 함수
function partial(f) {
  // 중첩 함수에서 arguments를 사용하기 위해 저장해 둠
  var args = arguments;
  return function () {
    // 외부 함수의 두 번째 인수를 변수 a에 복사
    var a = Array.prototype.slice.call(args, 1);
    for (var i = 0, j = 0; i < a.length; i++) {
      // 외부 함수의 두 번째 인수가 undefined면 이 함수의 arguments를 사용한다.
      if (a[i] == undefined) a[i] = arguments[j++];
    }
    return f.apply(this, a);
  };
}
var square = partial(Math.pow, undefined, 2);
var sqrt = partial(Math.pow, undefined, 0.5);
var cubicroot = partial(Math.pow, undefined, 1 / 3);
var exp = partial(Math.pow, Math.E, undefined);

// *arguments는 배열이 아닌 유사 배열 객체이기 때문에 Array.prototype.slice의
// call 메서드에 args를 인수로 넘겨서 호출

8.9.5 커링

인수를 두 개 이상 받는 함수를 분해하여 인수가 하나인 함수의 중첩 함수로 변환하는 작업

var pow = function (exponent) {
  return function (base) {
    return Math.pow(base, exponent);
  };
};
// 이렇게 정의한 함수 pow는 Math.pow를 커링한 것임

Math.pow(base, exponent) = pow(exponent)(base);

8.10 콜백함수👊

8.10.1 콜백함수

다른 함수에 인수로 넘겨지는 함수를 가리켜 콜백 함수 라고 한다. 15장에서 배울 이벤트 처리기 addEventListener는 콜백 함수를 쓴다.

f(g, ...) {
    ...
    function f(callback, ...) {
        ...
        callback();
        ...
    }
}

8.11 ES6부터 추가된 함수의 기능👊

8.11.1 화살표 함수 표현식으로 함수 정의하기

• var square = (x) => {return x*x; };
  기존의 함수 리터럴 정의를 화살표 함수 표현식으로
• var f = (x,y,z) => {...};
  인수가 여러 개 있으면 인수와 인수를 쉼표로 구분
• var square = x => {return x*x;}; 인수가 하나만 있으면 인수 묶는 괄호 생략
• var f = () => {...}; 인수가 없으면 인수를 묶는 괄호를 생각할 수 없다.
• var square = x => x*x; 문장이 return 뿐이면 중괄호와 return 키워드를 생각가능
• 함수의 반환값이 객체 리터럴이면 객체 리터럴을 그룹 연산자인 ()로 묶을 것 var f = (a,b) => ({x:a, y:b})

1. this의 값이 함수를 정의할 때 결정된다.

var obj = {
  say: function () {
    console.log(this); // [object Object]
    var f = function () {
      console.log(this);
    }; // [object Window]
    f();
    var g = () => console.log(this); // [object Object]
    g();
  },
};
obj.say();

함수 f는 say라는 함수의 중첩 함수이며 this의 값은 전역 객체를 가리킨다. 한편 화살표 함수 g의 this값은 함수 g를 정의한 익명 함수의 this의 값인 객체 obj를 가리킨다. 화살표 함수는 call이나 apply 메서드를 사용하여 this를 바꾸어 호출해도 this 값이 바뀌지 않는다.

2. arguments 변수가 없다.

var f = () => console.log(arguments);
f(); // ReferenceError : arguments is not defined

3. 생성자로 사용할 수 없다.

var Person = (name, age) => {
  this.name = name;
  this.age = age;
};
var tom = new Person("Tom", 17); // TypeError : Person is not a contructor

4. yield 키워드를 사용할 수 없다. 화살표 함수는 제너레이터로 사용할 수 없다. (324p 제너레이터 참고)

8.11.2 인수에 추가된 기능

나머지 매개변수
함수의 인자가 들어가는 부분에 ...을 입력하면 그만큼의 인수를 배열로 받는다.

function args(a, b, ...args) {
  console.log(a, b, args);
}
f(1, 2, 3, 4, 5, 6); // 1 2 [3,4,5,6]

인수의 기본값
함수의 인자에 대입(=) 연산자를 사용해서 기본값을 설정할수 있다.

function multiply(a, b = 1) {
  return a * b;
}
multiply(3); // 3
multiply(3, 2); // 6

8.11.3 이터레이터와 for/of 문

이터레이션
이터레이션은 반복 처리 라는 뜻으로 데이터 안의 요소를 연속적으로 꺼내는 행위

var a = [5, 4, 3];
a.forEach(function (val) {
  console.log(val);
});
// 5
// 4
// 3

이터레이터
배열은 Symbol.iterator 메서드를 가지고 있고 그 메서드는 이터레이터를 반환하는 함수이다.

var a = [5, 4, 3];
var iter = a[Symbol.iterator]();
console.log(iter.next()); // {value: 5, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 2, done: true}
console.log(iter.next()); // {value: 1, done: true}

이처럼 iter의 next 메서드를 호출할 때마다 이터레이터 리절트(iterator result)라는 객체가 반환되고 이터레이터 리절트(iterator result)는 value와 done 프로퍼티를 갖는다. next가 호출 될 때마다 value 프로퍼티에는 차례대로 꺼내진 배열 요소의 값이 저장되고 done 프로퍼티에는 요소의 열거가 끝났는지를 뜻하는 논리값이 저장된다.

반복 가능한 객체와 for/of 문

var a = [5, 4, 3];
var iter = a[Symbol.iterator]();
while (true) {
  var iteratorResult = iter.next();
  if (iteratorResult.done == true) break;
  var v = iteratorResult.value;
  console.log(v);
}
// 5
// 4
// 3

for/of 문을 사용하면 이러한 반복 처리를 자동으로 하도록 만들 수 있다.

var a = [5, 4, 3];
for (var v of a) console.log(v);

for/of 문은 a 이터레이터의 next 메서드를 순회할 때마다 매번 호출한다.
일반적으로 for/of 문은 다음 두 가지 조건을 만족하는 객체를 반복 처리 한다.

• Symbol.iterator 메서드를 가지고 있다.
• Symbol.iterator 메서드는 반환값으로 이터레이터를 반환한다.

Symbol.iterator 메서드를 가진 객체를 반복 가능(이터러블, iterable)한 객체라고 한다.

8.11.4 제너레이터

제너레이터 의 성질은 다음과 같다

• 반복 가능한 이터레이터를 값으로 반환한다.
• 작업의 일시 정지와 재시작이 가능하며 자신의 상태를 관리한다.

제너레이터 정의와 실행

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var iter = gen();
console.log(iter.next()); // Object {value:1, done:false}
console.log(iter.next()); // Object {value:2, done:false}
console.log(iter.next()); // Object {value:3, done:false}
console.log(iter.next()); // Object {value:undefined, done:true}

위의 프로그램 실행 과정을 살펴보면

1. 제너레이터 함수인 gen은 바로 실행되지 않고 이터레이터를 변수 iter에 대입한다.
2. 이터레이터의 next 메서드가 호출되면 첫 번째 yield 연산자의 위치까지 실행하고 결괏값으로 이터레이터 리절트를 반환한다. 이때 제너레이터 함수의 내부 처리는 yield 1에서 일시 정지 상태가 된다.
3. 또 다시 이터레이터 next 메서드가 호출되면 일시 정지한 위치에 있는 처리를 재개한다. 마찬가지로 value 프로퍼티와 done 프로퍼티를 가진 이터레이터를 반환하고 처리를 일시 정지 한다.
4. 3과 동일
5. 마지막 yield에 도착하고, 이터레이터 리절트인 value 프로퍼티 값 undefined와 done 프로퍼티 값인 true를 반환한다.

제너레이터에 값 넘기기

function* fibonacci() {
  var fn1 = 0,
    fn2 = 1;
  while (true) {
    var fnew = fn1 + fn2;
    fn1 = fn2;
    fn2 = fnew;
    reset = yield fn1;
    if (reset) {
      (fn1 = 0), (fn2 = 1);
    }
  }
}
var iter = fibonacci();
for (var i = 0; i < 10; i++) {
  console.log(iter.next().value); // 1,1,2,3,5 ... 55 순서대로 출력
}
console.log(iter.next().value); // 89
console.log(iter.next(true).value); // 1
console.log(iter.next().value); // 1
console.log(iter.next().value); // 2