이 글을 보는 초기 세팅에 어려움을 겪는 사람들에게 조금이나마 도움이 되고자, 내가 이번 졸업 프로젝트를 본격적으로 시작하기 전에 했던 Tailwind CSS 설치 및 초기 세팅 방법과 CRA 절대 경로 설정 방법에 대해 소개한다.

Tailwind CSS를 설치하고 세팅해보자

Tailwind CSS란?

Tailwind CSS가 생소할 사람들을 위해 간단히 Tailwind CSS에 대해 소개한다.

Tailwind CSS란 CSS 프레임워크로, 인라인 스타일을 사용하여 쉽고 빠르게 스타일링을 할 수 있으면서도 디자인 시스템만큼이나 일관된 디자인을 가능하게 해준다. styled-components 등과 같이 작은 스타일 변경에도 컴포넌트를 만들어야 하는 번거로움에 지쳤거나 매번 클래스명을 고민하는 것이 힘들었다면 이 Tailwind CSS를 적극적으로 추천한다.

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다.m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

• Utility-First: 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링

예시를 보면 좀 더 이해가 잘 될 것이다.

<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>

Tailwind CSS 설치 및 초기 세팅 방법

Tailwind CSS가 무엇인지 알았으니 이제 본격적으로 설치하고 초기 세팅하면 좋을 팁들을 알아보자.

Tailwind CSS 설치

공식 문서를 보고 설치하는 것이 가장 정확하지만 귀찮은 사람들을 위해 2024년 5월 기준 설치 방법을 소개한다.

1. 터미널에서 Tailwind CSS 설치 명령어는 아래와 같다. VSC 코드의 터미널 등에서 아래 명령어를 입력해주면 된다.

   npm install -D tailwindcss
   npx tailwindcss init

2. tailwind.config.js 파일에서 path 설정해주기

   /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
      extend: {},
    },
    plugins: [],
   }

   1번 설치 과정을 거쳤다면 프로젝트 root 폴더에 자동으로tailwind.config.js 파일이 생성되었을 것이다. 이 파일의 content 부분에 tailwind를 사용할 파일의 위치를 잘 작성해주어야 한다. 맨 뒤에 나오는 파일 확장자명은 자신의 프로젝트에 맞게 설정해주어야 하는데, 내가 진행한 프로젝트의 경우 typescript를 사용했기 때문에 아래와 같이 세팅해주었다.

   content: ["./src/**/*.{tsx, ts}"],
   

   3. 기본 CSS 파일에 @tailwind directives 추가

      main.css, index.css 등 자신의 프로젝트에 따라 기본 CSS 파일이 있을 것이다. 해당 CSS 파일의 맨 위에 아래의 내용을 추가해준다.

      @tailwind base;
      @tailwind components;
      @tailwind utilities;

Tailwind CSS 초기 세팅 방법

이 포스트 주제의 핵심 부분이다. 보다 편하게 작업을 할 수 있도록 도와주는 Tailwind CSS의 초기 세팅 방법에 대해서 소개한다.

Tailwind CSS의 장점 중 하나는 커스터마이제이션이 쉽다는 것이다. 이 장점을 활용하여 초기 세팅을 해보자.

1. 자주 쓰는 스타일링 class 정의해두기 Tailwind CSS는 클래스를 활용하여 스타일링한다고 앞서 소개했다. 미리 정의된 클래스를 이용하는 것 뿐만 아니라 내가 class를 직접 정의해서 사용할 수도 있다. 나의 경우 main.css, index.css 등 기본 CSS 파일에 커스텀 클래스를 정의해준다. 실제 프로젝트에서 정의해둔 커스텀 클래스는 아래와 같다.

   // App.css 
   ...
   
   .flex-column {
    display: flex;
    flex-direction: column;
   }
   
   .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
   }
   
   .custom-grid-template-rows {
    grid-template-rows: min-content auto;
   }
   
   .custom-grid-template-columns {
    grid-template-columns: 70px auto;
   }
   

   특히 .flex-column과 .flex-center의 경우 어떤 프로젝트에서든 아주 많이 쓰이기 때문에 꼭 정의해두는 것을 추천한다.

2. 프로젝트에서 사용되는 색상 정의하기

   tailwind.config.js 파일의 theme 섹션에서는 프로젝트의 색상 팔레트, 타입 스케일, 폰트, breakpoints, border radius values 등 다양한 스타일 정보를 커스텀하여 정의할 수 있다.

   나는 매번 색상 코드를 작성해주는 것이 귀찮아서 색상 팔레트를 정의해주었다. 그 방법은 아래와 같다.

    /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: ["./src/**/*.{tsx, ts}"],
    theme: {
      extend: {
        colors: {
          white: "#ffffff",
          black: "#000000",
          "dark-gray": "#525252",
          blue: {
            base: "#6979F8", // 기본 버튼 색상
            highlight: "#3647A7", // 클릭 시 버튼 색상
            pitch: "#A1A1FF", // 음성 듣기 및 포기하기
            "bar-1": "#D7D6FF", // 목표 음정 바
            "bar-2": "#A1C1FF", // 현재 음정 바,결과 음역대 범위 바
            "bg-bar": "#C7D3EB",
            result: "#E1E1FA",
          },
        },
      },
    },
    plugins: [],
   };
   

theme 섹션 안의 extend에 보면 색상 팔레트를 정의한 것을 확인할 수 있다. 사실 extend 안에 colors를 쓰지 않고 theme 안에 바로 colors를 작성해주어도 되지만, 이렇게 작성해준 이유는 `Tailwind CSS`에서 기본적으로 제공되는 colors를 사용하기 위해서이다. 

theme 안의 colors에는 `Tailwind CSS`에서 기본적으로 제공되는 색상이 내장되어 있기 때문에 그곳에 직접 내가 정의한 색상을 넣어주면 기본 색상을 덮어씌우면서 더 이상 기본 색상은 사용할 수 없게 된다. 
그렇기 때문에 기본 제공되는 색상에 "확장하여" 내가 정의한 색상도 쓰겠다는 의미로 extend 안에 colors를 작성해준 것이다.

실제로 내가 정의한 색상을 이용할 때는 아래와 같이 작성해주면 된다.

```js
<h2 className="text-dark-gray"></h2>
<div className="bg-blue-result"></div>

```

절대경로를 설정하여 파일을 쉽게 불러오자

절대경로 설정의 필요성

우리는 리액트 프로젝트를 할 때 수많은 모듈 및 파일을 불러오고(import) 내보낸다(export). 파일 외부에 위치한 자원을 현재 파일에서 사용하기 위해선 JS가 제공하는 import 구문을 사용해야 하는데, 이 때 import 구문 뒷 부분에 가져오려는 자원에 대한 위치를 명시해야 한다.

별도의 설정이 없다면 경로의 앞 부분에 ./이 붙은 형태인 상대경로를 사용하게 된다. 하지만 상대경로는 현재 파일의 위치를 기준으로 외부 파일의 위치를 명시하는 것이기 때문에 프로젝트의 규모가 커지고 폴더 구조가 깊어지면 경로 부분이 길어지게 되어 가독성을 해칠 수 있을 뿐만 아니라 작성이 매우 귀찮아진다(상대경로 지옥). 또한, 만약 현재 파일의 위치를 변경하게 되었을 때는 파일 내부에서 사용하는 모든 import 경로를 다시 변경해주어야하는 불편함이 따르게 된다.

예를 들어,

└ src
  ├ a1
  │  └─ b1
  │     └─ c1
  │         └─ f1
  ├ a2
  │  └─ b2
  │     └─ f1

위와 같은 구조에서 b2의 f1파일에서 c1의 f1파일을 가져오려면 import * from '../../a1/b1/c1/f1'; 처럼 경로가 길어지게 된다.

이러한 단점을 해결하기 위해 절대경로 설정 방법에 대해 소개한다. 나는 CRA로 리액트 초기 설치를 해주었기 때문에, CRA 환경 기준으로 절대경로를 설정하는 방법에 대해 작성하겠다.

CRA + Craco로 절대경로 설정하기

CRA 환경에서는 Craco 라이브러리로 쉽게 절대경로를 설정해줄 수 있다.

공식 문서를 보고 설치하는 것이 가장 정확하지만 귀찮은 사람들을 위해 2024년 5월 기준 설치 방법을 소개한다.

1. 터미널에서 Craco 설치

    npm i -D @craco/craco

2. package.json 파일 수정하기 package.json 파일을 보면 아래와 같이 작성된 부분이 있을 것이다.

      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
           "eject": "react-scripts eject"
      }

   이 부분을 아래와 같이 수정한다.

    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test"
      },

3. craco.config.js 파일 생성하기 craco.config.js 파일은 craco를 설치할 때 자동으로 생성되지 않는다. 직접 프로젝트의 root 경로에 파일을 생성해주어야 한다.

4. 생성한 craco.config.js 파일에 절대경로 설정하기

   const path = require("path");
   
   module.exports = {
    webpack: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
   };

   경로에서 @를 작성해주면 src 폴더를 의미한다. 리액트 프로젝트에서는 거의 모든 모듈과 파일들을 src 폴더 안에 넣기 때문에 이 src를 base를 나타내는 @ 기호로 세팅해주는 것이 일반적이다. 나는 src 자체만 세팅해주었지만 아래와 같은 방법이 많이 쓰이는 것 같다.

   const path = require('path');
   
    module.exports = {
      webpack: {
        alias: {
          '@components': path.resolve(__dirname, 'src/components'),
          '@pages': path.resolve(__dirname, 'src/pages'),
          '@hooks': path.resolve(__dirname, 'src/hooks'),
        },
      },
    };

   src 폴더의 직속 폴더 경로를 모두 세팅해주는 것이다.

5. tsconfig.json(또는 jsconfig.json) 파일 수정하기

   typescript는 tsconfig.json 파일, javascript는 jsconfig.json 파일을 보면 compilerOptions 섹션이 있을 것이다. 이 부분에 아래와 같은 내용을 추가해주면 된다.

    {
      "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
              "@/*": ["./*"]
        }
      }
    }

   나는 src 폴더만 절대경로를 설정해주었기 때문에 이렇게만 작성했지만, 4번에서 소개한 일반적인 방법으로는 아래와 같이 설정해주면 된다.

    {
      "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
          "@pages/*": ["./pages/*"],
          "@components/*": ["./components/*"],
          "@hooks/*": ["./hooks/*"]
        }
      }
    }

   baseUrl은 작성할 경로의 base가 되는 경로를 의미하고, paths는 craco.config.js에 작성한 alias path 정보들을 typescript 또는 javascript가 이해할 수 있도록 한번 더 작성해주는 것이다.

이렇게 하면 절대경로 세팅이 모두 완료되었다! 실제 코드에서 절대경로를 사용하는 예시를 보자.

import MikeButton from "@/components/home/MikeButton";

src/components/home 폴더에 있는 MikeButton.tsx 모듈을 불러오는 코드이다. 상대경로 지옥 탈출 성공!

여기까지가 내가 소개하는 프로젝트 초기 세팅 방법이다. 나는 프로젝트 초기 세팅을 할 때 정보가 한곳에 모여져 있지 않아 꽤나 많은 시간과 노력을 들였는데, 이 글을 보는 사람들이 조금이라도 더 빠르게 초기 세팅을 해서 개발 시간을 아끼는데 도움이 되었으면 좋겠다.

판별 함수를 만족하는 첫 요소 반환

형태

arr.findIndex(callback)

설명

1. callback 함수

• 개발자가 직접 작성
• 원하는 조건을 만족하면 true를 반환, 아니면 false를 반환하도록 작성해준다.
• 조건을 만족시키는 첫 번째 요소를 찾자마자 true를 반환한다. 즉 첫번째 요소만 찾아낸다는 뜻이다.

2. findIndex 함수

• callback 함수가 true를 반환하면 해당 조건을 만족시킨 요소를 반환. false를 반환하면 undefined를 반환.

*3. callback 함수가 받는 인자 *

callback(element, index, array)

• 배열의 모든 요소를 순회하며 체크한다.

예시

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found); // 12

🎶 findIndex

find와 비슷하지만, 판별 함수를 만족하는 첫 인덱스 반환

형태

arr.findIndex(callback)

설명

1. callback 함수

• 개발자가 직접 작성
• 원하는 조건을 만족하면 true를 반환, 아니면 false를 반환하도록 작성해준다.
• 조건을 만족시키는 첫 번째 요소를 찾자마자 true를 반환한다. 즉 첫번째 요소만 찾아낸다는 뜻이다.

2. findIndex 함수

• callback 함수가 true를 반환하면 해당 조건을 만족시킨 요소의 index(Number 타입)를 반환. false를 반환하면 -1을 반환.

*3. callback 함수가 받는 인자 *

callback(element, index, array)

• 배열의 모든 요소를 순회하며 체크한다.

예시

const hobbies = ["Sports", "Cooking", "날 찾아", "Reading"];

const index = hobbies.findIndex((item) => item === "날 찾아"); //요소 순회
/* 얘랑 동일
hobbies.findIndex((item) => {
  return item === "날 찾아";
});
 */

console.log(index); // 2

👉 callback 함수인 (item) => item === "날 찾아"가 true를 반환하면 요소의 index인 2를 findIndex 함수가 반환한다.

const arr = [5, 6, 9, 1, 6, 3, 2, 1, 2, 7, 9, 4, 3];

const find = arr.findIndex((element, index, array) => {
  return index < 7 && index > 5; // 결국 index가 6인애 찾는거임
});

console.log(find); // 6

참고 링크 https://bbaktaeho-95.tistory.com/40

문자열도 배열처럼 특정 위치에 접근할 수는 있지만, 특정 위치의 값을 변경하는 것은 안된다.

let desc = "안녕하세요";

desc[2]; // "하" -> 가능

desc[4]; = "용";
console.log(desc); // "안녕하세요" -> 변함없음. 불가능

toUpperCase() / toLowerCase()

let desc = "Hi guys. Nice to meet you.";

//toUpperCase() : 대문자로
desc.toUpperCase(); // "HI GUYS. NICE TO MEET YOU."

//toLowerCase() : 소문자로
desc.toLowerCase(); // "hi guys. nice to meet you."

str.indexOf(text)

let desc = "Hi guys. Nice to meet you.";

// 당연히 0부터 셈.
desc.indexOf("to"); //14
desc.indexOf("man"); // -1 -> 없는 문자열을 찾으면 -1 반환

주의!

let desc = "Hi guys. Nice to meet you.";

if (desc.indexOf("Hi")) {
  console.log("Hi가 포함된 문장입니다.");
}

우리가 원하는 대로 동작하지 않음. indexOf("Hi")는 0이고, falsy한 값이기 때문에 if문 안이 실행되지 않음.

이런 경우를 막기 위해서는 아래와 같이 작성해주면 됨

let desc = "Hi guys. Nice to meet you.";

if (desc.indexOf("Hi") > -1) {
  console.log("Hi가 포함된 문장입니다.");
}

str.slie(n,m)

n부터 m 전까지만 남김! (숫자는 물론 인덱스 기준)

• n : 시작점
• m : 인수를 안 넣으면 문자열 끝까지라는 의미이고, 양수면 그 숫자 전까지, 음수면 끝에서부터 셈

let desc = "abcdefg";

// 2부터 끝까지만 남김
desc.slice(2); // "cdefg"

// 0부터 5전까지(4까지) 남김
desc.slice(0,5); // "abcde";

// 2부터 끝에서 2번째까지 자르고 남김 -> 헷갈림 주의!
desc.slice(2,-2); // "cde"

str.substring(n,m)

n부터 m 전까지만 남김! str.slie(n,m)과 유사하지만 n과 m을 바꿔도 동작함 음수는 허용 X. 음수는 0으로 인식함

let desc = "abcdefg";

desc.substring(2,5); // "cde"
desc.substring(5,2); // "cde"

str.substr(n,m)

n부터 시작하여 m"개"를 가져옴

let desc = "abcdefg";

desc.substr(2,4); // "cdef"
desc.substr(-4,2); // "de"

str.trim()

문자열 앞뒤 공백 제거

let desc = "   coding    ";

desc.trim(); // "coding"

str.repeat(n)

문자열 n번 반복

let hello = "hello!";
hello.repeat(3); // "hello!hello!hello!"

let num = 10;
num.toString(); // "10" -> 숫자를 문자열로 바꿔줌
num.toString(2); // 10진수 "10"을 2진수 "1010"으로 바꿔줌

let num2 = 255;
num2.toString(16); // 10진수 "255"를 16진수 "ff"로 바꿔줌

수학

Math.PI

Math.ceil()

올림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1); // 6
Math.ceil(num2); // 6

Math.floor()

내림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1); // 5
Math.ceil(num2); // 5

Math.round()

반올림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1); // 5
Math.ceil(num2); // 6

소수점 자릿수

1. Math.round() 이용

   let userRate = 30.1237;
   

//소수점 둘째자리까지 표현(셋째자리에서 반올림) Math.round(userRate * 100) / 100 //30.12

//소수점 셋째자리까지 표현(넷째자리에서 반올림) Math.round(userRate * 1000) / 1000 //30.124

