JavaScript Fundamentals

• 9/17/2023
• 119 minutes to read

// 웹 페이지의 상호작용을 구현하는 프로그래밍 언어

현재 시간 출력

console.log(new Date().toLocaleTimeString());

JavaScript 강의 목차

1. JavaScript 소개
   • JavaScript의 역사
   • JavaScript의 특징과 장단점
   • JavaScript를 사용하는 대표적인 예시
2. 기본 문법
   • 변수 (Variable) 선언하기
   • 데이터 타입 (Data Type) 이해하기
   • 연산자 (Operator) 사용하기
   • 조건문 (Conditional Statement) 사용하기
   • 반복문 (Loop) 사용하기
   • 함수 (Function) 개념 이해하기
3. 개체 지향 프로그래밍 (OOP)
   • 개체 (Object) 개념 이해하기
   • 클래스 (Class) 개념 이해하기
   • 상속 (Inheritance) 개념 이해하기
   • 캡슐화 (Encapsulation) 개념 이해하기
4. 배열과 개체
   • 배열 (Array) 개념 이해하기
   • 배열 메서드 (Method) 사용하기
   • 개체 (Object) 개념 이해하기
   • 개체 메서드 (Method) 사용하기
5. 함수와 스코프
   • 함수 (Function) 개념 복습하기
   • 함수 표현식 (Function Expression) 이해하기
   • 클로저 (Closure) 개념 이해하기
   • 호이스팅 (Hoisting) 개념 이해하기
   • 스코프 (Scope) 개념 이해하기
   • let, const 키워드 사용하기
6. 비동기 처리와 콜백 함수
   • 비동기 (Asynchronous) 개념 이해하기
   • 콜백 함수 (Callback Function) 개념 이해하기
   • Promise 개념 이해하기
   • Async/Await 개념 이해하기
7. DOM과 이벤트 처리
   • DOM (Document Object Model) 개념 이해하기
   • DOM 조작 (Manipulation) 방법 이해하기
   • 이벤트 (Event) 개념 이해하기
   • 이벤트 핸들러 (Event Handler) 등록하기
8. jQuery 라이브러리
   • jQuery 소개
   • jQuery를 사용한 DOM 조작
   • jQuery를 사용한 이벤트 처리
   • jQuery를 사용한 애니메이션 (Animation) 효과 적용하기
9. AJAX와 Fetch API
   • AJAX 개념 이해하기
   • XMLHttpRequest 개체 사용하기
   • Fetch API 사용하기
   • REST API 호출하기
10. 모듈 시스템과 번들러

• 모듈 (Module) 개념 이해하기
• CommonJS와 ES6 모듈 시스템
• Webpack 번들러 소개
• Webpack 설정하기

11. 프로젝트 실습
    • 간단한 ToDoList 애플리케이션 만들기
    • 외부 API를 호출하여 데이터 출력하기
12. 추가 주제
    • 프론트엔드 프레임워크 (React, Vue, Angular) 소개
    • Node.js를 사용한 서버 사이드 자바스크립트 개발
    • ES6+ 문법 (화살표 함수, 클래스, 비구조화 할당 등) 사용하기
    • TypeScript 개념 이해하기
    • 자바스크립트 성능 최적화
13. JavaScript와 데이터 구조
    • 스택 (Stack) 개념 이해하기
    • 큐 (Queue) 개념 이해하기
    • 연결 리스트 (Linked List) 개념 이해하기
    • 해시 테이블 (Hash Table) 개념 이해하기
    • 트리 (Tree) 개념 이해하기
14. JavaScript와 알고리즘
    • 정렬 알고리즘 (Selection Sort, Bubble Sort, Quick Sort, Merge Sort 등) 구현하기
    • 검색 알고리즘 (선형 검색, 이진 검색 등) 구현하기
    • 그래프 (Graph) 개념 이해하기
    • 그래프 탐색 알고리즘 (DFS, BFS) 구현하기
15. JavaScript와 웹 애플리케이션
    • 웹 애플리케이션 개발 시 고려해야 할 보안 이슈 (XSS, CSRF 등)
    • 쿠키 (Cookie)와 세션 (Session) 개념 이해하기
    • JWT (JSON Web Token) 개념 이해하기
    • SPA (Single Page Application) 개념 이해하기
    • React, Vue, Angular 등 프론트엔드 프레임워크를 사용한 웹 애플리케이션 개발

1. JavaScript 소개

JavaScript의 역사

JavaScript는 웹 프로그래밍에서 매우 중요한 역할을 하는 프로그래밍 언어입니다. 다음은 JavaScript의 역사적인 발전 과정입니다:

1. 1995년: JavaScript의 탄생 JavaScript는 Brendan Eich에 의해 넷스케이프 브라우저에서 처음 개발되었습니다. 처음에는 "Mocha"라는 이름으로 시작되었으며, 나중에 "LiveScript"로 변경되었습니다. 최종적으로 "JavaScript"로 이름이 정해졌습니다.

2. 1996년: Microsoft가 JScript 개발 마이크로소프트는 JavaScript와 유사한 프로그래밍 언어인 JScript를 개발했습니다. JScript는 Internet Explorer에서 사용되었습니다.

3. 1997년: ECMA 스크립트 표준화 JavaScript는 ECMA International에서 표준화되었습니다. 이로 인해 JavaScript는 ECMAScript라는 공식 이름을 받았습니다.

4. 2002년: XMLHttpRequest 개발 XMLHttpRequest는 JavaScript로 작성된 비동기 통신 기술입니다. 이 기술은 서버와 비동기적으로 데이터를 교환하는 데 사용됩니다.

5. 2004년: Ajax 등장 Ajax(Asynchronous JavaScript and XML)는 JavaScript, XMLHttpRequest 및 CSS를 사용하여 웹 페이지를 동적으로 업데이트하는 기술입니다. 이 기술은 구글 맵과 같은 대화형 웹 애플리케이션을 만드는 데 큰 역할을 했습니다.

6. 2009년: Node.js 등장 Node.js는 Ryan Dahl에 의해 개발되었으며, 서버 측 JavaScript를 실행하기 위한 플랫폼입니다. Node.js는 V8 엔진을 사용하며, JavaScript를 이용하여 서버 사이드 애플리케이션을 작성할 수 있게 해줍니다.

7. 2015년: ES6(ECMAScript 2015) 출시 ES6는 ECMAScript의 다음 버전으로, let과 const 키워드, 화살표 함수, 클래스, 모듈 등의 새로운 기능을 도입했습니다.

8. 2016년: React Native 등장 React Native는 Facebook에서 개발된 JavaScript 라이브러리로, 모바일 애플리케이션을 만드는 데 사용됩니다.

JavaScript는 지금까지도 계속해서 발전하고 있으며, 계속해서 새로운 라이브러리와 프레임워크가 등장하고 있습니다.

JavaScript 버전

아래는 JavaScript 버전별 요약 표입니다.

JavaScript의 특징과 장단점

특징

1. 개체 기반 언어: JavaScript는 개체 지향 프로그래밍(OOP)을 지원하며, 개체를 생성하고 상속할 수 있습니다.
2. 동적 언어: JavaScript는 변수의 타입을 선언하지 않고도 사용할 수 있습니다. 이는 코드를 작성하는 데 있어서 유연성을 높여줍니다.
3. 클라이언트 측 스크립트 언어: JavaScript는 HTML과 함께 사용되어, 웹 페이지를 동적으로 제어하는 데 사용됩니다.
4. 이벤트 기반 프로그래밍: JavaScript는 이벤트 핸들링을 위한 기능을 제공하며, 사용자의 동작에 따라 웹 페이지를 동적으로 변경할 수 있습니다.
5. 대화형 언어: JavaScript는 브라우저의 개발자 콘솔 등에서 대화형으로 코드를 실행할 수 있습니다.

장점

1. 범용성: JavaScript는 웹 브라우저에서 실행되는 언어이지만, Node.js를 사용하여 서버 측에서도 실행할 수 있습니다.
2. 유연성: JavaScript는 동적 언어이기 때문에, 코드를 빠르게 작성하고 수정할 수 있습니다.
3. 빠른 실행: JavaScript는 V8 엔진과 같은 JIT(Just-In-Time) 컴파일러를 사용하여, 빠른 실행 속도를 제공합니다.
4. 대화형 디버깅: JavaScript는 대화형 언어이기 때문에, 개발자가 코드를 실행하면서 디버깅할 수 있습니다.
5. 풍부한 라이브러리: JavaScript는 수많은 라이브러리와 프레임워크가 존재하여, 쉽게 코드를 작성할 수 있습니다.

단점

1. 보안 취약성: JavaScript는 클라이언트 측에서 실행되기 때문에, 보안 취약성을 가지고 있습니다.
2. 호환성: 다양한 브라우저와 버전에서 JavaScript 코드가 동일하게 작동하지 않을 수 있습니다.
3. 비동기 처리: JavaScript는 비동기 처리를 위한 콜백 함수를 사용하기 때문에, 코드가 복잡해질 수 있습니다.
4. 유지보수: JavaScript는 유연성이 높아 코드의 가독성이 떨어지기 쉽기 때문에, 유지보수가 어려울 수 있습니다.
5. 실행 오류: JavaScript는 컴파일 과정이 없기 때문에, 실행 중에 오류가 발생할 수 있습니다. 따라서 테스트와 디버깅이 중요합니다.

JavaScript를 사용하는 대표적인 예시

JavaScript는 다양한 웹 애플리케이션에서 사용됩니다. 이를 통해 사용자와 상호작용하고, 웹 페이지를 동적으로 변경할 수 있습니다. 다음은 JavaScript를 사용하는 대표적인 예시입니다.

1. 웹 애플리케이션 개발 JavaScript는 클라이언트 측에서 실행되는 스크립트 언어이기 때문에, 웹 애플리케이션에서 많이 사용됩니다. 대표적으로 Gmail, Trello, Slack, Google Docs 등이 있습니다.

2. 웹 페이지 개발 JavaScript를 사용하여, HTML과 CSS로 작성된 웹 페이지를 동적으로 변경할 수 있습니다. 예를 들어, 마우스 클릭, 스크롤, 키 입력 등에 반응하여 웹 페이지를 업데이트할 수 있습니다.

3. 웹 게임 개발 JavaScript를 사용하여, 브라우저에서 실행되는 웹 게임을 개발할 수 있습니다. 예를 들어, Angry Birds, Candy Crush, Subway Surfers 등이 있습니다.

4. 데이터 시각화 JavaScript를 사용하여, 데이터 시각화를 할 수 있습니다. 예를 들어, D3.js, Chart.js 등을 사용하여 차트, 그래프, 지도 등을 만들 수 있습니다.

5. 서버 측 개발 JavaScript를 사용하여, 서버 측 애플리케이션을 개발할 수 있습니다. Node.js를 사용하여, 서버 측에서 JavaScript를 실행할 수 있으며, Express.js, Socket.io 등의 프레임워크를 사용하여 웹 애플리케이션을 개발할 수 있습니다.

JavaScript는 매우 유연한 언어이기 때문에, 다양한 분야에서 활용될 수 있습니다.

JavaScript 개발 환경 구축

JavaScript 개발 환경은 다음과 같은 단계로 구축할 수 있습니다.

1. 웹 브라우저 설치 JavaScript는 웹 브라우저에서 실행되기 때문에, 먼저 웹 브라우저를 설치해야 합니다. 대표적으로 Google Chrome, Mozilla Firefox, Microsoft Edge 등이 있습니다.

2. 텍스트 에디터 설치 JavaScript 코드를 작성하기 위해, 텍스트 에디터를 설치해야 합니다. 대표적으로 Visual Studio Code, Sublime Text, Atom 등이 있습니다.

3. 웹 서버 설치 로컬에서 HTML과 JavaScript 파일을 실행하려면, 웹 서버를 설치해야 합니다. 대표적으로 Node.js의 http-server 모듈, Apache, Nginx 등이 있습니다.

4. JavaScript 라이브러리 및 프레임워크 설치 JavaScript 개발에 필요한 라이브러리와 프레임워크를 사용할 경우, 해당 라이브러리와 프레임워크를 설치해야 합니다. 대표적으로 React, Vue.js, Angular 등이 있습니다.

5. 디버깅 도구 설치 JavaScript 코드 디버깅을 위해, 디버깅 도구를 설치해야 합니다. 대표적으로 Chrome DevTools, Firefox Developer Tools 등이 있습니다.

6. 빌드 도구 설치 JavaScript 코드를 빌드하고, 배포하기 위해 빌드 도구를 설치해야 합니다. 대표적으로 Webpack, Babel, Grunt, Gulp 등이 있습니다.

JavaScript 개발 환경을 구축하는 과정에서는, 설치 및 설정하는 데 있어서 다소 어려움이 있을 수 있습니다. 하지만 한 번 구축해놓으면 향후 개발 프로젝트에서 효율적인 개발이 가능합니다.

Node.js 개발 환경 구축

Node.js는 JavaScript를 서버 측에서 실행할 수 있도록 해주는 플랫폼입니다. Node.js 개발 환경을 구축하여 JavaScript 학습을 진행할 수 있습니다. 다음은 Node.js 개발 환경을 구축하는 단계입니다.

1. Node.js 설치 먼저, Node.js를 설치해야 합니다. Node.js는 공식 웹사이트에서 다운로드하여 설치할 수 있습니다. 설치를 완료하면, 터미널에서 node -v 명령어를 입력하여 Node.js 버전을 확인할 수 있습니다.

2. 텍스트 에디터 설치 JavaScript 코드를 작성할 텍스트 에디터를 설치합니다. Visual Studio Code, Sublime Text, Atom 등을 사용할 수 있습니다.

3. 프로젝트 디렉토리 생성 프로젝트를 위한 디렉토리를 생성합니다. 터미널에서 mkdir project-name 명령어를 입력하여 디렉토리를 생성합니다.

