JavaScript 기초-01

wonder1ng·2025년 2월 3일

JavaScript기초 풀스택기초 프론트엔드기초

풀스택 기초

목록 보기

5/12

01 JavaScript

JavaScript : 공식명칭은 ECMA Script.
- 제작자 : 넷스케이프의 브랜든 아이크. 썬마이크로 시스템즈와 협력해서 만든 언어.
- 특징 : 웹브라우저에서 지원하는 유일한 언어(과거 Basic언어). 구글에서 JS V8 엔진을 향상시키고, 오픈 소스로 배포.
- ※ Java와 JavaScript는 전혀 다른 언어. 무관계.
구동법
1. 프론트엔드(사용자PC) : 웹브라우저 JS 해석, 템플릿엔진(리액트, Vue, 앵귤러)
2. 백엔드(서버PC) : Node.js 웹서버 프로그램
JS 선언하는 방법
1. script 태그 사용
2. html 태그 속성으로 사용
3. js파일 import
디버깅 방법: 개발자 도구의 콘솔 탭에서 붉은 원에 흰 가위표 확인.
- 런타입 디버깅: 코드 실행 중에 발생하는 오류를 확인하고 고치는 것
  - vscode나 개발자 도구 소스에서 break point 지정한 후 재실행 -> step 넘어가며 확인

01-01 기본 용어

표현식(expression): 값을 만들어내는 간단한 코드.
문장, 선언문(statement): 1개 이상의 표현식이 모임. ;(세미콜론)으로 종결 표시.
프로그램(program): 문장이 모여 사용자가 사용할 수 있게 만든 것.
;(세미콜론): 문장의 끝에 사용되며 문자을 마침을 표시.
식별자(identifier): 명칭 붙일 때 사용.
- 변수명 규칙
  1. 키워드(예약어, keyword) 사용 금지
  2. 첫글자 숫자 금지
  3. 특수문자는 _, $ 2개만 가능
  4. 공뱅 문자(space) 불가
  5. 클래스는 대문자로 시작(파스칼 표기법)
  6. 상수는 전체 대문자
  7. 변수는 카멜 표기법
- 식별자 종류
  
  구분 단독 사용 타 식별자와 사용
  식별자 뒤에 괄호 없음 변수 속성
  식별자 뒤에 괄호 있음 함수 메서드
주석(comment): 코드 실행에 영향 없는 텍스트
- html 주석: 로 감쌈
- js 주석: 1행: // 뒤에 입력, 다행: /*, */로 감쌈
- vscode에서 crtl + /하면 알아서 처리
기본 용어 표(ChatGPT 답변)

구분	단독 사용	타 식별자와 사용
식별자 뒤에 괄호 없음	변수	속성
식별자 뒤에 괄호 있음	함수	메서드

용어	설명
변수 (Variable)	데이터를 저장하는 공간. `let`, `const`, `var` 키워드로 선언.
상수 (Constant)	값이 변경되지 않는 변수. `const`로 선언.
자료형 (Data Types)	값의 종류를 정의하는 타입. 예: `number`, `string`, `boolean`, `object`, `undefined`, `null` 등.
함수 (Function)	특정 작업을 수행하는 코드 블록. `function` 키워드로 정의.
배열 (Array)	여러 값을 순서대로 저장하는 객체. `[]`로 생성.
객체 (Object)	key-value 형태로 데이터를 저장하는 복합 자료형. `{}`로 생성.
조건문 (Condition)	특정 조건에 따라 코드 실행을 분기하는 구문. 예: `if`, `else`, `switch`.
반복문 (Loop)	특정 조건에 맞춰 반복적으로 실행되는 구문. 예: `for`, `while`, `forEach`.
이벤트 (Event)	사용자 상호작용(클릭, 키 입력 등)으로 발생하는 동작. 예: `click`, `keydown`.
DOM (Document Object Model)	HTML 문서를 객체 모델로 변환한 구조로, 자바스크립트에서 HTML을 조작할 수 있도록 함.
콜백 함수 (Callback Function)	다른 함수의 인수로 전달되어 실행되는 함수.
비동기 (Asynchronous)	코드가 순차적으로 실행되지 않고, 특정 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 방식. 예: `setTimeout`, `Promise`.
Promise	비동기 작업의 완료 또는 실패를 처리하기 위한 객체. `then()`, `catch()` 메서드를 사용.
클로저 (Closure)	함수와 함수가 선언된 환경의 변수들이 결합된 구조.
스코프 (Scope)	변수나 함수가 접근할 수 있는 범위. 예: 전역 스코프, 함수 스코프, 블록 스코프.
호이스팅 (Hoisting)	변수와 함수 선언이 코드의 최상단으로 끌어올려지는 특성.
화살표 함수 (Arrow Function)	짧은 구문으로 정의되는 함수. `() => {}` 형태로 작성.
템플릿 리터럴 (Template Literal)	문자열 내에서 변수를 쉽게 삽입할 수 있는 방법. `${}`로 변수를 삽입.
ES6 (ECMAScript 6)	JavaScript의 6번째 주요 버전으로, `let`, `const`, `class`, `arrow function`, `template literals` 등이 도입됨.
익명 함수 (Anonymous Function)	이름 없이 정의된 함수.
this	함수 내부에서 호출된 객체를 참조하는 키워드.
모듈 (Module)	코드의 재사용성을 높이기 위해 관련된 기능을 모아놓은 파일. `import`, `export`로 사용.

01-02 입출력