2. `toFixed()` 이용
```js
let userRate = 30.1237;

//소수점 둘째자리까지 표현(셋째자리에서 반올림)
userRate.toFixed(2); //30.12

//소수점 셋째자리까지 표현(넷째자리에서 반올림)
userRate.toFixed(3); //30.124

//그 외
userRate.toFixed(0); //"30"
userRate.toFixed(6); //"30.123700"

단, 주의할 점은 toFixed()는 문자열을 반환한다.

isNaN()

숫자인지 아닌지 판단. ==NaN이나 ===NaN으로 하면 안됨!

let x = Number("x"); //x는 NaN임

//isNaN() 이용 안할 경우, 우리가 원하는 결과가 안 나옴
x == NaN //false
x === NaN // false
NaN == NaN // false -> 심지어 이것도 false라고 함

//따라서 NaN 판단은 무조건 isNaN()으로 해야한다.
isNaN(x) // true
isNaN(3) // false

parseInt()

문자열을 숫자로 바꿔줌. Number()와 다른 점은, 문자가 포함되어 있어도 동작을 한다는 것이다. 읽을 수 있는 부분까지 읽고, 문자를 만나면 읽은 부분까지를 반환한다. 즉 처음부터 문자로 시작하면 숫자를 반환하지 못하고 NaN을 반환한다. Number()는 어디에든 문자가 포함되어 있으면 NaN을 반환한다.(단 공백은 있어도 상관없음)

let margin = "10px";

parseInt(margin); //10
Number(margin); // NaN

// 이 경우에는 parseInt도 NaN을 반환한다
let redColor = "f3";
parseInt(redColor); //NaN

parseInt()는 두 번째 인수로 진수를 설정해줄 수 있다.

//위에서 작성한 예제
let redColor = "f3";
parseInt(redColor); //NaN

//16진수로 설정. 16진수에서 f는 숫자이다.
let redColor = "f3";
parseInt(redColor, 16); //243

parseFloat()

parseInt()와 동일하게 동작하지만, 부동소수점을 반환한다.

let padding = "18.5%";
parseInt(padding); // 18
parseFloat(padding); // 18.5

Math.random()

0~1 사이 무작위 숫자 생성

Math.random(); // 0.45930103294789837
Math.random(); // 0.26114731261519153
Math.random(); // 0.8677601709129028

그럼 1~100 사이 무작위 숫자를 뽑고 싶다면?

Math.floor(Math.random() * 100) + 1;

Math.max()

Math.max(1, 4, -1, 5, 10, 9, 5.54); // 10
Math.min(1, 4, -1, 5, 10, 9, 5.54); // -1

Math.abs()

절대값(absolute)

Math.abs(-1); // 1

Math.pow(n,m)

n^m

Math.pow(2,10); // 1024

Math.sqrt()

제곱근

Math.sqrt(16); // 4

범위(scope)

변수가 접근할 수 있는 유효범위이다.

1. function scope *var만의 특징. 유효범위가 *함수 단위이다. 즉 함수에서만 지역변수가 된다.

const func = () => {
  var a = 1;
}
console.log(a); // 함수 안에서 선언된 변수 a를 함수 밖에서 접근했으므로 오류 발생! 

if(true) {
  var a = 1;
}
console.log(a); // if문에서 선언된 a를 if문 밖에서 접근. 문제 없음~

2. block scope 유효범위가 함수 뿐만 아니라 중괄호(함수, if-else문, while문, for문, try-catch문)를 기준으로 나뉘는 것. 변수는 중괄호를 범위로 기억한다는 점 인지하고 자바스크립트 코드를 짜자!

const func = () => {
  const a = 1;
}
console.log(a); // 함수 안에서 선언된 변수 a를 함수 밖에서 접근했으므로 오류 발생! 

if(true) {
  let a = 1;
}
console.log(a); // if문에서 선언된 a를 if문 밖에서 접근했으므로 오류 발생!

변수 재선언(redelcaration)

좋지 않은 var만의 특징이다. 말도 안되는 기능. 이런 선언 방식은 볼 일 없을 듯!

var name = "Mike";
console.log(name); // Mike

var name = "Jane"; // 변수 재선언. 오류가 발생하지 않는다.
console.log(name); // Jane 

변수값 재할당(can be reassigned)

당연한 변수의 특징. constant는 상수니까 당연히 재할당이 안된다.

//var
var name = "Mike";
name = "Jane";
console.log(name); // Jane 

//let
let name = "Mike";
name = "Jane";
console.log(name); // Jane 

//const
const name = "Mike";
name = "Jane"; // const는 재할당 불가. 오류발생!

초기화 필요(initializer)

constant는 재할당이 안되니까 당연히 초기값을 설정해주어야 한다.

const name; // const는 초기값 설정 필수. 오류 발생!

호이스팅(hoisting)

호이스팅이란?

• 호이스팅이란 스코프 안에 존재하는 모든 "선언"들을 해당 스코프의 최상단으로 끌어올리는 것을 말함. (호이스팅은 스코프 단위로 일어난다!)
• 자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는 과정을 거침.
• 이 과정에서 자바스크립트 엔진은 코드 실행을 위한 모든 선언들을 스코프에 등록(메모리에 저장)함.

var, let, const 모두 호이스팅된다. 하지만 차이점이 있다.

var 예시를 보자.

console.log(name); // undefined
var name = 'hello';

이 코드는 참조 에러가 나지 않고, undefined를 리턴한다. 그 이유는 자바스크립트가 호이스팅을 하면서 아래와 같은 방식으로 코드를 해석하기 때문이다.

var name; // undefined
console.log(name);
name = 'hello';

선언만 호이스팅되고, 할당은 호이스팅 되지 않은 것이다.

다음으로 let, const 예시를 보자.

console.log(name); // 에러 발생! 
let name = 'hello';

console.log(name); // 에러 발생! 
const name = 'hello';

분명 var 예시와 같은 코드인데, let이나 const으로 바꾸면 에러가 난다. 이것만 보면 let과 const는 호이스팅이 일어나지 않는 것처럼 보인다.

하지만 둘다 분명히 호이스팅이 일어난다. 그럼 왜 이런 차이점이 발생할까? 바로 Temporal Dead Zone 때문이다.

Temporal Dead Zone 선언은 되었으나 초기화되지 않은 변수가 있는 곳을 Temporal Dead Zone이라고 한다. Temporal Dead Zone에 있는 변수에 접근하면 Reference Error가 발생한다.

var는 변수의 선언과 동시에 초기화가 일어난다. 선언을 하면 자동으로 undefined가 할당된다. 따라서 Temporal Dead Zone에 들어갈 일이 없다.

반면 let과 const는 변수를 선언한다고 해서 자동으로 초기화가 이루어지지 않는다. 따라서 선언은 되어있지만, 초기화가 되지 않아 Temporal Dead Zone에 들어가게 된다.

예시들을 통해 이해하자.

// 호이스팅 때문에 선언이 끌어올려져서 오류 안남.
console.log(text); // undefined (선언+undefined로 자동 초기화)
text = 'Hi!'; // 할당
var text; // 선언과 동시에 초기화. 호이스팅됨.
console.log(text); // Hi!

// 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남.
console.log(text); // ReferenceError: text is not defined
let text; // 선언되어 호이스팅. 초기화는 안됨

참조 https://yceffort.kr/2020/05/var-let-const-hoisting https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

for ... in

key/index 객체의 key, 배열의 index를 순환할 때 사용

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

객체의 key, value를 추출하고 싶을 때 사용하자. 배열에는 굳이 사용할 일이 없을듯. forEach로 대체 가능

for ... of

element(값) 배열의 element(값)을 순환할 때 사용

let days = ["mon","tue","wed"];

days.push("thu");
days.unshift("sun"); // 배열 앞에 추가

for (let days of days) {
    console.log(day); // "sun" "mon" "tue" "wed" "thu"
}

크게 사용할 일이 없을듯.. forEach로 대체가 되니까.

cf) 배열 shift, unshift

• unshift : 배열 앞에 추가(여러개 추가 가능)
• shift : 배열 앞에 제거

forEach 함수 vs. map 함수

forEach, map 함수의 공통점

index & element 모두 배열의 index, element 모두를 순환할 때 사용 인수를 가짐! : forEach((요소, 인덱스, 배열)=>{...});, map((요소, 인덱스, 배열)=>{...});

1. 첫 번째 인수 : element

//forEach
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.forEach((day) => {
  console.log(day);
});

//map
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.map((day) => {
  console.log(day);
});

** 2. 두 번째 인수(optional) : index**

//forEach
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.forEach((day, index) => {
  console.log(`Index: ${index}, Value: ${day}`);
});

//map
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.map((day, index) => {
  console.log(`Index: ${index}, Value: ${day}`);
});

3. 세 번째 인수(optional) : 원본 배열 그 자체

//forEach
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.forEach((day, index, array) => {
  console.log(`Index: ${index}, Value: ${day}`);
  console.log(array);
});

//map
const days = ["월", "화", "수", "목", "금", "토", "일"];

days.map((day, index, array) => {
  console.log(`Index: ${index}, Value: ${day}`);
  console.log(array);
});

forEach, map 함수의 차이점

1. return 값의 유무

forEach는 return 값이 없고, map은 return 값이 있다!(단, 반드시 return문을 통해 return 값을 작성해주어야 함!)

//forEach
const days = ["월", "화", "수", "목", "금", "토", "일"];

let a = days.forEach((day) => day); // return day
console.log(a);

//map
const days = ["월", "화", "수", "목", "금", "토", "일"];

let a = days.map((day) => day); // return day
console.log(a);

days 배열의 요소들을 담은 새로운 배열을 return하여 a에 저장한다.

아래의 예시를 보면 차이를 확실히 느낄 수 있다.

//forEach
const numbers = [1, 2, 3, 4, 5];

const a = numbers.forEach((number) => number+1);
console.log(a);

콜백함수가 element+1을 반환한다고 해도, forEach 함수는 아무것도 반환하지 않는다.

//map
const numbers = [1, 2, 3, 4, 5];

const a = numbers.map((number) => number+1);
console.log(a);

numbers 배열의 요소들에 +1을 해준 새로운 배열을 return하여 a에 저장한다.

즉, map 함수는

• 콜백함수에 반환값을 작성해준다면, 그 반환값은 "각 요소를 이렇게 바꾸겠다"라는 의미이다.
• 콜백함수의 반환 값에 따라 바뀐 배열이 map 함수의 반환값이 된다.

map 함수의 활용

특정 값 꺼내기

const users = [ //객체 배열
  { name: "원빈", age: 22 },
  { name: "현빈", age: 32 },
  { name: "강동원", age: 21 },
  { name: "안재현", age: 35 },
];
const ages = users.map((user) => user.age);
console.log(ages); 

⭐ 총정리 ⭐

• 객체는 for...in 사용 / key
• 배열은 forEach나 map 사용 / element, index, array
• 배열을 단순히 순회하려면 forEach, 배열을 순회하고 새 배열을 얻고 싶다면 map!

참고 https://velog.io/@kms0206/Map-ForEach%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

🍇 API

Application Programming Interface.

애플리케이션 프로그램을 만들 때의 약속

단순한 파일 형식, 함수의 이름 등 '약속'의 범위는 매우 넓다. Web API, WinAPI, JavaScript API, Node API 등 종류가 방대하다.

ex) alert()의 구현을 몰라도 쓸 수 있는 이유는 "약속을 그렇게 해줬으니까"이다. 내부 구조를 몰라도 된다.

ex) console.log()도 마찬가지이다.

🍇 나머지 매개변수(rest parameter)

함수를 만들 때 매개변수에 ...매개변수와 같이 작성해주면 남은 매개변수들이 모두 이 나머지 매개변수에 배열의 형태로 들어오게 된다.

예시를 보자.

const 함수 = function(...매개변수) {
  console.log(매개변수)
}

함수() // []
함수(1) // [1] -> 매개변수가 1개일 때도 배열로 들어온다
함수(1,2) // [1,2]
함수(1,2,3) // [1,2,3]
함수(1,2,3,4) // [1,2,3,4]

나머지 매개변수는 일반 매개변수와 함께 쓰일 수 있다. 일반 매개변수에 할당되고 남은 것이 모두 나머지 매개변수에 들어오게 된다.

const 함수 = function(a, b, ...매개변수) {
  console.log(a, b, 매개변수);
}

함수() // undefined undefined []
함수(1) // 1 undefined []
함수(1,2) // 1 2 []
함수(1,2,3) // 1 2 [3]
함수(1,2,3,4) // 1 2 [3, 4] 

나머지 매개변수는 항상 맨 뒤에 와야한다(일반 매개변수가 나머지 매개변수보다 뒤에 올 수 없다.) 아래의 예시는 오류가 발생한다.

const 잘못된예 = function(...매개변수, a, b) {}

🍇 전개 연산자: 함수 호출

const 함수 = function(a, b, c) {
  console.log(a, b, c)
}

const a = [1, 2, 3]
함수(...a) // 1 2 3 -> a 배열의 값이 매개변수에 각각 분리되어 들어간다. 
// 함수(a[0], a[1], a[2] -> 이 코드와 완전히 동일하다.

🍇 기본 매개변수

매개변수가 있는 함수를 매개변수 없이 호출했을 경우 오류가 발생한다.

const isLeapYear = function(연도) {
  return (연도 % 4 === 0) 
      && (연도 % 100 !== 0) 
      || (연도 % 400 === 0)
}

isLeapYear();

이럴 경우 매개변수가 없이 호출해도 매개변수가 기본값을 지닐 수 있도록 해주는 것이 기본 매개변수이다.

const isLeapYear = function(연도 = new Date().getFullYear()) {
  return (연도 % 4 === 0) 
      && (연도 % 100 !== 0) 
      || (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

이것은 모던 JS에서 가능해졌고, 과거에는 직접 코드로 기본 매개변수를 설정해주었다.

1. typeof 사용

   const isLeapYear = function(연도) {
   if (typeof(연도) === 'undefined') {
    연도 = new Date().getFullYear()
   }
   
   return (연도 % 4 === 0) 
      && (연도 % 100 !== 0) 
      || (연도 % 400 === 0)
   }
   

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

2. typeof + 삼항 연산자 사용
```js
const isLeapYear = function(연도) {
  연도 = typeof(연도) === 'undefined' ? new Date().getFullYear() : 연도;

  return (연도 % 4 === 0) 
      && (연도 % 100 !== 0) 
      || (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

3. || 사용

   const isLeapYear = function(연도) {
   연도 = 연도 || new Date().getFullYear();
   
   return (연도 % 4 === 0) 
      && (연도 % 100 !== 0) 
      || (연도 % 400 === 0)
   }
   

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다 ```

일단 신호처리적으로 pitch를 추출하는 2가지 방법이 떠오릅니다.

1. 오토코릴레이션을 이용하여 peak(혹은 최댓값)를 찾는다
2. FFT를 이용하여 magnitude의 peak(혹은 최댓값)를 찾는다.

정확도를 높이기 위해선 피치 더블링이나 신호의 주기성을 고려한 방법을 추가해야 겠죠.

• 주파수 범위를 한정한다던가,
• 신호가 얼마 이상의 크기이여야 피치로 결정한다던가

간단한 것 같지만, 이것 저것 생각하다보면 구현이 복잡해 집니다. 그런데, 파이썬은 이런 구현 조차도 라이브러리로 제공합니다. 실제 사용되는 함수는 librosa.core.piptrack 입니다.

다음은 위 함수를 이용해 오디오 파일의 pitch를 추출하는 코드 입니다.

import librosa
import scipy.signal as signal
import numpy as np

audio_sample, sampling_rate = librosa.load("sine.wav", sr = None)

S = np.abs(librosa.stft(audio_sample, n_fft=1024, hop_length=512, win_length = 1024, window=signal.hann))
pitches, magnitudes = librosa.piptrack(S=S, sr=sampling_rate)

shape = np.shape(pitches)
nb_samples = shape[0]
nb_windows = shape[1]

for i in range(0, nb_windows):
    index = magnitudes[:,i].argmax()
    pitch = pitches[index,i]
    print(pitch)

# FFT 결과를 plot
import matplotlib.pyplot as plt
import librosa.display

#normalize_function
min_level_db = -100
def _normalize(S):
    return np.clip((S-min_level_db)/(-min_level_db), 0, 1)

mag_db = librosa.amplitude_to_db(S)
mag_n = _normalize(mag_db)
plt.subplot(311)
librosa.display.specshow(mag_n, y_axis='linear', x_axis='time', sr=sampling_rate)
plt.title('spectrogram')

t = np.linspace(0, 24000, mag_db.shape[0])
plt.subplot(313)
plt.plot(t, mag_db[:, 100].T)
plt.title('magnitude (dB)')
plt.show()

결과는 아래와 같습니다.

263Hz -> 291Hz -> 329Hz -> 347Hz

matplot을 이용해서 스펙트럼을 그리는 것 까지 넣었습니다.

실제 pitches 배열에는 pitch 후보들이 있는데, 이 중 가장 큰 값을 갖는 주파수를 출력하는 코드를 작성했습니다.

librosa.core.piptrack` 에 인자로 min, max를 넣어 pitch의 범위를 한정하는 것도 가능합니다.

이제 음성/오디오 신호의 주요 파라미터인 pitch를 추출 할 수 있게 되었습니다.

모던 JS 튜토리얼 Part 1. 코어 자바스크립트 문서를 읽고 내용을 정리합니다.

🌝 객체

객체란?

앞서 배운 원시형(primitive type) 자료형은 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있다.

그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다.

객체는 중괄호 {}를 이용해 만들 수 있고, 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있다.

키(key)엔 문자형, 값(value)엔 모든 자료형이 허용된다. 프로퍼티 키(key)는 ‘프로퍼티 이름’, '식별자'라고도 부른다.

• 함수도 객체이다.

예시로 객체의 개념 이해하기

서랍장 예시로 객체를 이해해보자.

서랍장에 파일이 꽂혀있을 때, 파일에 붙어있는 이름표가 객체의 키(key), 파일의 내용이 값(value)이라고 생각하면 된다. 서랍장에서 파일 이름을 보고 파일을 쉽게 찾을 수 있듯이, 객체에서는 키(key)를 이용하여 프로퍼티를 쉽게 찾는다.

빈 객체(빈 서랍장)를 만드는 2가지 방법

//1. '객체 생성자' 문법
let user = new Object();

//2. '객체 리터럴' 문법
let user = {};

2번째 방법으로 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다. 객체를 선언할 때는 주로 이 방법을 사용한다.

객체 리터럴과 프로퍼티

중괄호 {} 안에는 "키:값" 쌍으로 구성된 프로퍼티가 들어간다.

let user = {
  name: "John",   //프로퍼티: name과 John, key: name, value: John
  age: 30 //프로퍼티: age와 30, key: age, value: 30
}

프로퍼티 키(key)는 문자형만 올 수 있다. 단, 띄어쓰기가 있는 경우에는 아래와 같이 따옴표로 묶어줘야 한다. 프로퍼티 값(value)에는 모든 자료형이 올 수 있다. 아래와 같이 불린형도 가능하다.

let user = {
  "likes birds": true
}

프로퍼티 값을 읽고, 프로퍼티를 추가하고, 삭제하기

프로퍼티 값을 읽는 방법 2가지

1. 점 표기법(dot notation)

   alert(user.name); // John
   alert(user.age); // 30

2. 대괄호 표기법

띄어쓰기가 있는 프로퍼티 키(key)의 경우 1번 표기법을 사용할 수 없다.

user.likes birds = true // 에러 발생

이럴 때 대괄호 표기법을 사용할 수 있다. 단, 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다.

user["likes birds"] = true

아래와 같은 방법도 가능하다. 1번 표기법은 불가능하다.

let key = "likes birds";

user[key] = true;

프로퍼티 값 추가하기

단순히 아래와 같이 작성해주면 된다.

//점 표기법
user.isAdmin = true;

//대괄호 표기법
user["isAdmin"] = true;

프로퍼티 삭제하기

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.

//점 표기법
delete user.age;

//대괄호 표기법
delete user["age"];

cf) 상수 객체는 수정될 수 있다! const로 선언된 객체는 수정될 수 없을 것 같지만, 수정될 수 있다.

const user = {
  name: "John"
};

user.name = "Pete";

laert(user.name); // Pete

const는 user의 값을 고정하지만, 그 내용은 고정하지 않는다. 즉 user=...를 전체적으로 설정하려고 할 때만 오류가 발생한다.

계산된 프로퍼티

객체 리터럴 안의 프로퍼티 키(key)가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property)라고 부른다.