4. npm 초기화 npm(Node Package Manager)을 사용하여 프로젝트에 필요한 패키지를 설치할 수 있습니다. 터미널에서 npm init 명령어를 입력하여 프로젝트를 위한 package.json 파일을 생성합니다.

5. Express.js 설치 Express.js는 Node.js를 위한 웹 프레임워크입니다. 프로젝트 디렉토리에서 터미널에 npm install express 명령어를 입력하여 Express.js를 설치합니다.

6. Hello, World! 출력하기 Express.js를 사용하여 간단한 Hello, World!를 출력하는 웹 서버를 만듭니다. index.js 파일을 생성하고 다음 코드를 작성합니다.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

이제 터미널에서 node index.js 명령어를 입력하여 웹 서버를 실행합니다. 브라우저에서 http://localhost:3000 주소를 입력하면, Hello, World! 메시지를 확인할 수 있습니다.

Node.js를 사용하여 JavaScript 학습을 진행하면, 서버 측에서 JavaScript 코드를 실행할 수 있기 때문에, 클라이언트 측에서 사용하는 것과는 다른 측면에서 학습할 수 있습니다.

터미널에서 JavaScript 실행하기

다음은 Node.js의 node 명령어를 사용하여 JavaScript를 실행하는 Hello World 예제입니다.

1. hello.js 파일을 생성합니다.

2. 다음 코드를 입력합니다.

console.log('Hello, World!');

3. 터미널에서 다음 명령어를 입력합니다.

node hello.js

4. 터미널에 'Hello, World!' 메시지가 출력됩니다.

위 예제는 console.log() 함수를 사용하여 콘솔에 메시지를 출력하는 간단한 예제입니다. node 명령어를 사용하여 JavaScript 파일을 실행할 수 있습니다. 이를 통해 로컬 컴퓨터에서 JavaScript 코드를 실행해볼 수 있습니다.

console.log('Hello, World!');

2. 기본 문법

JavaScript Hello World

다음은 JavaScript의 Hello World 예제입니다.

1. HTML 파일 생성

   새 HTML 파일을 생성합니다. 예를 들어, JavaScript 등의 폴더에 index.html 파일을 생성합니다.

2. HTML 파일에 스크립트 추가

<script> 태그를 사용하여 JavaScript 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script>
      console.log('Hello, World!');
    </script>
  </body>
</html>

Hello World 출력하기

console.log('Hello World');

3. 웹 브라우저에서 HTML 파일 열기

   웹 브라우저에서 index.html 파일을 엽니다. Hello, World! 메시지가 콘솔에 출력되고, Hello World! 제목이 웹 페이지에 나타납니다.

위 예제에서는 console.log() 함수를 사용하여 콘솔에 메시지를 출력합니다. 이 함수는 개발자 도구의 콘솔에서 확인할 수 있습니다. 웹 페이지에는 h1 태그를 사용하여 Hello World! 제목을 표시합니다. 이제 웹 브라우저에서 JavaScript 코드를 실행할 수 있습니다.

웹 브라우저에서 직접 JavaScript 실행하기

웹 브라우저에서 JavaScript 코드를 실행하려면 개발자 도구를 이용할 수 있습니다. 이는 대부분의 주요 웹 브라우저(Chrome, Firefox, Safari, Edge 등)에서 제공합니다. 여기에서는 Google Chrome의 개발자 도구를 기반으로 설명하겠습니다.

1. Google Chrome을 열기
   웹 브라우저를 실행하십시오.

2. 개발자 도구 열기
   메뉴 아이콘(오른쪽 상단의 세로로 세 개의 점)을 클릭하고, "More Tools" > "Developer Tools"를 선택하거나 단축키 Ctrl + Shift + I (Windows/Linux) 또는 Command + Option + I (Mac)를 눌러 개발자 도구를 엽니다.

3. Console 탭으로 이동
   개발자 도구 내에서 상단의 탭 중 "Console"을 선택하십시오. 이곳이 바로 JavaScript 코드를 작성하고 실행할 수 있는 공간입니다.

4. JavaScript 코드 입력 및 실행
   Console 창에 원하는 JavaScript 코드를 입력하고, Enter 키를 눌러 코드를 실행합니다. 예를 들어, console.log("Hello, World!");를 입력하고 Enter 키를 눌러보세요. Console 창에 "Hello, World!"라는 메시지가 출력되는 것을 확인할 수 있습니다.

5. 코드 결과 확인
   입력한 코드의 실행 결과는 바로 Console 창에 출력됩니다. 오류가 있다면 오류 메시지도 이곳에서 확인할 수 있습니다.

6. 코드 수정 및 재실행
   코드에 오류가 있거나 다른 코드를 실행하려면, 해당 코드를 수정하거나 새 코드를 입력하고 Enter 키를 눌러 재실행합니다.

개발자 콘솔은 JavaScript를 실험하거나 디버깅하는 데 매우 유용한 도구입니다. 또한 웹페이지의 동적인 행동을 테스트하거나 간단한 스크립트를 실행하는 데도 쓰일 수 있습니다.

자바스크립트 문법 한번에 살펴보기

JavaScript는 다음과 같은 기본 구문을 사용합니다.

1. 변수 선언

   let 또는 const 키워드를 사용하여 변수를 선언합니다.

let x = 10;
const PI = 3.14;

변수 선언 및 출력

let name = 'John';
console.log(name);

2. 연산자

   산술, 할당, 비교, 논리, 비트 연산자 등 다양한 연산자를 사용할 수 있습니다.

let x = 10 + 5;
let y = x * 2;
let z = y % 3;

3. 조건문

   if, else if, else 키워드를 사용하여 조건문을 작성합니다.

if (x > y) {
  console.log('x is greater than y');
} else if (x < y) {
  console.log('x is less than y');
} else {
  console.log('x is equal to y');
}

4. 반복문

   for, while, do-while 키워드를 사용하여 반복문을 작성합니다.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

let j = 0;
do {
  console.log(j);
  j++;
} while (j < 10);

5. 함수

   function 키워드를 사용하여 함수를 작성합니다.

function add(a, b) {
  return a + b;
}

let result = add(2, 3);
console.log(result);

JavaScript는 다른 언어와 비슷한 구문을 사용하지만, 일부 특징이 있습니다. 예를 들어, 변수의 자료형을 명시적으로 선언하지 않아도 됩니다. 또한, 함수는 일급 개체로서 변수에 할당하거나 함수의 인수로 전달할 수 있습니다. 이러한 특징은 JavaScript를 유연하고 편리하게 사용할 수 있게 만들어 줍니다.

변수 (Variable) 선언하기

JavaScript에서 변수는 let, const, var 키워드를 사용하여 선언합니다. 변수는 데이터를 저장하기 위한 공간이며, 변수의 값은 프로그램 실행 중에 변경될 수 있습니다.

1. let 키워드

   let 키워드를 사용하여 변수를 선언합니다. 이 키워드는 블록 범위 변수를 선언합니다.

let x = 10;

2. const 키워드

   const 키워드를 사용하여 상수를 선언합니다. 이 키워드는 읽기 전용 변수를 선언합니다.

const PI = 3.14;

3. var 키워드

   var 키워드를 사용하여 변수를 선언합니다. 이 키워드는 함수 범위 변수를 선언합니다.

var x = 10;

변수를 선언할 때, 자료형을 명시적으로 선언할 필요가 없습니다. 변수의 자료형은 할당된 값에 따라 자동으로 결정됩니다. 변수의 값은 언제든지 변경될 수 있습니다. 변수의 이름은 문자, 숫자, 밑줄 및 달러 기호로 구성될 수 있으며, 첫 글자는 문자 또는 밑줄로 시작해야 합니다. 변수의 이름은 대소문자를 구분합니다. 변수의 이름은 의미 있는 이름으로 작성하는 것이 좋습니다.

주석문

JavaScript에서는 두 가지 종류의 주석을 사용할 수 있습니다.

1. 한 줄 주석

   // 기호를 사용하여 한 줄 주석을 작성할 수 있습니다.

// This is a single line comment
let x = 10; // This is also a comment

2. 여러 줄 주석

   /*와 */ 기호를 사용하여 여러 줄 주석을 작성할 수 있습니다.

/*
This is a
multi-line comment
*/
let x = 10;

주석은 코드의 이해를 돕기 위해 사용됩니다. 주석은 코드에 대한 설명, 작성자의 이름, 버전 정보, 저작권 정보 등을 포함할 수 있습니다. 또한, 주석을 사용하여 코드 일부를 임시적으로 비활성화할 수 있습니다. 이러한 기능을 사용하여 코드를 더욱 쉽게 관리할 수 있습니다.

데이터 타입 (Data Type) 이해하기

JavaScript에는 다양한 데이터 타입이 있습니다. 변수의 자료형은 할당된 값에 따라 동적으로 결정됩니다. 다음은 JavaScript의 데이터 타입입니다.

1. 숫자 (Number)

   숫자 데이터 타입은 정수와 실수를 모두 포함합니다.

let x = 10;
let y = 3.14;

2. 문자열 (String)

   문자열 데이터 타입은 문자의 집합입니다.

let name = "John";
let message = 'Hello, World!';

