본문 바로가기
Language/JavaScript

JS 복습 심화

by 그랴 2022. 7. 13.

자바스크립트

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

 

브라우저의 자바스크립트

- 페이지에 새로운 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

모든 프로그래밍 언어에는 내장된 자료구조가 존재하지만 보통 그 내용은 언어마다 다릅니다. 이 글에서는 JavaScript에서 사용할 수 있는 내장 자료구조와 그 속성에 대해 알아보겠습니다. 그러

developer.mozilla.org

 

데이터 타입

 

기본형

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

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

- 불변성(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 등 특정 블록 내부에서만 사용이 가능합니다.

 

 


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