대괄호로 둘러싸인 프로퍼티 키(key)를, 대괄호 안에 있는 변수에서 가져오겠다는 것을 의미한다.

예시를 보자.

let fruit = prompt("어떤 과일을 구매하시겠습니까?");

let bag = {
  [fruit]: 5 // 변수 fruit에서 프로퍼티 키(key)를 동적으로 받아온다.
};

alert(bag.apple);

사용자가 prompt 창에 apple이라고 입력하면, 결과는 5가 출력된다. 위 코드는 아래와 같은 코드이다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?");
let bag = {};

bag[fruit] = 5;

한편, 대괄호 안에는 복잡한 표현식이 올 수도 있다.

let fruit = "apple";
let bag = {
  [fruit + "Computers"]: 5 // bag.appleComputers = 5
}

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력하다. 그런데 작성하기 번거롭다는 단점이 있다.

프로퍼티 이름이 확정된 상황이고, 단순한 이름이라면 처음엔 점 표기법을 사용하다가 뭔가 복잡한 상황이 발생했을 때 대괄호 표기법으로 바꾸는 경우가 많다.

단축 프로퍼티

아래의 예시를 보자.

function makeUser(name, age) {
  return {
    name: name,
    age: age,
  };
}

이렇게 프로퍼티 키(key)와 값(value)의 이름이 동일할 경우, 코드를 아래와 같이 짧게 줄일 수 있다.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
  };
}

프로퍼티 이름의 제약사항

프로퍼티 키(key)는 어떤 문자형이나 될 수 있다. (사실 심볼형도 되는데 이는 뒤에서 다룰 예정이다.)

예를 들어 아래처럼 객체 프로퍼티 키(key) 이름을 예약어로 설정할 수 있다!

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

만약 문자형이 아닌 다른 자료형으로 설정할 경우 문자열로 자동 형 변환된다.

let obj = {
  0: "test" // "0": "test"와 동일합니다.
};

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj["0"] ); // test
alert( obj[0] ); // test (동일한 프로퍼티)

• __proto__ 관련된 내용은 문서 참고

'in' 연산자로 프로퍼티 존재 여부 확인하기

2가지 방법이 있다.

1. 객체의 undefined 반환 특징 이용하기 객체는 존재하지 않는 프로퍼티에 접근하려고 해도 에러 발생 없이 undefined 값을 반환한다. 이러한 특징을 이용하면 프로퍼티 존재 여부를 확인할 수 있다.

let user = {};

alert( user.noSuchProperty === undefined ); // true. true는 '프로퍼티가 존재하지 않음'을 의미합니다.

2. 연산자 in 사용하기

문법은 아래와 같다.

"key" in 객체

예시를 보자.

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

아래와 같이 변수로 접근해도 된다.

let user = { age: 30 };