JavaScript에서는 문자열을 표현할 때 큰 따옴표(")나 작은 따옴표(')를 사용할 수 있습니다. 두 가지 방법 모두 문자열을 표현하는 데 사용됩니다. 문자열을 묶는 데 사용하는 따옴표의 종류는 중요하지 않습니다. 다음은 두 가지 방법의 예제입니다.

let str1 = "Hello, World!";
let str2 = 'Hello, World!';

따옴표를 사용하는 이유는 JavaScript에서는 다른 언어와 마찬가지로 문자열을 나타내기 위해 사용됩니다. JavaScript에서는 문자열을 따옴표로 묶거나 백틱(`)으로 묶을 수 있습니다. 백틱은 ES6부터 도입된 새로운 문자열 표현 방식으로, 문자열 내부에 변수나 표현식을 쉽게 삽입할 수 있습니다.

let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // Hello, John!

JavaScript에서는 큰 따옴표나 작은 따옴표 중 어느 것을 사용해도 상관없습니다. 따옴표를 사용하는 데 있어서 중요한 것은 일관성입니다. 프로젝트에서 일관성 있는 스타일을 유지하는 것이 좋습니다.

3. 불리언 (Boolean)

   불리언 데이터 타입은 true 또는 false 값을 가집니다.

let flag = true;
let done = false;

4. undefined

   변수가 초기화되지 않았거나 값이 할당되지 않은 경우, 변수는 undefined 값을 가집니다.

let x;
console.log(x); // undefined

5. null

   null 값은 아무 값도 없음을 나타냅니다.

let y = null;

6. 개체(개체, Object)

   개체 데이터 타입은 키-값 쌍으로 구성된 컬렉션입니다.

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

7. 배열 (Array)

   배열 데이터 타입은 값의 목록입니다.

let fruits = ["Apple", "Banana", "Orange"];

8. 함수 (Function)

   함수 데이터 타입은 코드 블록입니다.

function add(a, b) {
  return a + b;
}

JavaScript의 데이터 타입은 동적으로 결정됩니다. 따라서 변수를 선언할 때 자료형을 명시적으로 선언할 필요가 없습니다. 대신 변수에 할당된 값에 따라 자료형이 결정됩니다.

연산자 (Operator) 사용하기

JavaScript에서는 연산자를 사용하여 값을 계산하고 조작합니다. 연산자는 피연산자(operand)를 사용하여 작동하며, 피연산자는 값을 나타내는 변수 또는 리터럴 값입니다. 다음은 JavaScript에서 사용되는 다양한 연산자입니다.

1. 산술 연산자 (Arithmetic Operators)

   산술 연산자는 숫자를 연산하는 데 사용됩니다. 다음과 같은 산술 연산자가 있습니다.

• + : 덧셈
• - : 뺄셈
• * : 곱셈
• / : 나눗셈
• % : 나머지 연산 (Modulo)

let x = 10;
let y = 3;
console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333333333333335
console.log(x % y); // 1

문자열 결합

let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + ' ' + lastName;
console.log(fullName);

숫자형 변수 더하기

let num1 = 5;
let num2 = 10;
let sum = num1 + num2;
console.log(sum);

2. 대입 연산자 (Assignment Operators)

   대입 연산자는 변수에 값을 할당하는 데 사용됩니다. 다음과 같은 대입 연산자가 있습니다.

• = : 오른쪽의 값을 왼쪽 변수에 할당합니다.
• += : 왼쪽 변수에 오른쪽 값을 더한 후 그 결과를 왼쪽 변수에 할당합니다.
• -= : 왼쪽 변수에서 오른쪽 값을 뺀 후 그 결과를 왼쪽 변수에 할당합니다.
• *= : 왼쪽 변수에 오른쪽 값을 곱한 후 그 결과를 왼쪽 변수에 할당합니다.
• /= : 왼쪽 변수를 오른쪽 값으로 나눈 후 그 결과를 왼쪽 변수에 할당합니다.
• %= : 왼쪽 변수를 오른쪽 값으로 나눈 나머지를 왼쪽 변수에 할당합니다.

let x = 10;
x += 5;
console.log(x); // 15

x -= 3;
console.log(x); // 12

x *= 2;
console.log(x); // 24

x /= 3;
console.log(x); // 8

x %= 3;
console.log(x); // 2

3. 비교 연산자 (Comparison Operators)

   비교 연산자는 두 개의 값을 비교하는 데 사용됩니다. 다음과 같은 비교 연산자가 있습니다.

• == : 값이 같은지 여부를 확인합니다. (타입은 검사하지 않습니다)
• === : 값과 타입이 모두 같은지 여부를 확인합니다.
• != : 값이 다른지 여부를 확인합니다. (타입은 검사하지 않습니다)
• !== : 값과 타입이 모두 다른지 여부를 확인합니다.
• > : 왼쪽 값이 오른쪽 값보다 큰지 여부
• < : 왼쪽 값이 오른쪽 값보다 작은지 여부
• >= : 왼쪽 값이 오른쪽 값보다 크거나 같은지 여부
• <= : 왼쪽 값이 오른쪽 값보다 작거나 같은지 여부

let x = 5;
let y = 3;

console.log(x == y); // false
console.log(x === y); // false
console.log(x != y); // true
console.log(x !== y); // true
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false

관계연산자.js

다음은 두 개의 변수를 선언하고, 관계 연산자를 사용하여 그 관계를 판단한 결과를 출력하는 예제 코드입니다.

let first_num = 3;
let second_num = 5;
let greater = first_num > second_num;
let smaller = first_num < second_num;
console.log(`first_num = ${first_num} second_num = ${second_num} `
            + `first_num > second_num = ${greater} `
            + `first_num < second_num = ${smaller}`);

위 코드에서는 먼저 first_num과 second_num 변수를 선언하고, 각각 3과 5의 값을 대입합니다. 그리고 관계 연산자를 사용하여 두 변수 간의 관계를 판단한 후, 그 결과를 Boolean 자료형의 greater와 smaller 변수에 대입합니다. 마지막으로, console.log 함수를 사용하여 변수들의 값을 출력합니다.

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

first_num = 3 second_num = 5 first_num > second_num = false first_num < second_num = true

결과에서는 first_num 변수의 값이 second_num 변수의 값보다 작으므로, first_num < second_num은 True가 됩니다. 반면, first_num > second_num은 False가 됩니다. 따라서 greater 변수의 값은 False, smaller 변수의 값은 True가 됩니다.

4. 논리 연산자 (Logical Operators)

   논리 연산자는 논리 값(true, false)을 조합하는 데 사용됩니다. 다음과 같은 논리 연산자가 있습니다.

• && : 논리 AND, 모든 조건이 참일 때 true를 반환합니다.
• || : 논리 OR, 하나 이상의 조건이 참일 때 true를 반환합니다.
• ! : 논리 NOT, 논리 값을 반대로 바꿉니다.

let x = 5;
let y = 3;
let z = 7;

console.log(x > y && x < z); // true
console.log(x < y || x < z); // true
console.log(!(x > y)); // false

5. 삼항 연산자 (Ternary Operator)

   삼항 연산자는 조건이 true일 때와 false일 때 각각 다른 값을 반환하는 데 사용됩니다.

let age = 20;
let message = (age < 18) ? "미성년자입니다." : "성인입니다.";
console.log(message); // 성인입니다.

JavaScript의 연산자는 변수 및 값을 계산하는 데 사용됩니다. 이러한 연산자를 올바르게 사용하여 값을 계산하고 조작하는 것은 JavaScript 개발자에게 필수적인 기술입니다.

비트 및 시프트 연산자

JavaScript에서 비트 및 시프트 연산자는 이진수를 조작하는 데 사용됩니다. 비트 연산자는 이진수의 각 자리를 처리하고, 시프트 연산자는 이진수의 비트를 왼쪽이나 오른쪽으로 이동시킵니다.

1. 비트 연산자

• & : 논리 AND, 두 값이 모두 1일 때 1을 반환합니다.
• | : 논리 OR, 두 값 중 하나라도 1일 때 1을 반환합니다.
• ^ : 논리 XOR, 두 값 중 하나만 1일 때 1을 반환합니다.
• ~ : 논리 NOT, 값을 반대로 바꿉니다.
• << : 왼쪽 시프트, 이진수를 왼쪽으로 이동시킵니다.
• >> : 오른쪽 시프트, 이진수를 오른쪽으로 이동시킵니다.
• >>> : 부호 없는 오른쪽 시프트, 이진수를 오른쪽으로 이동시키고 왼쪽에 0을 삽입합니다.

let a = 5; // 0101
let b = 3; // 0011

console.log(a & b); // 0001
console.log(a | b); // 0111
console.log(a ^ b); // 0110
console.log(~a); // -6
console.log(a << 1); // 1010
console.log(a >> 1); // 0010
console.log(a >>> 1); // 0010

2. 시프트 연산자

   시프트 연산자는 이진수의 비트를 왼쪽이나 오른쪽으로 이동시킵니다.

let a = 5; // 0101

console.log(a << 1); // 1010
console.log(a >> 1); // 0010
console.log(a >>> 1); // 0010

JavaScript의 비트 및 시프트 연산자는 이진수를 조작하는 데 사용됩니다. 이러한 연산자를 사용하여 비트 단위로 작업을 수행하고, 이진수를 이동시키는 등 다양한 작업을 수행할 수 있습니다.

조건문 (Conditional Statement) 사용하기

JavaScript에서 조건문(Conditional Statement)은 프로그램에서 조건에 따라 실행할 코드 블록을 선택하는 데 사용됩니다. 조건문은 if, else if, else 문으로 구성됩니다.

1. if 문

if 문은 특정 조건이 참일 때 실행됩니다.

let num = 5;
if (num > 0) {
  console.log("양수입니다.");
}

2. if...else 문

   if...else 문은 if 조건이 참일 때와 그렇지 않을 때 실행할 코드를 지정합니다.

let num = -5;
if (num > 0) {
  console.log("양수입니다.");
} else {
  console.log("음수입니다.");
}

조건문(if)

let age = 18;
if (age >= 18) {
  console.log('You are an adult.');
} else {
  console.log('You are a minor.');
}

3. if...else if...else 문

   if...else if...else 문은 여러 개의 조건을 확인하고 해당하는 코드 블록을 실행합니다.

let num = 0;
if (num > 0) {
  console.log("양수입니다.");
} else if (num < 0) {
  console.log("음수입니다.");
} else {
  console.log("0입니다.");
}

4. switch 문

   switch 문은 다양한 조건을 확인하고 해당하는 코드 블록을 실행합니다.

let color = "red";
switch (color) {
  case "red":
    console.log("빨간색입니다.");
    break;
  case "blue":
    console.log("파란색입니다.");
    break;
  case "green":
    console.log("초록색입니다.");
    break;
  default:
    console.log("색상을 찾을 수 없습니다.");
}

JavaScript의 조건문은 프로그램에서 조건에 따라 실행할 코드 블록을 선택하는 데 사용됩니다. 이러한 조건문을 사용하여 프로그램을 제어하고 더욱 유연하게 만들 수 있습니다.

반복문 (Loop) 사용하기

JavaScript에서 반복문(Loop)은 코드 블록을 여러 번 실행하는 데 사용됩니다. JavaScript에는 for, while, do...while 세 가지 유형의 반복문이 있습니다.

1. for 문

   for 문은 정해진 횟수만큼 반복할 때 사용됩니다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for 반복문

for (let i = 0; i < 5; i++) {
  console.log(i);
}

2. while 문

   while 문은 조건이 true인 경우에 반복됩니다.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

while 반복문

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

3. do...while 문

   do...while 문은 조건이 false인 경우에도 최소한 한 번은 실행됩니다.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

4. break 문

   break 문은 반복문을 중지하고 다음 코드를 실행합니다.

for (let i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  console.log(i);
}

5. continue 문

   continue 문은 현재 반복을 중지하고 다음 반복으로 이동합니다.

Cop code
for (let i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  console.log(i);
}

JavaScript의 반복문은 코드 블록을 여러 번 실행하는 데 사용됩니다. 이러한 반복문을 사용하여 반복되는 작업을 자동화하고 프로그램을 효율적으로 만들 수 있습니다.

배열

배열 생성

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits);

배열 요소 접근

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[1]);

배열 길이 구하기

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length);

배열에 요소 추가하기(push)

let fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
console.log(fruits);

배열에서 요소 제거하기(pop)

let fruits = ['apple', 'banana', 'orange'];
fruits.pop();
console.log(fruits);

배열 반복(forEach)

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function (fruit) {
  console.log(fruit);
});

함수 (Function) 개념 이해하기

JavaScript에서 함수(Function)는 작업을 수행하기 위한 코드 블록입니다. 함수는 프로그램에서 중복 코드를 방지하고 더욱 유지보수하기 쉬운 코드를 작성할 수 있도록 도와줍니다.

1. 함수 선언하기

   함수는 function 예약어를 사용하여 선언할 수 있습니다.

함수 선언 및 호출

function greet() {
  console.log('Hello');
}
greet();

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

2. 함수 호출하기

함수를 호출하려면 함수 이름을 사용합니다.

greet("홍길동");

함수에 매개변수 사용

function greet(name) {
  console.log('Hello, ' + name);
}
greet('John');

3. 함수 반환하기

함수는 값을 반환할 수도 있습니다. 값을 반환하려면 return 예약어를 사용합니다.

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

함수에서 값을 반환하기(return)

function add(a, b) {
  return a + b;
}
let result = add(5, 10);
console.log(result);

4. 매개 변수

매개 변수는 함수에서 사용할 값을 전달하는 데 사용됩니다.

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("홍길동");

5. 기본 매개 변수

   함수의 매개 변수에 기본값을 할당할 수 있습니다.

function greet(name = "방문자") {
  console.log("안녕하세요, " + name + "님!");
}

greet(); // "안녕하세요, 방문자님!"
greet("홍길동"); // "안녕하세요, 홍길동님!"

JavaScript의 함수는 프로그램에서 작업을 수행하는 데 사용됩니다. 함수는 코드 중복을 줄이고 프로그램을 더욱 유지보수하기 쉽게 만들어 줍니다.

Visual Studio Code에서 JavaScript 디버깅하기

Visual Studio Code는 내장된 디버깅 도구를 사용하여 JavaScript 코드 디버깅을 지원합니다. 디버깅을 위해서는 .vscode/launch.json 파일을 생성하고, 디버깅 구성을 지정해야 합니다.

1. .vscode/launch.json 파일 생성

프로젝트 루트 디렉토리에서 .vscode/launch.json 파일을 생성합니다.

2. 디버깅 구성 추가

.vscode/launch.json 파일에 다음과 같이 디버깅 구성을 추가합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/client",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
      }
    }
  ]
}

name은 디버깅 구성 이름입니다. type은 디버깅 구성의 유형입니다. 이 예제에서는 Chrome을 사용합니다. request는 디버깅 요청의 종류입니다. 이 예제에서는 디버깅을 시작합니다. url은 디버그할 애플리케이션의 URL입니다. webRoot는 소스 파일의 루트 디렉토리입니다. sourceMapPathOverrides는 Chrome에서 디버깅할 때 소스 맵을 올바르게 로드하도록 하는 옵션입니다.

3. 소스 코드 디버깅

디버깅을 시작하려면, 디버깅 패널에서 Launch Chrome을 선택한 다음 F5 키를 누릅니다. 그러면 새 Chrome 창이 열리며, 애플리케이션의 첫 번째 줄에서 멈춥니다. 이제 디버그 모드에서 코드를 실행하고, 스텝별로 실행하며, 변수의 값을 살펴볼 수 있습니다.

Visual Studio Code는 다양한 디버깅 도구와 기능을 제공하므로, 디버깅이 복잡한 JavaScript 프로젝트에서도 유용하게 사용할 수 있습니다.

핵심 정리

forEach 문

forEach 문은 JavaScript에서 배열의 각 요소에 대해 지정된 함수를 실행하는 메서드입니다. 다음은 간단한 forEach 예제입니다:

// 배열 생성
const numbers = [1, 2, 3, 4, 5];

// 각 배열 요소에 대해 실행할 함수
function logNumber(number) {
  console.log(number);
}

// forEach를 사용하여 배열의 각 요소에 대해 logNumber 함수 실행
numbers.forEach(logNumber);

위의 코드는 numbers 배열의 각 요소를 콘솔에 출력합니다. forEach 메서드의 인수로 함수를 직접 전달할 수도 있습니다:

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

numbers.forEach(function(number) {
  console.log(number);
});

또는 화살표 함수를 사용할 수도 있습니다:

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

numbers.forEach(number => console.log(number));

이 세 가지 예제는 모두 동일한 결과를 산출합니다. 각각의 배열 요소가 콘솔에 출력됩니다.

3. 개체 지향 프로그래밍 (OOP)

데이터 형식의 구분

JavaScript의 데이터 타입은 크게 Primitive Types(원시 데이터 타입)과 Objects(개체)로 나뉩니다.

1. Primitive Types(원시 데이터 타입)

   Primitive Types(원시 데이터 타입)은 불변성(Immutability)을 가진 데이터 타입입니다. 원시 데이터 타입은 값 그 자체를 나타내며, 값이 변경되면 새로운 값으로 대체됩니다. JavaScript의 원시 데이터 타입은 다음과 같습니다.

• 숫자(Number): 정수와 실수를 포함하는 모든 수를 나타낼 수 있습니다.
• 문자열(String): 문자의 집합을 나타냅니다.
• 불리언(Boolean): true 또는 false 값을 가집니다.
• null: 값이 없음을 나타냅니다.
• undefined: 변수에 값을 할당하지 않았을 때의 기본 값입니다.
• 심볼(Symbol): 유일한 값입니다.

2. Objects(개체)

   Objects(개체)는 Mutable(가변적)한 데이터 타입입니다. 개체는 여러 개의 값을 하나의 변수에 저장할 수 있습니다. JavaScript의 개체는 key-value 쌍의 컬렉션으로 구성됩니다. JavaScript의 개체는 다음과 같습니다.

• 개체(Object): key-value 쌍의 집합을 나타냅니다.
• 배열(Array): 값의 목록을 나타냅니다.
• 함수(Function): 코드 블록입니다.

Primitive Types(원시 데이터 타입)은 변수에 직접 값을 저장하지만, Objects(개체)는 변수에 개체의 주소를 저장합니다. 따라서 Objects(개체)는 Reference Type(참조 데이터 타입)으로 분류됩니다. 원시 데이터 타입은 새로운 값을 할당할 때마다 새로운 메모리 공간에 할당됩니다. 하지만 개체는 동일한 개체에 대한 참조만 복사하므로, 개체의 변경 내용은 참조하는 모든 변수에서 반영됩니다. 이러한 차이점으로 인해 개체는 가변적(mutable)이며, 원시 데이터 타입은 불변적(immutable)입니다.

개체 (Object) 개념 이해하기

JavaScript에서 개체는 key-value 쌍의 컬렉션입니다. 개체는 여러 속성과 그에 대한 값을 가질 수 있으며, 이를 사용하여 실세계의 개체나 개념을 모델링할 수 있습니다. 개체를 생성하는 방법에는 리터럴 표기법과 생성자 함수를 사용하는 방법이 있습니다.

개체 리터럴 표기법

개체 리터럴 표기법은 중괄호({})를 사용하여 개체를 생성하는 방법입니다.

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is John Doe

생성자 함수를 사용한 개체 생성

생성자 함수를 사용하여 개체를 생성하는 방법은 함수를 정의하고, new 키워드를 사용하여 개체를 생성하는 것입니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person1 = new Person("John Doe", 30);
person1.greet(); // Hello, my name is John Doe

클래스 (Class) 개념 이해하기

클래스는 개체를 생성하는 데 사용되는 템플릿입니다. 클래스는 개체의 속성과 메서드를 정의하고, 이를 사용하여 개체를 생성합니다. JavaScript에서 클래스는 ES6부터 도입되었습니다.

클래스 선언

클래스를 선언하는 방법은 class 키워드를 사용하여 정의하는 것입니다. 생성자 메서드는 개체를 초기화하는 데 사용되며, constructor라는 이름을 가집니다.

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

const person1 = new Person("John Doe", 30);
person1.greet(); // Hello, my name is John Doe

클래스 상속

클래스 상속은 한 클래스가 다른 클래스의 속성과 메서드를 상속받아 사용하는 것입니다. 상속을 사용하려면 extends 키워드를 사용하여 부모 클래스를 지정하고, super 함수를 사용하여 부모 클래스의 생성자를 호출해야 합니다.

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age);
    this.position = position;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I am a " + this.position);
  }
}

const employee1 = new Employee("Jane Doe", 28, "Software Engineer");
employee1.greet(); // Hello, my name is Jane Doe and I am a Software Engineer

상속 (Inheritance) 개념 이해하기

상속은 개체 지향 프로그래밍에서 개체 간의 관계를 구축하는 방법 중 하나입니다. 상속을 사용하면 하나의 클래스(부모 클래스)로부터 속성과 메서드를 물려받은 새로운 클래스(자식 클래스)를 생성할 수 있습니다. 이렇게 상속을 통해 코드의 재사용성이 높아지고, 중복 코드를 줄일 수 있습니다.

JavaScript에서 상속은 extends 키워드를 사용하여 구현할 수 있습니다.

클래스 상속 예제

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.");
  }
}

const dog1 = new Dog("Max");
dog1.speak(); // Max barks.

위 예제에서 Dog 클래스는 Animal 클래스를 상속받았으며, speak 메서드를 오버라이딩(재정의)하여 고유한 기능을 구현했습니다.

super 키워드 사용

자식 클래스에서 부모 클래스의 메서드를 호출하려면 super 키워드를 사용할 수 있습니다. super 키워드는 부모 클래스를 참조하며, 메서드 호출 시 부모 클래스의 메서드를 실행할 수 있습니다.

class Cat extends Animal {
  speak() {
    super.speak();
    console.log(this.name + " meows.");
  }
}

const cat1 = new Cat("Mimi");
cat1.speak(); // Mimi makes a noise. Mimi meows.

위 예제에서 Cat 클래스는 부모 클래스 Animal의 speak 메서드를 super.speak()를 사용하여 호출한 후, 추가로 고유한 기능을 구현했습니다.

캡슐화 (Encapsulation) 개념 이해하기

캡슐화는 개체의 상태와 기능을 함께 묶어서 외부에서의 접근을 제한하는 개체 지향 프로그래밍의 원칙 중 하나입니다. 캡슐화를 사용하면 개체의 내부 상태를 외부에서 직접 접근하지 못하게 하여, 개체의 무결성을 보호할 수 있습니다. 캡슐화를 통해 데이터를 은닉하고, 개체와 상호작용하는 방법을 제공하는 것이 주요 목적입니다.

JavaScript에서 캡슐화를 구현하는 방법은 주로 접근 제한자를 사용하지 않고, 클로저(closure)나 WeakMap을 사용하여 구현합니다. ES6부터는 class 문법에 get과 set 메서드를 사용하여 캡슐화를 구현할 수도 있습니다.

클로저를 사용한 캡슐화 예제

function Person(name, age) {
  let _name = name;
  let _age = age;

  this.getName = function() {
    return _name;
  };

  this.setName = function(newName) {
    _name = newName;
  };

  this.getAge = function() {
    return _age;
  };

  this.setAge = function(newAge) {
    _age = newAge;
  };
}

const person1 = new Person("John Doe", 30);
console.log(person1.getName()); // John Doe
person1.setName("Jane Doe");
console.log(person1.getName()); // Jane Doe

get과 set 메서드를 사용한 캡슐화 예제

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

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }

  get age() {
    return this._age;
  }

  set age(newAge) {
    this._age = newAge;
  }
}

const person1 = new Person("John Doe", 30);
console.log(person1.name); // John Doe
person1.name = "Jane Doe";
console.log(person1.name); // Jane Doe

위 예제에서는 접근자 메서드인 get과 set을 사용하여 개체의 상태에 접근하고 수정하는 것을 제어합니다. 이를 통해 외부에서 개체의 내부 상태에 직접 접근하지 못하게 함으로써 캡슐화를 구현할 수 있습니다.

4. 배열과 개체

배열 (Array) 개념 이해하기

배열은 순서가 있는 요소들의 집합으로, 여러 개의 값을 하나의 변수에 저장할 수 있습니다. JavaScript에서 배열은 Array 개체로 표현되며, 배열의 각 요소는 0부터 시작하는 인덱스로 접근할 수 있습니다.

배열 생성 예제

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // orange

배열 메서드 (Method) 사용하기

배열에는 요소를 추가, 삭제, 검색, 정렬 등 다양한 작업을 수행할 수 있는 메서드들이 있습니다. 몇 가지 배열 메서드 예제를 살펴보겠습니다.

배열 메서드 예제

const fruits = ["apple", "banana", "orange"];

fruits.push("grape"); // 배열의 마지막에 요소 추가
console.log(fruits); // ["apple", "banana", "orange", "grape"]

fruits.pop(); // 배열의 마지막 요소 삭제
console.log(fruits); // ["apple", "banana", "orange"]

fruits.unshift("strawberry"); // 배열의 시작에 요소 추가
console.log(fruits); // ["strawberry", "apple", "banana", "orange"]

fruits.shift(); // 배열의 첫 번째 요소 삭제
console.log(fruits); // ["apple", "banana", "orange"]

fruits.sort(); // 배열 정렬
console.log(fruits); // ["apple", "banana", "orange"]

개체 (Object) 개념 이해하기

개체는 key-value 쌍의 컬렉션으로, 여러 개의 값을 하나의 변수에 저장할 수 있습니다. 개체는 여러 속성과 그에 대한 값을 가질 수 있으며, 이를 사용하여 실세계의 개체나 개념을 모델링할 수 있습니다.

개체 생성 예제

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is John Doe

개체 메서드 (Method) 사용하기

개체에는 속성과 함께 메서드를 정의할 수 있습니다. 메서드는 개체 내부에서 정의한 함수로, 개체와 관련된 작업을 수행할 수 있습니다.

개체 메서드 예제

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  },
  celebrateBirthday: function() {
    this.age += 1;
    console.log("Happy Birthday! Now I am " + this.age + " years old.");
  }
};

person.celebrateBirthday(); // Happy Birthday! Now I am 31 years old.

5. 함수와 스코프

함수 (Function) 개념 복습하기

함수는 재사용 가능한 코드 블록으로, 특정 작업을 수행하는 코드의 집합입니다. 함수를 사용하면 코드의 중복을 줄이고, 가독성을 높일 수 있습니다.

함수 선언 및 호출 예제

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John Doe"); // Hello, John Doe!

함수 표현식 (Function Expression) 이해하기

함수 표현식은 함수를 변수에 할당하는 방식으로 함수를 정의하는 것입니다. 함수 표현식을 사용하면 익명 함수(이름이 없는 함수)를 정의할 수 있으며, 이는 다른 함수의 인수로 전달할 수도 있습니다.

함수 표현식 예제

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("John Doe"); // Hello, John Doe!

클로저 (Closure) 개념 이해하기

클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능입니다. 이를 통해 외부 함수의 실행이 완료된 후에도 내부 함수에서 외부 함수의 변수를 참조할 수 있습니다.

클로저 예제

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
console.log(add5(3)); // 8

호이스팅 (Hoisting) 개념 이해하기

호이스팅은 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 JavaScript의 동작입니다. 이로 인해 변수와 함수를 선언하기 전에 사용할 수 있습니다. 단, 변수의 값은 호이스팅되지 않습니다.

호이스팅 예제

console.log(x); // undefined
var x = 5;

foo(); // Hello, World!
function foo() {
  console.log("Hello, World!");
}

스코프 (Scope) 개념 이해하기

스코프는 변수의 접근 가능한 범위를 정의하는 것으로, 전역 스코프와 지역 스코프로 나뉩니다. 전역 스코프에서 선언된 변수는 어디에서든 접근할 수 있으며, 지역 스코프에서 선언된 변수는 해당 스코프 내에서만 접근할 수 있습니다.

스코프 예제

const globalVar = "I am a global variable";

function foo() {
  const localVar = "I am a local variable";
  console.log(globalVar); // I am a global variable
  console.log(localVar);  // I am a local variable
}

foo();

console.log(globalVar); // I am a global variable
console.log(localVar);  // ReferenceError: localVar is not defined

let, const 키워드 사용하기

ES6부터 let과 const 키워드가 도입되었습니다. let은 값을 변경할 수 있는 변수를 선언할 때 사용하며, const는 값이 변경되지 않는 상수를 선언할 때 사용합니다. let과 const는 블록 스코프를 가지며, 호이스팅되지 않습니다.

let, const 예제

if (true) {
  let x = 5;
  const y = 10;
  console.log(x); // 5
  console.log(y); // 10
}

console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

6. 비동기 처리와 콜백 함수

비동기 (Asynchronous) 개념 이해하기

비동기 처리는 특정 작업의 완료를 기다리지 않고 다음 작업을 진행하는 것을 말합니다. JavaScript에서는 주로 네트워크 요청, 타이머, 이벤트 처리 등에서 비동기 처리를 사용합니다.

콜백 함수 (Callback Function) 개념 이해하기

콜백 함수는 다른 함수의 인수로 전달되어 나중에 실행되는 함수입니다. 비동기 작업이 완료되면 콜백 함수를 호출하여 결과를 처리합니다.

콜백 함수 예제

function fetchData(callback) {
  setTimeout(() => {
    const data = "Fetched data!";
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Fetched data!
});

Promise 개념 이해하기

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 콜백 지옥(callback hell)을 방지하고, 코드의 가독성을 높이기 위해 사용됩니다.

Promise 예제

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Fetched data!";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Fetched data!
});

Async/Await 개념 이해하기

Async/Await는 비동기 처리를 동기 처리처럼 보이게 작성할 수 있는 문법입니다. async 키워드가 붙은 함수 내에서 await 키워드를 사용하여 Promise를 기다릴 수 있습니다. Async/Await를 사용하면 코드를 더 간결하고 가독성 있게 작성할 수 있습니다.

Async/Await 예제

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Fetched data!";
      resolve(data);
    }, 1000);
  });
}

async function processData() {
  const data = await fetchData();
  console.log(data); // Fetched data!
}

processData();

7. DOM과 이벤트 처리

DOM (Document Object Model) 개념 이해하기

DOM은 웹 페이지의 구조를 표현하는 개체 기반의 트리 구조입니다. JavaScript를 사용하여 DOM을 조작하면 웹 페이지의 요소를 동적으로 변경할 수 있습니다.

DOM 조작 (Manipulation) 방법 이해하기

DOM 조작을 통해 웹 페이지의 요소를 선택, 생성, 수정, 삭제할 수 있습니다.

DOM 조작 예제

// 요소 선택하기
const element = document.querySelector("#elementId");

// 요소 생성하기
const newElement = document.createElement("div");

// 요소 수정하기
element.textContent = "Hello, World!";
element.style.backgroundColor = "red";

// 요소 삭제하기
element.remove();

이벤트 (Event) 개념 이해하기

이벤트는 웹 페이지에서 발생하는 액션입니다. 예를 들어, 버튼 클릭, 페이지 로드, 마우스 이동 등이 이벤트에 해당합니다. JavaScript를 사용하여 이벤트를 감지하고 처리할 수 있습니다.

이벤트 핸들러 (Event Handler) 등록하기

이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 리스너를 사용하여 이벤트 핸들러를 등록할 수 있습니다.

이벤트 핸들러 등록 예제

const button = document.querySelector("#buttonId");

button.addEventListener("click", (event) => {
  console.log("Button clicked!");
});

8. jQuery 라이브러리

jQuery 소개

jQuery는 웹 페이지의 DOM 조작, 이벤트 처리, 애니메이션 등을 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. 최근 웹 개발 트렌드에 따라 사용이 줄어들었지만, 여전히 많은 웹 사이트에서 사용되고 있습니다.

jQuery를 사용한 DOM 조작

jQuery를 사용하면 DOM 조작을 더 간결하게 작성할 수 있습니다.

jQuery를 사용한 DOM 조작 예제

// 요소 선택하기
const element = $("#elementId");

// 요소 생성하기
const newElement = $("<div></div>");

// 요소 수정하기
element.text("Hello, World!");
element.css("background-color", "red");

// 요소 삭제하기
element.remove();

jQuery를 사용한 이벤트 처리

jQuery를 사용하면 이벤트 처리를 간단하게 작성할 수 있습니다.

jQuery를 사용한 이벤트 처리 예제

const button = $("#buttonId");

button.click((event) => {
  console.log("Button clicked!");
});

jQuery를 사용한 애니메이션 (Animation) 효과 적용하기

jQuery는 기본적인 애니메이션 효과를 적용할 수 있는 메서드를 제공합니다.

jQuery를 사용한 애니메이션 예제

const element = $("#elementId");

// 요소를 서서히 나타내기
element.fadeIn();

// 요소를 서서히 숨기기
element.fadeOut();

// 요소의 높이를 서서히 줄이기
element.slideUp();

// 요소의 높이를 서서히 늘리기
element.slideDown();

// 사용자 정의 애니메이션 적용하기
element.animate({ width: "200px", height: "200px" }, 1000);

9. AJAX와 Fetch API

AJAX 개념 이해하기

AJAX(Asynchronous JavaScript and XML)는 웹 페이지의 일부분만 업데이트하거나 서버와 비동기 통신을 할 수 있는 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고침하지 않아도 서버와 데이터를 주고받을 수 있습니다.

XMLHttpRequest 개체 사용하기

XMLHttpRequest 개체는 JavaScript에서 AJAX를 구현할 때 사용하는 개체입니다. 이 개체를 사용하여 서버와 비동기 통신을 할 수 있습니다.

XMLHttpRequest 예제

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

Fetch API 사용하기

Fetch API는 XMLHttpRequest를 대체할 수 있는 새로운 비동기 통신 기술입니다. Fetch API는 Promise 기반으로 작동하며, 더 간결한 코드를 작성할 수 있습니다.

Fetch API 예제

fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

REST API 호출하기

REST API는 웹 서비스에서 데이터를 주고받을 수 있는 표준적인 방법입니다. AJAX와 Fetch API를 사용하여 REST API를 호출할 수 있습니다.

REST API 호출 예제

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "New Post",
    body: "This is a new post.",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

10. 모듈 시스템과 번들러

모듈 (Module) 개념 이해하기

모듈은 코드를 재사용 가능한 작은 단위로 나누는 방법입니다. 모듈은 변수, 함수, 클래스 등을 하나의 파일에 정의하고 다른 파일에서 가져와 사용할 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성이 향상됩니다.

CommonJS와 ES6 모듈 시스템

JavaScript에는 두 가지 주요 모듈 시스템이 있습니다.

1. CommonJS: Node.js에서 사용하는 모듈 시스템입니다. require와 module.exports를 사용하여 모듈을 가져오고 내보냅니다.

   // math.js
   const add = (a, b) => a + b;
   module.exports = add;
   
   // app.js
   const add = require("./math");
   console.log(add(1, 2));
   

2. ES6 모듈 시스템: ECMAScript 2015(ES6)에서 도입된 모듈 시스템입니다. import와 export를 사용하여 모듈을 가져오고 내보냅니다.

   // math.js
   export const add = (a, b) => a + b;
   
   // app.js
   import { add } from "./math";
   console.log(add(1, 2));
   

Webpack 번들러 소개

Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러입니다. Webpack은 여러 개의 모듈 파일을 하나의 번들 파일로 만들어줍니다. 이를 통해 웹 페이지의 로딩 시간을 줄일 수 있습니다.

Webpack 설정하기

Webpack을 사용하기 위해서는 설정 파일인 webpack.config.js를 작성해야 합니다. 이 파일에는 애플리케이션의 엔트리 포인트, 출력 파일, 로더, 플러그인 등의 설정을 정의합니다.

기본적인 Webpack 설정 예제

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js", // 엔트리 포인트
  output: {
    path: path.resolve(__dirname, "dist"), // 출력 디렉토리
    filename: "bundle.js", // 출력 파일명
  },
  module: {
    rules: [
      // 로더 설정
      {
        test: /\.js$/, // .js 확장자 파일을 대상으로 함
        exclude: /node_modules/, // node_modules 폴더 제외
        use: "babel-loader", // Babel 로더 사용
      },
    ],
  },
};

11. 프로젝트 실습

간단한 ToDoList 애플리케이션 만들기

HTML 구조 작성하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToDo List</title>
</head>
<body>
  <h1>ToDo List</h1>
  <input id="todo-input" type="text" placeholder="Add a new task">
  <button id="add-todo">Add</button>
  <ul id="todo-list"></ul>

  <script src="main.js"></script>
</body>
</html>

JavaScript 작성하기

const todoInput = document.getElementById("todo-input");
const addTodoBtn = document.getElementById("add-todo");
const todoList = document.getElementById("todo-list");

function addTodo() {
  const value = todoInput.value.trim();
  if (value === "") return;

  const listItem = document.createElement("li");
  listItem.textContent = value;
  listItem.addEventListener("click", () => {
    listItem.classList.toggle("completed");
  });

  todoList.appendChild(listItem);
  todoInput.value = "";
}

addTodoBtn.addEventListener("click", addTodo);
todoInput.addEventListener("keypress", (e) => {
  if (e.key === "Enter") addTodo();
});

외부 API를 호출하여 데이터 출력하기

HTML 구조 작성하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Data</title>
</head>
<body>
  <h1>Data from External API</h1>
  <ul id="data-list"></ul>

  <script src="main.js"></script>
</body>
</html>

JavaScript 작성하기

const dataList = document.getElementById("data-list");

function fetchData() {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((response) => response.json())
    .then((data) => {
      data.slice(0, 10).forEach((item) => {
        const listItem = document.createElement("li");
        listItem.textContent = item.title;
        dataList.appendChild(listItem);
      });
    })
    .catch((error) => console.error(error));
}

fetchData();

12. 추가 주제

프론트엔드 프레임워크 (React, Vue, Angular) 소개

1. React: 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. React는 컴포넌트 기반으로 사용자 인터페이스를 만들어 가독성과 재사용성을 높입니다.

2. Vue: 프로그레시브 자바스크립트 프레임워크로, 점진적으로 적용할 수 있습니다. Vue는 가벼운 런타임과 간결한 문법을 제공하며, 빠른 개발을 돕습니다.

3. Angular: 구글에서 개발한 자바스크립트 프레임워크로, 웹 애플리케이션 개발을 위한 완전한 솔루션을 제공합니다. Angular는 TypeScript를 사용하며, 강력한 기능과 명확한 아키텍처를 제공합니다.

Node.js를 사용한 서버 사이드 자바스크립트 개발

Node.js는 서버 사이드에서 JavaScript를 실행할 수 있는 환경입니다. 이를 통해 프론트엔드와 백엔드 모두 자바스크립트로 개발할 수 있으며, 개발 생산성이 향상됩니다. Node.js는 npm이라는 패키지 관리자를 통해 다양한 라이브러리를 사용할 수 있습니다.

ES6+ 문법 (화살표 함수, 클래스, 비구조화 할당 등) 사용하기

ES6(ES2015) 이후에는 많은 문법 개선이 이루어졌습니다. 이러한 최신 자바스크립트 문법을 사용하면 코드를 더 간결하고 효율적으로 작성할 수 있습니다.

1. 화살표 함수: 간결한 함수 선언을 가능하게 해주며, this 바인딩을 자동으로 처리해줍니다.
2. 클래스: 기존 프로토타입 기반 상속을 대체하는 문법으로, 개체 지향 프로그래밍을 더 명확하게 표현할 수 있습니다.
3. 비구조화 할당: 개체나 배열의 속성을 간편하게 추출할 수 있는 문법입니다.

TypeScript 개념 이해하기

TypeScript는 자바스크립트의 슈퍼셋으로, 정적 타입 검사를 지원합니다. TypeScript를 사용하면 코드의 안정성을 높일 수 있으며, IDE의 자동 완성과 같은 도구 지원이 향상됩니다.

13. JavaScript와 데이터 구조

스택 (Stack) 개념 이해하기

스택은 LIFO (Last In First Out) 원칙을 따르는 선형 자료구조입니다. 자료를 삽입(Push)하거나 삭제(Pop)하는 작업은 스택의 맨 위에서만 발생합니다. JavaScript에서 배열을 사용하여 간단한 스택을 구현할 수 있습니다.

큐 (Queue) 개념 이해하기

큐는 FIFO (First In First Out) 원칙을 따르는 선형 자료구조입니다. 자료는 한쪽 끝에서 삽입(Enqueue)되고, 반대쪽 끝에서 삭제(Dequeue)됩니다. JavaScript에서 배열을 사용하여 간단한 큐를 구현할 수 있습니다.

연결 리스트 (Linked List) 개념 이해하기

연결 리스트는 요소가 포인터로 연결된 선형 자료구조입니다. 연결 리스트는 삽입과 삭제가 간편하며, 동적으로 크기를 조절할 수 있습니다. JavaScript에서 클래스를 사용하여 연결 리스트를 구현할 수 있습니다.

해시 테이블 (Hash Table) 개념 이해하기

해시 테이블은 키-값 쌍을 저장하는 자료구조로, 해시 함수를 사용하여 키에 대한 인덱스를 계산합니다. 해시 테이블은 빠른 검색, 삽입, 삭제가 가능합니다. JavaScript에서 개체를 사용하여 간단한 해시 테이블을 구현할 수 있습니다.

트리 (Tree) 개념 이해하기

트리는 계층적인 구조를 가진 비선형 자료구조입니다. 트리는 루트 노드에서 시작하고, 각 노드는 자식 노드를 가질 수 있습니다. 이진 트리, 이진 탐색 트리 등 다양한 트리 구조가 존재합니다. JavaScript에서 클래스를 사용하여 트리를 구현할 수 있습니다.

14. JavaScript와 알고리즘

정렬 알고리즘 (Selection Sort, Bubble Sort, Quick Sort, Merge Sort 등) 구현하기

1. Selection Sort: 최솟값을 찾아서 앞으로 옮겨 정렬하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.
2. Bubble Sort: 인접한 요소를 비교하여 정렬하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.
3. Quick Sort: 피벗 요소를 기준으로 분할하여 정렬하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.
4. Merge Sort: 분할 정복 기법을 사용하여 정렬하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.

검색 알고리즘 (선형 검색, 이진 검색 등) 구현하기

1. 선형 검색: 배열의 모든 요소를 순차적으로 검색하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.
2. 이진 검색: 정렬된 배열에서 중간값을 기준으로 검색 범위를 줄여가며 검색하는 방식입니다. JavaScript를 사용해 구현할 수 있습니다.

그래프 (Graph) 개념 이해하기

그래프는 노드와 엣지로 구성된 비선형 자료구조입니다. 그래프는 여러 노드 간의 관계를 나타내는 데 사용됩니다. JavaScript에서 클래스를 사용하여 그래프를 구현할 수 있습니다.

그래프 탐색 알고리즘 (DFS, BFS) 구현하기

1. DFS (깊이 우선 탐색): 그래프의 깊이를 우선적으로 탐색하는 방식입니다. 스택을 사용하여 구현할 수 있습니다.
2. BFS (너비 우선 탐색): 그래프의 너비를 우선적으로 탐색하는 방식입니다. 큐를 사용하여 구현할 수 있습니다.

JavaScript를 사용하여 DFS와 BFS 알고리즘을 구현할 수 있습니다.

15. JavaScript와 웹 애플리케이션

웹 애플리케이션 개발 시 고려해야 할 보안 이슈 (XSS, CSRF 등)

1. XSS (Cross-Site Scripting): 악의적인 스크립트를 웹 사이트에 주입하여 사용자 정보를 탈취하는 공격입니다. 적절한 입력 검증과 출력 인코딩을 사용하여 방어할 수 있습니다.
2. CSRF (Cross-Site Request Forgery): 사용자의 의도와는 무관하게 웹 애플리케이션에서 요청을 보내는 공격입니다. CSRF 토큰을 사용하여 방어할 수 있습니다.

쿠키 (Cookie)와 세션 (Session) 개념 이해하기

쿠키는 클라이언트 측에 저장되는 작은 텍스트 파일로, 웹 사이트 방문 시 생성되어 사용자에 관한 정보를 저장할 수 있습니다. 세션은 서버 측에서 사용자 정보를 저장하며, 각 사용자에게 고유한 세션 ID를 부여합니다.

JWT (JSON Web Token) 개념 이해하기

JWT는 JSON 형식의 토큰으로 사용자 인증 및 권한 부여에 사용됩니다. JWT는 헤더, 페이로드, 서명의 세 부분으로 구성되어 있습니다. JWT는 상태를 유지하지 않는 API에서 인증 정보를 전달하는 데 사용됩니다.

SPA (Single Page Application) 개념 이해하기

SPA는 하나의 웹 페이지에서 모든 사용자 인터렉션을 처리하는 웹 애플리케이션입니다. SPA는 서버로부터 최소한의 데이터만 받아와 필요한 부분만 동적으로 업데이트하므로 빠른 화면 전환을 제공합니다.

React, Vue, Angular 등 프론트엔드 프레임워크를 사용한 웹 애플리케이션 개발

프론트엔드 프레임워크를 사용하여 웹 애플리케이션을 개발할 수 있습니다. React, Vue, Angular는 컴포넌트 기반의 개발, 데이터 바인딩, 가상 DOM 등의 기능을 제공하여 사용자 경험을 향상시키는 데 도움이 됩니다.

개체 생성

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
console.log(person);

개체의 속성에 접근

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
console.log(person.firstName);

개체에 메서드 추가하기

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};
console.log(person.fullName());

DOM 요소 선택하기

let element = document.getElementById('myElement');
console.log(element);

DOM 요소의 텍스트 변경하기

let element = document.getElementById('myElement');
element.textContent = 'New text';

DOM 요소의 속성 변경하기

let element = document.getElementById('myElement');
element.setAttribute('title', 'New Title');

DOM 요소에 이벤트 리스너 추가하기

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button clicked');
});

쿼리 선택자로 DOM 요소 선택하기

let elements = document.querySelectorAll('.myClass');
console.log(elements);

새 DOM 요소 생성 및 추가하기

let newElement = document.createElement('div');
newElement.textContent = 'New Element';
document.body.appendChild(newElement);

DOM 요소 제거하기

let element = document.getElementById('myElement');
element.parentNode.removeChild(element);

문자열을 숫자로 변환하기

let str = '42';
let num = parseInt(str);
console.log(num);

숫자를 문자열로 변환하기

let num = 42;
let str = num.toString();
console.log(str);

타이머 설정(setTimeout)

setTimeout(function() {
  console.log('Hello after 3 seconds');
}, 3000);

타이머 반복(setInterval)

setInterval(function() {
  console.log('Hello every 3 seconds');
}, 3000);

타이머 취소(clearTimeout)

let timer = setTimeout(function() {
  console.log('Hello after 3 seconds');
}, 3000);

clearTimeout(timer);

JSON 문자열 변환

let obj = {
  name: 'John',
  age: 30
};
let jsonString = JSON.stringify(obj);
console.log(jsonString);

JSON 문자열 파싱

let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj);

날짜 개체 생성

let date = new Date();
console.log(date);

날짜 개체에서 연도 가져오기

let date = new Date();
console.log(date.getFullYear());

날짜 개체에서 월 가져오기

let date = new Date();
console.log(date.getMonth());

날짜 개체에서 일 가져오기

let date = new Date();
console.log(date.getDate());

날짜 개체에서 시간 가져오기

let date = new Date();
console.log(date.getHours());

날짜 개체에서 분 가져오기

let date = new Date();
console.log(date.getMinutes());

날짜 개체에서 초 가져오기

let date = new Date();
console.log(date.getSeconds());

숫자를 고정 소수점 문자열로 변환

let num = 5.12345;
let str = num.toFixed(2);
console.log(str);

switch 문

let day = 3;
switch (day) {
  case 0:
    console.log('Sunday');
    break;
  case 1:
    console.log('Monday');
    break;
  case 2:
    console.log('Tuesday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  case 4:
    console.log('Thursday');
    break;
  case 5:
    console.log('Friday');
    break;
  case 6:
    console.log('Saturday');
    break;
  default:
    console.log('Invalid day');
}

이벤트 위임

document.addEventListener('click', function (event) {
  if (event.target.classList.contains('myButton')) {
    console.log('Button clicked');
  }
});

개체 복사 (얕은 복사)

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
console.log(obj2);

배열 복사 (얕은 복사)

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
console.log(arr2);

배열 필터링

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});
console.log(evenNumbers);

배열 매핑

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function (number) {
  return number * number;
});
console.log(squaredNumbers);

배열 요소 찾기

let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function (number) {
  return number > 2;
});
console.log(foundNumber);

배열 요소 인덱스 찾기

let numbers = [1, 2, 3, 4, 5];
let foundIndex = numbers.findIndex(function (number) {
  return number > 2;
});
console.log(foundIndex);

배열 요소 확인하기 (some)

let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function (number) {
  return number % 2 === 0;
});
console.log(hasEvenNumber);

배열 요소 확인하기 (every)

let numbers = [1, 2, 3, 4, 5];
let areAllEvenNumbers = numbers.every(function (number) {
  return number % 2 === 0;
});
console.log(areAllEvenNumbers);

배열 정렬하기 (오름차순)

let numbers = [5, 2, 4, 1, 3];
numbers.sort();
console.log(numbers);

배열 정렬하기 (내림차순)

let numbers = [5, 2, 4, 1, 3];
numbers.sort(function (a, b) {
  return b - a;
});
console.log(numbers);

배열 뒤집기

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);

배열 연결하기

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);

배열 슬라이스

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers);

배열에서 요소 제거하기 (splice)

let numbers = [1, 2, 3, 4, 5];
numbers.splice(1, 2);
console.log(numbers);

배열에서 요소 교체하기 (splice)

let numbers = [1, 2, 3, 4, 5];
numbers.splice(1, 2, 6, 7);
console.log(numbers);

배열 요소 인덱스 구하기 (indexOf)

let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index);

문자열 길이 구하기

let str = 'Hello World';
console.log(str.length);

문자열 일부분 가져오기 (substring)

let str = 'Hello World';
let subStr = str.substring(0, 5);
console.log(subStr);

문자열에서 문자 찾기 (indexOf)

let str = 'Hello World';
let index = str.indexOf('World');
console.log(index);

문자열에서 문자 찾기 (lastIndexOf)

let str = 'Hello World, World';
let index = str.lastIndexOf('World');
console.log(index);

문자열 대소문자 변경 (toUpperCase)

let str = 'Hello World';
let upperStr = str.toUpperCase();
console.log(upperStr);

문자열 대소문자 변경 (toLowerCase)

let str = 'Hello World';
let lowerStr = str.toLowerCase();
console.log(lowerStr);

문자열에서 공백 제거 (trim)

let str = ' Hello World ';
let trimmedStr = str.trim();
console.log(trimmedStr);

문자열 분할 (split)

let str = 'apple,banana,orange';
let fruits = str.split(',');
console.log(fruits);

템플릿 리터럴 사용

let name = 'John';
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

기본 매개변수 사용

function greet(name = 'John') {
  console.log('Hello, ' + name);
}
greet(); // 출력: Hello, John
greet('Jane'); // 출력: Hello, Jane

나머지 매개변수 (rest parameter)

function sum(...numbers) {
  let total = 0;
  numbers.forEach(function (number) {
    total += number;
  });
  return total;
}
console.log(sum(1, 2, 3, 4, 5));

화살표 함수

const add = (a, b) => a + b;
console.log(add(5, 10));

개체 프로퍼티 축약

let a = 1;
let b = 2;
let obj = { a, b };
console.log(obj);

비구조화 할당 (배열)

let numbers = [1, 2, 3];
let [a, b, c] = numbers;
console.log(a, b, c);

비구조화 할당 (개체)

let person = {
  name: 'John',
  age: 30
};
let { name, age } = person;
console.log(name, age);

Promise 생성

let myPromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('Success');
  }, 1000);
});

myPromise.then(function (value) {
  console.log(value);
});

async/await 사용

async function fetchData() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users');
  let data = await response.json();
  console.log(data);
}
fetchData();

클래스 생성

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }
  speak() {
    console.log(`${this.name} says hello!`);
  }
}

let dog = new Animal('Buddy', 'Dog');
dog.speak();

클래스 상속

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }
  speak() {
    console.log(`${this.name} says hello!`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks!`);
  }
}