입력
- prompt(): 입력 창 띄워 입력 받음
출력
- alert(): 알림 창에 출력
- console.log(): 콘솔 창(개발자 도구)에 출력
- document.write(): 웹에 출력

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>사용자로부터 입력 - prompt 함수</title>
    <script>
      // string(문자열)으로 반환
      let name = prompt("이름을 입력하세요.");
      document.write("입력된 이름은 " + name);

      // boolean으로 반환: true / false
      let select = confirm("파일 전송할까요?");
      document.write("당신의 선택은 " + select);
    </script>
  </head>
  <body></body>
</html>

02 연산자(operator)와 자료형(data type)

02-01 연산자

연산자 모음(ChatGPT 응답): 다음 챕터들에서 사용하며 설명할 것

카테고리	연산자	설명
산술 연산자	`+`	덧셈 (문자열 연결도 가능)
	`-`	뺄셈
	`*`	곱셈
	`/`	나눗셈
	`%`	나머지 (모듈러 연산)
	`++`	증가 연산자 (1씩 증가)
	`--`	감소 연산자 (1씩 감소)
할당 연산자	`=`	할당 (변수에 값 할당)
	`+=`	덧셈 후 할당
	`-=`	뺄셈 후 할당
	`*=`	곱셈 후 할당
	`/=`	나눗셈 후 할당
	`%=`	나머지 후 할당
	`**=`	지수 후 할당 (ES6)
비교 연산자	`==`	동등 비교 (값이 같으면 true)
	`===`	엄격 동등 비교 (값과 타입이 모두 같으면 true)
	`!=`	부등 비교 (값이 다르면 true)
	`!==`	엄격 부등 비교 (값 또는 타입이 다르면 true)
	`>`	크기 비교 (왼쪽 값이 오른쪽 값보다 크면 true)
	`<`	크기 비교 (왼쪽 값이 오른쪽 값보다 작으면 true)
	`>=`	크거나 같은 비교 (왼쪽 값이 오른쪽 값보다 크거나 같으면 true)
	`<=`	작거나 같은 비교 (왼쪽 값이 오른쪽 값보다 작거나 같으면 true)
논리 연산자	`&&`	논리 AND (두 조건이 모두 true일 때 true)
	\|\|	논리 OR (둘 중 하나라도 true이면 true)
	`!`	논리 NOT (true는 false로, false는 true로 변환)
비트 연산자	`&`	비트 AND (두 값의 비트가 모두 1일 때 1)
	\|	비트 OR (두 값의 비트 중 하나라도 1이면 1)
	`^`	비트 XOR (두 값의 비트가 다르면 1)
	`~`	비트 NOT (각 비트를 반전)
	`<<`	비트 좌측 이동 (왼쪽으로 비트를 이동)
	`>>`	비트 우측 이동 (오른쪽으로 비트를 이동)
	`>>>`	부호 없는 비트 우측 이동 (부호 없는 이동)
타입 연산자	`typeof`	데이터 타입 확인
	`instanceof`	객체가 특정 클래스의 인스턴스인지 확인
조건부 연산자	`? :`	삼항 연산자 (조건 ? 참일 때 값 : 거짓일 때 값)
중복 연산자	`,`	쉼표 연산자 (여러 식을 순차적으로 실행)
기타 연산자	`in`	객체가 특정 속성을 가지고 있는지 확인
	`delete`	객체의 속성 삭제
	`void`	표현식을 실행하고 undefined를 반환
	`new`	객체 생성 (생성자 함수 호출)
	`this`	현재 객체 (주로 메서드 내에서 사용)
	`super`	부모 클래스의 메서드나 생성자에 접근
배열 및 객체 연산자	`[]`	배열 인덱싱 혹은 객체 속성 접근
	`{}`	객체 리터럴 생성
스프레드 및 나머지 연산자	`...`	스프레드 연산자 / 나머지 매개변수 1) 스프레드: 배열이나 객체를 개별 요소로 펼칠 때 사용 2) 나머지 매개변수: 함수에서 여러 개의 인자를 배열로 받아오는 데 사용

추가 질문하니 알려준 연산자

