K코딩

1. 기본 문법

• 변수 선언
  • let, const: 변수를 선언합니다. const는 재할당할 수 없는 상수입니다.
• 데이터 타입
  • Number, String, Boolean, Object, Array: 자바스크립트의 기본 데이터 타입들입니다.
• 조건문
  • if, else if, else: 조건에 따라 코드 블록을 실행합니다.
  • switch: 여러 가능한 경우에 대해 코드를 실행합니다.
• 반복문
  • for: 특정 횟수만큼 코드를 반복 실행합니다.
  • while, do...while: 조건이 참인 동안 코드를 반복 실행합니다.
  • for...of: 배열과 같은 반복 가능한 객체의 각 요소에 대해 반복합니다.
  • for...in: 객체의 열거 가능한 속성들을 반복합니다.
• 연산자
  • 산술 연산자: +, -, *, /, %, ++, --: 기본적인 수학 연산을 수행합니다.
  • 비교 연산자: ==, ===, !=, !==, >, <, >=, <=: 두 값을 비교합니다.
  • 논리 연산자: &&, ||, !: 논리 연산을 수행합니다.

2. 함수

• 함수 선언
  • function() {}: 함수의 이름과 내용을 정의합니다.
• 함수 표현식
  • const func = function() {};: 익명 함수로 변수를 초기화합니다.
• 화살표 함수
  • const func = () => {};: 짧은 구문의 익명 함수입니다.

3. 객체와 클래스

• 객체 리터럴
  • { key: value }: 키-값 쌍의 집합체를 정의합니다.
• 객체 메서드
  • Object.keys(): 객체의 모든 키를 배열로 반환합니다.
  • Object.values(): 객체의 모든 값을 배열로 반환합니다.
  • Object.assign(): 하나 이상의 객체를 결합해 새 객체를 만듭니다.
• 클래스 선언
  • class MyClass {}: 객체의 설계를 정의합니다.
• 클래스 상속
  • extends: 기존 클래스를 확장해 새로운 클래스를 정의합니다.

4. 배열 메서드

• push(): 배열 끝에 요소를 추가합니다.
• pop(): 배열 끝의 요소를 제거하고 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
• unshift(): 배열의 처음에 요소를 추가합니다.
• splice(): 배열에서 요소를 추가, 삭제, 또는 교체합니다.
• slice(): 배열의 일부분을 새 배열로 반환합니다.
• concat(): 두 개 이상의 배열을 결합합니다.
• forEach(): 배열의 각 요소에 대해 함수를 실행합니다.
• map(): 배열의 각 요소를 변환해 새 배열을 만듭니다.
• filter(): 조건을 만족하는 배열의 요소들로 새 배열을 만듭니다.
• reduce(): 배열을 누적해서 단일 값으로 만듭니다.
• find(): 조건을 만족하는 첫 번째 요소를 반환합니다.
• includes(): 배열이 특정 요소를 포함하는지 확인합니다.

5. 문자열 메서드

• charAt(): 문자열의 특정 인덱스의 문자를 반환합니다.
• concat(): 두 개 이상의 문자열을 결합합니다.
• includes(): 문자열이 특정 문자열을 포함하는지 확인합니다.
• indexOf(): 특정 문자가 처음 나타나는 위치를 반환합니다.
• slice(): 문자열의 일부분을 추출합니다.
• split(): 문자열을 배열로 분할합니다.
• replace(): 특정 문자열을 다른 문자열로 대체합니다.
• toLowerCase(): 문자열을 소문자로 변환합니다.
• toUpperCase(): 문자열을 대문자로 변환합니다.
• trim(): 문자열의 양쪽 공백을 제거합니다.

6. 비동기 프로그래밍

• Promise
  • Promise: 비동기 작업의 완료를 처리하는 객체입니다.
  • then(): Promise가 이행될 때 실행할 코드를 정의합니다.
  • catch(): Promise가 거부될 때 실행할 코드를 정의합니다.
  • finally(): Promise가 완료된 후 항상 실행할 코드를 정의합니다.
• async/await
  • async: 비동기 함수를 정의합니다.
  • await: Promise가 해결될 때까지 기다립니다.

7. 이벤트 핸들링

• addEventListener(): 이벤트를 감지하고 처리하는 함수를 연결합니다.
• removeEventListener(): 이벤트 핸들러를 제거합니다.
• preventDefault(): 기본 이벤트 동작을 막습니다.
• stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 막습니다.