let dog = new Dog('Buddy', 'Dog');
dog.speak();

배열 중복 요소 제거 (Set)

let numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers);

즉시 실행 함수 (IIFE)

(function () {
  console.log('Immediately invoked function execution');
})();

이터러블 개체 생성 (Generator)

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

let gen = idGenerator();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);

배열이 아닌 유사 배열 개체를 배열로 변환

let divs = document.getElementsByTagName('div');
let divsArray = Array.from(divs);
console.log(divsArray);

오브젝트의 엔트리를 배열로 변환

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries);

오브젝트의 값들을 배열로 변환

let obj = { a: 1, b: 2, c: 3 };
let values = Object.values(obj);
console.log(values);

배열이나 문자열 반복하기 (for...of)

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
  console.log(value);
}

개체 속성 반복하기 (for...in)

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

함수에 이름 공간 추가하기

let myLib = {
  add: function (a, b) {
    return a + b;
  },
  subtract: function (a, b) {
    return a - b;
  },
};

console.log(myLib.add(1, 2));
console.log(myLib.subtract(3, 1));

콜백 함수 사용하기

function greeting(name, callback) {
  let message = `Hello, ${name}!`;
  callback(message);
}

greeting('John', function (message) {
  console.log(message);
});

문자열 내 문자 반복 횟수 구하기