연산자	이름	설명	예시
`??`	널 병합 연산자 (Nullish Coalescing)	왼쪽 값이 `null` 또는 `undefined`일 때만 오른쪽 값을 반환	`let result = value ?? 'default';` (value가 `null`이나 `undefined`일 때만 'default' 반환)
`...`	스프레드 연산자 (Spread)	배열이나 객체를 분해하여 복사하거나 병합하는 데 사용	`const newArr = [...arr, 4, 5];` `const newPerson = { ...person, city: 'New York' };`
`...`	나머지 매개변수 (Rest)	함수의 매개변수를 배열로 받아 여러 인자를 처리	`function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); }`
`?.`	옵셔널 체이닝 연산자 (Optional Chaining)	객체의 속성에 안전하게 접근 (중간에 `null` 또는 `undefined`가 있어도 오류를 발생시키지 않음)	`let city = person?.address?.city;` `let zip = person?.address?.zip;` (존재하지 않으면 `undefined` 반환)
`*`	와일드카드 연산자 (Wildcard)	특정한 용도에서 모든 값 또는 모듈을 가져올 때 사용	`import * as myModule from './myModule';`
` `	템플릿 리터럴 (Template Literals)	문자열 안에 변수나 표현식을 삽입할 때 사용	let greeting = \`Hello, ${name}!\`;
`&`, `	`,` ^`,` ~`,` <<`,` >>`,` >>>`	비트 연산자 (Bitwise Operators)	숫자의 이진 표현을 다루는 연산자들

02-02 자료형

자료형(data type): 자료(data) 형태에 따라 나눠 놓은 것.
자료형 간단 설명 테이블(ChatGPT 응답)
- Primitive: 기본 자료형은 변경 불가능한 값(immutable)을 가지며 복사된 값을 공유하지 않음

자료형	설명	예시
Number	숫자형. 정수 및 부동소수점 숫자를 나타냄	`10`, `3.14`, `-7`
String	문자열형. 문자들의 집합	`'hello'`, `"world"`, `'123'`
Boolean	논리형. `true` 또는 `false` 값만 가질 수 있음	`true`, `false`
Object	객체형. 다양한 속성(키-값 쌍)을 가질 수 있음	`{name: 'John', age: 30}`
Array	배열형. 여러 값을 순차적으로 저장하는 객체의 일종	`[1, 2, 3]`, `['apple', 'banana']`
Null	`null` 값. 의도적으로 '값 없음'을 나타냄	`null`
Undefined	변수 선언 후 초기화되지 않은 값	`undefined` (초기화되지 않은 변수)
Symbol	심볼형. 고유하고 변경 불가능한 값	`Symbol('id')`
BigInt	매우 큰 정수를 표현할 수 있는 자료형	`1234567890123456789012345678901234567890n`

Non-Primitive: 객체를 나타내는 참조형 데이터. 변경 가능하고 참조로 다룸

자료형	설명	예시
Object	속성과 메서드를 가진 데이터 구조를 나타냅니다. 객체 리터럴로 정의 가능합니다.	`{ name: 'John', age: 30 }`
Array	순서가 있는 값들의 리스트를 나타냅니다.	`[1, 2, 3]`
Function	특정 작업을 수행하는 코드 블록을 나타냅니다.	`function greet() {}`
Date	날짜와 시간을 나타내는 객체입니다.	`new Date()`
RegExp	정규 표현식을 나타내는 객체입니다.	`/^[a-z]+$/`

02-02-01 문자열 자료형(String)

String: 문자, 글자로써 사용되는 자료형.

let a = "안녕하세요."; // 큰따옴표
let b = "안녕하세요."; // 작은따옴표
let c = `안녕하세요.`; // 백틱
let d = String("   Hello World!  "); // 함수
// 이스케이프 문자 "\(백슬래시)"와 함께 사용
// \n(개행), \t(탭), \r(캐리지 리턴: 줄의 첫 위치로 이동)
console.log('"안녕하세요.\n\\(백슬래시)로 따옴표도 사용할 수 있습니다.');
console.log(
  `Template literals(템플릿 리터럴)입니다. ${a} \${변수}로 사용하며 백틱 안에서만 사용 가능합니다.`,
  "<br>"
);
console.log(a.indexOf("하세요")); // 일치하는 문자 첫 인덱스 반환(0부터 시작)
console.log(a.lastIndexOf("하세요")); // 일치하는 문자 첫 인덱스 반환(뒤에서부터 검색)
console.log(a[1]); // 인덱싱: 특정 위치 글자 반환
console.log(a[-1]); // 인덱싱: 음수는 undefined 반환
console.log(a.at(-3)); // at: 해당 인덱스 값 반환(음수 가능)

console.log(b.slice(1, 3)); // slice(s, e): s(포함)부터 e(제외)까지 반환
console.log(b.substring(1, 3)); // substring(s, e): s(포함)부터 e(제외)까지 반환
console.log(b.slice(1, 9)); // 문자열 길이보다 커도 작동
console.log(b.slice(-4, -2)); // -(마이너스)는 마지막이 -1

console.log(b + c); // 두 문자가 합쳐짐
console.log(b.concat(c)); // 두 문자가 합쳐짐
console.log(c * 2); // NaN: Not a Number 반환

console.log(typeof d); // typeof v: v의 자료형 반환
console.log(d.length); // 문자열 길이 반환
console.log(d.toUpperCase()); // 전부 대문자 변환
console.log(d.toLowerCase()); // 전부 대문자 변환
console.log(d.charAt()); // 첫 글자 가져오기
console.log(d.charAt(3)); // 특정 위치 가져오기
console.log(d.replace("World", `JavaScript`)); // 문자 교체
console.log(d.split(" ")); // split(str): str 기준으로 문자 분리
console.log(d.trim()); // 양 끝 공백 제거

02-02-02 숫자 자료형(Number)

Number: 숫자로 인식되는 자료형(int, float 구분 없음)

let a = 1; // 정수
let b = 2.22; // 실수
let c = Number(-3.333); // Number로 선언
let d = Number("4.4444"); // 문자열을 숫자로 선언
let e = "3.333"; // 문자열

console.log(a, b, c, d, e); // e만 문자열
console.log(a + e - b); // 문자열 숫자는 +에서는 문자열 연산, 나머지 연산에선 숫자 연산
console.log(
parseInt(c), // 정수만 숫자 변환
parseFloat(c), // 실수 전체 숫자 변환
typeof parseInt(e), // 문자열도 숫자로 반환
Math.trunc(10 / 3), // 몫
Math.trunc(-10 / 3), // 몫
Math.floor(10 / 3), // 몫
Math.floor(-10 / 3) // 음수는 몫을 하나 작게 반환
);

let i = 10;

console.log(i + 2, i - 2, i * 2, i / 2, i % 2);

// 단항 연산자(++, --)
// ++: 자신에게 1을 더하는 연산자
// --: 자신에게 1을 빼는 연산자
// A++: A = A + 1
// A--: A = A - 1
i++;
console.log(i);
i--;
console.log(i);
// ++A: 먼저 +1 연산을 한 후 진행
// A++: +1 연산을 마지막에 진항
console.log("처음 값: ", i);
console.log("i++ 값: ", i++);
console.log("i 값: ", i);
console.log("++i 값: ", ++i);
console.log("i 값: ", i);

// 이항 연산자: 산술
console.log(10 + 3);
console.log(10 + 3 - 5);
console.log(10 / 3);
console.log(Math.floor(10 / 3)); // 몫
console.log(10 % 3); // 나머지
// 연산자 우선 순위
// prettier-ignore
console.log(10 + 3 * 5 / 3 * 2); // 계산 순서는 아래처럼 됨
console.log(10 + ((3 * 5) / 3) * 2);

// 할당 연산: 변수에 계산 후 결과 할당
console.log("i의 시작값", i);
i += 2;
console.log(i);
i -= 2;
console.log(i);
i *= 2;
console.log(i);
i /= 2;
console.log(i);
i **= 2;
console.log(i);
i %= 2;
console.log(i);

형 변환(Number와 String)

// String(): number -> string
let num1 = 456; // number 타입 확정
console.log(typeof num1, " ", num1);
let str1 = String(num1);
console.log(typeof str1, " ", str1);

// Number(): string -> number
let str2 = "123"; // 숫자로만 이뤄져야함
let num2 = Number(str2);
console.log(typeof num2, " ", num2);
let str22 = "       000123.051242  ";
let num22 = Number(str22);
console.log(typeof num22, " ", num22);
let str23 = "0 123";
let num23 = Number(str23);
console.log(typeof num23, " ", num23);

// 이전 방법
let str3 = "123.45";
let num5 = parseInt(str3); // 정수로 변환
let num6 = parseFloat(str3); // 실수로 변환
console.log(num5);
console.log(num6);

// 오류 발생
let str4 = "abc";
let num7 = parseInt(str4); // NaN: Not a Number
console.log(num7);
console.log(undefined + 1);
console.log(10 / 0); // infinity
console.log(999 ** 999);
console.log(20 / null); // null은 숫자 연산에선 0으로 인식
console.log(null + "adqweds"); // 문자 연산에선 "null"로 인식

// NaN 발생 예
// 1. 숫자로 변활할 수 없는 값: "abc"
// 2. 0으로 나눴을 때: 10/0
// 3. undefined에 연산할 때: undefined + 5
// 4. 잘못된 수학 연산: `Math.sqrt(-1)`(음수의 제곱근)

// 예외적인 방법(더티코드)
let num3 = "123" * 1;
console.log(typeof num3, " ", num3);
let num4 = +"123";
console.log(typeof num4, " ", num4);

02-02-03 불(불리언) 자료형(Boolean)

Boolean: true와 false로 참, 거짓을 나타내는 자료형

// 기본 형태
let bool1 = true;
let bool2 = false;
// 자료형에 따른 bool값
let bool3 = Boolean(-0.12321); // 0외엔 전부 ture
let bool4 = Boolean(0); // 0과 -0은 false
let bool5 = Boolean(" "); // 모든 글자 ture
let bool6 = Boolean(""); // 글자 없으면 false
let bool7 = Boolean([false]); // 안에 원소가 있으니 ture
let bool8 = Boolean([]); // python과 다르게 ture
let bool12 = Boolean({}); // true
let bool9 = Boolean(undefined); // false
let bool10 = Boolean(null); // false
let bool11 = Boolean(NaN); // false
console.log(bool1, bool2, bool3, bool4);
console.log(bool5, bool6, bool7, bool8);
console.log(bool9, bool10, bool11, bool12);

// 비교 및 논리연산자
let a = 10;
let b = "10";

// 동일한지 비교
console.log("연산자");
console.log(a == b); // 자료형이 다르지만 true
console.log(a === b); // 자료형도 비교하여 false
console.log(a != b); // 자료형이 다르지만 false
console.log(a !== b); // 자료형도 비교하여 true
// typeof의 반환값은 string임으로 string(소문자)으로 비교해야 함
console.log(typeof 10, typeof typeof 10);
console.log(typeof 10 == Number, typeof 10 === "number");

console.log(
  "" == false,
  "        " == false,
  "1" == true,
  1 == true,
  "0" == false,
  0 == false,
  "0000" == false,
  000 == false
); // 전부 true
console.log(
  "" === false,
  "        " === false,
  "1" === true,
  1 === true,
  "0" === false,
  0 === false,
  "0000" === false,
  000 === false
); // 전부 false
console.log([] == false, {} == true); // 배열 자료형은 결과가 좀 다름. []: false, {}: true도 false도 아님

// 크기 비교(a가 b를 초과, 이상, 미만, 이하)
console.log(a > b, a >= b, a < b, a <= b);
// 아래는 비트 및 비트 할당 연산자로 이진수(트랜지스터)의 위치를 좌우로 옮김
// 비교 연산자와 비슷하지만 다름.
console.log(a >> b, (a >>= b), a << b, (a <<= b));

console.log("논리 연산자");
// `&&`(and): 모두 true여야 true
console.log(true && true, true && false, false && false);
// `||`(or): 하나라도 true면 true
console.log(true || true, true || false, false || false);
console.log(!true, !false);

배열의 불리언: 변환 방식이 달라 결과가 달라짐(ChatGPT 응답)

Boolean([]) // true: 배열은 object이기 때문에 true로 반환
[] == false // true: ==의 비교 과정에서 []는 ""로 변환되어 false로 인식
Boolean({}) // true: object이기 때문에 true로 반환
{} == true // false: 객체는 K-V로써 [objcet objcet]로 변환되기에 true로 인식하지 않음
{} == false // false: 객체는 K-V로써 [objcet objcet]로 변환되기에 false로도 인식하지 않음

ChatGPT에게 한 질문:

js에 관해 물어보려해
`Boolean([])`은 true를 반환하는데 `[] == false`는 true를 반환해 
`Boolean({})`은 true를 반환하는데 `{} == true`의 결과는 false이고 `{} == false`의 결과도 false야 
이런 결과들의 이유를 자세히 설명해줘

02-02-04 배열(Array)

Array: 여러 자료를 묶어 넣은 자료형

let arr1 = [1, 2, 3]; // [1, 2, 3] 배열 생성
let arr2 = Array(1, 2, 3); // 상동
let arr3 = Array(3); // 길이가 3인 빈 배열 생성
let arr4 = Array.of(3); // [3] 배열 생성
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
let arr5 = Array.of("12345"); //길이가 1
console.log(arr5);
let arr6 = Array.from("12345"); //길이가 5
console.log(arr6);

let arr = [10, 20, 30];
console.log(arr[0], arr.at(0), arr[4], arr.at(4)); // 인덱싱: 10, 10, undefined, undefined 반환
console.log(arr[-1], arr.at(-1), arr.at(-9)); // undefined, 30, undefined 반환
console.log(arr.slice(9, 99), arr.slice(-999, -9)); // Array.slice(s, e): 슬라이싱. s부터(이상) e까지(미만) 반환
let [a, b, c] = arr6; // 다중 할당: 배열 값을 변수로 할당()
console.log(a, b, c);
// `...`(나머지 연산자): 여러 인자를 배열로 받음
let [a2, b2, ...c2] = arr6;
console.log(a2, b2, c2);

arr.push(40);
console.log(arr.length, arr); // 끝에 40 추가
arr[4] = 50; // 인덱스 4에 50 추가
console.log(arr);
arr[9] = 60; // 인덱스 9에 60 추가, 빈 자리는 empty
console.log(arr);
arr.push(70, 80, 90); // 계속해서 끝에 추가. 한 번에 여러 원소 추가
console.log(arr);
arr.unshift(0); // 맨 앞에 값 추가
console.log(arr);
arr.unshift(100, 110); // 여러 원소 맨 앞에 추가
console.log(arr);
arr[0] = 0; // 값 변환
console.log(arr);

// 값 탐색
console.log(arr.includes(0), arr.includes(400));
// Array.indexof(value, startIndex): startIndex부터 해서 value가 있는 index 반환. 부재시 -1
console.log(arr.indexOf(0), arr.indexOf(0, 1), arr.indexOf(0, 3));
// Array.splice(start_index, delete_count, insert_nums): start_index에서부터 delete_count만큼 값 제거 후 insuert_nums를 삽입.
arr.splice(-199, 5, 1, 1);
// start_index가 index 범위를 초과하는 경우  마지막 값으로 인식
// delete_count가 0이하인 경우 제거 없이 삽입
// insert nums 부재 시 delete_count까지만 작동.
// insert nums눈 delete_count와 별개로 순차적으로 값 삽입
console.log(arr);
// 마지막 값 반환 및 제거
arr.pop();
console.log(arr);
console.log(arr.pop());
// 처음 값 반환 및 제거
console.log(arr);
arr.shift();
console.log(arr);
console.log(arr.shift());
// 지우고 empty로 남김
delete arr[1];
console.log(arr);

// 배열 합치기
let arrA = [10, 20, 30];
let arrB = [30, 40, 50];
let arrC = arrA.concat(arrB);
console.log(arrC);
let arrC2 = arrA + arrB; // 문자열 연산이 되어 버림
console.log(typeof arrC2, arrC2);

// 정렬
// 값 타입 변수 vs 참조 타입 변수
// 값 타입은 메모리 공간에 실제 값 가짐
// 기본데이터타입 : number,string,boolean,undefined,null,symbol
// 참조 타입은 메모리 공간에 실제값의 주소값을 가짐
// 객체타입: object,Array,Function,Map,Set
let arrD = [20, 10, 30, 40, 50];
let sortedArray = arrD;
// 주소값을 복사하여 하나가 바뀌면 둘 다 바뀜
let orgArray = [...arrD]; // `...`(배열 전개 연산자): 배열의 값을 나열함
// 새로운 주소에 값을 복사하여 별도 작동
console.log(arrD);
// Array.sort(); // 원본을 변경
sortedArray.sort();
console.log(arrD);
console.log(sortedArray);
console.log(orgArray);
// Array.reverse(): 내림차순 정렬
sortedArray.reverse();
console.log(arrD);

// 다중 할당
let [e1, e2, e3, e4, e5] = arrD;
console.log(e1, e2, e3, e4, e5);
let [e6, e7] = arrD;
console.log(e6, e7);
let [e8, ...e9] = arrD;
console.log(e8, e9);

02-02-05 KV(Key-Value) 객체

Object: 객체란 기본적인 데이터 타입을 이야기하지만 js에서 객체는 KV객체를 의미하기도 함.(정확한 설명 아님)

let obj1 = { key2: "value", key: "value1", key3: "value3", key: "value" };
let obj2 = {
  key: "origin_value",
  0.11: "value",
  fads: "value",
  "021": "value",
  31: "value",
  1: "value",
  5: "value",
  asd: "value",
  "10d": "value",
  "5d": "value",
};

// key는 중복되지 않지만 value는 상관 없음
// 뒤에 있는 key-value는 기존 자리에 덮어씀
console.log(obj1);
// KV 객체는 자연수(0과 자연수 변환 가능한 문자열 포함)를 오름차순으로 먼저 정렬하고 그외는 입력순으로 기억함
console.log(obj2);

// 값 호출: 자연수는 string과 nubmer로 출력 가능하며 변수 작명법에 어긋나는 key는 대괄호로만 출력 가능
console.log(obj2.asd, obj2["fads"], obj2[1], obj2["1"]);
// 값 추가 및 변경
obj2.asd2 = "added value";
obj2["fads2"] = "added value";
obj2.asd = "modified value";
obj2["fads"] = "modified value";
console.log(obj2.asd2, obj2["fads"]);
// Objcet.keys(object): object의 key 반환, Object.values(object): object의 value 반환
console.log(Object.keys(obj1), Object.values(obj1));
// Object.entries(object): object의 각 키와 값을 배열로 묶어 반환
console.log(Object.entries(obj1));
// kv객체는 length 속성이 없기 때문에 배열로 변환 후 length 사용
console.log(
  obj1.length,
  Object.keys(obj1).length,
  Object.values(obj1).length,
  Object.entries(obj1).length
);

// 객체 병합
console.log({ ...obj1, ...obj2 });
console.log({ ...obj2, ...obj1 });
console.log(Object.assign({}, obj2, obj1));
console.log(Object.assign({}, obj1, obj2));
// 주의: `Object.assign()을 할 때는 원본(첫 번째 인자)이 수정됨.
console.log(Object.assign(obj2, obj1));
console.log(obj2);
console.log(obj1);