let key = "age";
alert( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.

프로퍼티 값(value) 자체에 undefined가 할당된다면 1번이 원하는대로 동작하지 않을 수 있기 때문에, 2번이 존재한다. (자세한 것은 문서 참고)

객체의 모든 키를 순회하는 'for...in' 반복문

for...in 반복문을 사용하면 객체의 모든 키(key)를 순회할 수 있다. for 반복문과는 완전히 다르다!

문법은 아래와 같다.

for (key in 객체) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

객체의 모든 프로퍼티 키와 값을 출력하는 예제를 보자.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

여기서 key는 단순한 변수명이다. 다른 변수명으로 바꿔도 된다.

객체 정렬 방식

객체와 객체 프로퍼티를 다루다 보면 "프로퍼티엔 순서가 있을까?"라는 의문이 생기기 마련이다. 특히 반복문은 프로퍼티를 추가한 순서대로 실행될지, 그리고 이 순서는 항상 동일할지 궁금해진다.

결론은, 정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.

• 정수 프로퍼티 : 정수로 변환하거나 변환된 정수를 다시 문자열로 바꿔도 변형이 없는 문자열을 의미함

키(key)가 정수인 경우는 오름차순으로 자동 정렬된다.

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

키(key)가 정수가 아닌 경우는 작성된 그대로 나열된다.

let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // 프로퍼티를 하나 추가합니다.

// 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다.
for (let prop in user) {
  alert( prop ); // name, surname, age
}

🌝 참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이

• 객체 : 참조에 의해(by reference) 저장되고 복사된다.
• 원시 타입 : 값 그대로 저장, 할당되고 복사된다.

원시타입 예제를 보자.

let message = "Hello!";
let phrase = message;

이렇게 하면 message, phrase 변수에 각각 문자열 Hello!가 저장된다.

반면 객체는, 객체가 그대로 저장되는 것이 아니라 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조 값이 저장된다.

let user = {
  name: "John"
}

객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 참조할 수 있는 값이 저장된다.

객체 복사하기

위의 내용에 따라, 객체가 할당된 변수를 복사할 때, 객체의 참조 값이 복사되는 것이지 객체 자체가 복사되는 것이 아니다.

let user = { name: "John" };

let admin = user; // 참조값을 복사함

그림을 보면 이해가 쉽다.

변수는 2개이지만 각 변수에는 동일 객체에 대한 참조 값이 저장된다.

아래의 예시도 보자.

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

객체를 서랍장에 비유하면 변수는 서랍장을 열 수 있는 열쇠라고 할 수 있다. 서랍장은 하나, 서랍장을 열 수 있는 열쇠는 두 개인데, 그중 admin 열쇠를 사용해 서랍장을 열어 정돈한 후, user 열쇠로 서랍장을 열면 내용이 정돈되어 있는 것을 확인할 수 있다.

• 참조에 의한 비교에 대한 내용을 알고 싶다면 문서 참고

객체 복사, 병합과 Object.assign

앞에서 한 것과 달리 객체를 복제하고 싶다면 어떻게 해야 할까? 즉, 기존에 있던 객체와 똑같으면서 독립적인 객체를 만들고 싶다면 말이다.

방법은 있는데 자바스크립트는 객체 복제 내장 메서드를 지원하지 않기 때문에 조금 어렵다. 사실 객체를 복제해야 할 일은 거의 없다. 참조에 의한 복사로 해결 가능한 일이 대다수이다.

정말 복제가 필요한 상황이라면 2가지 방법을 사용하면 된다.

1. 새로운 객체를 만든 다음 기존 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티 복사하기

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

2. Object.assign 사용하기

문법을 보자.

Object.assign(dest, [src1, src2, src3...])

• 첫 번째 인수 dest는 목표로 하는 객체이다.
• 이어지는 인수 src1, ..., srcN는 dest에 복사하고자 하는 객체이다. ...은 필요에 따라 얼마든지 많은 객체를 인수로 사용할 수 있다는 것을 나타낸다.
• 객체 src1, ..., srcN의 프로퍼티를 dest에 복사한다. dest를 제외한 인수(객체)의 프로퍼티 전부가 첫 번째 인수(객체)로 복사된다.
• 마지막으로 dest를 반환한다.

assign 메서드를 사용해 여러 객체를 하나로 병합하는 예시를 살펴보자.

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있는 경우엔 기존 값이 덮어씌워 진다.

let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // user = { name: "Pete" }

Object.assign을 사용하면 반복문 없이도 간단하게 객체를 복사할 수 있다.

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

예시를 실행하면 user에 있는 모든 프로퍼티가 빈 배열에 복사되고 변수에 할당된다.

중첩 객체 복사

아래의 경우에는 어떻게 해야할까?

let user = {
  name: "John",
  sizes: { //중첩 객체
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

clone.sizes = user.sizes로 프로퍼티를 복사하는 것만으론 객체를 복제할 수 없다. user.sizes는 객체이기 때문에 참조 값이 복사되기 때문이다. clone.sizes = user.sizes로 프로퍼티를 복사하면 clone과 user는 같은 sizes를 공유하게 된다.

이 문제를 해결하려면 user[key]의 각 값을 검사하면서, 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용해야 한다. 이런 방식을 깊은 복사(deep cloning)라고 한다.

자바스크립트 라이브러리 lodash의 메서드인 _.cloneDeep(obj)을 사용하면 이 알고리즘을 직접 구현하지 않고도 깊은 복사를 처리할 수 있다.

🌝 가비지 컬렉션

가비지 컬렉션이란?

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다.

원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하는데, 더는 쓸모 없어지게 된 것들은 찾아내 삭제해야 한다. 자바스크립트 엔진이 필요 없는 것을 찾아내 삭제하는 것이 가비지 컬렉션이다.

가비지 컬렉션 기준

자바스크립트는 도달 가능성(reachability) 이라는 개념을 사용해 메모리 관리를 수행한다.

가비지 컬렉터는 모든 객체를 모니터링하고, 도달할 수 없는 객체는 삭제한다. 도달 가능한 값은 메모리에서 삭제되지 않는다.

1. 태생부터 도달 가능한 값 루트(root) : 명백한 이유 없이는 삭제되지 않는다.

• 현재 함수의 지역 변수와 매개변수
• 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수
• 전역 변수
• 기타 등등

2. 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값 : 도달 가능한 값

그림과 예시로 이해하기

1. let user = {
   name: "John"
   };

user 값을 다른 값으로 덮어쓰면 참조(화살표)가 사라진다.

user = null;

2. // user엔 객체 참조 값이 저장됩니다.
   let user = {
   name: "John"
   };
   

let admin = user;

![](https://velog.velcdn.com/images/cse_pebb/post/24893914-8e40-412e-b923-e9e932a08976/image.png)

이번에도 `user`의 값을 다른 값으로 덮어써 보자.
```js
user = null;

1번 예시와 달리 전역 변수 admin을 통하면 여전히 객체 John에 접근할 수 있기 때문에 John은 메모리에서 삭제되지 않는다.

3. function marry(man, woman) {
   woman.husband = man;
   man.wife = woman;
   
   return {
    father: man,
    mother: woman
   }
   }
   

let family = marry({ name: "John" }, { name: "Ann" });

![](https://velog.velcdn.com/images/cse_pebb/post/a0492af2-0484-4173-8803-c9dd9b163ed6/image.png)

참조 2개를 지워보자.
```js
delete family.father;
delete family.mother.husband;

외부로 나가는 참조는 도달 가능한 상태에 영향을 주지 않는다. 외부에서 들어오는 참조만이 도달 가능한 상태에 영향을 준다. 그 결과 아래와 같이 된다.

결론은, 객체들이 연결되어 섬 같은 구조를 만드는데, 이 섬에 도달할 방법이 없는 경우, 섬을 구성하는 객체 전부가 메모리에서 삭제된다.

내부 알고리즘

• 가비지 컬렉션 기본 알고리즘 : mark-and-sweep

1. 가비지 컬렉터는 루트(root) 정보를 수집하고 이를 ‘mark(기억)’ 한다.
2. 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 ‘mark’ 한다.
3. mark 된 모든 객체에 방문하고 그 객체들이 참조하는 객체도 mark 한다. 한번 방문한 객체는 전부 mark 하기 때문에 같은 객체를 다시 방문하는 일은 없다.
4. 루트에서 도달 가능한 모든 객체를 방문할 때까지 위 과정을 반복한다.
5. mark 되지 않은 모든 객체를 메모리에서 삭제한다.

최적화 기법

자바스크립트 엔진은 실행에 영향을 미치지 않으면서 가비지 컬렉션을 더 빠르게 하는 다양한 최적화 기법을 적용한다.

자세한 내용은 문서 참조!

🌝 메서드와 this

메서드 만들기

객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줄 수 있다. 그렇게 객체 프로퍼티에 할당된 함수를 메서드(method)라고 한다.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

이미 정의된 함수를 이용해서 메서드로 만들어 줄 수도 있다.

let user = {
  // ...
};

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

user.sayHi(); // 안녕하세요!

메서드 단축 구문

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

사실 일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않고 미묘한 차이가 있는데, 우선은 중요하지 않으므로 넘어가자.

메서드와 this

메서드 내부에서 this 키워드를 사용하면 현재 객체에 접근할 수 있다. this는 메서드를 호출할 때 사용된 객체를 나타낸다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

user.sayHi()가 실행되는 동안에 this는 user를 나타낸다.

자세한 내용은 문서를 참고하자.

JS의 자유로운 this

자바스크립트의 this는 다른 프로그래밍 언어의 this와 달리 모든 함수에 this를 사용할 수 있다.

아래와 같이 작성해도 에러가 발생하지 않는다.

function sayHi() {
  alert( this.name );
}

this 값은 런타임에 결정된다. 즉, 컨텍스트에 따라 달라진다.

동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

객체 없이 호출하고 this 값 확인하기

function sayHi() {
  alert(this);
}

sayHi(); // undefined

엄격모드에서는 객체가 없으므로 this에 undefined가 할당된다. (런타임에서 할당될 객체가 없기 때문) 그리고 this.name으로 name에 접근하려고 하면 에러가 발생한다.

❗헷갈리지 말자! 객체가 없을 경우에 해당되는 얘기다. 프로퍼티가 아니라 !! 예시를 보자.

// 클래스와 모듈을 사용하지 않아 엄격모드가 자동으로 적용되지 않기 때문에 직접 적용함
"use strict"; 

let imObject = {
  callThisObejct() {
    alert(this);
  },
  generateProperty() {
    this.a = "나는 this와 함께 생성된 a야.";
    alert(this.a);
  },
};

//1
imObject.callThisObejct(); // 결과 : [object Object]
//2
imObject.generateProperty(); // 결과 : 나는 this와 함께 생성된 a야.

여기서 imObject라는 객체는 존재한다. 따라서 1번 결과에서 확인할 수 있듯 this에 undefined가 할당되지 않는다. 2번의 경우 a라는 프로퍼티는 존재하지 않는다. 하지만 이것은 위에서 말한 내용과 전혀 관계가 없다. this는 a라는 프로퍼티를 자동으로 생성하고, 정상적으로 값도 출력한다.

다시 한번 헷갈리지 말자. 객체가 존재하지 않을 경우에 this에 undefined가 할당되는 것이다.

function func() {
  alert(this);
}

func(); // 결과 : undefined

음? 근데 함수도 객체아닌가 이게 뭔소리지........???????엥??? 함수가 존재한다는 건 객체가 존재한단 뜻인데....... 그 객체가 그 객체가 아닌가? 어쩌라는거임? 👉 아무래도 프로퍼티가 존재하는.. 고러한 전형적인(?) 객체를 의미하는듯.

정리해보자면,

• 함수를 선언할 때 this를 사용할 수 있다. 다만 함수가 호출되기 전까지 this엔 값이 할당되지 않는다. 즉, 함수가 호출되는 순간에 this에 값이 할당된다.
• 함수를 복사해 객체 간 전달할 수 있다.
• 함수를 객체 프로퍼티에 저장해 객체명.method()와 같이 메서드 형태로 호출하면 this는 그때 해당 객체명에 해당되는 객체를 참조한다.

🌝 new 연산자와 생성자 함수

new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.

생성자 함수는 처음 나오는 개념이다.. 함수 파트 글 찾아보지마...

생성자 함수

생성자 함수와 일반 함수에 기술적인 차이는 없지만, 생성자 함수는 2가지의 컨벤션이 있다.

1. 함수 이름의 첫 글자는 대문자로!
2. 반드시 new 연산자를 붙여 실행!

예시를 보자.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new User(...)를 써서 함수를 실행할 때 어떤 알고리즘이 동작하는지 알아보자.

1. User() 함수 안에 빈 객체를 만들어 this에 할당한다.
2. User() 함수 본문을 실행한다. this에 새롭게 할당된 프로퍼티를 추가하여 this를 수정한다.
3. this를 반환한다.

User() 함수 안에서 일어나는 일을 아래의 예시를 통해 보자.

function User(name) {
  // this = {};  1. 빈 객체가 암시적으로 만들어짐

  // 2. 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  3. this가 암시적으로 반환됨
}

왜 생성자 함수를 사용하면 객체를 쉽게 만들 수 있다는 것일까? 아래의 예시를 통해 알아보자.

1. 생성자 함수로 객체 생성

   let user = new User("보라");

2. 객체 리터럴 문법으로 객체 생성

   let user = {
   name: "보라",
   isAdmin: false
   }

new User("보라")이외에도 new User("호진"), new User("지민") 등을 이용하면 손쉽게 사용자 객체를 만들 수 있다. 객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다.

생성자의 의의는 바로 여기에 있다. 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.

익명 생성자 함수

재사용할 필요가 없는데 복잡한 객체를 만들어야 할 때, 코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

위 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않는다. 처음 만들 때부터 단 한 번만 호출할 목적으로 만들었기 때문에 재사용이 불가능하다.

이렇게 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화 할 수 있다.

new.target과 생성자 함수

new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있다.

new와 함께 호출하지 않고 일반적인 방법으로 함수를 호출하면 new.target은 undefined를 반환하고, new과 함께 호출한 경우에는 함수 자체를 반환해준다.

function User() {
  alert(new.target);
}

// 'new' 없이 호출함
User(); // undefined

// 'new'를 붙여 호출함
new User(); // function User { ... }

new.target 문법은 자주 쓰이지 않는다. 자세한 내용은 문서를 참고하자.

생성자와 return문

생성자 함수에는 보통 return문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환도기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

그러나 만약 return문이 있다면, 아래의 규칙이 적용된다.

1. 객체를 return한다면 this가 반환되는 대신 해당 객체가 반환된다.
2. 원시형을 return하거나 return 예약어만 쓰고 아무것도 반환하지 않는다면 return문이 무시된다.

1번 규칙이 적용되는 예시

function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // 고릴라

2번 규칙이 적용되는 예시

function SmallUser() {

  this.name = "원숭이";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // 원숭이

사실 return문이 있는 생성자 함수는 거의 없다. 특이 케이스이기 때문에 넘어가도 좋다.

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다. this에 프로퍼티를 더해주는 것 말고도, 메서드를 더해주는 것도 가능하다.

예시를 보자.

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");
bora.sayHi(); // 제 이름은 이보라입니다. 

맨 아래 두 줄의 코드는 아래의 코드와 동일하게 동작한다.

bora = {
   name: "이보라",
   sayHi: function() { ... }
}

🌝 옵셔널 체이닝 '?.'

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

옵셔널 체이닝이 필요한 이유

1. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. 이렇게 에러가 발생하지 않아도 되는 상황에서 발생하는 에러를 막기 위해 옵셔널 체이닝이 필요하다.

   let user = {}; // 주소 정보가 없는 사용자
   

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

2. 또 다른 사례론 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생하는데, 이런 에러를 막기 위해 옵셔널 체이닝이 필요하다.

```js
// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

옵셔널 체이닝의 반환값

?.은 ?.앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

예시를 보자.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

위 예시를 통해 우리는 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있다.

참고로 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있다. user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 합니다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생한다.

옵셔널 체이닝을 사용할 때 주의점

1. 옵셔널 체이닝을 남용하지 말 것!

?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.

사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니다. 그러니 옵셔널 체이닝 user.address?.street를 사용하는 것이 바람직합니다.

실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 한다(즉 옵셔널 체이닝을 쓰면 안된다). 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워진다.

2. ?.앞의 변수는 꼭 선언되어 있어야 한다.

변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생한다.

// ReferenceError: user is not defined
user?.address;

이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.

단락 평가

?.는 왼쪽 평가대상에 값이 없으면(null이나 undefined이면) 즉시 평가를 멈춘다. 참고로 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않습니다.

alert(x); // 0, x는 증가하지 않습니다.

?.()와 ?.[]

?.은 연산자가 아니다. ?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)이다.

함수 관련 예시와 함께 존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 어떻게 쓸 수 있는지 알아보자.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했다.

그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인했다. user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되는 반면, user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있다.

한편, ?.[]를 사용할 수도 있다. 예시를 보자.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

?.과 delete

?.은 delete와 조합해 사용할 수도 있다.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

?.과 할당 연산자

?.은 할당 연산자 왼쪽에서 사용할 수 없다.

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

요약

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.

1. obj?.prop : obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] : obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() : obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

?.은 ?.의 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다. 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 하자.

🌝 심볼형

자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다.

지금까지는 프로퍼티 키가 문자형인 경우만 살펴봤다. 이번에는 프로퍼티 키로 심볼값을 사용해 보면서, 심볼형 키를 사용할 때의 이점에 대해 살펴보자.

심볼

심볼(symbol)은 원시형 데이터로, 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다.

// id는 새로운 심볼이 됩니다.
let id = Symbol();

심볼을 만들 때 심볼 이름이라 불리는 '설명'을 선택적으로 추가할 수 있다. 심볼 이름은 디버깅 시 아주 유용하다.

설명이 같아도 심볼은 유일한 식별자이기 때문에, 동일 연산자(==)로 비교 시 false가 반환된다. 즉 이름이 같더라도 값이 항상 다른 것이다.

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

symbol.description 프로퍼티를 이용하면 설명을 보여줄 수 있다.

let id = Symbol("id");
alert(id.description); // id

심볼은 문자형으로 자동 형 변환되지 않는다

심볼형 값은 다른 자료형으로 암시적 형 변환(자동 형 변환)되지 않는다. 문자열과 심볼은 근본이 다르기 때문에 우연히라도 서로의 타입으로 변환돼선 안된다.

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

심볼을 반드시 출력해줘야 하는 상황이라면 아래와 같이 .toString() 메서드를 명시적으로 호출해주면 된다.

let id = Symbol("id");
alert(id.toString()); // Symbol(id)가 얼럿 창에 출력됨

'숨김(hidden)' 프로퍼티

심볼을 이용하면 ‘숨김(hidden)’ 프로퍼티를 만들 수 있다. 숨김 프로퍼티는 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티이다.

1. third party 코드에서 가지고 온 user라는 객체를 를 이용해 어떤 작업을 해야 하는 상황이라고 가정해보자.

   let user = { // 서드파티 코드에서 가져온 객체
   name: "John"
   };
   

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있습니다.

왜 문자형 프로퍼티가 아니라 심볼형 프로퍼티를 사용했을까?

`user`는 third party 코드에서 가지고 온 객체이므로 함부로 새로운 프로퍼티를 추가할 수 없다. 그런데 심볼은 third party 코드에서 접근할 수 없기 때문에, 심볼을 사용하면 third party 코드가 모르게 `user`에 프로퍼티를 추가할 수 있다(식별자 부여).


2. 이 외에도 각각 `user`를 다르게 식별해야 하는 상황에도 심볼을 이용할 수 있다. `user`의 원천인 third party 코드, 현재 작성 중인 스크립트, 제3의 스크립트(자바스크립트 라이브러리 등)가 각자 서로의 코드도 모른 채 `user`를 식별해야 하는 상황이 발생했다고 해보자.
제3의 스크립트에선 아래와 같이 Symbol("id")을 이용해 전용 식별자를 만들어 사용할 수 있다.
```js
// ...
let id = Symbol("id");

user[id] = "제3 스크립트 id 값";

심볼은 유일성이 보장되므로 우리가 만든 식별자와 제3의 스크립트에서 만든 식별자가 충돌하지 않는다. 이름이 같더라도 충돌하지 않는다.

그럼 심볼 대신 문자형을 사용했다면 어떻게 될까? 충돌이 발생할 수 있다.

let user = { name: "John" };

// 문자열 "id"를 사용해 식별자를 만들었습니다.
user.id = "스크립트 id 값";

// 만약 제3의 스크립트가 우리 스크립트와 동일하게 문자열 "id"를 이용해 식별자를 만들었다면...

user.id = "제3 스크립트 id 값"
// 의도치 않게 값이 덮어 쓰여서 우리가 만든 식별자는 무의미해집니다.

객체 리터럴 안의 심볼

객체 리터럴 {...}을 사용해 객체를 만들고 심볼형 프로퍼티를 넣어줄 경우, 대괄호를 사용해 심볼형 키를 만들어야 한다.

let id = Symbol("id");

let user = {
  name: "John",
  [id]: 123 // "id": 123은 안됨
};

for...in에서 배제되는 심볼형

키가 심볼인 프로퍼티는 for..in 반복문에서 배제된다.

let id = Symbol("id");
let user = {
  name: "John",
  age: 30,
  [id]: 123
};

for (let key in user) alert(key); // name과 age만 출력되고, 심볼은 출력되지 않습니다.

// 심볼로 직접 접근하면 잘 작동합니다.
alert( "직접 접근한 값: " + user[id] );

Object.keys(user)에서도 키가 심볼인 프로퍼티는 배제됩니다. 심볼형 프로퍼티 숨기기(hiding symbolic property)라 불리는 이런 원칙 덕분에 외부 스크립트나 라이브러리는 심볼형 키를 가진 프로퍼티에 접근하지 못한다.

그런데 Object.assign은 키가 심볼인 프로퍼티를 배제하지 않고 객체 내 모든 프로퍼티를 복사한다.

let id = Symbol("id");
let user = {
  [id]: 123
};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

객체를 복사하거나 병합할 때, 대개 id 같은 심볼을 포함한 프로퍼티 전부를 사용하고 싶어 할 것이라는 생각에서 설계되었다.

전역 심볼

심볼은 이름이 같더라도 값이 항상 다르다(모두 별개로 취급된다). 그런데 이름이 같을 때 값도 같길 원한다면, 즉 이름이 같은 심볼이 같은 개체를 가리키길 원한다면, 전역 심볼 레지스트리(global symbol registry)를 사용해야 한다.

전역 심볼 레지스트리 안에 심볼을 만들고 해당 심볼에 접근하면, 이름이 같은 경우 항상 동일한 심볼을 반환해준다.

레지스트리 안에 있는 심볼을 읽거나, 새로운 심볼을 생성하려면 Symbol.for(key)를 사용하면 된다. 이 메서드를 호출하면 이름이 key인 심볼을 반환한다. 조건에 맞는 심볼이 레지스트리 안에 없으면 새로운 심볼 Symbol(key)을 만들고 레지스트리 안에 저장한다.

// 전역 레지스트리에서 심볼을 읽습니다.
let id = Symbol.for("id"); // 심볼이 존재하지 않으면 새로운 심볼을 만듭니다.

// 동일한 이름을 이용해 심볼을 다시 읽습니다(좀 더 멀리 떨어진 코드에서도 가능합니다).
let idAgain = Symbol.for("id");

// 두 심볼은 같습니다.
alert( id === idAgain ); // true

전역 심볼 레지스트리 안에 있는 심볼은 전역 심볼이라고 불린다. 애플리케이션에서 광범위하게 사용해야 하는 심볼이라면 전역 심볼을 사용하자!

전역 심볼을 찾을 때 사용되는 Symbol.for(key)에 반대되는 메서드도 있다. Symbol.keyFor(sym)를 사용하면 이름을 얻을 수 있다.

// 이름을 이용해 심볼을 찾음
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

// 심볼을 이용해 이름을 얻음
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id

Symbol.keyFor는 전역 심볼 레지스트리를 뒤져서 해당 심볼의 이름을 얻어낸다. 검색 범위가 전역 심볼 레지스트리이기 때문에 전역 심볼이 아닌 심볼에는 사용할 수 없다. 전역 심볼이 아닌 인자가 넘어오면 Symbol.keyFor는 undefined를 반환한다.

전역 심볼이 아닌 모든 심볼은 description 프로퍼티가 있다. 일반 심볼에서 이름을 얻고 싶으면 description 프로퍼티를 사용하면 된다.

let globalSymbol = Symbol.for("name");
let localSymbol = Symbol("name");

alert( Symbol.keyFor(globalSymbol) ); // name, 전역 심볼
alert( Symbol.keyFor(localSymbol) ); // undefined, 전역 심볼이 아님

alert( localSymbol.description ); // name

🌝 객체를 원시형으로 변환하기

형 변환 챕터에선 객체의 형 변환은 다루지 않았습니다. 메서드와 심볼에 대한 지식을 갖추었으니 본격적으로 객체의 형 변환에 대해 알아보자.

1. 객체에 대한 논리평가 객체는 논리 평가 시 예외없이 항상 true를 반환합니다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다.

2. 숫자형으로의 형 변환 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다.

3. 문자형으로의 형 변환 문자형으로의 형 변환은 대개 alert(obj)같이 객체를 출력하려고 할 때 일어난다.

ToPrimitive

객체 형 변환은 세 종류로 구분되는데, hint라 불리는 값이 구분 기준이된다. hint는 목표로 하는 자료형 정도로 이해하면 된다.

1. string alert 함수같이 문자열을 기대하0는 연산을 수행할 때는(객체-문자형 변환), hint가 string이 된다.

   // 객체를 출력하려고 함
   alert(obj);
   

// 객체를 프로퍼티 키로 사용하고 있음 anotherObj[obj] = 123;

2. `number`
수학 연산을 적용하려 할 때(객체-숫자형 변환), `hint`는 `number`가 된다.
```js
// 명시적 형 변환
let num = Number(obj);

// (이항 덧셈 연산을 제외한) 수학 연산
let n = +obj; // 단항 덧셈 연산
let delta = date1 - date2;

// 크고 작음 비교하기
let greater = user1 > user2;

3. default 아주 드물게 발생하지만 연산자가 기대하는 자료형이 ‘확실치 않을 때’ hint는 default가 된다.

이항 덧셈 연산자 +는 피연산자의 자료형에 따라 문자열을 합치는 연산을 할 수도 있고 숫자를 더해주는 연산을 할 수도 있다. 따라서 +의 인수가 객체일 때는 hint가 default가 된다.

동등 연산자 ==를 사용해 객체-문자형, 객체-숫자형, 객체-심볼형끼리 비교할 때도, 객체를 어떤 자료형으로 바꿔야 할지 확신이 안 서므로 hint는 default가 된다.

// 이항 덧셈 연산은 hint로 `default`를 사용합니다.
let total = obj1 + obj2;

// obj == number 연산은 hint로 `default`를 사용합니다.
if (user == 1) { ... };

크고 작음을 비교할 때 쓰이는 연산자 <, > 역시 피연산자에 문자형과 숫자형 둘 다를 허용하는데, 이 연산자들은 hint를 number로 고정하여 hint가 default가 되는 일이 없다. 이는 하위 호환성 때문에 정해진 규칙이다.

하지만 실제 일을 할 때는 이런 사항을 모두 외울 필요는 없고, Date 객체를 제외한 모든 내장 객체는 hint가 "default인 경우와 number인 경우를 동일하게 처리한다. 우리도 커스텀 객체를 만들 땐 이런 규칙을 따르면 된다.

"boolean" hint?

‘boolean’ hint는 존재하지 않는다. 모든 객체는 그냥 true로 평가된다.

자바스크립트의 형 변환 알고리즘에 따른 세가지 메서드

1. 객체에 obj[Symbol.toPrimitive](hint)메서드가 있는지 찾고, 있다면 메서드를 호출한다. Symbol.toPrimitive는 시스템 심볼로, 심볼형 키로 사용된다.

2. 1에 해당하지 않고 hint가 string이라면, obj.toString()이나 obj.valueOf()를 호출합니다(존재하는 메서드만 실행됨).

3. 1과 2에 해당하지 않고, hint가 number나 default라면 obj.valueOf()나 obj.toString()을 호출한다(존재하는 메서드만 실행됨).

Symbol.toPrimitive

첫 번째 메서드부터 살펴보자. 자바스크립트엔 Symbol.toPrimitive라는 내장 심볼이 존재하는데, 이 심볼은 아래와 같이 목표로 하는 자료형(hint)을 명명하는 데 사용된다.

obj[Symbol.toPrimitive] = function(hint) {
  // 반드시 원시값을 반환해야 합니다.
  // hint는 "string", "number", "default" 중 하나가 될 수 있습니다.
};

실제 예시를 살펴보자.

let user = {
  name: "John",
  money: 1000,

  [Symbol.toPrimitive](hint) {
    alert(`hint: ${hint}`);
    return hint == "string" ? `{name: "${this.name}"}` : this.money;
  }
};

// 데모:
alert(user); // hint: string -> {name: "John"}
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500

이렇게 메서드를 구현해 놓으면 user는 hint에 따라 문자열로 변환되기도 하고 숫자로 변환되기도 한다. user[Symbol.toPrimitive]를 사용하면 메서드 하나로 모든 종류의 형 변환을 다룰 수 있다.

toString과 ValueOf

toString과 ValueOF 메서드를 이용하면 '구식’이긴 하지만 형 변환을 직접 구현할 수 있다.

객체에 Symbol.toPrimitive가 없으면 자바스크립트는 아래 규칙에 따라 toString이나 valueOf를 호출한다.

• hint가 'string’인 경우: toString -> valueOf 순. toString이 있다면 toString을 호출, toString이 없다면 valueOf를 호출한다.
• 그 외: valueOf -> toString 순

이 메서드들은 반드시 원시값을 반환해야한다. toString이나 valueOf가 객체를 반환하면 그 결과는 무시된다. toString이나 valueOf가 객체를 반환해도 에러가 발생하지는 않는다. 반면에 Symbol.toPrimitive는 무조건 원시자료를 반환해야 한다. 그렇지 않으면 에러가 발생한다.

일반 객체는 기본적으로 toString과 valueOf에 적용되는 다음 규칙을 따른다.

• toString은 문자열 "[object Object]"을 반환한다.
• valueOf는 객체 자신을 반환한다.

let user = {name: "John"};

alert(user); // [object Object]
alert(user.valueOf() === user); // true

Symbol.toPrimitive를 사용한 위쪽 예시와 동일하게 동작하는 예시를 보자.

let user = {
  name: "John",
  money: 1000,

  // hint가 "string"인 경우
  toString() {
    return `{name: "${this.name}"}`;
  },

  // hint가 "number"나 "default"인 경우
  valueOf() {
    return this.money;
  }

};

alert(user); // toString -> {name: "John"}
alert(+user); // valueOf -> 1000
alert(user + 500); // valueOf -> 1500

객체에 Symbol.toPrimitive와 valueOf가 없으면, toString이 모든 형 변환을 처리한다.

let user = {
  name: "John",

  toString() {
    return this.name;
  }
};

alert(user); // toString -> John
alert(user + 500); // toString -> John500

3개 메서드의 반환 타입에 대해 자세한 내용은 공식 문서를 참고하자.

추가 형 변환

객체가 피연산자일 때는 다음과 같은 단계를 거쳐 형 변환이 일어난다.

1. 객체는 원시형으로 변환된다.
2. 변환 후 원시값이 원하는 형이 아닌 경우엔 또다시 형 변환이 일어난다.

let obj = {
  // 다른 메서드가 없으면 toString에서 모든 형 변환을 처리합니다.
  toString() {
    return "2";
  }
};

alert(obj * 2); // 4, 객체가 문자열 "2"로 바뀌고, 곱셈 연산 과정에서 문자열 "2"는 숫자 2로 변경됩니다.

1. obj * 2에선 객체가 원시형으로 변화되므로 toString에의해 obj는 문자열 "2"가 됩니다.
2. 곱셈 연산은 문자열은 숫자형으로 변환시키므로 "2" * 2는 2 * 2가 됩니다.

그런데 이항 덧셈 연산은 위와 같은 상황에서 문자열을 연결한다.

let obj = {
  toString() {
    return "2";
  }
};

alert(obj + 2); // 22("2" + 2), 문자열이 반환되기 때문에 문자열끼리의 병합이 일어났습니다.

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

🍏 기본 자료형과 복합 자료형

• 기본 자료형 : 숫자, 문자열, 불
• 복합 자료형 : 배열, 함수, 객체

복합 자료형은 기본 자료형보다 훨씬 크다.

기본 자료형

스택(stack)에 저장한다.

• 스택 : 상자들이 쌓여있는 구조 같은 것. 스택스택 쌓는 공간. 잘 쌓는 공간

변수/상수를 만든다는 것은, 스택에 있는 상자에 이름을 붙여준다는 의미이다. ex) a=10은, 스택 상자에 10을 넣고 그 상자의 이름을 a라고 붙여준다는 의미이다.

기본 자료형은 직접 스택에 저장이 된다.

복합 자료형

힙(heap)에 저장한다.

• 힙 : 힙힙 던져서 쌓는 공간. 대충 큰 것들을 던져서 쌓는 공간

복합 자료형은 그 자료를 가리키는 주소가 스택에 저장이 되고, 복합 자료형의 본체는 힙에 저장된다. 힙에 저장된 자료의 주소가 스택에 저장이 되는 것이다. 즉, 스택이 저장한 값은 힙에 저장된 자료의 주소를 가리키게 된다.

🍏 파괴적 처리와 비파괴적 처리

처리 후에

• 원본이 변경되었다 : 파괴적 처리
• 원본이 변경되지 않았다 : 비파괴적 처리

🍏 const의 제한

const는 스택에 있는 값을 변경할 때만 오류가 발생한다.

힙에 있는 레퍼런스된 복합 자료형을 조작하는 것에는 문제가 없다!

const a = 1;
a = 2; //오류 발생. 스택에 a의 값이 저장되고 그 a를 변경하려하므로.

const a = [1, 2];
a.push(3); //문제 없음. 스택에는 a의 주소가, 실제 배열 값은 힙에 저장되어 있으므로.

강의 내용 매우 좋음. 꼭 다시 보기

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

🐙 상수

JS는 대부분 상수로 선언해주고, 값이 변할 때만 변수로 사용해준다.

→ 헐.. 이게 맞나?

🐙 lvalue와 rvalue

let a = 10;

a : lvalue, left value → 넣는 놈 b : rvalue, right value → 꺼내는 놈, 값

ex)

let a = 10; // a는 넣는 놈, 10은 값
let b = a; // b는 넣는 놈, a는 꺼내는 놈

🐙 undefined 자료형

1. 상수와 변수로 선언하지 않은 식별자

   typeof(a); //undefined

2. 값이 없는 변수

   let b;
   typeof(b); //undefined

🐙 날짜와 시간 구하기

const date = new Date();
date.getFullYear(); // 올해 연도 출력
date.getMonth(); // 현재 달 출력. 0~11로 출력. 즉 11월이 10월로 출력됨
date.getDate(); // 현재 월 출력. 1~31로 출력. 21일이 21일이다.
date.getHours(); // 현재 시간 출력. 0~23으로 출력

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

💟 문자열 내에서 따옴표를 사용하고 싶은 경우

1. 작은 따옴표를 사용하고 싶다면

"This is 'string'"

• 문자열을 큰 따옴표로 감싸주면 된다.

*2. 큰 따옴표를 사용하고 싶다면 *

'This is "string"'

문자열을 작은 따옴표로 감싸주면 된다.

*3. 내부, 외부 둘다 같은 따옴표를 쓰고 싶다면 *

'This is \'string\''
"This is \"string\""

내부 따옴표 앞에 escape 기호 \를 사용해준다.

escape 기호 \

문자 그대로의 의미가 아니라 다른 의미로써 코드 실행기에게 무언가를 전달할 때 사용한다.

• \n : 줄바꿈
• \t : tab 문자
• \ : \ 자체

💟 문자열에 적용할 수 있는 처리

1. 문자열 연결 연산 : 문자열 + 문자열

   '안녕' + '하세요' //"안녕하세요" 

2. 문자 선택 연산 : 문자열[인덱스] → 문자 하나

   "안녕하세요"[0] //"안"
   "안녕하세요"[1] //"녕"

3. 문자열의 길이 : 문자열.length → 문자 개수

   "안녕하세요".length //5

   💟 부등식과 논리 연산자

   

위와 같은 부등식을 JS로 표현하고자 할 때,

-3 <= x <= 2와 같이 쓰면 안된다.

올바르게 쓰려면 논리 연산자를 이용해야 한다.

-3 <= x && x <= 2

드모르간 법칙

// 첫 번째 줄과 두 번째 줄은 동일 
!(12 <= x && x <= 13)
12 > x || x > 13

💟 typeof

자료형을 문자형으로 출력해줌

typeof(typeof(1)) // string. 
//typeof(1)의 결과는 "number"이고 "number"는 문자열이기 때문

모던 JS 튜토리얼 Part 1. 코어 자바스크립트 문서를 읽고 내용을 정리합니다.

🐑 코드 구조

세미콜론

JS는 대부분의 경우 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있다.

• 생략 가능한 경우

  alert('Hello')
  alert('World')

하지만, 항상 그런 것은 아니다.

• 생략 불가능한 경우

alert(3 +
1
+ 2);

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

결론은, 줄 바꿈으로 문을 나눴더라도 statement 사이엔 세미콜론을 넣는 것이 좋다는 것이다.

에디터에서의 주석 단축키

• 한 줄 주석 처리 : Ctrl+/

• 여러 줄 주석 처리 : Ctrl+Shift+/

cf) 중첩 주석은 지원하지 않는다. 쓸 경우 에러가 발생한다.

/*
  /* 중첩 주석 ?!? */
*/
alert( 'World' );

🐑 엄격 모드(strict mode)

엄격 모드(strict mode)란?

자바스크립트가 발전함에 따라 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 이로 인한 하위 호환성 문제 때문에, 변경사항 대부분이 기본적으로 활성화되지 않도록 되어있다.

대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 설정하면, 이 변경사항이 활성화된다.

use strict

use strict는 대부분 스크립트 최상단에 위치시킨다. use strict 위에는 주석만 위치할 수 있고, 그 외의 것들은 엄격모드가 적용되지 않는다.

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.

"use strict";

// 엄격 모드가 활성화되지 않습니다.

모던 자바스크립트에서의 use strict

모던 자바스크립트에는 '클래스’와 '모듈’이라는 것이 있는데, 이 둘을 사용하면 use strict가 자동으로 적용된다. 따라서 스크립트에 use strict를 붙일 필요가 없다.

결론은, 코드를 클래스와 모듈을 사용해 구성한다면 use strict를 생략해도 된다.

🐑 변수와 상수

변수

자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

let message;

한 줄에 여러 변수를 선언하는 것도 가능하다.

let user = 'John', age = 25, message = 'Hello';

하지만 가독성을 위해 한 줄에는 하나의 변수를 작성한다.

let user = 'John';
let age = 25;
let message = 'Hello';

cf) var 키워드 만들어진 지 오래된 스크립트에서 let 대신 var가 작성되어있는 경우가 있다. var는 let과 거의 동일하게 동작하지만, var는 ‘오래된’ 방식이다.

변수 이름 컨벤션

자바스크립트에서는 카멜 표기법(camelCase)을 흔히 사용한다. ex) myVeryLongName

상수

변화하지 않는 변수를 선언할 때는 const를 사용한다.

const myBirthday = '18.04.1982';

상수를 사용하는 이유는 변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해서이다.

대문자 상수

'상수’는 변수의 값이 절대 변하지 않음을 의미한다. 이 상수를 두 종류로 나눌 수 있다.

1. 코드가 실행되기 전에 이미 그 값을 알고 있는 상수. 즉 ‘하드 코딩한’ 값. 실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우 ex) 색상코드 #FFFFFF

2. 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수

1번의 경우에 대문자 상수를 작성한다.

비교 예제)

const BIRTHDAY = '18.04.1982'; // 1번 

const age = someCode(birthday); // 2번

birthday는 이미 알고 있고, 정해져있다. 반면, age는 런타임에 평가된다. 올해의 나이와 내년의 나이는 다르다. 따라서 age는 대문자 상수에 적합하지 않다.

🐑 자료형

자바스크립트에는 여덟 가지 기본 자료형이 있으나, 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

// 에러 발생하지 않음
let message = "hello";
message = 123456;

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 동적 타입(dynamically typed) 언어라고 부른다.

숫자형 : 특수 숫자값

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)이 있다.

1. Infinity : 무한대(∞)를 나타낸다.

   alert( 1 / 0 ); // 무한대
   

alert( Infinity ); // 무한대

2. NaN : 계산 중에 에러가 발생했다는 것을 나타내주는 값. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다. 
```javascript 
alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생

alert( "숫자가 아님" / 2 + 5 ); // NaN

BigInt

자바스크립트에선 (2^53-1)보다 크거나 -(2^53-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다.

대신 BigInt형을 사용한다. 이는 길이에 상관없이 정수를 나타낼 수 있으며, 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

const bigInt = 1234567890123456789012345678901234567890n;

사실 대부분의 상황에서 BigInt형을 쓸 일은 없지만, 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 필요하다.

문자형

let str = "Hello"; //큰따옴표
let str2 = 'Single quotes are ok too'; //작은 따옴표
let phrase = `can embed another ${str}`; //백틱

${…} 안에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수도 있다.

alert( "the result is ${1 + 2}" ); 

cf) JS에는 char형이 따로 없다.

null 값

어느 자료형에도 속하지 않는 값. null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다.

let age = null;

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다르다.

• 다른 언어에서의 null : '존재하지 않는 객체에 대한 참조’, '널 포인터(null pointer)'
• 자바스크립트에서의 null : ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용

undefined 값

undefined 값도 null 값처럼 자신만의 자료형을 형성한다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용한다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

let age;

alert(age); // 'undefined'가 출력됩니다.

null vs. undefined)

• null : 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타낼 때 사용
• undefined : 값이 할당되지 않은 변수의 초기값에 사용

객체와 심볼

다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라고 부르지만, 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

typeof 연산자

두 가지 형태의 문법

• 연산자: typeof x
• 함수: typeof(x)

헷갈리는 예외

typeof null // "object"  

typeof alert // "function"  

1. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다. 언어 자체의 오류! null이 객체가 아니다!
2. typeof는 피연산자가 함수면 "function"을 반환한다. 그러므로 typeof alert는 "function"을 출력해준다. 그런데 '함수’형은 따로 없고, 함수는 객체형에 속한다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태이다. 실무에선 이런 특징이 매우 유용하게 사용되기도 한다.

🐑 alert, prompt, confirm을 이용한 상호작용

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보자.

alert

사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.

alert("Hello");

alert은 undefined 값을 반환한다. (아무것도 반환하지 않는다.)

cf) 모달(modal)창 메시지가 있는 작은 창. 사용자는 모달 창이 떠있는 동안 모달 창 바깥에 있는 버튼을 누르는 등 페이지의 나머지 부분과 상호 작용이 불가능하다.

prompt

result = prompt(title, [default]);

메세지(title)와 사용자 input field, 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창이 뜬다. default 값을 넣어주면 기본 input 값이 field에 세팅되어있다.

사용자는 input field에 원하는 값을 입력하고 확인을 누르거나, 취솧 혹은 Esc를 누를 수 있다.

prompt 함수는 사용자가 input field에 기재한 문자열을 반환한다. 사용자가 입력을 취소한 경우는 null이 반환된다.

cf) 인수를 감싸는 대괄호 [...]의 의미 default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.

ex)

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); 