function countChar(str, char) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    if (str[i] === char) {
      count++;
    }
  }
  return count;
}
console.log(countChar('hello world', 'l'));

정규표현식을 사용하여 문자열 내 패턴 찾기

let str = 'The quick brown fox jumps over the lazy dog';
let pattern = /o/;
let result = str.match(pattern);
console.log(result);

정규표현식을 사용하여 문자열 내 모든 패턴 찾기

let str = 'The quick brown fox jumps over the lazy dog';
let pattern = /o/g;
let result = str.match(pattern);
console.log(result);

정규표현식을 사용하여 문자열 내 패턴 대체하기

let str = 'The quick brown fox jumps over the lazy dog';
let pattern = /o/g;
let result = str.replace(pattern, 'O');
console.log(result);

정규표현식을 사용하여 이메일 유효성 검사하기

function isValidEmail(email) {
  let pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
  return pattern.test(email);
}

console.log(isValidEmail('john.doe@example.com'));

배열 내 최솟값 찾기

function min(arr) {
  return Math.min.apply(null, arr);
}

console.log(min([2, 5, 1, 8, 3]));

배열 내 최댓값 찾기

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max([2, 5, 1, 8, 3]));

문자열 앞뒤에 특정 문자 추가하기

function padString(str, length, char) {
  while (str.length < length) {
    str = char + str + char;
  }
  return str;
}