// 다중 할당(구조 분해 할당)
let { key, key3 } = obj1; // 키가 변수명이 되고 값이 값이 됨
console.log(key, key3);
let { a = key, b = key3 } = obj1; // 변수명 지정
console.log(a, b);

02-02-06 JSON(JavaScript Object Notation)

JSON: 자바스크립트의 객체처럼 자룔를 표현하는 방식으로 웹에서 문자열로 데이터를 주고 받을 때(api) 주로 사용.
- JSON 규칙
  1. 값 표현 시 String, Number, Boolean, Array, Object, null만 사용 가능(함수, 클래스 등 불가)
  2. 문자열과 키는 반드시 "(큰따옴표)로 감쌈

let str = "template literals"
let obj1 = {
  key1: "value1",
  key2: `value2`,
  key3: 'value3',
  key4: true,
  key5: false,
  key6: null,
  key7: 99999**99999,
  123: 'null',
  274: undefined,
  374: [undefined, null, "null"],
  575: `for ${str}`
};
console.log(obj1);

// JSON.stringify(object, array, num): object를 JSON 문자열로 변환.
// array: 특정 키(속성)만 추출. 전부 추출 시 (null)
// num(0~10): 들여쓰기 공백 개수
let json1 = JSON.stringify(obj1)
// undefined, 함수, 심볼(symbol) 등은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환
console.log(typeof json1); // string 타입
console.log(json1); // 274 제거되고 374 배열의 undefined가 null로 변경
console.log(JSON.stringify(obj1, null, 2));
console.log(JSON.stringify(obj1, ["key1", 'key2', `key3`], 2));