confirm

result = confirm(question);

매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다.

사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환한다.

ex)

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가, 취소 버튼을 눌렀다면 false가 나온다.

🐑 형 변환

문자형으로 변환

1. alert 함수 alert메서드는 매개변수로 문자형을 받지만, 만약 다른 형의 값을 전달받으면 그 값이 문자형으로 자동 변환된다.

2. String 함수 String(value) 함수는 value를 문자형으로 명시해서 변환해준다.

   let value = true;
   alert(typeof value); // boolean
   

value = String(value); // 문자열 "true"로 변환됨 alert(typeof value); // string

false는 문자열 "false"로, null은 문자열 "null"로 변환된다.

### 숫자형으로 변환
1. 숫자형이 아닌 값에 연산을 취하기
숫자형이 아닌 값들에 연산을 취하면 해당 값들은 자동으로 숫자형으로 변환된다.
```js
alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행된다

2. Number 함수 Number(value) 함수는 value를 숫자형으로 명시해서 변환해준다.

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.
alert(typeof num); // number

❗한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다.

• NaN 값의 자료형은 숫자형이고, 그 값이 NaN인 것이다!

  let age = Number("임의의 문자열 123");
  alert(age); // NaN

  그 외 숫자형으로 변환 시 적용되는 규칙

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN 
alert( Number(true) );        // 1
alert( Number(false) );       // 0

Boolean형으로 변환

Boolean(value) 함수는 value를 Boolean형으로 바꿔준다.

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false

• false : 숫자 0, 빈 문자열, null, undefined, NaN (falsy한 값들) (그 외의 값은 true로 변환)

❗문자열 "0"은 true이다.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true! 숫자형이랑 헷갈리지 말 것

여기서 발표 + 퀴즈내자 !!!!!!!!!!!

🐑 기본 연산자와 수학

거듭제곱 연산자 **

alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)

이항연산자 +로 연결하는 문자열과 숫자

1. 문자열 + 문자열 : 문자열이 단순히 연결된다.

   let s = "my" + "string";
   alert(s); // mystring

2. 문자열 + 숫자 / 숫자 + 문자열 : 숫자가 문자열로 변환된다.

   alert( '1' + 2 ); // "12"
   alert( 2 + '1' ); // "21"

• 3개일 때도 마찬가지. 피연산자 중 어느 하나라도 문자열이면, 나머지가 다 문자열로 변환된다.

그 외 연산자로 연결하는 문자열과 숫자

+를 제외한 나머지 연산자로 연결되는 피연산자는 숫자로 변환된다.

alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산 진행
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행

단항연산자 +의 숫자형으로의 변환

단항연산자가 숫자형이 아닌 다른 자료형 앞에 붙으면, 해당 피연산자는 숫자형으로 변환된다. 즉 Number 함수와 동일한 역할을 하게 된다.

alert( +true ); // 1
alert( +"" );   // 0

let apples = "2";
let oranges = "3";

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

여기서 알 수 있는 사실 : 단항연산자가 이항연산자보다 우선순위가 높다!

여기도 발표준비~

= 연산자의 복잡한 표현식

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

동작 원리 이해용으로 작성된 코드. 직접 코드를 작성할 땐 이런 방식을 사용하지 말 것. 가독성이 떨어진다!

증가, 감소 연산자의 전위형과 후위형

• 전위형 : ++counter. 증가·감소 후의 새로운 값을 반환한다. 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 된다.
• 후위형 : counter++. 증가·감소 전의 기존 값을 반환한다. 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 된다.

비교 예시)

let counter = 1;
let a = ++counter; // (*)
alert(a); // 2

let counter = 1;
let a = counter++; // (*) ++counter를 counter++로 바꿈
alert(a); // 1

반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없다.

쉼표 연산자 ,

쉼표 연산자(comma operator) ,는 좀처럼 보기 힘들고, 특이한 연산자 중 하나이다. 코드를 짧게 쓰려는 의도로 가끔 사용된다.

쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 한다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

이렇게 마지막 표현식을 제외한 모든 것을 버리는 연산자는 어디서 사용되는 걸까? 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이를 사용합니다.

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

쉼표 연산자를 사용한 트릭은 여러 자바스크립트 프레임워크에서 볼 수 있다. 하지만 쉼표 연산자는 코드 가독성에 도움이 되지 않는다. 따라서 곰곰이 생각해 본 후, 진짜 필요한 경우에만 사용하기를 추천한다.

🐑 비교 연산자

문자열 비교

문자열은 왼쪽부터 사전순으로 문자열을 비교한다. 문자열의 길이가 다를 경우 긴 문자열이 더 크다고 결론낸다.

alert('Z' > 'A'); //true
alert('Glow' > 'Glee'); //true
alert('Bee' > 'Be'); //true
alert('2' > '12'); //true

다른 형을 가진 값들에 대한 비교 연산

비교하려는 값의 자료형이 다르면 JS는 이 값들을 숫자형으로 바꾼다.

alert('2' > 1); //true. 2 > 1 → true
alert('01' == 1); //true. 1 == 1 → true
alert(true == 1); //true
alert(false == 0); //true
alert('' == false); //true 

일치 연산자

비교하려는 값의 자료형이 다르더라도 형 변환 없이 값을 비교한다. 즉 자료형의 동등 여부까지 검사하는 것이다. JS에서는 이것을 대부분 사용한다.

alert(false === 0); //false

null 값이 피연산자일 때

피연산자가 null일 때 비교 연산자는 형 변환을 하고, 동등 연산자는 형 변환을 하지 않는다.

alert(null > 0); // false. 0 > 0은 false
alert(null == 0); //false. null이 0으로 바뀌지 않음.
alert(null >= 0); //true. 0 >= 0은 true

undefined 값이 피연산자일 때

피연산자가 undefined일 때, 비교 연산자와 동등 연산자 모두 항상 false를 반환한다.

alert(undefined > 0); // false
alert(undefined < 0); //false
alert(undefined == 0); //false

null과 undefined가 피연산자일 때 동등 연산자

null과 undefined는 동등 연산자를 취하면 서로 같다. 다른 자료형과는 배타적이다. 둘만 동등하다.

🐑 if와 '?'를 사용한 조건 처리

조건부 연산자 '?'

조건부 연산자는 물음표?로 표시한다. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르는 사람도 있다. JS에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일하다.

let result = condition ? value1 : value2;

condition이 truthy라면 value1이, 그렇지 않으면 value 2가 result에 반환된다.

ex)

let accessAllowed = (age > 18) ? true : false;

age > 18 조건을 만족하면 accessAllowed에 true가, 만족하지 않으면 false가 반환된다.

다중 '?'

물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있다.

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용해야 한다. 여러 분기를 만들어 처리할 때는 if를 사용하는 것이 좋다.

🐑 논리 연산자

첫 번째 truthy를 찾는 OR 연산자 '||'

JS에서만 제공하는 논리연산자 OR의 추가 기능에 대해 알아보자.

result = value1 || value2 || value3;

OR 연산자가 여러 개인 경우, OR 연산자 ||는 다음 순서에 따라 연산을 수행한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 확인한다.
2. 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
3. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환한다.

반환 값이 형 변환을 하지 않은 원래 값이라는 것이 중요하다.

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

cf) 구체적인 활용 방안은 문서 2.11 참고

첫 번째 falsy를 찾는 AND 연산자 '&&'

result = value1 && value2 && value3;

AND 연산자 &&는 아래와 같은 순서로 동작한다.

1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 확인한다.
2. 각 피연산자는 불린형으로 변환됩니다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
3. 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환된다.

   // 첫 번째 피연산자가 truthy이면,
   // AND는 두 번째 피연산자를 반환합니다.
   alert( 1 && 0 ); // 0
   alert( 1 && 5 ); // 5
   

// 첫 번째 피연산자가 falsy이면, // AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다. alert( null && 5 ); // null alert( 0 && "아무거나 와도 상관없습니다." ); // 0

```js
alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 마지막 값, 3

