JS(1)
오늘 배운 것
1. JavaScript 기본
- 정의: 동적 타이핑, 객체 지향, 함수형 프로그래밍을 지원하는 활용도 높은 스크립트 언어입니다. 높은 수준의 추상화를 제공하여 개발자가 세부적인 내용을 잘 몰라도 프로그래밍이 가능합니다.
- 역할: 웹 프론트엔드에서 사용자 인터페이스를 제어하고 , Node.js를 통해 백엔드 부분도 제작할 수 있습니다.
- 실행 방식: 일반적으로 인터프리터 방식으로 동작하지만, 최신 엔진들은 JIT(Just-In-Time) 컴파일러를 사용하여 성능을 향상시킵니다.
- 포함 방법:
- HTML 파일 내부에
<script> 태그를 사용합니다.
- 외부
.js 파일을 <script src="..."></script>로 연결하여 재사용성을 높입니다.
- HTML 태그 내에 인라인(inline)으로 코드를 직접 삽입할 수 있습니다.
2. 변수(Variable)와 자료형(Data Type)
- 변수 선언:
let: 블록({}) 스코프를 가지며, 중복 선언 시 오류가 발생합니다. 현대 JavaScript에서 주로 사용됩니다.const: 재할당 및 재선언이 불가능한 상수를 선언하며, 선언과 동시에 값을 할당해야 합니다.var: 함수 스코프를 가지며, 변수 호이스팅(hoisting) 문제로 혼란을 유발할 수 있어 사용을 지양하는 추세입니다.
- 동적 타이핑(Dynamic Typing): 변수의 타입은 값이 할당될 때 결정됩니다.
- 자료형의 종류:
- 기본형(Primitive Type): 실제 값을 저장하는 타입입니다.
number: 정수와 실수를 구분하지 않습니다. Infinity나 NaN(Not a Number) 같은 특수한 값도 포함합니다.string: 작은따옴표나 큰따옴표로 감싸 표현합니다. ES2015부터 백틱(`)과 ${변수}를 사용하는 템플릿 문자열을 지원해 여러 줄 문자열과 변수 삽입이 용이해졌습니다.boolean: true와 false 리터럴 값을 가집니다.undefined: 변수 선언 후 아무것도 할당하지 않은 상태를 의미합니다.null: 객체가 없음을 의도적으로 명시하기 위해 할당하는 값입니다.- falsy 값:
if문 등에서 false로 평가되는 값들로 false, null, undefined, NaN, 0, ""(빈 문자열)이 있습니다.
- 참조형(Reference Type): 객체에 대한 참조(메모리 주소)를 저장하며, 객체는 힙(Heap) 메모리에 생성됩니다.
- 객체(Object):
key: value 쌍으로 구성된 속성(property)의 집합입니다. {}(객체 리터럴)을 사용해 생성하는 것이 가장 일반적입니다.
- 배열(Array):
[](배열 리터럴)을 사용하여 생성하며, 여러 값을 순서대로 저장합니다. JavaScript 배열은 객체 기반이며 크기가 동적으로 조절됩니다. 정의되지 않은 인덱스에 접근하면 undefined를 반환합니다.
3. 연산자(Operator)와 제어문(Control Statement)
- 산술 연산:
+ 연산자는 피연산자 중 하나가 문자열이면 결합 연산자로 동작합니다. 그 외 산술 연산자들은 피연산자를 숫자로 변환하여 연산합니다.
- 비교 연산:
== (동등 연산자): 타입을 변환한 후 값이 같은지 비교합니다.=== (일치 연산자): 값과 타입이 모두 같아야 true로 평가되며, 타입 변환을 수행하지 않습니다.
- 논리 연산자 (Short-circuit):
||와 && 연산은 단순히 true/false가 아닌, 최종 평가를 결정한 피연산자의 값을 반환합니다. 이는 브라우저 지원 여부를 파악하고 대체 값을 제공하는 데 유용하게 사용됩니다.
- 제어문:
if, switch, try-catch-finally 등 Java와 동일한 제어문을 제공합니다.- 반복문: 전통적인
for문, 배열 등 iterable 객체의 요소를 순회하는 for-of, 객체의 속성 키를 순회하는 for-in 등 다양한 형태의 for문을 제공합니다.
4. 함수(Function)
- 1급 객체(First-class Citizen): JavaScript에서 함수는 객체이므로 변수에 할당되거나 , 다른 함수의 인자로 전달되거나 , 함수의 반환 값으로 사용될 수 있습니다.
- 함수 정의 방법:
- 함수 선언문:
function add(x, y) { ... }
- 함수 표현식:
let minus = function(x, y) { ... }; 와 같이 변수에 익명 함수를 할당합니다.
- Arrow Function (
=>): (p1, p2) => p1 + p2; 처럼 function 키워드를 생략하여 함수를 간결하게 표현하는 표기법입니다.
- 함수 호이스팅(Hoisting): JavaScript 엔진이 코드 실행 전,
function으로 이름있게 정의된 함수 선언을 스코프 최상단으로 끌어올리는 현상입니다. 이로 인해 함수가 선언되기 전에 호출할 수 있습니다.
- 콜백 함수(Callback Function): 다른 함수에 인자로 전달되어 특정 조건(예: 이벤트 발생)에서 호출되는 함수입니다. 배열의
sort() 메서드에 정렬 기준을 제공하는 것이 대표적인 예입니다.
- 생성자 함수(Constructor):
new 키워드와 함께 호출되어 객체를 생성하는 역할을 합니다. ES2015부터는 class 키워드를 사용하는 것이 권장됩니다.
내일 할 일
- 알고리즘, 정처기 필기 공부