// JSON.parse(text, reviver): text를 JS객체로 변환
// reviver: 함수 적용
console.log(JSON.parse(json1));
console.log(JSON.parse(json1, (k, v) => typeof v === "string" ? "string" : v));

02-02-07 집합(Set)

Set: 중복값이 허용되지 않고 순서를 보장하는 여러 자료를 묶어 넣은 자료형

// Set으로 변수 선언 시 new 필수. 자세한 설명은 변수 챕터에서 기술
let set = new Set([60, 10, 20, 30, 50, 10, 20, 30, 40]);
console.log(set);
console.log(set[0]);  // set은 인덱싱 불가(undefined 반환)

// 값 추가
set.add([90, 80, 70, 10]); // 배열을 추가
set.add(...[90, 80, 70, 10]); // 첫 원소만 추가됨
set.add("일").add("이").add("삼");  // add는 동시에 여러 개 가능
console.log(set);
let set2 = new Set([...set, ...[90, 80, 70, 10]]); // 배열의 원소 추가하려면 새로 선언
console.log(set2);  // `[[Entries]] 속성 없음`으로 출력됨. 원인 모름
console.log(set2.entries());  // `[[Entries]] 속성 없음`으로 출력됨. 원인 모름
console.log(...set2); // 값 전부 확인됨
console.log(...set2.entries()); // 값 전부 확인됨
console.log(set);
console.log(set.entries());
// 값 제거
set.delete(20);
set.delete(...[30, 40]);  // 첫 원소만 삭제됨
// set2.delete(100).delete(110).delete(120)  // delete는 동시에 여러 개 불가
console.log(set);
// 보유 확인
console.log(set.has(40), set.has(30));
// 크기(length) 확인
console.log(set.size);
// 모든 값 제거
set2.clear();
console.log(set2, set);