console.log(padString('hello', 9, '*'));

문자열 내 특정 문자열 포함 여부 확인하기

function contains(str, subStr) {
  return str.indexOf(subStr) !== -1;
}

console.log(contains('Hello, world!', 'world'));

시간 지연 함수 만들기 (setTimeout)

function delay(fn, ms) {
  setTimeout(fn, ms);
}

function greet() {
  console.log('Hello, world!');
}

delay(greet, 2000);

주기적으로 함수 실행하기 (setInterval)

function repeat(fn, ms) {
  setInterval(fn, ms);
}

function greet() {
  console.log('Hello, world!');
}

repeat(greet, 3000);

자바스크립트 개체 생성하기

let car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2020,
  start: function () {
    console.log('Engine started');
  },
  stop: function () {
    console.log('Engine stopped');
  },
};
console.log(car);

함수 생성자를 사용하여 개체 생성하기

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.start = function () {
    console.log('Engine started');
  };
  this.stop = function () {
    console.log('Engine stopped');
  };
}

let car = new Car('Toyota', 'Camry', 2020);
console.log(car);

개체 속성에 접근하기

let person = {
  name: 'John',
  age: 30,
};
console.log(person.name);
console.log(person['age']);

개체 속성 추가하기

let person = {
  name: 'John',
  age: 30,
};
person.job = 'Developer';
console.log(person);

개체 속성 삭제하기

let person = {
  name: 'John',
  age: 30,
  job: 'Developer',
};
delete person.job;
console.log(person);

개체 속성 확인하기 (in 연산자)

let person = {
  name: 'John',
  age: 30,
};

console.log('name' in person);
console.log('job' in person);

개체 속성 확인하기 (hasOwnProperty)

let person = {
  name: 'John',
  age: 30,
};

console.log(person.hasOwnProperty('name'));
console.log(person.hasOwnProperty('job'));

개체를 배열로 변환하기

let person = {
  name: 'John',
  age: 30,
  job: 'Developer',
};

let arr = Object.entries(person);
console.log(arr);

배열을 개체로 변환하기

let arr = [
  ['name', 'John'],
  ['age', 30],
  ['job', 'Developer'],
];

let obj = Object.fromEntries(arr);
console.log(obj);

JSON 문자열로 변환하기

let person = {
  name: 'John',
  age: 30,
  job: 'Developer',
};

let jsonString = JSON.stringify(person);
console.log(jsonString);

JSON 문자열에서 개체로 변환하기

let jsonString = '{"name":"John","age":30,"job":"Developer"}';
let obj = JSON.parse(jsonString);
console.log(obj);

Map 개체 생성하기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap);

Map 개체에서 값 가져오기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

console.log(myMap.get('key1'));
console.log(myMap.get('key2'));

Map 개체의 크기 구하기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.size);

Map 개체의 모든 요소 순회하기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

Map 개체의 요소 삭제하기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

myMap.delete('key1');
console.log(myMap);

Map 개체의 모든 요소 삭제하기

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

myMap.clear();
console.log(myMap);

Set 개체 생성하기

let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
console.log(mySet);

Set 개체에서 값 제거하기

let mySet = new Set([1, 2, 3]);
mySet.delete(2);
console.log(mySet);

Set 개체의 크기 구하기

let mySet = new Set([1, 2, 3]);
console.log(mySet.size);

Set 개체의 모든 요소 순회하기

let mySet = new Set([1, 2, 3]);
mySet.forEach((value) => {
  console.log(value);
});

Set 개체를 배열로 변환하기

let mySet = new Set([1, 2, 3]);
let arr = Array.from(mySet);
console.log(arr);

배열 요소의 합 구하기

function sum(arr) {
  return arr.reduce((acc, val) => acc + val, 0);
}

console.log(sum([1, 2, 3, 4, 5]));

배열 요소의 평균 구하기

function average(arr) {
  return sum(arr) / arr.length;
}

console.log(average([1, 2, 3, 4, 5]));

배열 요소 중 가장 작은 값 찾기

function findMin(arr) {
  return arr.reduce((acc, val) => (val < acc ? val : acc), arr[0]);
}

console.log(findMin([3, 1, 6, 2]));

배열 요소 중 가장 큰 값 찾기

function findMax(arr) {
  return arr.reduce((acc, val) => (val > acc ? val : acc), arr[0]);
}

console.log(findMax([3, 1, 6, 2]));

배열 요소 순서 뒤집기

function reverseArray(arr) {
  return arr.reverse();
}

console.log(reverseArray([1, 2, 3, 4, 5]));

배열 요소 정렬하기 (오름차순)

function sortArray(arr) {
  return arr.sort((a, b) => a - b);
}

console.log(sortArray([4, 2, 5, 1, 3]));