NOT(!)을 2개 연달아 사용하면?

NOT을 두 개 연달아 사용(!!)하면 값을 Boolean형으로 변환할 수 있다.

alert(!!"non-empty string"); //true
alert(!!null); //false

🐑 nullish 병합 연산자 '??'

a ?? b

• a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b

아래의 코드와 동일한 기능을 한다.

x = (a !== null && a !== undefined) ? a : b;

nullish 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

'??'와 '||'의 차이

둘은 매우 비슷해보이지만 중요한 차이점이 있다.

• ||는 첫 번째 truthy 값을 반환한다.
• ??는 첫 번째 정의된(defined) 값을 반환한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

🐑 while과 for 반복문

'?'와 break, continue

'?' 오른쪽엔 break나 continue가 올 수 없다.

if (i > 5) {
  alert(i);
} else {
  continue;
}

이 코드를 삼항 연산자로 나타낸다고 해보자.

(i > 5) ? alert(i) : continue; // 여기에 continue를 사용하면 안 됩니다.

이 코드는 에러를 발생시킨다.

break/continue와 레이블

평범한 break 지시자를 사용하면 안쪽에 있는 반복문만 빠져나올 수 있다. 그러나 중첩 반복문을 포함한 반복문 두 개 모두를 빠져나와야 한다면, 이럴 때 레이블을 사용할 수 있다.

레이블(label) 은 반복문 앞에 콜론과 함께 쓰이는 식별자이다.

labelName: for (...) {
  ...
}

반복문 안에서 break <labelName>문을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있다.

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

위 예시에서 break outer는 outer라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해준다. 따라서 제어 흐름이 (*)에서 alert('완료!')로 바로 바뀐다.

continue 지시자를 레이블과 함께 사용하는 것도 가능하다. 레이블이 붙은 반복문의 다음 이터레이션이 실행된다.

🐑 함수

함수의 선언과 사용

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage();
showMessage();

매개변수와 인수

• 매개변수 : 함수 선언문 괄호에 있는 변수. 선언 시 쓰이는 용어이다.
• 인수 : 함수를 호출 할 때 매개벼수에 전달되는 값. 호출 시 쓰이는 용어이다.

function showMessage(from, text) { //  from, text : 매개변수
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann, Hello : 인수

기본값

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 된다.

function showMessage(from, text) {
  alert(from + ': ' + text);
}

showMessage("Ann");

이렇게 코드를 작성해도 에러가 발생하지 않고, 매개변수 text에 undefined가 할당될 뿐이다. 따라서 에러없이 "Ann: undefined"가 출력된다.

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 '기본값(default value)'을 설정해주면 된다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

기본값에 함수 표현식도 넣어줄 수 있다.

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

cf) 매개변수에 기본값을 설정하는 다양한 방법은 2.15 문서 참고

return

return문이 없거나, return 지시자만 있는 함수는 undefined를 반환한다.

함수 이름 짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이므로, 함수 이름은 대개 동사이다.

그리고 함수는 동작 하나만 담당해야 한다. 함수는 간결하고 한 가지 기능만 수행할 수 있게 만들어야 한다.

🐑 함수 표현식

함수 선언 방식 외에 함수 표현식(Function Expression) 을 사용해서 함수를 만들 수 있다.

let sayHi = function() {
  alert( "Hello" );
};

함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었다. 즉 함수를 만들고 그 함수를 변수 sayHi에 할당한 것이다.

함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있다.

function sayHi() {
  alert( "Hello" );
}

alert( sayHi ); // 함수 코드 전체가 보임!

변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다.

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // (2) 함수 복사

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

콜백 함수

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다.

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출(called back)하는 것이 콜백 함수의 개념이다. 위 예시에선 사용자가 "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백이 된다.

아래와 같이 함수 표현식을 사용하면 코드 길이가 짧아진다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

함수 표현식 vs. 함수 선언문

1. 문법에서 차이가 있다

// 함수 선언문
function sum(a, b) {
  return a + b;
}

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

2. JS 엔진이 함수를 언제 생성하는지가 다르다

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

• 위 예시에서, 스크립트가 실행되고 실행 흐름이 let sum = function…의 우측(함수 표현식)에 도달 했을때 함수가 생성된다. 이때 이후부터 해당 함수를 사용(할당, 호출 등)할 수 있다.

• 하지만 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

• 따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용할 수 있다.

예시를 살펴보자.

//함수 선언문
sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

//함수 표현식
sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

3. scope가 다르다

// 함수 선언문

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 이런 에러가 발생한다.

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작합니다.

함수 표현식을 사용하면 에러가 발생하지 않는다. if문 밖에 선언한 변수 welcome에 함수 표현식으로 만든 함수를 할당하면 되기 때문이다.

그럼 어떤 것을 사용하는게 좋을까?

함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋다. 함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있고, 가독성도 좋아지기 때문이다. 그러나 어떤 이유로 함수 선언 방식이 적합하지 않거나, (위 예제와 같이) 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 한다.

🐑 화살표 함수 기본

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다. 바로 화살표 함수(arrow function)를 사용하는 것이다.

let func = (arg1, arg2, ...argN) => expression

이 함수는 아래 함수와 동일하다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

좀 더 구체적인 예시를 보자.

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

• 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

• 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.

let sayHi = () => alert("안녕하세요!");

sayHi();

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있다. 아래 예시와 같이 함수를 동적으로 만들 수 있다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

본문이 여러 줄인 화살표 함수

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

🐤 개발 환경

텍스트 에디터 : 코드 작성 ex) VSC

코드 실행기 : 웹 브라우저 ex) 크롬

🐤 about:blank

주소창에 about:blank를 입력하면 아무 것도 없는 페이지에 접속할 수 있다.

🐤 자바스크립트 코드를 실행하는 방법 2가지

1. 브라우저 개발자 도구 이용
2. 파일 만들어서 실행

프로그램은 기본적으로 2번 방법을 사용하고, 예외로 간단하게 테스트 해야하는 상황에서는 1번 방법을 사용한다.

1번의 경우 콘솔에서는 한 문장씩 코드를 입력하면서 브라우저와 대화하는 형태로 코드를 작성한다. 즉 브라우저가 코드를 곧바로 읽고, 실행(평가)하고, 출력하는 것을 반복한다. 이를 interactive하게 코드를 작성한다 또는 REPL(Read Eval Print Loop) 이라고 한다.

🐤 에러의 종류

Reference Error

단어 오탈자가 발생하면 뜬다.

ex) alert 대신 alrt 작성

Uncaught ReferenceError: alrt is not defined

Syntax Error

일반적으로 기호에서 오탈자가 발생하면 뜬다.

ex) alert"")

Uncaught SyntaxError: Unexpected string

🐤 VSC

들여쓰기

• 여러 줄 들여쓰기 : Shift 누른 채로 여러 줄 선택 + Tab 키 누르기
• 들여쓰기 삭제 : Shift + Tab

VSC 단축키

• 멀티 커서 : Alt + 마우스 클릭 / Ctrl + Alt + 방향키

🐤 자바스크립트 코딩 스타일

코딩 스타일 = 코딩 컨벤션 https://standardjs.com/rules-kokr.html

노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.

🦖 JS에서 제공하는 interval 기능

interval이란?

매번 일어나야 하는 무언가를 의미. 예를 들어 '매 2초'라고 하면 이것이 interval이 된다.

setInterval

setInterval(실행하려는함수, 호출되는함수의시간간격)

시간 단위는 ms이므로 5초마다 호출하고 싶다면 5000이라고 적어주어야 함

예시

function sayHello() {
  console.log("Hello");
}

setInterval(sayHello, 5000);

바로 실행되지 않고 5초 후 첫 시작이 되고, 그 이후 5초마다 계속 콘솔 창에 Hello가 출력된다.

setTimeout

setTimeout(실행하려는함수, 호출되는함수의시간간격)

예시

function sayHello() {
  console.log("Hello");
}

setTimeout(sayHello, 5000);

setInterval과 동일하게 바로 실행되지 않고 5초 후 첫 시작이 된다. 하지만 차이점은 그 이후에는 더이상 실행되지 않는다는 것이다. 즉 콘솔 창에 Hello가 처음 한번만 출력된다.

🦖 Date 객체

const date = new Date() //오늘 날짜와 요일, 현재 시간 정보 저장

date.getDate() // 며칠
date.getDay() // 무슨 요일(0은 일요일)
date.getFullYear() // 몇년도
date.getHours() // 몇시
date.getMinutes() // 몇분
date.getSeconds() // 몇초

🦖 padStart 함수

string에 쓸 수 있는 함수로, string의 길이에 따라 앞에 문자를 추가해주는 함수이다.

"1".padStart(2,"0") // 문자열의 길이가 2가 안될 경우, 해당 길이가 될 때까지 앞에 0을 붙여준다. 

결과는 "01"이 된다.

🦖 String() 함수

다른 자료형을 문자열로 바꿔주는 함수

String(new Date().getHours())
// getHours는 현재 시간인 숫자를 반환하는데, 이를 String으로 변환해주면 문자열로 변환된다.

노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.

🦖 string 길이 구하기

const username = "hello"
console.log(username.length);

출력 : 5

🦖 input 태그의 특징

input의 attirubte로 required, maxlength를 지정해줄 수 있다. 단, 이러한 input의 유효성 검사는 input 태그가 form 태그로 감싸져 있을 때만 가능하다.

<form>
  <input required maxlength="15" type="text" />
</form>

🦖 form 태그의 submit

아래의 경우에는 굳이 버튼에 click 이벤트를 주지 않아도 자동으로 submit이 된다.

기억하자 - submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다.

enter 버튼이나 input 안에 있는 button을 누를 경우

<form>
  <input type="text" placeholder="입력하세요"/>
  <button>로그인</button>
</form>

enter 버튼이나 type이 submit인 input / 엔터를 누를 경우

<form>
  <input type="text" placeholder="입력하세요"/>
  <input type="submit" value="로그인"/>
</form>

🦖 event의 기본동작 막아주기

form 태그의 submit

위에서 봤듯 form 태그의 submit은 자동으로 submit이 되는데, 그 때 자동으로 페이지가 새로고침이 되면서(기본동작) 입력한 value 값도 우리가 받기 전에 사라진다.

이를 해결하기 위해서는** submit 이벤트**에 대한 함수를 만들어주어야 하고, 해당 함수에서 새로고침을 막아주는 코드를 적어주어야 입력한 value를 우리가 받아낼 수 있다.

HTML

<form id="login-form">
  <input type="text" placeholder="입력하세요"/>
  <input type="submit" value="로그인"/>
</form>

Javascript

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) { //argument에 submit 이벤트에 대한 정보가 저장됨
  event.preventDefault(); //event의 기본동작을 막아주는 코드
  console.log(loginInput.value); //콘솔창에 사용자가 input란에 입력한 값이 뜬다.
}

loginForm.addEventListener("submit", onLoginSubmit); //submit event

모든 EventListener function의 첫 번째 arugment에는 항상 지금 막 벌어진 일들에 대한 정보를 담은 object가 들어간다. JS가 그 정보를 제공하기 때문에, 우리는 그냥 arguement라는 공간만 주면 된다. 우리가 argument만 작성해주면 JS가 방금 일어난 event(여기서는 submit)에 대한 정보를 argument에 채워넣어준다. argument명은 아무거나 와도 되지만 보통은 event라고 작성한다. console.log(event)를 작성해주면 object에 담긴 정보들을 확인할 수 있다.

preventDefault() 어떤 event의 기본행동도 발생되지 않는 것. 즉, 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작을 막아주는 것. 여기서는 submit 이벤트의 기본동작인 브라우저의 페이지 새로고침을 막아주는 것이다.

a 태그의 link

link의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다. 이걸 막아보자! HTML

<a href="https://nomadcoders.co">링크</a>

Javascript

const link = document.querySelector("a");

function handleLinkClick(event) {
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

이제 link를 클릭해도 해당 페이지로 이동하는 기본동작이 작동되지 않는다!

참고) 함수 뒤에 ()를 작성하는 경우와 작성하지 않는 경우

함수 뒤에 ()를 작성한 코드는 바로 해당 함수를 실행시키겠다는 의미

브라우저가 이 코드를 보는 순간 함수를 바로 실행시킨다. 그래서 EventListener를 할 때 함수 뒤에 ()를 안 붙이는 것이다. 바로 실행시키는게 아니라 이벤트가 발생했을 때만 실행시키려고 하는 거니까! addEventListener에 안에 있는 함수는 우리가 직접 실행하는게 아니라는 것을 명심하자! 내가 아니라 브라우저가 해주는 것이고, 브라우저는 실행시켜줄 뿐만 아니라 event에 대한 정보도 제공해준다! 우리가 argument로 자리만 마련해주면, 그 정보를 argument에 공짜로 넣어준다!

🦖 CSS - visibility:hidden과 display:none의 차이점

visibility: hidden;

공간은 그대로 두고, 눈에만 안 보인다.

display: none;

잡아둔 공간까지도 모두 사라진다.

🦖 변수명 convention) string만 포함된 변수

일반적으로 string만 포함된 변수는 대문자로 표기한다.

const HIDDEN_CLASSNAME = "hidden";

🦖 string과 변수 조합하는 방법 2가지

단순히 ""와 +로 연결

const username = loginInput.value; //input에서 사용자 입력값을 받아와 변수에 저장한다고 가정
console.log("Hello " + username); //honi를 입력하면 콘솔에 "Hello honi" 출력

`와 변수값을 의미하는 $ 이용하기 (추천!)

const username = loginInput.value;
console.log(`Hello ${username}`); // 위의 코드와 동일하게 동작

반드시 `로 감싸야하고, ${변수명} 으로 작성하면 JS가 알아서 변수에 저장된 값으로 바꿔준다.

🦖 localStorage API

우리가 브라우저에 뭔가를 저장할 수 있게 해준다.

예를 들어 유튜브에서 볼륨을 조절하고 새로고침하면, 유튜브가 그 볼륨값을 기억하는 등 뭔가를 기억할 수 있도록 해주는 것이다.

local storage에 뭐가 들어있는지 보고 싶으면 개발자 도구 - Application - local storage를 찾으면 된다.

localStorage에는 다양한 메소드들이 있다.

setItem

local storage에 정보를 저장할 수 있다.

localStorage.setItem("username", "nico") // (key값, value값)

getItem

local storage에 저장된 정보를 불러올 수 있다.

localStorage.getItem("username") // key값에 해당하는 value를 가져온다

만약 없는 key값으로 getItem을 한다면, null이 반환된다!

removeItem

local storage에 저장된 정보를 지울 수 있다.