02-02-08 맵(Map)

Map: K-V 쌍을 가진 Set과 유사한 자료형. 순서 보장.

let map1 = new Map([["key2", "value"], ["key", "value1"], ["key3", "value3"], ["key", "value"]]);
let map2 = new Map([
  [1, 10],
  [2, 20],
  ['e', 50],
  ['d', 40],
  ['f', 60],
  [11, 110],
  [3, 30],
]);
console.log(map1);
console.log(map2);  // 순서 보장
console.log(map1[0], map1["key"], map1.key);  // 잘못된 호출(undefined 반환)
console.log(map1.get("key"));  // get으로 값 반환

// 값 추가
map1.set("key4", [90, 80, 70, 10]); // 배열을 추가
map1.set("일", 1).set("이", 2).set("삼", 3);  // set는 동시에 여러 개 가능
console.log(map1);
console.log(map1.keys()); // keys 반환
console.log(map1.values()); // values 반환
console.log(map1.entries());  // K-V쌍 반환
// 값 제거
console.log(map1.delete("key2"), map1.delete("k"));  // 성공 시 true, 실패 시 false 반환
// map1.delete("key2").delete("key3")  // delete는 동시에 여러 개 불가
console.log(map1);
// 보유 확인
console.log(map1.has("key"), map1.has("key3"));
// 합치기
let mergedMap = new Map([...map1, ...map2]);
console.log(mergedMap);
// 크기(length) 확인
console.log(map1.size);
// 모든 값 제거
mergedMap.clear();
console.log(mergedMap);

