[인프런 워밍업 스터디 클럽 3기 FE] 1주차 발자국

김다 2개월 전

1주차 학습 정리

명시적 형변환

• Number()
 - 전달된 값을 숫자로 변환합니다. 정수, 실수 모두 지원하며, 불리언, null, 공백 등도 처리합니다.
 - 숫자로 변환할 수 없는 문자열(예: "123abc")은 NaN을 반환합니다.

• parseInt()
 - 문자열을 정수로 해석합니다. 문자열의 앞부분부터 숫자를 읽어 정수로 변환합니다.
 - 두 번째 인수로 진법(보통 10)을 명시하는 것이 좋으며, 변환 불가능한 경우 NaN을 반환합니다.

• parseFloat()
 - 문자열을 부동 소수점 숫자로 해석합니다.
 - 숫자 앞의 공백은 무시하지만, 숫자 형식이 깨지는 시점에서 파싱을 중단합니다.

• String()
 - 전달된 값을 문자열로 변환합니다.
 - 객체의 경우 내부적으로 toString()을 호출하며, null과 undefined는 각각 "null", "undefined"로 변환됩니다.

• Boolean()
 - 전달된 값을 불리언(true/false)으로 변환합니다.
 - 0, NaN, 빈 문자열(""), null, undefined는 false로, 그 외의 값은 true로 변환됩니다.

 

 

암시적 형변환

• 문자열 결합: + 연산자가 문자열과 다른 타입의 값을 만나면 다른 타입이 문자열로 변환됩니다. (예시: "5" + 5 → "55")

• 동등 비교 (==) : 비교하는 두 값의 타입이 다르면 자바스크립트가 암묵적으로 타입을 변환하여 비교합니다.

• === (일치비교)는 두 값의 타입이 동일한 경우에만 true를 반환(암묵적 타입 변환 없음)
• == (동등비교)는 두 값의 타입이 다르면 암묵적인 형변환을 수행

• 불리언 컨텍스트: 조건문이나 논리 연산에서 값이 불리언으로 평가되어 암묵적으로 형변환됩니다.

• 산술 연산: - 연산자가 숫자와 다른 타입의 값을 만나면 다른 타입이 숫자로 변환됩니다. (예시: "10" - 2 → 8)

 

 

배열, 유사 배열 객체, 이터러블

  1. 배열 (Array)
     - Array 생성자나 배열 리터럴([])을 통해 생성된 객체
     - 내장 메서드(push, pop, map, filter 등)를 사용할 수 있음

     

    - 프로토타입 체인을 통해 다양한 기능이 제공

  2. 유사 배열 객체 (Array-like Object)
     - 인덱스와 length 프로퍼티를 가지고 있지만, Array.prototype에 정의된 메서드를 직접 사용할 수 없는 객체
     - 함수 내의 arguments 객체, DOM에서 반환되는 NodeList 등
     - Array.from()이나 전개 연산자(...) 등을 사용해 실제 배열로 변환 가능

  3. 이터러블 (Iterable)
     - [Symbol.iterator] 메서드를 가지고 있는 객체입니다.
     - 배열, 문자열, Map, Set 등이 이터러블이며, for...of 문 등으로 순회할 수 있습니다.
     - for...of 문은 [Symbol.iterator] 메서드 내 next 함수를 호출

 const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
 const realArray = Array.from(arrayLike);
 console.log(realArray) // 출력: ["a", "b", "c"]

 const iterable = {
  maxData: 5,
  [Symbol.iterator]: function() {
   let index = 0;
   const max = this.maxData;
   return {
    next: function() {
     return index < max ? { value: index++, done: false } : { done: true };
    }
   };
  }
 };

 for (const value of iterable) {
  console.log(value); // 0, 1, 2, 3, 4 출력
 }

 

DOM, window, Node

• 자바스크립트는 다양한 환경에서 동작하며, 이때 플랫폼을 호스트라고 부름
• 브라우저에서는 모든 객체의 최상위에 존재하는 window라는 루트 객체가 있음

• 새로운 탭이나 창이 열릴 때 내부적으로 자동 생성됩니다.
• window 객체는 DOM, BOM, JS로 구성됩니다.

 - DOM (문서 객체 모델)
  • 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.
  • 최상위 객체는 document이며, DOM의 엔트리 포인트 역할을 합니다.
  • document의 메서드를 통해 DOM을 선택, 추가, 삭제할 수 있습니다.

 - BOM (브라우저 객체 모델)
  • DOM과 JS를 제외하고 호스트가 제공하는 추가 객체들을 나타냅니다 (비표준).

 - JS (ECMAScript Core)
  • ECMAScript에 정의된 내장 객체와 함수들이 전역 객체(window)의 프로퍼티로 등록되어 접근 가능합니다.

• 전역 변수와 함수는 window 객체의 프로퍼티로 등록되어 전역 스코프를 형성합니다.

 

window
  ├── document (DOM)
    ├── documentElement ()
      ├── head (document.head)
      └── body (document.body)
    └── ... (노드, 메서드 등)
  ├── BOM (Browser Object Model)
    ├── location
    ├── navigator
    ├── history
    ├── screen
    └── ... (타이머, cookies 등)
  ├── JavaScript (ECMAScript Core)
    ├── 기본 객체들 (Object, Array, Function 등)
    └── 내장 함수 및 프로토타입
  └── 기타 Web API
    ├── fetch, XMLHttpRequest
    ├── WebSockets
    ├── Canvas, WebGL 등
    └── ... (여러 브라우저 제공 API)

 

노드 타입 (총 12가지 중 자주 사용되는 4가지)
• Document Node: DOM의 진입점 (document)
• Element Node: HTML 태그를 나타내며, DOM 트리를 구성함
• Text Node: 텍스트(새 줄, 공백 포함)를 나타냄
• Comment Node: 주석을 나타내며, 화면에 표시되지는 않지만 정보 기록 및 DOM 조작 시 활용 가능

 

 

1주차 과제

 

댓글을 작성해보세요.


채널톡 아이콘