[파트2] JavaScript 입문

*브라우저 개발자 도구 개요

1. 콘솔(Console)

• 목적: 스크립트 에러를 확인하고, JavaScript 코드를 실행하여 결과를 즉시 볼 수 있게 해줌.
• 핵심 기능: 코드 실행, 로그 확인, 디버깅.

2. 소스(Source)

• 목적: 페이지에 적용된 JavaScript, CSS, HTML 소스 코드를 확인하고 디버깅.
• 핵심 기능: 중단점 설정, 코드 단계별 실행, 스코프 확인.

JavaScript 언어의 특징

1. 동적 타입(Dynamic Types)

• 설명: 변수의 타입은 런타임에 결정되며, 값에 따라 자동으로 타입이 추론됨.

명시적 타입 변환

• 의도적 타입 변환

// 숫자를 문자열로 변환
let num = 123;
let str = String(num);  // '123'으로 변환
console.log(str);       // 출력: "123"
// 여기서 String() 함수를 사용하여 숫자 123을 문자열 '123'으로 명시적으로 변환했습니다.

// 불리언을 문자열로 변환
let bool = true;
let boolStr = String(bool);  // 'true'로 변환
console.log(boolStr);        // 출력: "true"
// String() 함수를 사용하여 불리언 true를 문자열 'true'로 변환합니다.

// 문자열을 숫자로 변환
let strNum = "456";
let num2 = Number(strNum);  // 456으로 변환
console.log(num2);          // 출력: 456
// Number() 함수를 사용하여 문자열 '456'을 숫자 456으로 변환합니다.

암묵적 타입 변환

• 개발자의 의도와 다르게 암묵적 타입변환으로 변경될 가능성이 있어
  타입 추론이 어려어짐,불필요한 디버깅 시간 발생

// 숫자와 문자열의 덧셈
let num3 = 100;
let str2 = "20";
let result = num3 + str2;  // "10020"으로 변환
console.log(result);       // 출력: "10020"
// + 연산자는 문자열이 포함된 경우 숫자를 문자열로 자동 변환하여 연결합니다.

// 불리언과 숫자의 덧셈
let bool2 = false;
let num4 = 10;
let sum = bool2 + num4;  // 10으로 변환 (false는 0으로 평가)
console.log(sum);        // 출력: 10
// 덧셈 연산에서 불리언은 숫자로 암묵적 변환됩니다. false는 0으로 평가되므로 결과는 10입니다.

// 논리 연산자와 암묵적 변환
let value = 1;
let notValue = !value;  // false로 변환
console.log(notValue);  // 출력: false
// 논리 NOT 연산자 (!)는 값을 불리언으로 암묵적 변환합니다. 여기서 숫자 1은 true로 간주되므로 결과는 false입니다.

*암묵적 타입 변환 해결 방안

이를 해결하기 위하여
전달되는 시점마다 typeof나 일치연산자를 사용하여 타입 guard 구현
자바스크립트 superSet 타입스크립트 사용

*2. 일급 객체(First-Class Functions)

• 설명: 함수를 다른 객체와 동일하게 사용할 수 있으며, 변수 할당, 객체의 프로퍼티, 배열 요소 등 모든 연산이 가능.

3. 프로토타입 기반 상속(Prototype-based Inheritance)

• 설명: 객체들이 메서드와 속성을 다른 객체로부터 상속 받을 수 있는 프로토타입 체인 구조를 사용.

4. 다양한 프로그래밍 패러다임 지원

• 설명: 명령형, 함수형, 객체지향 프로그래밍 등 다양한 스타일의 코딩 지원.

자바스크립트의 발전과 표준화

• ECMAScript: 자바스크립트의 표준 버전, ES2015(ES6)부터 주요 혁신이 이루어짐.
• Babel과 Polyfill: 구 버전 브라우저에서 최신 자바스크립트 기능을 사용할 수 있도록 돕는 도구.