배열 요소 정렬하기 (내림차순)

function sortArrayDescending(arr) {
  return arr.sort((a, b) => b - a);
}

console.log(sortArrayDescending([4, 2, 5, 1, 3]));

배열 중복 요소 제거하기

function removeDuplicates(arr) {
  return [...new Set(arr)];
}

console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5]));

배열 요소 필터링하기

function filterArray(arr, predicate) {
  return arr.filter(predicate);
}

console.log(filterArray([1, 2, 3, 4, 5], (x) => x % 2 === 0));

배열 요소 매핑하기

function mapArray(arr, fn) {
  return arr.map(fn);
}

console.log(mapArray([1, 2, 3, 4, 5], (x) => x * 2));

배열 요소 찾기

function findInArray(arr, predicate) {
  return arr.find(predicate);
}

console.log(findInArray([1, 2, 3, 4, 5], (x) => x > 3));

배열 요소 인덱스 찾기

function findIndexInArray(arr, predicate) {
  return arr.findIndex(predicate);
}

console.log(findIndexInArray([1, 2, 3, 4, 5], (x) => x > 3));

배열의 일부분 잘라내기

function sliceArray(arr, start, end) {
  return arr.slice(start, end);
}

console.log(sliceArray([1, 2, 3, 4, 5], 1, 4));

배열 요소 삽입하기

function insertAt(arr, index, item) {
  arr.splice(index, 0, item);
  return arr;
}

console.log(insertAt([1, 2, 4, 5], 2, 3));

배열 요소 삭제하기

function removeAt(arr, index) {
  arr.splice(index, 1);
  return arr;
}

console.log(removeAt([1, 2, 3, 4, 5], 2));

배열 끝에 요소 추가하기

function pushItem(arr, item) {
  arr.push(item);
  return arr;
}

console.log(pushItem([1, 2, 3, 4], 5));

배열 시작 부분에 요소 추가하기

function unshiftItem(arr, item) {
  arr.unshift(item);
  return arr;
}

console.log(unshiftItem([1, 2, 3, 4], 0));

배열 끝에서 요소 제거하기

function popItem(arr) {
  arr.pop();
  return arr;
}

console.log(popItem([1, 2, 3, 4]));

배열 시작 부분에서 요소 제거하기

function shiftItem(arr) {
  arr.shift();
  return arr;
}

console.log(shiftItem([1, 2, 3, 4]));

두 배열 합치기

function concatArrays(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArrays([1, 2, 3], [4, 5, 6]));

배열 요소의 순서 섞기

function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

console.log(shuffleArray([1, 2, 3, 4, 5]));

배열 일부 요소 변경하기

function updateArray(arr, index, value) {
  arr[index] = value;
  return arr;
}

console.log(updateArray([1, 2, 3, 4, 5], 2, 99));

두 배열의 차집합 구하기

function arrayDifference(arr1, arr2) {
  return arr1.filter((x) => !arr2.includes(x));
}

console.log(arrayDifference([1, 2, 3, 4, 5], [3, 4, 5, 6, 7]));

두 배열의 교집합 구하기

function arrayIntersection(arr1, arr2) {
  return arr1.filter((x) => arr2.includes(x));
}

console.log(arrayIntersection([1, 2, 3, 4, 5], [3, 4, 5, 6, 7]));

두 배열의 합집합 구하기

function arrayUnion(arr1, arr2) {
  return [...new Set([...arr1, ...arr2])];
}

console.log(arrayUnion([1, 2, 3, 4, 5], [3, 4, 5, 6, 7]));

배열 평평하게 만들기

function flattenArray(arr) {
  return arr.flat(Infinity);
}

console.log(flattenArray([1, [2, [3, [4, [5]]]]]));

배열 중첩 감소하기

function reduceArrayLevel(arr) {
  return arr.flat();
}

console.log(reduceArrayLevel([1, [2, 3], [4, 5, 6], 7]));

배열 요소 카운트하기

function countOccurrences(arr, value) {
  return arr.filter((x) => x === value).length;
}

console.log(countOccurrences([1, 2, 3, 3, 3, 4, 5], 3));

배열 요소 그룹화하기

function groupBy(arr, fn) {
  return arr.reduce((acc, val) => {
    const key = fn(val);
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(val);
    return acc;
  }, {});
}

console.log(groupBy([1, 2, 3, 4, 5, 6], (x) => x % 2));

배열의 모든 요소가 조건을 충족하는지 확인하기

function all(arr, predicate) {
  return arr.every(predicate);
}

console.log(all([2, 4, 6, 8], (x) => x % 2 === 0));

배열의 일부 요소가 조건을 충족하는지 확인하기

function some(arr, predicate) {
  return arr.some(predicate);
}

console.log(some([1, 2, 3, 4, 5], (x) => x % 2 === 0));

개체 배열에서 속성 값으로 정렬하기

function sortBy(arr, prop, isAscending = true) {
  return arr.sort((a, b) => {
    if (isAscending) {
      return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : 0;
    } else {
      return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : 0;
    }
  });
}

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 },
];

console.log(sortBy(users, 'age'));

배열 요소를 문자열로 연결하기

function joinArray(arr, separator) {
  return arr.join(separator);
}

console.log(joinArray(['Hello', 'world'], ' '));

배열 요소를 구분자로 구분한 문자열 생성하기

function joinWithDelimiter(arr, delimiter) {
  return arr.join(delimiter);
}

console.log(joinWithDelimiter([1, 2, 3, 4, 5], '-'));

배열에서 중복된 요소 찾기

function findDuplicates(arr) {
  return arr.filter((value, index, self) => self.indexOf(value) !== index);
}

console.log(findDuplicates([1, 2, 3, 4, 4, 5, 5, 6]));

배열에서 중복된 요소 개수 찾기

function countDuplicates(arr) {
  return findDuplicates(arr).length;
}

console.log(countDuplicates([1, 2, 3, 4, 4, 5, 5, 6]));

배열 요소 중 최빈값 찾기

function mode(arr) {
  const counts = arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc;
  }, {});
  const maxCount = Math.max(...Object.values(counts));
  return parseInt(Object.keys(counts).find((key) => counts[key] === maxCount));
}

console.log(mode([1, 2, 3, 3, 4, 5]));

두 점 사이의 거리 계산하기

function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

console.log(distance(1, 1, 4, 5));

두 점 사이의 유클리드 거리 계산하기

function euclideanDistance(point1, point2) {
  return Math.sqrt(
    point1.reduce((sum, value, index) => sum + Math.pow(value - point2[index], 2), 0)
  );
}

console.log(euclideanDistance([1, 2, 3], [4, 5, 6]));

두 점 사이의 맨해튼 거리 계산하기

function manhattanDistance(point1, point2) {
  return point1.reduce((sum, value, index) => sum + Math.abs(value - point2[index]), 0);
}

console.log(manhattanDistance([1, 2, 3], [4, 5, 6]));

두 점 사이의 체비셰프 거리 계산하기

function chebyshevDistance(point1, point2) {
  return Math.max(...point1.map((value, index) => Math.abs(value - point2[index])));
}

console.log(chebyshevDistance([1, 2, 3], [4, 5, 6]));

숫자 배열 요소 정규화하기

function normalize(arr) {
  const min = Math.min(...arr);
  const max = Math.max(...arr);
  return arr.map((value) => (value - min) / (max - min));
}

console.log(normalize([10, 20, 30, 40, 50]));

개체 속성 복사하기 (얕은 복사)

function shallowCopy(obj) {
  return Object.assign({}, obj);
}

const original = { a: 1, b: 2 };
const copied = shallowCopy(original);
console.log(copied);

개체 속성 복사하기 (깊은 복사)

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

const original = { a: 1, b: { c: 2 } };
const copied = deepCopy(original);
console.log(copied);

개체 속성 값으로 정렬하기

function sortObject(obj) {
  return Object.fromEntries(Object.entries(obj).sort((a, b) => a[1] - b[1]));
}

const unsorted = { a: 3, b: 1, c: 2 };
console.log(sortObject(unsorted));

개체에서 특정 속성 제거하기

function removeObjectProperty(obj, prop) {
  const newObj = { ...obj };
  delete newObj[prop];
  return newObj;
}

const myObj = { a: 1, b: 2, c: 3 };
console.log(removeObjectProperty(myObj, 'b'));

개체에서 특정 값이 있는 속성 찾기

function findKeyByValue(obj, value) {
  return Object.keys(obj).find((key) => obj[key] === value);
}

const myObj = { a: 1, b: 2, c: 3 };
console.log(findKeyByValue(myObj, 2));

개체 배열에서 속성 값 중 최솟값 찾기

function minBy(arr, prop) {
  return arr.reduce((min, obj) => (obj[prop] < min[prop] ? obj : min), arr[0]);
}

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 },
];

console.log(minBy(users, 'age'));

개체 배열에서 속성 값 중 최댓값 찾기

function maxBy(arr, prop) {
  return arr.reduce((max, obj) => (obj[prop] > max[prop] ? obj : max), arr[0]);
}

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 },
];

console.log(maxBy(users, 'age'));

문자열에서 모든 대문자를 소문자로 변환하기

function toLowerCase(str) {
  return str.toLowerCase();
}

console.log(toLowerCase('HeLLo WoRLD'));

문자열에서 모든 소문자를 대문자로 변환하기

function toUpperCase(str) {
  return str.toUpperCase();
}

console.log(toUpperCase('HeLLo WoRLD'));

문자열에서 첫 글자를 대문자로 변환하기

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

console.log(capitalize('hello world'));

문자열에서 단어의 첫 글자를 대문자로 변환하기

function titleCase(str) {
  return str
    .split(' ')
    .map((word) => capitalize(word))
    .join(' ');
}

console.log(titleCase('hello world'));

문자열에 특정 문자열이 포함되어 있는지 확인하기

function contains(str, searchString) {
  return str.includes(searchString);
}

console.log(contains('hello world', 'world'));

문자열에서 특정 문자열의 인덱스 찾기

function indexOf(str, searchString) {
  return str.indexOf(searchString);
}

console.log(indexOf('hello world', 'world'));

문자열에서 특정 문자열의 마지막 인덱스 찾기

function lastIndexOf(str, searchString) {
  return str.lastIndexOf(searchString);
}

console.log(lastIndexOf('hello world world', 'world'));

문자열에서 특정 문자열 제거하기

function removeSubstring(str, searchString) {
  return str.replace(searchString, '');
}

console.log(removeSubstring('hello world', 'world'));

문자열에서 여러 개의 공백을 하나로 줄이기

function collapseSpaces(str) {
  return str.replace(/\s+/g, ' ').trim();
}

console.log(collapseSpaces('  hello    world  '));

문자열에서 특정 문자열을 다른 문자열로 대체하기

function replaceSubstring(str, searchValue, replaceValue) {
  return str.split(searchValue).join(replaceValue);
}

console.log(replaceSubstring('hello world', 'world', 'universe'));

문자열을 반복해서 연결하기

function repeatString(str, count) {
  return str.repeat(count);
}

console.log(repeatString('hello', 3));

문자열에 숫자만 있는지 확인하기

function isNumeric(str) {
  return /^\d+$/.test(str);
}

console.log(isNumeric('12345')); // true
console.log(isNumeric('hello')); // false

문자열을 숫자로 변환하기

function toNumber(str) {
  return parseFloat(str);
}

console.log(toNumber('123.45'));

정수를 문자열로 변환하기

function intToString(integer) {
  return integer.toString();
}

console.log(intToString(123));

소수를 문자열로 변환하기

function floatToString(float) {
  return float.toString();
}

console.log(floatToString(123.45));

문자열에서 특정 위치의 문자 얻기

function charAt(str, index) {
  return str.charAt(index);
}

console.log(charAt('hello', 1));

문자열에서 특정 문자열의 개수 세기

function countOccurrences(str, substring) {
  return str.split(substring).length - 1;
}

console.log(countOccurrences('hello world world', 'world'));

문자열에서 특정 문자열의 모든 인덱스 찾기

function findAllOccurrences(str, substring) {
  const indices = [];
  let index = str.indexOf(substring);

  while (index !== -1) {
    indices.push(index);
    index = str.indexOf(substring, index + 1);
  }

  return indices;
}

console.log(findAllOccurrences('hello world world', 'world'));

문자열을 특정 문자열로 분리하여 배열로 반환하기

function splitString(str, separator) {
  return str.split(separator);
}

console.log(splitString('hello world', ' '));

문자열을 특정 길이의 배열로 나누기

function chunkString(str, size) {
  const chunks = [];
  for (let i = 0; i < str.length; i += size) {
    chunks.push(str.slice(i, i + size));
  }
  return chunks;
}

console.log(chunkString('hello world', 3));

정규식을 사용하여 문자열에서 이메일 주소 찾기

function extractEmails(str) {
  const regex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
  return str.match(regex);
}

const text = 'Contact me at john.doe@example.com or jane.doe@example.co.uk';
console.log(extractEmails(text));

정규식을 사용하여 문자열에서 URL 찾기

function extractUrls(str) {
  const regex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi;
  return str.match(regex);
}

const text = 'Visit https://www.example.com or http://example.net';
console.log(extractUrls(text));

문자열에서 HTML 태그 제거하기

function stripHtmlTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

const htmlString = '<p>Hello, <b>world!</b></p>';
console.log(stripHtmlTags(htmlString));

문자열을 쿼리 문자열 개체로 변환하기

function queryStringToObject(queryString) {
  return queryString
    .slice(1)
    .split('&')
    .map((pair) => pair.split('='))
    .reduce((acc, [key, value]) => {
      acc[decodeURIComponent(key)] = decodeURIComponent(value);
      return acc;
    }, {});
}

const query = '?name=John&age=30&city=New%20York';
console.log(queryStringToObject(query));

쿼리 문자열 개체를 문자열로 변환하기

