자바스크립트
웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이며, 자바스크립트 엔진이 있는 모든 디바이스에서 동작한다. 브라우저 뿐만 아니라 서버에서도 실행 가능하다.
브라우저의 자바스크립트
- 페이지에 새로운 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로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지 않음
스코프
- 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위
- Global (전역) Scope: 코드의 모든 범위에서 사용이 가능합니다.
- Function (함수) Scope: 함수 안에서만 사용이 가능합니다.
- Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다.
브라우저 환경의 자바스크립트
'Language > JavaScript' 카테고리의 다른 글
[JS] 객체 object (0) | 2022.08.04 |
---|---|
[JS] event handler 사용법 (0) | 2022.08.04 |
브라우저 환경의 자바스크립트 (0) | 2022.07.13 |
[JS 비동기] HTTP, Ajax, 동기/비동기 통신 (0) | 2022.07.01 |
웹사이트 내에 랜덤으로 이미지 노출시키기 (0) | 2022.01.26 |