03 상수와 변수

03-01 const, let, var, 암묵적 전역 변수(키워드 없음), new

const(상수): 할당 값 불변
let, var, 암묵적 전역 변수(변수): 할당 값 변경 가능. let 애용 권장.

// const(ant): 상수로 값이 변경되지 않음. 블록 스코프.
// PI; // ReferenceError: 초기화 전 접근 불가 오류 발생
const PI = 3.141592;
console.log(PI, PI + 1);  // PI를 변환하지 않는 연산은 상관없음
// TypeError: 아래 코드들은 상수 재선언 하거나 상수의 값을 변환하려 하기에 오류 발생
// PI = 3.14
// PI += 1
console.log(PI);

// var(iable): 변수로 값이 변경됨. 함수 스코프.
console.log(pi);  // var 변수 선언 전 호출 시 undefined 반환
var pi = 3.141592;
console.log(pi);
// SyntaxError: 아래 코드는 변수 재선언으로 오류 발생
// let pi = 3.14;
// const pi = 3.14;
// var로는 재할당 가능하여 아래 코드 작동.
pi = "삼점일사";
console.log(pi);
var pi = 3.14;
console.log(pi);
pi += 1
console.log(pi);

// let: 변수로 값이 변경됨. 블록 스코프.
// console.log(pie);  // ReferenceError: 초기화 전 접근 불가 오류 발생
let pie = 3.141592;
console.log(pie);
// SyntaxError: 기선언 변수로로 오류 발생
// let pie = 3.14;
// var pie = 3.14;
// const pie = 3.14;
pie = "삼점일사"  // 암묵적 전역 변수는 재선언 가능. 하지만 재선언 후에도 위의 재선언 코드들은 오류 발생
console.log(pie);
pie += 3.14
console.log(pie);

// 암묵적 전역 변수: 키워드 없이 선언하는 변수로 값이 변경됨. 전역 스코프
// console.log(파이);  // ReferenceError: 변수 선언 되지 않아 오류 발생
파이 = 3.141592
console.log(파이);
// 키워드로 재선언 시 각 키워드에 따른 결과(오류) 발생(암묵적 전역 변수가 우선순위 낮은 것으로 추정정)
// const 파이 = 3.14
// var 파이 = 3.14
// let 파이 = 3.14
파이 = 3.14
console.log(파이);
파이 += 3.14
console.log(파이);

요약(ChatGPT 응답)

특성	재할당	재선언	스코프	호이스팅	`strict mode`에서 허용
`const`	❌ 불가능	❌ 불가능	블록 스코프	✅ TDZ 적용	✅
`let`	✅ 가능	❌ 불가능	블록 스코프	✅ TDZ 적용	✅
`var`	✅ 가능	✅ 가능	함수 스코프	✅ `undefined`로 초기화	✅
키워드 없음	✅ 가능	✅ 가능	전역 스코프	✅ (전역 객체의 프로퍼티)	❌ ReferenceError 발생

※ TDZ(Temporal Dead Zone): JavaScript에서 선언된 변수들이 초기화되기 전에 접근될 경우 발생하는 오류(ReferenceError).(ChatGPT 답변)

new: 생성자 함수(Constructor Function)를 호출하여 새로운 객체를 생성(ChatGPT 응답)

// TypeError: Constructor Set requires 'new' at Set (<anonymous>)
// let set1 = Set([1, 2, 3])
let set2 = new Set([1, 2, 3])
console.log(set2);

03-02 스코프(Scope)(ChatGPT 응답)

스코프(scope): 변수, 함수, 객체 등이 어디서 유효하고 접근할 수 있는지를 정의하는 범위
1. 전역 스코프(global scope): 모든 함수나 코드 블록에서 접근 가능
2. 지역 스코프(local scope): 함수(function scope)나 코드 블록(block scope) 안에서만 접근 가능
스코프 체인(scope chain): 스코프에 따른 변수 참조 순서

현재 스코프에서 참조.
부재 시 바로 위의 스코프를 순서대로 참조.
최상위인 전역 스코프에서도 부재 시 ReferenceError가 발생.