8. DOM 조작

• 선택자
  • document.getElementById(): 특정 ID를 가진 요소를 선택합니다.
  • document.querySelector(): CSS 선택자를 사용해 첫 번째 요소를 선택합니다.
  • document.querySelectorAll(): CSS 선택자를 사용해 모든 일치하는 요소를 선택합니다.
• DOM 조작 메서드
  • innerHTML: 요소의 HTML 내용을 가져오거나 설정합니다.
  • style: 요소의 스타일을 변경합니다.
  • setAttribute(), getAttribute(), removeAttribute(): 요소의 속성을 조작합니다.
  • appendChild(), removeChild(): 요소를 추가하거나 제거합니다.

자바스크립트는 코드가 실행될 때 데이터 타입이 결정되는 동적 타입 언어입니다. 따라서 변수에 할당된 값에 따라 그 변수의 타입이 정해집니다. 자바스크립트에서 데이터 타입을 확인하려면 typeof 연산자를 사용합니다.

console.log(typeof 변수명);

typeof 연산자는 변수의 데이터 타입을 반환합니다.

1. 숫자 (Number)

자바스크립트에서는 모든 숫자가 number 타입으로 처리됩니다. 여기에는 정수, 실수, 지수형 표현 등이 포함됩니다.

1-1. 정수 (Integer)

정수는 소수점이 없는 숫자입니다.

let integer = 10;
console.log(typeof integer); // number

1-2. 실수 (Float)

실수는 소수점이 포함된 숫자입니다.

let float = 3.14;
console.log(typeof float); // number

1-3. 지수형 (Exponential)

지수형은 e 표기법을 사용해 표현된 숫자입니다. 이는 주로 큰 수나 작은 수를 표현할 때 사용됩니다.

let exp = 2.5e5;
console.log(typeof exp); // number

1-4. NaN (Not a Number)

NaN은 "숫자가 아님"을 의미합니다. 일반적으로 숫자가 아닌 값을 숫자 연산에 사용했을 때 발생합니다.

let notANumber = "Hello" / 2;
console.log(notANumber); // NaN
console.log(typeof notANumber); // number

1-5. Infinity (무한대)

Infinity는 무한대를 의미하며, 0으로 숫자를 나누는 등의 연산에서 발생합니다.

let infinity = 1 / 0;
console.log(infinity); // Infinity
console.log(typeof infinity); // number

let negativeInfinity = -1 / 0;
console.log(negativeInfinity); // -Infinity
console.log(typeof negativeInfinity); // number

주로 쓰이는 자료형의 종류

기본연산자

단축된 연산자

관계연산자

논리연산자

오늘은 변수의 구조를 알아보겠습니다.

오늘 이 글을 읽는 순간 여러분은 변수라는 것을 보고 이해할 수 있는 사람이 되어있으실 겁니다.

자 저번글에서 let(렛)과 const(컨스트)라는 변수를 만들어내는 일종의 명령어를 알게 되셨습니다.

소리 내어 읽어보기까지 했죠. 만약 기억이 안 난다? 괜찮습니다. 지금 소리 내어 읽어보시고 가겠습니다.

이 변수가 대체 뭐고 어디에 어떻게 쓰이는 거지? 이런 잡생각 아직까지는 넣어두세요.

우선 변수의 구조를 한번보겠습니다

실제로 우리가 코드를 작성할 때 이렇게 작성합니다.

let abc = 123
//위 변수를 3등분 하면
      let                abc            = 123
//앞(변수의 종류) //중간(변수의 이름) //뒤(변수의 값)

변수라는 것은 크게 3 등분해서 보면 쉽습니다

앞 : 변수의 종류 let(렛)과 const(컨스트) 2가지

중간: 변수의 이름[아무렇게나 알아보기 쉽게 적으면 됩니다]

뒤 : 변수의 값[변수의 값의 앞에 보면 =(이퀄사인)이 있죠?

이 =(이퀄사인)은 오른쪽 값을 왼쪽 이름에 넣는다는 뜻입니다

수학에서 =(이퀄사인)은 "같다"라고 쓰이지만

프로그래밍 안에서 =(이퀄사인)은 오른쪽 값을 왼쪽에 넣는다!라는 뜻입니다

변수의 값에는 예시에서 본 것과 같은 123이라는 숫자형도 있지만

여러 가지 종류가 존재합니다

다음글에서는 변숫값의 종류의 대해서 짚어보겠습니다.