function objectToQueryString(obj) {
  return Object.entries(obj)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

const queryParams = { name: 'John', age: 30, city: 'New York' };
console.log(objectToQueryString(queryParams));

문자열에서 특정 단어를 볼드체로 만들기

function boldifyWord(str, word) {
  return str.replace(new RegExp(word, 'g'), `<b>${word}</b>`);
}

console.log(boldifyWord('hello world', 'world'));

문자열에서 숫자와 영문자만 추출하기

function alphanumericOnly(str) {
  return str.replace(/[^a-zA-Z0-9]/g, '');
}

console.log(alphanumericOnly('Hello, world! 123'));

문자열에서 영문자, 숫자, 공백만 추출하기

function lettersNumbersSpacesOnly(str) {
  return str.replace(/[^a-zA-Z0-9\s]/g, '');
}

console.log(lettersNumbersSpacesOnly('Hello, world! 123'));

문자열에서 공백을 제거한 후, 대문자와 소문자를 번갈아 출력하기

function alternateCase(str) {
  const noSpaces = str.replace(/\s+/g, '');
  return noSpaces
    .split('')
    .map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
    .join('');
}

console.log(alternateCase('hello world'));

문자열에서 모음의 개수 세기

function countVowels(str) {
  const vowels = 'aeiouAEIOU';
  return [...str].reduce((count, char) => (vowels.includes(char) ? count + 1 : count), 0);
}

console.log(countVowels('hello world'));

문자열에서 자음의 개수 세기

function countConsonants(str) {
  const consonants = 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ';
  return [...str].reduce((count, char) => (consonants.includes(char) ? count + 1 : count), 0);
}

console.log(countConsonants('hello world'));

문자열에서 특정 길이의 연속된 부분 문자열 추출하기

function extractSubstrings(str, length) {
  const substrings = [];
  for (let i = 0; i <= str.length - length; i++) {
    substrings.push(str.slice(i, i + length));
  }
  return substrings;
}

console.log(extractSubstrings('hello world', 3));

문자열을 거꾸로 뒤집기

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello world'));

문자열을 단어별로 거꾸로 뒤집기

function reverseWords(str) {
  return str
    .split(' ')
    .map((word) => reverseString(word))
    .join(' ');
}

console.log(reverseWords('hello world'));

배열을 문자열로 변환하기

function arrayToString(arr, separator) {
  return arr.join(separator);
}

console.log(arrayToString(['hello', 'world'], ' '));

문자열에서 특정 문자열로 시작하는지 확인하기

function startsWith(str, searchString) {
  return str.startsWith(searchString);
}

console.log(startsWith('hello world', 'hello')); // true
console.log(startsWith('hello world', 'world')); // false

문자열에서 특정 문자열로 끝나는지 확인하기

function endsWith(str, searchString) {
  return str.endsWith(searchString);
}

console.log(endsWith('hello world', 'hello')); // false
console.log(endsWith('hello world', 'world')); // true

문자열에서 숫자만 추출하여 합계 구하기

function sumNumbersInString(str) {
  const numbers = str.match(/\d+/g);
  return numbers ? numbers.reduce((sum, num) => sum + parseInt(num, 10), 0) : 0;
}

console.log(sumNumbersInString('abc123def456')); // 579

문자열에서 모든 알파벳을 숫자로 변환하기

function lettersToNumbers(str) {
  return str.replace(/[a-zA-Z]/g, (char) => char.charCodeAt(0) - (char.toUpperCase() === char ? 65 : 97) + 1);
}

console.log(lettersToNumbers('hello world'));

정수를 로마 숫자로 변환하기

function toRoman(num) {
  const romanNumerals = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1,
  };

  let result = '';
  for (const key in romanNumerals) {
    while (num >= romanNumerals[key]) {
      result += key;
      num -= romanNumerals[key];
    }
  }
  return result;
}

console.log(toRoman(1987));

로마 숫자를 정수로 변환하기

function fromRoman(str) {
  const romanNumerals = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1,
  };

  let result = 0;
  for (const key in romanNumerals) {
    while (str.startsWith(key)) {
      result += romanNumerals[key];
      str = str.slice(key.length);
    }
  }
  return result;
}

console.log(fromRoman('MCMLXXXVII')); // 1987

문자열에서 가장 긴 단어 찾기

function findLongestWord(str) {
  return str
    .split(' ')
    .reduce((longest, word) => (word.length > longest.length ? word : longest), '');
}

console.log(findLongestWord('The quick brown fox jumped over the lazy dog'));

문자열에서 가장 짧은 단어 찾기

function findShortestWord(str) {
  return str
    .split(' ')
    .reduce((shortest, word) => (word.length < shortest.length ? word : shortest), str.split(' ')[0]);
}

console.log(findShortestWord('The quick brown fox jumped over the lazy dog'));

문자열에서 가장 긴 단어의 길이 찾기

function findLongestWordLength(str) {
  return str
    .split(' ')
    .reduce((longest, word) => (word.length > longest ? word.length : longest), 0);
}

console.log(findLongestWordLength('The quick brown fox jumped over the lazy dog'));

문자열에서 가장 짧은 단어의 길이 찾기

function findShortestWordLength(str) {
  return str
    .split(' ')
    .reduce((shortest, word) => (word.length < shortest ? word.length : shortest), str.split(' ')[0].length);
}

console.log(findShortestWordLength('The quick brown fox jumped over the lazy dog'));

문자열에서 중복되지 않는 첫 번째 문자 찾기

function findFirstNonRepeatedChar(str) {
  const charCount = str.split('').reduce((count, char) => {
    count[char] = (count[char] || 0) + 1;
    return count;
  }, {});

  for (const char in charCount) {
    if (charCount[char] === 1) {
      return char;
    }
  }

  return null;
}

console.log(findFirstNonRepeatedChar('hello world'));

문자열에서 특정 단어의 빈도수 구하기

function countWordOccurrences(str, word) {
  const regex = new RegExp(`\\b${word}\\b`, 'gi');
  const matches = str.match(regex);
  return matches ? matches.length : 0;
}

console.log(countWordOccurrences('The quick brown fox jumped over the lazy dog', 'the'));

문자열에서 모든 단어의 빈도수 구하기

function countAllWordOccurrences(str) {
  const words = str.match(/\b\w+\b/g);
  const wordCount = {};

  words.forEach((word) => {
    const lowercaseWord = word.toLowerCase();
    wordCount[lowercaseWord] = (wordCount[lowercaseWord] || 0) + 1;
  });

  return wordCount;
}

console.log(countAllWordOccurrences('The quick brown fox jumped over the lazy dog'));

문자열에서 모든 공백 제거하기

function removeWhitespace(str) {
  return str.replace(/\s+/g, '');
}

console.log(removeWhitespace('hello world'));

문자열에서 첫 글자를 대문자로 바꾸기

function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

console.log(capitalizeFirstLetter('hello world'));

문자열에서 모든 단어의 첫 글자를 대문자로 바꾸기

function capitalizeWords(str) {
  return str
    .split(' ')
    .map((word) => capitalizeFirstLetter(word))
    .join(' ');
}

console.log(capitalizeWords('hello world'));

문자열에서 특정 단어를 다른 단어로 바꾸기

function replaceWord(str, oldWord, newWord) {
  const regex = new RegExp(`\\b${oldWord}\\b`, 'g');
  return str.replace(regex, newWord);
}

console.log(replaceWord('hello world', 'world', 'universe'));

문자열에서 여러 단어를 다른 단어로 바꾸기

function replaceWords(str, wordMap) {
  return str.replace(/\b\w+\b/g, (word) => wordMap[word] || word);
}

const wordMap = { hello: 'hi', world: 'earth' };
console.log(replaceWords('hello world', wordMap));

문자열에서 특정 문자열을 포함하는지 확인하기

function includesSubstring(str, substring) {
  return str.includes(substring);
}

console.log(includesSubstring('hello world', 'world')); // true

문자열에서 특정 문자열의 인덱스 찾기

function indexOfSubstring(str, substring) {
  return str.indexOf(substring);
}

console.log(indexOfSubstring('hello world', 'world')); // 6

문자열에서 특정 문자열의 마지막 인덱스 찾기

function lastIndexOfSubstring(str, substring) {
  return str.lastIndexOf(substring);
}

console.log(lastIndexOfSubstring('hello world world', 'world')); // 12

문자열에서 특정 문자열의 모든 인덱스 찾기

function findAllSubstringIndices(str, substring) {
  const indices = [];
  let index = str.indexOf(substring);
  while (index !== -1) {
    indices.push(index);
    index = str.indexOf(substring, index + 1);
  }
  return indices;
}

console.log(findAllSubstringIndices('hello world world', 'world')); // [6, 12]

문자열에서 모든 대문자를 소문자로 바꾸기

function toLowerCase(str) {
  return str.toLowerCase();
}

console.log(toLowerCase('Hello World'));

문자열에서 모든 소문자를 대문자로 바꾸기

function toUpperCase(str) {
  return str.toUpperCase();
}

console.log(toUpperCase('Hello World'));

문자열에서 연속된 공백을 하나의 공백으로 바꾸기

function normalizeWhitespace(str) {
  return str.replace(/\s+/g, ' ');
}

console.log(normalizeWhitespace('hello    world'));

문자열에서 특정 길이를 넘지 않도록 자르기

function truncateString(str, maxLength) {
  return str.length <= maxLength ? str : str.slice(0, maxLength) + '...';
}

console.log(truncateString('hello world', 8));

문자열에서 특정 구분자로 단어 분리하기

function splitString(str, separator) {
  return str.split(separator);
}

console.log(splitString('hello,world', ','));

문자열에서 특정 단어의 개수 구하기

function countWords(str, separator) {
  return str.split(separator).length;
}

console.log(countWords('hello world', ' '));

URL에서 쿼리 파라미터 추출하기

function getQueryParameters(url) {
  const query = url.split('?')[1];
  if (!query) return {};

  const queryParams = query.split('&');
  const params = {};

  queryParams.forEach((param) => {
    const [key, value] = param.split('=');
    params[key] = decodeURIComponent(value);
  });

  return params;
}

console.log(getQueryParameters('https://example.com/?name=John&age=25'));

문자열에서 숫자만 포함된지 확인하기

function isNumeric(str) {
  return /^\d+$/.test(str);
}

console.log(isNumeric('12345')); // true
console.log(isNumeric('abcde')); // false

문자열에서 알파벳만 포함된지 확인하기

function isAlphabetic(str) {
  return /^[a-zA-Z]+$/.test(str);
}

console.log(isAlphabetic('abcde')); // true
console.log(isAlphabetic('12345')); // false

문자열에서 알파벳과 숫자만 포함된지 확인하기

function isAlphanumeric(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

console.log(isAlphanumeric('abc123')); // true
console.log(isAlphanumeric('abc!@#')); // false

문자열에서 이메일 주소 형식인지 확인하기

function isValidEmail(str) {
  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(str);
}

console.log(isValidEmail('test@example.com')); // true
console.log(isValidEmail('test@example')); // false

문자열에서 URL 형식인지 확인하기

function isValidUrl(str) {
  const regex = /^(https?:\/\/)?([a-zA-Z0-9]+(-?[a-zA-Z0-9])*\.?)+\.[a-zA-Z]{2,}(:\d+)?(\/\S*)?$/;
  return regex.test(str);
}

console.log(isValidUrl('https://www.example.com')); // true
console.log(isValidUrl('example.com')); // false

문자열에서 HTML 태그 제거하기

function removeHtmlTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

const stringWithHtmlTags = '<p>Hello, <strong>world</strong>!</p>';
console.log(removeHtmlTags(stringWithHtmlTags)); // 'Hello, world!'

문자열에서 특정 태그와 그 내용 제거하기

function removeTagAndContent(str, tagName) {
  const regex = new RegExp(`<${tagName}[^>]*>.*?<\/${tagName}>`, 'gi');
  return str.replace(regex, '');
}

const stringWithHtmlTags = '<p>Hello, <strong>world</strong>!</p>';
console.log(removeTagAndContent(stringWithHtmlTags, 'strong')); // '<p>Hello, !</p>'

문자열에서 특정 문자열을 감싸는 태그 추가하기

function wrapWithTag(str, target, tagName) {
  const regex = new RegExp(target, 'g');
  return str.replace(regex, `<${tagName}>${target}<\/${tagName}>`);
}

console.log(wrapWithTag('Hello, world!', 'world', 'strong')); // 'Hello, <strong>world</strong>!'

숫자를 세 자릿수마다 쉼표로 구분하여 문자열로 변환하기

function numberWithCommas(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

console.log(numberWithCommas(1234567)); // '1,234,567'

문자열에서 숫자를 반올림한 문자열로 변환하기

function roundNumberInString(str, decimalPlaces) {
  const regex = /(\d+\.\d+)/g;
  return str.replace(regex, (match) => parseFloat(match).toFixed(decimalPlaces));
}

console.log(roundNumberInString('The value is 3.14159.', 2)); // 'The value is 3.14.'

문자열에서 특정 단어의 시작 인덱스와 끝 인덱스 구하기

function wordIndices(str, target) {
  const startIndex = str.indexOf(target);
  return startIndex !== -1 ? { start: startIndex, end: startIndex + target.length - 1 } : null;
}

console.log(wordIndices('hello world', 'world')); // { start: 6, end: 10 }

문자열에서 특정 문자열이 출현하는 횟수 구하기

function countSubstringOccurrences(str, substring) {
  const regex = new RegExp(substring, 'g');
  const matches = str.match(regex);
  return matches ? matches.length : 0;
}

console.log(countSubstringOccurrences('hello world, world', 'world')); // 2

문자열에서 특정 패턴이 출현하는 횟수 구하기

function countPatternOccurrences(str, pattern) {
  const regex = new RegExp(pattern, 'g');
  const matches = str.match(regex);
  return matches ? matches.length : 0;
}

console.log(countPatternOccurrences('aabababb', 'ab')); // 3