// 1. const, var, let의 스코프 테스트
function varScopeTest() {
    const LOCALCONST = "나는 const로 선언된 지역 변수";
    var localVar = "나는 var로 선언된 지역 변수";
    let localLet = "나는 let으로 선언된 지역 변수";
    if (true) {
      const BLOCKCONST = "나는 블록 내부에서 선언된 const 변수";
      var blockVar = "나는 블록 내부에서 선언된 var 변수";
      let blockLet = "나는 블록 내부에서 선언된 let 변수";
    }
    console.log(LOCALCONST);  // ✅ 정상 출력: "나는 const로 선언된 지역 변수"
    // console.log(BLOCKCONST);  // ❌ ReferenceError: BLOCKCONST is not defined (블록 바깥에서 접근 불가)
    console.log(localVar);  // ✅ 정상 출력: "나는 var로 선언된 지역 변수"
    console.log(blockVar);  // ✅ 정상 출력: "나는 블록 내부에서 선언된 var 변수" (블록 스코프가 아님)
    console.log(localLet);  // ✅ 정상 출력: "나는 let으로 선언된 지역 변수"
    // console.log(blockLet);  // ❌ ReferenceError: blockLet is not defined (블록 바깥에서 접근 불가)
}

varScopeTest();
// console.log(localVar);  // ❌ ReferenceError: localVar is not defined (함수 바깥에서 접근 불가)
// console.log(blockVar);  // ❌ ReferenceError: blockVar is not defined (함수 바깥에서 접근 불가)

// 2. 암묵적 전역 변수의 스코프 테스트
function implicitGlobalTest() {
  localImplicit = "나는 함수 안의 암묵적 전역 변수" // var, let, const 없이 선언 (strict 모드가 아니므로 허용됨)
  if (true) {
    blockImplicit = "나는 블록 안의 암묵적 전역 변수"; // var, let, const 없이 선언 (strict 모드가 아니므로 허용됨)
  }
}

implicitGlobalTest();
console.log(localImplicit);  // ✅ 정상 출력: "나는 함수 안의 암묵적 전역 변수" (전역 스코프)
console.log(blockImplicit);  // ✅ 정상 출력: "나는 블록 안의 암묵적 전역 변수" (전역 스코프)

// 3. 전역 변수는 전역 객체(window)의 property가 됨 (브라우저 환경에서 실행)
var explicitGlobal = "나는 var로 선언된 전역 변수";
console.log(explicitGlobal); // ✅ 정상 출력: "나는 var로 선언된 전역 변수"
console.log(window.localVar); // ❌ undefined (전역 변수로 선언되지 않음)
console.log(window.explicitGlobal); // ✅ "나는 var로 선언된 전역 변수" (전역 객체의 속성이 됨)
console.log(window.blockImplicit); // ✅ "나는 암묵적 전역 변수" (전역 객체의 속성이 됨)

03-03 호이스팅(Hoisting)(ChatGPT 응답)

호이스팅(hoisting): 코드 실행 전 변수 선언이 자동으로 처리되어 변수 선언이 위로 끌어올려지는 현상.
- var: undefined(호이스팅되지만 값은 호이스팅되지 않음.)
- const, let: ReferenceError: Cannot access '초기화전변수' before initialization(호이스팅되지만 초기화 전 접근 시 오류 발생)
- 암묵적 전역 변수: ReferenceError: 미선언변수 is not defined(호이스팅되지 않음)

03-04 엄격 모드(Strict Mode)(ChatGPT 응답)

use strict(엄격 모드): 엄격한 실행 환경을 제공하여 코드의 오류를 방지하고, 최적화가 가능한 코드로 유도하는 모드.

"use strict";
x = 10; // ❌ ReferenceError: x is not defined

03-05 전역 객체(Global Object)(ChatGPT응답)

전역 객체: 전역 범위에서 접근할 수 있는 객체로 환경에 따라 명칭과 특징이 다름

환경	전역 객체	설명
브라우저	`window`	브라우저 환경에서 전역 객체. DOM, 웹 API, 전역 변수 등을 관리.
Node.js	`global`	서버 사이드 환경에서 전역 객체. DOM과 웹 API는 제공하지 않으며, Node.js 내장 모듈을 관리.
웹 워커	`self`	백그라운드 스레드에서 전역 객체. DOM에 접근할 수 없고, 메인 스레드와 메시지 전달을 처리.

출처: 한국경제신문 K-Digital Training - toss bank
첨고 서적:
윤인성 지음, 혼자 공부하는 자바스크립트, 한빛미디어, 2021년
고경희 지음, Do it! HTML+CSS+자바스크립트 웹 표준의 정석, 이지스퍼블리싱, 2024년

데이터, 풀스택

이전 포스트

CSS Framework & Library

다음 포스트

JavaScript 기초-01

풀스택 기초

01 JavaScript

01-01 기본 용어

01-02 입출력

02 연산자(operator)와 자료형(data type)

02-01 연산자

02-02 자료형

02-02-01 문자열 자료형(String)

02-02-02 숫자 자료형(Number)

02-02-03 불(불리언) 자료형(Boolean)

02-02-04 배열(Array)

02-02-05 KV(Key-Value) 객체

02-02-06 JSON(JavaScript Object Notation)

02-02-07 집합(Set)

02-02-08 맵(Map)

03 상수와 변수

03-01 const, let, var, 암묵적 전역 변수(키워드 없음), new

03-02 스코프(Scope)(ChatGPT 응답)

03-03 호이스팅(Hoisting)(ChatGPT 응답)

03-04 엄격 모드(Strict Mode)(ChatGPT 응답)

03-05 전역 객체(Global Object)(ChatGPT응답)

CSS Framework & Library

JavaScript 기초-02

0개의 댓글