JS 복습 심화

자바스크립트

웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이며, 자바스크립트 엔진이 있는 모든 디바이스에서 동작한다. 브라우저 뿐만 아니라 서버에서도 실행 가능하다.

 

브라우저의 자바스크립트

- 페이지에 새로운 HTML을 추가하거나 기존 HTML, 스타일 수정하기

- 사용자 행동에 반응하기 (event)

- 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드/업로드하기 (Ajax, comet...)

- 쿠키를 가져오거나 설정하기

- 사용자에게 질문을 건네거나 메시지 보여주기

- 클라이언트 측에 데이터 저장하기 (local storage, session storage)

서버의 자바스크립트

- 보안을 위해서, 브라우저에서 자바스크립트 기능에 제약 걸어 놓음

- 서버에서는 브라우저에서 제약을 걸어 놓은 작업 가능

자바스크립트의 장점

1. HTML/CSS와 완전히 통합 가능

2. 간단한 일은 간단하게 처리 가능

3. 모든 주요 브라우저에서 지원됨 (기본 언어로 사용됨)

4. 서버/모바일 앱 개발 가능

---

코어 자바스크립트

실행 환경에 독립적인 자바스크립트 문법

 

데이터 타입 (자료형)

자바스크립트의 자료형은 원시값과 객체로 나뉜다.

- 원시값 : 언어의 최고 low level에서 직접 표현되는 불변 데이터 (변경할 수 없는 값)

자료형	설명
boolean	논리 요소를 나타내며, true와 false 두 가지의 값을 가질 수 있다.
null	null 하나의 값만 가질 수 있다. 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조를 나타낸다.
undefined	선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당된다.
number	-(2^53 − 1)부터 2^53 − 1까지의 수와 '+infinity', '-infinity', NaN(Not a Number)의 상징적인 값을 가진다.
BigInt	임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값이다.number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있다.
string	텍스트 데이터를 나타낸다.
symbol	고유하고 변경 불가능한 원시 값이며 객체의 속성 키로 사용할 수 있다.

- 객체 : 식별자로 참조할 수 있는 메모리 상의 값이며, 데이터 속성과 접근자 속성 두 종류가 있다.

데이터 속성 : 키와 값을 연결함
특성	타입	설명	기본값
[[Value]]	모든 js 타입	속성에 대한 회수 접근에 반환하는 값	undefined
[[Writable]]	boolean	false면, 속성의 [[Value]] 변경 불가	falset
[[Enumerable]]	boolean	true면, 속성이 for...in 반복문에 노출됨	false
[[Configurable]]	boolean	false면, 속성 삭제/접근자 속성으로 변경/[[Value]]와 [[Writable]]을 제외한 특성 변경 불가	false
Read-only	boolean	ES5 [[Writable]] 특성의 반대 값
DontEnum	boolean	ES5 [[Enumerable]] 특성의 반대 값
DontDelete	boolean	ES5 [[Configurable]] 특성의 반대 값

접근자 속성 : 키를 두 개의 접근자 함수(get, set) 중 하나 이상과 연결하여 값을 가져오거나 저장함
특성	타입	설명	기본값
[[Get]]	함수 객체 또는 undefined	값에 대해 접근을 시도하면, 매개변수 없이 호출해서 속성 값을 회수함	undefined
[[Set]]	함수 객체 또는 undefined	값에 대해 변경을 시도하면, 변경을 시도한 값을 유일한 매개변수로 사용해 호출함	undefined
[[Enumerable]]	boolean	true면, 속성이 for...in 반복문에 노출됨	false
[[Configurable]]	boolean	false면, 속성을 삭제하거나 데이터 속성으로 변경 불가	false

 

JavaScript의 타입과 자료구조 - JavaScript | MDN

 

데이터 타입

 

기본형

- 문자열이든 숫자든 한 가지만 표현할 수 있음

- 할당/연산 시 값이 담긴 주솟값을 바로 복제

- 불변성(immutability)

참조형

- 할당/연산 시 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제

- 데이터 자체가 아닌 내부 프로퍼티를 변경할 때 가변

형 변환

- 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됨

- 의도적으로 변환 가능 : String(value), Number(value), Boolean(value)

 

변수와 상수

명명 규칙

1. 변수, 함수

    - 변수명에는 오직 문자, 숫자, $, _ 만 들어갈 수 있음

    - 첫 글자는 숫자 X

    - 보통 camelCase 사용

2. 상수

    - 기억하기 힘든 값 사용

    - 보통 대문자 SNAKE_CASE 사용

3. 기타

    - CSS class : kebab-case

    - 파일명 : kebab-case

호이스팅

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

- var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화함

- let과 const로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지 않음

스코프

- 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위

1. Global (전역) Scope: 코드의 모든 범위에서 사용이 가능합니다.
2. Function (함수) Scope: 함수 안에서만 사용이 가능합니다.
3. Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다.

 

 

---

브라우저 환경의 자바스크립트