localStorage.removeItem("username") // key값에 해당하는 값을 지운다.

여기부터는 과제하면서 내가 삽질한 이야기..

🦖 input으로 입력받은 값의 자료형

input에 사용자가 입력한 값은 문자열로 취급한다... 심지어 input type이 number여도....................... 숫자만 입력해도 숫자로 이루어진 문자열로 본다..........

노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.

🦖 HTML과 Javascript

Javascript를 사용하는 이유는 HTML과 상호작용하기 위해서이다. JS를 통해 HTML의 element들을 변경하고, 읽을 수 있다.

Javascript는 HTML에 이미 연결되어 있기 때문에 별다른 연결을 해줄 필요가 없다.

🦖 브라우저의 핵심 object인 document

document는 브라우저에 이미 존재하는 object로 HTML을 가리킨다. HTML 파일을 보여준다. 이 document가 Javascript가 HTML 파일을 가져오도록 해주는 시작점이다.

console창에 document.title이라고 치면 HTML의 title에 접근하여 해당 title의 content를 보여준다.

title은 document의 properties(속성)으로, 속성은 변경이 가능하기 때문에 HTML 파일을 직접 수정하지 않아도 console 창에서 수정할 수 있다. 즉 JS로 HTML 요소에 접근하여 수정이 가능하다는 것이다. document.title = "수정할 제목" 과 같이 작성해주면 된다.

그렇다면 어떻게 Javascript가 HTML의 특정한 element를 가져오고 접근할 수 있을까?

🦖 getElementByID()

원하는 요소의 ID로 접근하여 해당 요소를 가져온다.

document.getElementByID("타켓 태그의 id");

🦖 element를 찾은 후 HTML 바꾸기

getElementByID와 같이 element를 찾은 후, HTML을 JS에서 원하는대로 접근하거나 바꿀 수 있다.

// HTML에서 h1 태그를 찾고자 하고, 해당 태그의 id가 abc라고 가정하자.
const element = document.getElementById("abc");

element.innerText = "Got you!"; // innerText는 h1의 contents를 의미

console.log(element.id); // console창에 abc가 출력된다.
console.log(element.className); // h1 태그에 class 부여는 안했으므로 console 창에는 아무것도 출력되지 않는다.

🦖 HTML의 요소(태그)를 가져오는 다양한 방법

getElementByID()

위에서 설명했듯 getElementById는 id로 접근하여 가져오는 것

getElementsByClassName()

class name으로 접근하여 가져오는 것. 하지만 해당 class name을 가진 모든 태그들을 가져와서 하나의 배열에 저장하기 때문에 많은 element를 한번에 가지고 와야하는 경우에 사용한다.

const hellos = document.getElementByClassName("hello");
// class name이 hello인 모든 element들을 가져온다.

getElementsByTagName()

태그명으로 접근하여 가져오는 것. ByClassName과 마찬가지로 해당 태그명을 가진 모든 tag들을 한꺼번에 array로 가져온다.

const title = document.getElementsByTagName("태그명");

querySelector()

querySelector는 element를 CSS 방식으로 검색할 수 있다. CSS selector를 사용하여 검색할 수 있다는 것이다. 예를 들면 동일한 class명을 지니고 있는 여러 요소(태그)들 중에 특정 태그명을 가진 태그만 가져올 수 있다.

가장 많이 사용한다. querySelector는 ByClassName이나 ByTagName과 달리 단 하나의 element를 return 해주기 때문이다. 만약에 조건에 맞는 해당 태그가 여러개라면 첫 번째 것만 가져온다.

const title = document.querySelector(".hello h1"); // hello 클래스의 h1 태그를 가져온다

const title = document.querySelector("#hello"); // id가 hello인 태그를 가져온다.
// const title = document.getElementsById("hello"); 와 동일하다.

const title = document.querySelector("#hello h1"); // id가 hello인 h1 태그를 가져온다.
// getElementsByID에서는 이와 같이 해줄 수 없다.

const title = document.querySelector("div.hello:first-child h1");
// div 태그 중 class명이 hello이고 first-child인 h1 태그를 가져온다.

만약 다 가지고오고 싶다면 querySelectorAll()을 사용하면 된다. 이것은 ByClassName과 ByTagName과 동일하게 한꺼번에 array로 가져온다.

🦖 querySelector로 HTML style 바꾸기

const title = document.querySelector("div.hello:first-child h1");
title.style.color = "blue"; // color라는 property(속성)을 변경해준 것

🦖 Event

click을 하거나, 마우스를 올리거나, 입력을 끝내거나, enter를 누르는 등이 event이다.

Javascript는 이 모든 event들을 listen 할 수 있다.

const title = document.querySelector("div.hello:first-child h1");
title.addEventListener(이벤트명); 

eventListener는 말 그대로 event를 listen 하는 것이다.

click event

element를 클릭하면 event가 발생한다.

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() { // 이벤트 발생시 특정 일을 해주는 함수
  console.log("title was clicked!");
}
title.addEventListener("click", handleTitleClick); 
// 이벤트 발생시 실행할 함수를 두 번째 인수로 전달

다른 예시

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() { // 이벤트 발생시 특정 일을 해주는 함수
  title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);

mouseenter

마우스가 element 위에 올라가면 이벤트가 발생한다.

const title = document.querySelector("div.hello:first-child h1");

function handleMouseEnter() {
  console.log("The mouse is here!");
}
title.addEventListener("mouseenter", handleMouseEnter);

mouseleave

마우스가 element 위에 올라갔다 떠나면 이벤트가 발생한다.

const title = document.querySelector("div.hello:first-child h1");

function handleMouseEnter() {
  title.innerText = "Mouse is here!"// innerText는 h1 태그의 contents를 의미
}

function handleMouseLeave() {
  title.innerText = "Mouse is gone!";
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

resize

window에서 사용할 경우, window 창의 크기를 조정하면 발생하는 event

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize); // window는 전체 창을 의미함. 

그런데 document의 body, head, title 이런 것들은 중요하기 때문에 기본적으로 존재하지만, 나머지 element들은 querySelector나 getElementById 등으로 찾아와야 한다.

copy

사용자가 복사를 할 경우 발생하는 이벤트

function handleWindowCopy() {
  alert("Copier!");
}

window.addEventListener("copy", handleWindowCopy); // window는 전체 창을 의미함. 

online/offline

와이파이 연결이 되었을 경우/끊길 경우 발생하는 event

function handleWindowOffline() {
  alert("SOS no WIFI");
}

function handleWindowOnline() {
  alert("ALL GOOD");
}
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

🦖 event를 listen하는 또다른 방법

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() { 
  console.log("title was clicked!");
}

function handleMouseEnter() {
  title.innerText = "Mouse is here!"// innerText는 h1 태그의 contents를 의미
}

function handleMouseLeave() {
  title.innerText = "Mouse is gone!";
}

title.addEventListener("click", handleTitleClick); 
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

이 코드는 위에서 해왔던 방법인데, 또다른 방법이 있다.

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() { 
  console.log("title was clicked!");
}

function handleMouseEnter() {
  title.innerText = "Mouse is here!"// innerText는 h1 태그의 contents를 의미
}

function handleMouseLeave() {
  title.innerText = "Mouse is gone!";
}

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

하지만 addEventListener를 사용하는 것이 더 좋다. 왜냐하면 나중에 .removeEventListener를 통해 event listener를 제거할 수 있기 때문이다.

🦖 listen하고 싶은 event 찾기 팁

1. 구글링

구글에 찾고 싶은element이름 html element mdn 검색하기! ex) h1 html element mdn

mdn 문서 중에 Web APIs 라는 문장이 포함된 페이지를 들어간다. Javascript 관점의 HTML Heading Element를 여기에서 확인할 수 있다.

2. 콘솔창에 element 출력

const title = document.querySelector("div.hello:first-child h1");
console.dir(title);

console.dir은 element의 properties들을 출력해준다. properties들 중 이름 앞에 on이 붙어있다면 그것이 바로 event listener이다. 실제 코드 작성 시에는 on을 빼고 작성하면 된다.

🦖 예시 - 클릭할 때마다 blue->tomato로 색 변환되는 event

const a = document.querySelector("h1");

function handleClick() {
  const currentColor = a.style.color;
  let newColor;
  if (currentColor == "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  a.style.color = newColor;
}
a.addEventListener("click", handleClick);

🦖 getter와 setter

h1.style.color와 같이 h1의 color을 얻을 수 있는 것 등은 getter이고, h1.style.color = "blue"; 와 같이 color를 변경해주는 것 등은 setter이다.

🦖 총정리

1. element를 찾아라
2. event를 listen해라
3. 그 event에 반응하라 (무언가를 보여주거나, 감추거나, 색을 바꾸는 등)

🦖 Javascript에서 변경하는 style

위에서는 JS로 style을 변경했지만 사실은 CSS가 하는 것이 좋다. style 작업에 적합한 도구는 CSS이고, animation에 적합한 도구는 Javascript이다.

🦖 HTML 파일에 CSS import 하기

head 안에서 title 태그를 작성하기 전에 아래와 같은 코드를 작성해주면 된다.

<link rel="stylesheet" href="CSS파일명.css" />

🦖 위에서 했던 예시에서 style을 CSS에서 해주자

CSS

body {
  background-color: beige;
}

h1 {
  color: cornflowerblue;
}

.active { // active는 내가 작성한 클래스명임
  color: tomato;
}

JS

const h1 = document.querySelector("h1");

function handleClick() {
  const activeClass = "active";
  if (h1.className === activeClass) {
    h1.className = "";
  } else {
    h1.className = activeClass;
  }
}
h1.addEventListener("click", handleClick);

하지만 이 코드의 문제점은 만약 기존에 다른 class명을 가지고 있었고 그 class명에 해당하는 CSS가 적용이 되어있었다면 className을 바꿈과 동시에 해당 CSS는 의미가 없어져버린다.

아래와 같은 경우이다.

html

<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1 class="sexy-font">Hello!</h1> // h1에 기존의 class가 있음
    <script src="app.js"></script> 
  </body>
</html>

CSS

body {
  background-color: beige;
}

h1 {
  color: cornflowerblue;
}

.active {
  color: tomato;
}

.sexy-font { // 이 부분 확인
  font-family: "Courier New", Courier, monospace;
}

그렇기 때문에 className보다는 classList를 사용하는 것이 좋다.

classList는 우리가 class들의 목록으로 작업할 수 있도록 허용해준다. 아래와 같이 사용하면 된다.

const h1 = document.querySelector("h1");

function handleClick() {
  const activeClass = "active";
  if (h1.classList.contains(activeClass)) { //classList가 active class를 포함하고 있는지 확인
    h1.classList.remove(activeClass);
  } else {
    h1.classList.add(activeClass);
  }
}
h1.addEventListener("click", handleClick);

그런데 이 코드를 더욱 간단하게 할 수 있다. 위와 같은 일은 자주 발생하는 일이기 때문에 이것을 해결해줄 function이 개발되어 있다. 바로 toogle이다.

toogle 함수는 class name이 존재하는지 확인을 해준다. 만약 class name이 존재할 경우 해당 class name을 제거하고, 존재하지 않는다면 class name을 추가한다.

toogle 함수를 적용한 코드는 아래와 같다.

const h1 = document.querySelector("h1");

function handleClick() {
  h1.classList.toggle("active");
}
h1.addEventListener("click", handleClick);

toogle은 껐다 켰다 해주는 스위치같은 것이라고 생각하면 된다.

노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.

🦖 브라우저에 내장되어있는 자바스크립트

자바스크립트를 바로 다루고 싶다면 브라우저의 검사(insepct)의 console을 사용하면 된다. 자바스크립트는 브라우저에 이미 설치되어있기 때문에 그냥 console에서 사용하면 된다.

자바스크립트는 항상 브라우저에 상주하며 내가 어떤 코드를 입력하기를 기다리고 있다.

그러나 콘솔에서는 한줄만 작성할 수 있고 긴 프로그램 작성에는 유용하지 않기 때문에 자바스크립트 파일을 만드는 것이다.

🦖 브라우저와 CSS, Javascript

CSS와 JS 파일 만들고 코드를 작성한 후 해당 파일을 브라우저에서 열면, 브라우저는 해당 코드를 실행하지 않고 그냥 작성한 코드를 보여주기만 해서 우리가 원하는 결과가 나오지 않는다. 이들은 파일을 연다고 실행되지 않는다.

이것은 HTML이 접착제 역할을 함으로써 해결할 수 있다. 즉 CSS와 JS는 HTML 없이는 우리가 원하는대로 동작될 수 없다는 것이다.

브라우저는 HTML을 열어서 실행하고, HTML 파일이 CSS와 JS를 가져오는 것이다.

🦖 Javascript 파일을 HTML에서 가져오기

일반적으로, 자바스크립트 파일은 맨 위에서 가져오지 않고 주로 끝에서 한다.

HTML body 태그의 끝에서 아래와 같이 적으면 된다.

<body>
  <script src="파일명.js"></script>
</body>

🦖 브라우저의 검사(insect)에서 HTMl, CSS, JS 확인하기

HTML은 Elements의 왼쪽 창에서, CSS는 오른쪽 창에서 확인할 수 있다. JS는 Console 창에서 확인할 수 있다.

🦖 콘솔에게 메세지를 보내는 JS 코드

console.log(545454);

콘솔창은 545454를 출력한다. 즉 콘솔에 log 또는 print를 하는 것이다.

🦖 변수 선언

JS에서는 변수 선언을 위해 const(상수), let을 사용한다.

const a = 5;
let b = 6;

console.log(a+2);
console.log(b*2);

const는 값이 바뀔 수 없다. 즉 값을 절대 업데이트 할 수 없다. 반면 let은 값이 바뀔 수 있다.

둘중 더 디폴트로 사용하는 것은 const고 변수를 업데이트 해야하는 경우에만 let을 사용함

과거에는 const, let은 존재하지 않았고 var가 있었는데 var는 어떠한 규칙도 가지고 있기 않다. 그렇기 때문에 이것은 상수에 대한 보호가 안 되어서 잘 사용하지 않는다. var은 절대 쓰지 말 것!

🦖 자바스크립트 변수명 컨벤션

카멜케이스로 작성한다.

const veryLongVariableName = 0;

추가) 파이썬에서는 스네이크케이스로 작성한다.

very_long_variable_name = 0

🦖 문자열 작성

자바스크립트 문자열 작성시 큰따옴표나 작은 따옴표 무엇을 쓰든 상관없다.

🦖 boolean 데이터 타입

true, false로 나뉘어져있음.

const amIFat = true;

참고) python은 true 대신 True, false 대신 False이다.

🦖 null 데이터 타입

아무것도 없음을 의미. 그 변수에 아무것도 없음을 의미한다.

const amIFat = null;

주의! false랑 헷갈리지 말 것. false는 false라는 값이 존재하는 것임.

null은 절대 자연적으로 발생하지 않는다. null은 우리가 변수 안에 어떤 것이 없다는 것을 확실하게 해주기 위해 사용하는 것이다. 자바스크립트에게 여기에는 값이 "없다"는 것을 알려주는 것이다.

참고) python은 null 대신 None이다.

🦖 undefined 데이터 타입

우리는 보통 variable을 만들면 값을 주지만, 만약 변수에 값을 주지 않고 콘솔 창에 출력하면 undefined라고 출력이 된다. 정의되어 있지 않다는 것이다.

let something;
console.log(someting);

🦖 null vs. undefined

undefined는 변수가 존재하는데, 값이 주어지지 않은 것이고 null은 변수가 존재하고, 값이 주어졌는데 그 값이 "비어있음"인 것이다.

🦖 배열(array)

데이터로 이루어진 리스트. 꼭 요소들의 데이터 타입이 동일하지 않아도 됨.

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
const nonsense = [1, 2, "hello", false, null, true, undefined];

console.log(daysOfWeek, nonsense);

// 값에 접근하기
console.log(daysOfWeek[2]);

// 값 추가하기
daysOfWeek.push("sun");

만약 인덱스 범위를 넘어선 인덱스 값을 출력하면 undefined라고 나온다.

🦖 객체(Objects)

// 객체 생성
const player = {
  name: "nico",
  points: 10,
  fat: true,

}

// 객체 통으로 출력
console.log(player);

// 특정 속성값 출력
console.log(player.name);
console.log(player["name"]); //동일

// 속성값 업데이트
player.fat = false;

// 속성값 추가
player.lastName = "potato";

player가 object이고, player object 안의 name, points, fat이 property이다.

object 안에서는 = 대신에 : 를 사용한다. 그리고 하나의 property를 작성하고 다른 property를 작성하기 위해서는 ,(콤마)를 쓴다.

object의 property에 접근하기 위해서는 object명.property명 을 쓰면 된다. 이를 통해 console.log 또한 console이라는 object의 log라는 property를 사용하고 있음을 알 수 있다.

속성값을 업데이트하는 코드에서, 의문이 생길 수 있다. player 객체는 const이고 const는 수정할 수 없다고 했는데 어떻게 업데이트가 가능한 것일까? 사실 우리가 하는 것은 객체의 "속성값"을 업데이트하는 것이지 객체 자체를 업데이트하는 것은 아니기 때문에 오류가 생기지 않는다. 아래와 같이 객체 자체를 수정할 때는 오류가 발생한다.

player = false;

const는 원래 object 타입이었는데 boolean으로 바꾸려고 하는 경우이다.

🦖 리스트(배열) vs. 객체

리스트는 모든 값이 같은 의미를 가진다. 만약 내가 한 주의 요일 리스트를 가진다면 그 리스트에 있는 모든 값들이 요일이라는 의미를 지닌다.

하지만 object(객체)에서는 객체 이름만으로는 무엇인지 알 수 없는 property들도 있다. 그래서 player.name, player.points, player.fat과 같이 속성이름으로 접근하는 것이다.

🦖 함수(function)

함수의 목적은 여러가지 일을 같은 코드로 하기 위해 사용한다.

function 함수명(변수명1, 변수명2, ...) {
  return 반환값;
}

const 함수반환값받을변수명 = 함수명(인수명1, 인수명2, ...);

함수가 받는 변수의 자료형 써줄 필요 없이 그냥 변수명만 써주면 됨.

만약 함수가 받는 변수는 1개로 해뒀는데 인수를 여러개 보낸다면 첫 번째 인수만 함수가 받는다.

함수가 받는 변수명은 함수 안에서만 사용 가능하다. 함수 밖에서 사용하면 정의되지 않은 변수명으로 인식된다.

🦖 Object 안에 함수 넣기

const player = {
  name: "nico",
  sayHello: function (otherPersonsName) {
    console.log("hello " + otherPersonsName + " nice to meet you");
  },
};

console.log(player.name);
player.sayHello("lynn");

🦖 NaN 자료형

Not a Number

🦖 prompt 함수

사용자에게 창을 띄울 수 있게 해주는 함수이다. prompt는 2개의 argument(인자)를 받는데 하나는 string형인 message(문자), 다른 하나는 default이다.

사용자에게 message를 보여주고 값을 넣으라고 말해준다.

하지만 prompt는 사용자가 값을 입력할 때까지 javascript 코드를 일시정지 시킨다. 또한 message가 별로 안 예쁘고 CSS를 적용시킬 수 없기 때문에 잘 사용하지 않는다.

사용자가 입력한 message를 반환해준다.

🦖 변수의 자료형을 알려주는 코드

const age = 15;
console.log(typeof age);

🦖 string을 number로 바꿔주는 함수 parseInt

const str = "15";
console.log(typeof parseInt(str)); // string이 아닌 number가 출력된다.

parseInt는 "123"과 같은 숫자로 된 문자열만 숫자로 바꿔줄 수 있다. 그래서 만약 "hello" 같은 문자로 된 문자열을 처리하면 결과값으로 NaN(Not a Number)을 반환한다.

🦖 NaN인지 아닌지 확인하는 함수 isNaN

boolean(true/false)을 return하여 number인지 아닌지 알려준다.

const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));

🦖 연산자 ===와 !==

==은 값이 같은지 비교하는 연산자이고, ===은 값과 유형까지도 비교하는 연산자이다. 주로 ===을 사용하는 것을 추천한다.

not도 마찬가지이다. !=은 값만 비교, !==은 값과 유형까지도 비교한다.

🦖 조건문

if(조건) {
  //조건문이 true일 경우 이 코드블록 실행
} else {
  //조건문이 false일 경우 이 코드블록 실행
}

if(조건1) {
  // 조건1이 true일 경우 이 코드블록 실행
} else if(조건2) {
  // 조건1이 false이고 조건2가 true일 경우 이 코드블록 실행
}

if에 들어가는 조건(condition)은 boolean으로 판별 가능해야 한다.

예를 들어보자.

const age = parseInt(prompt("How old are you?"));

if (isNaN(age) || age < 0) {
  console.log("Please write a real positive number");
} else if (age < 18) {
  console.log("You are too young.");
} else if (age <= 50) {
  console.log("You can drink");
} else if (age <= 80) {
  console.log("You should exercise");
} else {
  console.log("You can do whatever you want.");
}

노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.

🦖 프로그래밍 언어 자바 스크립트

프론트엔드에서는 자바스크립트가 쓸 수 있는 유일한 프로그래밍 언어이기 때문에 다른 프로그래밍 언어들은 필요가 없다.

기억하자! 자바스크립트가 프론트엔드에 쓸 수 있는 유일한 프로그래밍 언어이다! 그래서 프론트엔드 개발자는 다른 선택지가 없다. 다르게 생각하면 프론트엔드에서는 언어를 자바 스크립트 하나만 배우면 된다는 것이다.

자바스크립트는 세계 모든 컴퓨터에서 사용할 수 있다. 자바스크립트는 모든 브라우저에 내장되어있기 때문이다. 그래서 따로 자바 스크립트를 설치해줄 필요가 없다.

🦖 프레임워크

자바스크립트 기술을 좀 더 다듬어서 더 깊에 배우고 싶으면 프레임워크를 공부하면 된다.

프레임워크는 내가 하려는 일을 도와주는 도우미같은 것이다.

그 중 하나가 바로 리액트 네이티브이다. 리액트 네이티브는 자바스크립트 만으로 안드로이드와 iOS 앱을 만들 수 있게 해준다.

그 다음으로는 일렉트론이 있다. 일렉트론은 HTML, CSS, JS로 데스크탑 앱을 만들 수 있게 해준다.

🦖 자바스크립트의 다양한 용도

백엔드

전에는 불가능했지만 이제는 자바스크립트로 백엔드도 가능하다.

프론트엔드와 백엔드 모두 자바스크립트로 만들 수 있는 것이다.

3D

자바스크립트 3D로 무언가를 하기에 아주 완벽한 프로그래밍 언어이다.

예를 들어 실시간 채팅방을 만들고 싶다면 자바스크립트가 딱이다.

머신러닝

ml5.js를 쓰면 머신러닝 모델을 생성하는 웹사이트를 구축해서 그 모델을 훈련시킬 수도 있다.

🦖 replit

replit은 브라우저에서 무엇이든 코딩을 가능하게 해준다. 현존하는 대부분의 언어들로 프로그래밍 할 수 있다.

✏️ 선언해주어야 하는 헤더

remove 함수는 algorithm 헤더를 선언해주어야 한다.

erase 함수는 vector의 함수들 중 하나이기 때문에, vector 헤더를 선언해주어야 한다.

✏️ 기본 형태

remove 함수의 기본 형태

remove(first, last, 삭제하려는 값); // 범위는 [first,last)

remove 함수는 특정 범위를 탐색하여 그 범위에 있는 특정 값을 삭제할 수 있다.

erase 함수의 기본 형태

// vector의 이름이 v라고 가정

// 1
v.erase(first, last); // 범위는 [first,last)

// 2
v.erase(삭제하려는 값의 위치);

erase 함수는 특정 범위에 속하는 모든 값들을 삭제하거나(해당 범위에서의 특정 값은 삭제 불가능), 특정 값의 위치를 보내면 해당 값을 삭제할 수 있다

두 함수의 공통점

둘 다 first와 last에 포함되는 범위가 [first, last)이다. last는 범위에 포함되지 않는다는 것을 기억하자!

그리고 두 함수 모두 맨 끝 범위에 위치한 값은 삭제할 수 없다! ex) 1 2 3 4 5 가 있을 때, 범위가 15라면 5는 삭제할 수 없다. 만약 범위가 13까지라면 3은 삭제할 수 없다.

두 함수의 차이점

remove 함수는 아예 특정 값을 인자로 보내어 해당 값을 삭제할 수 있고, 이 때 특정 범위를 탐색하여 삭제하려는 값을 찾아내어 삭제할 수 있다.

반면 erase 함수의 경우 특정 값을 삭제하려면 해당 값의 위치를 인자로 보내야 삭제할 수 있고, 범위 내에서 특정 값을 찾아내는 것은 불가능하다. 범위가 주어지면 그 범위의 모든 값들을 삭제하는 것만 가능하다.

✏️ 두 함수의 반환값

remove 함수의 반환값

remove 함수는 주어진 범위( [first, last) - last는 미포함 ) 중에서 삭제되지 않은 가장 마지막 값의 새로운 위치에서 바로 뒤에 있는 위치의 iterator를 반환해준다.

예를 들어 1 2 3 2 2 4 라는 vector의 전체 범위 중에서 2를 remove하면 1 3 4 ... 가 되는데, 1 3 4 ... 에서 4 바로 뒤 위치의 iterator를 반환해준다는 것이다.

또 예를 들어 1 2 2 3 4 5 라는 vector의 범위를 2 2 3 이라고 하고 2를 remove하면 1 3 4 5 ... 가 되는데(실제로는 아니다. 이에 대한 내용은 뒤에 나오는 각 함수의 특징에 대한 설명에 나와있다), 범위 내에서 삭제되지 않은 마지막 값인 3의 바로 뒤 위치 iterator를 반환해준다는 것이다.

earse 함수의 반환값

erase 함수는 범위와 상관없이 마지막으로 지워진 값의 위치에서 바로 뒤에 있던 값의 새로운 위치의 iterator를 반환해준다.

예를 들어 1 2 3 4 5 6 7 이라는 vector의 범위를 2 3 4라고 하고 erase하면 2 3 4가 모두 지워지고 1 5 6 7 ... 이 된다(실제로는 아니다. 이에 대한 내용은 뒤에 나오는 각 함수의 특징에 대한 설명에 나와있다). 이 때 기존의 vector에서 가장 마지막에 지워진 4 바로 뒤에 있던 값이 5이므로, 1 5 6 7 ... 에 있는 새로운 5의 위치 iterator를 반환해준다는 것이다.

두 함수의 차이점

결국 erase 함수보다는, 삭제하고 남은 값들 중 가장 마지막 값의 바로 뒤를 가리키게 되는 remove 함수의 return 값이 더 쓸모있고 의미있어 보인다.

✏️ 각 함수의 특징

remove 함수의 특징

remove 함수를 통해 vector의 특정 값을 삭제한다고 할 때, 해당 값이 삭제가 되어 그만큼 vector의 사이즈가 줄어드는 것이 아니라, 삭제된 값이 다른 값으로 대체된다. 이 때 대체되어 들어가는 값은 주어진 범위에서 가장 뒤쪽에 있는 값(들)이 들어간다.

❗ 주의할 점은 그렇다고 해서 삭제된 값이 있던 위치에 그대로 대체되는 값이 들어가는 것이 아니라, 인자로 주었던 범위의 맨 뒤에 들어가게 된다.

예를 들어 vector에 1 2 3 4 5 가 들어있고 전체 범위에서 2를 삭제한다고 할 때, 2가 1개 삭제되므로 1 3 4 5 뒤에 5(가장 뒤쪽에 있는 값 1개)만 들어가는 것이다. 즉 1 3 4 5 5 가 된다. 또 vector에 1 2 2 2 3 4 가 들어있고 전체 범위에서 2를 삭제한다고 할 때, 2가 3개 삭제되므로 1 3 4 뒤에 2 3 4(가장 뒤쪽에 있는 값 3개)가 들어가는 것이다. 즉 1 3 4 2 3 4 가 된다. 또한 vector에 1 2 2 3 4 가 들어있고 범위가 2 2 3 일 때 2를 삭제하면, 2가 2개 삭제되므로 1 3 4 가 되고 범위의 맨 뒤는 3이었으므로 3의 뒤에 대체값이 붙는다. 이 때 대체값은 주어진 범위에서 가장 뒤쪽에 있는 값 2개이므로 2 3 이 된다. 결국 1 3 4 에서 3 뒤에 2 3 이 붙게 되어 1 3 2 3 4 가 된다.

vector의 특성상 값이 삭제되면 그 삭제된 공간 만큼 앞으로 당겨진다. 그러나 앞에서 말했듯 삭제된 값은 다른 값으로 대체되기 때문에, vector의 size나 capacity는 줄어들지 않고 그대로이다.

예시로 확인해보자.

#include <iostream> 
#include <vector>
#include <algorithm>

using namespace std;

int main() {
    vector<int> v;
    // v에 값 0~4 값 넣어주기 
    for (int i=0; i<5; i++) {
        v.push_back(i);
    }

    // 삭제 전 vector 값들, size, capacity 출력 
    cout << "삭제 전 vector 값들 : ";
    for (int i=0; i<5; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "확인을 위해 뒤의 값들 추가로 출력 : ";
    for (int i=5; i<10; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "size : " << v.size() << "\n";
    cout << "capacity : " << v.capacity() << "\n";
    cout << "============\n";

    // 삭제 : 0~4(처음부터 끝) 값 중 1 없애기 
    remove(v.begin(), v.end(), 1);

    // 삭제 후 vector 값들, size, capacity 출력 
    cout << "삭제 후 vector 값들 : ";
    for (int i=0; i<5; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";
    cout << "확인을 위해 뒤의 값들 추가로 출력 : ";
    for (int i=5; i<10; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "size : " << v.size() << "\n";
    cout << "capacity : " << v.capacity() << "\n";

    return 0;
}

결과를 보면 1이 정상적으로 삭제되고 앞으로 한칸 당겨졌지만 표시한 흰색 네모의 위치, 즉 범위의 맨 끝 위치에 대체값이 들어갔음을 확인할 수 있다. 그에 따라 size와 capacity도 변함이 없음도 확인할 수 있다.

erase 함수의 특징

erase 함수를 통해 vector의 특정 값을 삭제한다고 할 때, 해당 값이 삭제가 되고 그만큼 vector의 size가 줄어든다.

해당 값이 지워지면 container가 모든 요소를 새 위치로 재배치한다. 그렇기 때문에 size는 줄어도, capacity는 줄어들지 않는다.

예시로 확인해보자.

#include <iostream> 
#include <vector>

using namespace std;

int main() {
    vector<int> v;
    // v에 값 0~4 값 넣어주기 
    for (int i=0; i<5; i++) {
        v.push_back(i);
    }

    // 삭제 전 vector 값들, size, capacity 출력 
    cout << "삭제 전 vector 값들 : ";
    for (int i=0; i<5; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "확인을 위해 뒤의 값들 추가로 출력 : ";
    for (int i=5; i<10; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "size : " << v.size() << "\n";
    cout << "capacity : " << v.capacity() << "\n";
    cout << "============\n";

    // 0~4(처음부터 끝) 값 중 1 없애기 
    v.erase(v.begin()+1,v.begin()+2); 
    // 범위 설명 : 1번 인덱스 ~ 2번 인덱스 전 -> 즉 1번 인덱스 값 하나만 해당 

    // 삭제 후 vector 값들, size, capacity 출력 
    cout << "삭제 후 vector 값들 : ";
    for (int i=0; i<4; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";
    cout << "확인을 위해 뒤의 값들 추가로 출력 : ";
    for (int i=4; i<9; i++) {
        cout << v[i] << " ";
    }
    cout << "\n";    
    cout << "size : " << v.size() << "\n";
    cout << "capacity : " << v.capacity() << "\n";

    return 0;
}

결과를 보면 1이 정상적으로 삭제되고 앞으로 한칸 당겨졌으며, size 또한 삭제된 만큼 줄었음을 확인할 수 있다. 다만 표시한 흰색 밑줄을 보면, 값이 재할당되어 있다. 그에 따라 capacity는 변함이 없음을 확인할 수 있다.

두 함수 비교

두 함수 모두 값을 삭제하면 삭제한 공간만큼 앞으로 당겨지고, 값을 삭제를 해도 capacity는 유지된다는 것이 공통점이다.

그러나 remove 함수는 size 또한 그대로인 반면, erase 함수는 size가 삭제된 값의 개수만큼 줄어든다.

✏️ 각 함수의 주요 장/단점 정리

remove 함수는 값을 삭제해도 size가 줄어들지 않는다는 단점이 있다. 하지만 return 값이 남은 값들 중 마지막 값의 바로 뒤를 가리킨다는 장점이 있다.

erase 함수는 return 값이 의미가 없다는 단점이 있다. 하지만 함수의 값을 삭제하면 size가 줄어든다는 장점이 있다.

💻 remove() 함수와 erase() 함수를 함께 사용하여 vector의 값 쉽게 지우기

앞서 말한 remove 함수와 erase 함수의 단점을 보완하려면, 두 함수의 장점만을 취해서 함께 사용해주면 된다.

우선 코드를 보자.

// vector의 이름이 v라고 가정

v.erase(remove(first, last, 삭제하려는 값),last);

이 코드를 보면, remove 함수를 먼저 수행하고 그 결과를 erase 함수의 시작범위로 사용하고 있음을 알 수 있다. 즉, remove 함수의 return 값이 erase 함수의 시작범위가 되는 것이다.

그런데 remove 함수의 return 값은 삭제되지 않은 가장 마지막 값의 새로운 위치에서 바로 뒤에 있는 위치의 iterator를 반환해주기 때문에, 결국 범위 내에서 삭제하고 싶지 않은 값들은 냅두고, 그 값들의 바로 뒤부터가 erase 함수의 시작 범위가 된다.

삭제하고 싶지 않은 값들을 erase 해버리면 안되므로 그 뒤부터 erase 하도록 remove의 return 값을 erase 함수의 시작 범위에 넣어준 것이고, 이것이 바로 remove 함수의 장점을 이용한 것이다.

그러나 remove 함수에서 삭제하고 싶지 않은 값들 바로 뒤에, 삭제한 값의 대체값들이 생긴다. 이 대체값들로 인해 remove 함수가 size가 줄지 않는다는 단점이 생긴 것이다. 이 쓸모없는 대체값들을 없애주면서 size 또한 그만큼 줄여주어야 한다.

그것을 해주는 것이 바로 erase 함수이다. erase 함수가 삭제하고 싶지 않은 값들의 바로 뒤부터, 즉 대체값들의 시작 범위부터 시작하여 대체값들의 끝 범위까지 값을 삭제해주고 size 또한 줄여준다. 이것이 바로 erase 함수의 장점을 이용한 것이다.

💻 결론

vector의 특정 범위를 지정하여 해당 범위에 있는 특정 값을 지우고 싶을 때는 아래의 코드를 작성하면 된다.

// vector의 이름이 v라고 가정

v.erase(remove(first, last, 삭제하려는 값),last);

만약 범위를 vector의 전체로 설정하고 싶다면, 아래와 같이 작성하면 된다.

// vector의 이름이 v라고 가정

v.erase(remove(v.begin(), v.end(), 삭제하려는 값),v.end());

💻 참고 링크

C++ 공식 문서 - remove, erase 참고 블로그