자바스크립트 기본 구조

문자 집합

대소문자 구분

자바스크립트는 대소문자를 구분합니다. 예를 들어, 변수명 'myVar'와 'myvar'는 서로 다른 변수로 취급됩니다.

공백, 줄 바꿈 및 형식 제어 문자

자바스크립트는 공백, 탭, 줄 바꿈 등을 무시합니다. 하지만 문자열 리터럴 내에서는 이러한 문자들이 의미를 가집니다.

유니코드 이스케이프

자바스크립트에서는 \uXXXX 형식으로 유니코드 문자를 표현할 수 있습니다. 여기서 XXXX는 4자리 16진수입니다.

표준화

자바스크립트는 유니코드 표준을 따르며, 문자열은 UTF-16 인코딩으로 저장됩니다.

주석

• 줄 끝에 //가 오면 그 뒤의 모든 내용은 주석으로 처리됩니다.
• /* 와 */ 사이의 텍스트는 주석으로 처리되며, 여러 줄에 걸쳐 작성할 수 있습니다. 하지만 중첩은 불가능합니다.

리터럴

값	설명
12	정수
1.2	부동소수점 수
"Hello world"	문자열
'Hi'	문자열
true	불리언
false	불리언
/\w+/gi	정규 표현식
null	널 값
{x:1,y:1}	객체
[1,2,3,4,5]	배열

식별자와 예약어

식별자는 문자, 밑줄(), 달러 기호($)로 시작할 수 있으며, 그 뒤에는 문자, 숫자, 밑줄, 달러 기호가 올 수 있습니다. 즉, /[a-z$][a-z0-9_$]*/i 패턴과 일치합니다.

키워드나 예약어는 식별자로 사용할 수 없습니다. 미리 정의된 전역 변수와 함수도 식별자로 사용하지 않는 것이 좋습니다.

선택적 세미콜론

세미콜론(;)은 문장의 끝을 나타냅니다. 각 문장이 별도의 줄에 있을 경우, 문장 사이나 문장과 닫는 중괄호(}) 사이의 세미콜론은 생략할 수 있습니다.

자바스크립트는 세미콜론이 없으면 코드를 해석할 수 없을 때만 세미콜론을 삽입합니다. (자바스크립트는 문장을 최대한 길게 만들려고 합니다)

주의: ([/+-로 시작하는 문장이 이전 문장과 합쳐져 해석될 수 있습니다.

return, break, continue 키워드 다음에 줄 바꿈이 오면, 자바스크립트는 줄 바꿈 위치에 세미콜론을 삽입합니다. 즉, 이 세 가지 키워드와 그 뒤의 표현식 사이에는 줄 바꿈을 할 수 없습니다.

++와 -- 연산자는 피연산자의 접두사 또는 접미사로 사용될 수 있습니다. 모호함을 피하려면 이 두 연산자는 해당 피연산자와 같은 줄에 배치해야 합니다.

타입, 값, 변수

숫자

자바스크립트는 정수와 부동소수점 수를 구분하지 않습니다. 하지만 자바스크립트의 배열 인덱스는 32비트 정수입니다.

마이너스 부호는 단항 부정 연산자이며, 숫자 리터럴 문법의 일부가 아닙니다.

정수 리터럴

\d+

부동소수점 리터럴

(\d+)?.(\d+)?([Ee][+-]?\d+)?

자바스크립트의 산술 연산

Math.pow(2, 53) // => 9007199254740992: 2의 53제곱
Math.round(.6) // => 1.0: 가장 가까운 정수로 반올림
Math.ceil(.6) // => 1.0: 올림
Math.floor(.6) // => 0.0: 내림
Math.abs(-5) // => 5: 절대값
Math.max(x, y, z) // 가장 큰 인수 반환
Math.min(x, y, z) // 가장 작은 인수 반환
Math.random() // 0 <= x < 1.0인 의사난수
Math.PI // π: 원의 둘레 / 지름
Math.E // e: 자연로그의 밑
Math.sqrt(3) // 3의 제곱근
Math.pow(3, 1 / 3) // 3의 세제곱근
Math.sin(0) // 삼각함수: Math.cos, Math.atan 등도 있음
Math.log(10) // 10의 자연로그
Math.log(100) / Math.LN10 // 100의 밑 10 로그
Math.log(512) / Math.LN2 // 512의 밑 2 로그
Math.exp(3) // Math.E의 세제곱

오버플로우: 숫자 연산 결과가 상한을 초과하면 결과는 Infinity가 됩니다. 마찬가지로, 음수 범위를 초과하면 -Infinity가 됩니다. 무한대에 대한 +, -, *, / 연산 결과는 여전히 무한대입니다.

언더플로우: 무한소로, 결과는 0이 됩니다. 자바스크립트는 음의 무한소를 나타내기 위해 특별한 -0도 가지고 있습니다. 무한소는 양수이든 음수이든 0입니다.

0이 아닌 수를 0으로 나누면 ±Infinity가 반환되며, 이때 양의 0과 음의 0이 반환되는 무한대의 부호에 영향을 줍니다. 0을 0으로 나누면 NaN이 반환됩니다.

무한대를 무한대로 나누거나, 음수의 제곱근을 구하거나, 산술 연산자가 숫자가 아닌 피연산자와 연산할 때 NaN이 반환됩니다.

NaN은 어떤 값과도 같지 않으며, 자기 자신과도 같지 않습니다(!=). NaN은 자기 자신과 같지 않은 유일한 값입니다.

isNaN(), isFinite() 함수를 사용하여 값의 타입을 확인할 수 있습니다.

이진 부동소수점 및 반올림 오차

반올림 오차는 두 값을 비교할 때만 프로그램에 영향을 미칩니다. v1과 v2가 같은지 확인하려면 다음과 같이 할 수 있습니다:

Math.abs(v1-v2) < 0.001 // true이면 같음

더 작은 단위를 사용하거나 큰 정수를 사용하여 계산 정확도를 높일 수 있습니다.

날짜와 시간

var then = new Date(2010, 0, 1); // 2010년 1월 1일
var later = new Date(2010, 0, 1, // 같은 날, 오후 5:10:30, 현지 시간
17, 10, 30);

var now = new Date(); // 현재 날짜와 시간
var elapsed = now - then; // 날짜 차이: 밀리초 단위

later.getFullYear() // => 2010
later.getMonth() // => 0: 0부터 시작하는 월
later.getDate() // => 1: 1부터 시작하는 일
later.getDay() // => 5: 요일. 0은 일요일, 5은 금요일.
later.getHours() // => 17: 오후 5시, 현지 시간
later.getUTCHours() // UTC 시간의 시간; 시간대에 따라 다름
later.toString() // => "Fri Jan 01 2010 17:10:30 GMT-0800 (PST)"
later.toUTCString() // => "Sat, 02 Jan 2010 01:10:30 GMT"
later.toLocaleDateString() // => "01/01/2010"
later.toLocaleTimeString() // => "05:10:30 PM"
later.toISOString() // => "2010-01-02T01:10:30.000Z"; ES5 전용

텍스트

16비트 값(일반적으로 유니코드 문자 집합에서 가져온)으로 구성된 변경 불가능한 순차 시퀀스입니다.

문자열 리터럴

작은따옴표나 큰따옴표로 둘러싸인 문자 시퀀스입니다.

문자열 리터럴은 여러 줄로 나눌 수 있으며, 각 줄은 역슬래시로 끝납니다. 역슬래시와 개행 문자는 문자열의 일부가 아닙니다.

var s = "한 줄\
다음 줄"

이스케이프 문자

시퀀스	문자	유니코드
\0	NUL 문자	\u0000
\b	백스페이스	\u0008
\t	수평 탭	\u0009
\n	개행	\u000A
\v	수직 탭	\u000B
\f	폼 피드	\u000C
\r	캐리지 리턴	\u000D
"	큰따옴표	\u0022
'	작은따옴표	\u0027
\	역슬래시	\u005C
\xNN	두 개의 16진수 NN으로 지정된 라틴-1 문자
\uNNNN	네 개의 16진수 NNNN으로 지정된 유니코드 문자

\ 문자가 이 표에 표시된 문자 외의 다른 문자 앞에 오면, 역슬래시는 무시됩니다.

문자열 사용

var msg = "안녕, " + "세계"; // "안녕, 세계" 문자열 생성
var greeting = "내 블로그에 오신 것을 환영합니다," + " " + name;

var s = "안녕, 세계" // 일부 텍스트로 시작
s.length // 문자열 길이
s.charAt(0) // => "안": 첫 번째 문자
s.charAt(s.length - 1) // => "계": 마지막 문자
s.substring(1, 4) // => "녕, ": 2, 3, 4번째 문자
s.slice(1, 4) // => "녕, ": 동일
s.slice(-3) // => "세계": 마지막 3개 문자
s.indexOf("세") // => 3: 첫 번째 '세'의 위치
s.lastIndexOf("세") // => 3: 마지막 '세'의 위치
s.indexOf("세", 4) // => 3: 4 이후의 첫 번째 '세' 위치
s.split(", ") // => ["안녕", "세계"] 부문자열로 분할
s.replace("안", "안") // => "안녕, 세계": 모든 인스턴스 교체
s.toUpperCase() // => "안녕, 세계" (한자 대문자 변환은 없음)

s[0] // => "안"
s[s.length - 1] // => "계"

패턴 일치

슬래시 쌍 사이의 텍스트는 정규 표현식 리터럴을 구성합니다. 쌍의 두 번째 슬래시 뒤에는 하나 이상의 문자가 올 수 있으며, 이 문자들은 패턴의 의미를 수정합니다.

var re = /^안녕/ // 문자열 시작 부분의 "안녕" 일치
var re = /[1-9][0-9]*/ // 0이 아닌 숫자, 그 뒤에 임의의 수의 숫자
var re = /\b자바스크립트\b/i // 단어 "자바스크립트" 일치, 대소문자 무시

var text = "테스트: 1, 2, 3"; // 샘플 텍스트
var pattern = /\d+/g // 하나 이상의 숫자의 모든 인스턴스 일치
pattern.test(text) // => true: 일치 항목 존재
text.search(pattern) // => 9: 첫 번째 일치 위치
text.match(pattern) // => ["1", "2", "3"]: 모든 일치 항목 배열
text.replace(pattern, "#"); // => "테스트: #, #, #"
text.split(/\D+/); // => ["","1","2","3"]: 숫자가 아닌 문자로 분할

불리언 값

불리언 값은 true와 false 두 가지뿐입니다.

undefined, null, NaN, "", 0은 모두 불리언 값으로 변환되면 false가 됩니다.

null과 undefined

null은 키워드이며, typeof null == "object"입니다.

실제로 null은 일반적으로 자체 타입의 유일한 멤버로 간주되며, 숫자와 문자열뿐만 아니라 객체에도 "값 없음"을 나타내는 데 사용할 수 있습니다.

undefined는 미리 정의된 전역 변수이며 키워드가 아닙니다. typeof undefined == "undefined"입니다.

undefined 값은 더 깊은 종류의 부재를 나타냅니다. 초기화되지 않은 변수의 값이며, 존재하지 않는 객체 속성이나 배열 요소의 값을 쿼리할 때 얻는 값입니다. undefined 값은 반환 값이 없는 함수에서도 반환되며, 인수가 제공되지 않는 함수 매개변수의 값입니다.

undefined == null은 true를 반환합니다. undefined === null은 false를 반환합니다. null은 "객체 없음"을 의미하고, undefined는 "주제 없음"을 의미합니다.

전역 객체

• undefined, Infinity, NaN과 같은 전역 속성
• isNaN(), parseInt(), eval()과 같은 전역 함수
• Date(), RegExp(), String(), Object(), Array()와 같은 생성자 함수
• Math와 JSON과 같은 전역 객체

래퍼 객체

문자열, 숫자 또는 불리언 값의 속성에 접근할 때 임시 객체가 생성되며, 이 임시 객체를 래퍼 객체라고 합니다.

래퍼 객체의 속성은 모두 읽기 전용이며, 래퍼 객체에 새 속성을 정의할 수도 없습니다.

변경 불가능한 원시 값과 변경 가능한 객체 참조

원시 값: undefined, null, 불리언, 숫자, 문자열

원시 값은 변경 불가능합니다. 값이 같을 때만 같으며, 문자열의 경우 길이가 같고 각 문자가 동일할 때만 같습니다.

객체(배열과 함수 포함)는 변경 가능하며, 그 값은 수정할 수 있습니다. 객체 비교는 모두 참조 비교이며, 동일한 기본 객체를 참조할 때만 같습니다.

타입 변환

변환과 동등성

명시적 타입 변환

new 연산자 없이 Boolean(), Number(), String(), Object() 함수를 호출하면 타입 변환 함수로 작동합니다.

Object(null)과 Object(undefined)는 빈 객체를 반환합니다.

x.toString() 메서드와 String(x) 메서드는 동일한 결과를 반환합니다. 변수 x가 null이거나 undefined이면 TypeError가 발생합니다.

연산자는 암시적 타입 변환을 유발합니다.

x + "" // String(x)와 동일
x - 0  // Number(x)와 동일
+ x    // Number(x)와 동일
!!x    // Boolean(x)와 동일

숫자를 문자열로 변환:

var n = 17;
binary_string = n.toString(2); // "10001"로 평가
octal_string = "0" + n.toString(8); // "021"로 평가
hex_string = "0x" + n.toString(16); // "0x11"로 평가

var n = 123456.789;

n.toFixed(0); // "123457"
n.toFixed(2); // "123456.79"
n.toFixed(5); // "123456.78900"

n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"

n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"
n.toPrecision(10); // "123456.7890"

parseInt(), parseFloat()는 문자열을 숫자로 구문 분석합니다:

parseInt("3마리의 쥐") // => 3
parseFloat(" 3.14미터") // => 3.14
parseInt("-12.34") // => -12
parseInt("0xFF") // => 255
parseInt("0xff") // => 255
parseInt("-0XFF") // => -255
parseFloat(".1") // => 0.1
parseInt("0.1") // => 0
parseInt(".1") // => NaN: 정수는 "."로 시작할 수 없음
parseFloat("$72.47"); // => NaN: 숫자는 "$"로 시작할 수 없음

parseInt("11", 2); // => 3 (1*2 + 1)
parseInt("ff", 16); // => 255 (15*16 + 15)
parseInt("zz", 36); // => 1295 (35*36 + 35)
parseInt("077", 8); // => 63 (7*8 + 7)
parseInt("077", 10); // => 77 (7*10 + 7)

객체를 원시 값으로 변환

toString() 메서드: Object의 toString() 메서드는 "[object Object]"를 반환합니다. Array 클래스의 toString() 메서드는 각 요소를 문자열로 변환하고 요소 사이에 쉼표를 추가하여 결과 문자열을 만듭니다. Function 클래스의 toString() 메서드는 이 함수의 소스 코드 문자열을 반환합니다. Date 클래스의 toString() 메서드는 읽을 수 있고 자바스크립트로 구문 분석할 수 있는 날짜 및 시간 문자열을 반환합니다. RegExp 클래스 toString()은 정규 표현식 리터럴을 반환합니다.

({ x: 1, y: 2 }).toString() // => "[object Object]"

[1,2,3].toString() // => "1,2,3"
(function(x) { f(x); }).toString() // => "function(x) {\n f(x);\n}"
(/\d+/g).toString() // => "/\\d+/g"
new Date(2010,0,1).toString() // => "Fri Jan 01 2010 00:00:00 GMT-0800 (PST)"

valueOf() 메서드: 객체를 원시 값으로 변환해야 하는 경우, 해당 원시 값을 반환합니다.

래퍼 클래스는 래핑된 원시 값을 반환하는 valueOf() 메서드를 정의합니다.

객체는 복합 값이며, 대부분의 객체는 단일 원시 값으로 나타낼 수 없으므로 기본 valueOf() 메서드는 객체 자체를 반환합니다.

Array, function, regular expression은 기본 메서드를 상속합니다. 이러한 유형의 인스턴스에 대해 valueOf()를 호출하면 객체 자체가 반환됩니다.

Date 클래스는 내부 표현에서의 날짜를 반환하는 valueOf() 메서드를 정의합니다: 1970-1-1 이후의 밀리초 수

객체를 문자열로 변환:

1. 객체가 원시 값을 반환하는 toString() 메서드를 가지고 있다면, 이 원시 값을 문자열로 변환하여 반환합니다.
2. 그렇지 않고 객체가 원시 값을 반환하는 valueOf() 메서드를 가지고 있다면, 이 원시 값을 문자열로 변환하여 반환합니다.
3. 그렇지 않으면 예외를 발생시킵니다

객체를 숫자로 변환:

1. 객체가 원시 값을 반환하는 valueOf() 메서드를 가지고 있다면, 이 원시 값을 숫자로 변환하여 반환합니다.
2. 그렇지 않고 객체가 원시 값을 반환하는 toString() 메서드를 가지고 있다면, 이 원시 값을 숫자로 변환하여 반환합니다.
3. 그렇지 않으면 예외를 발생시킵니다

객체를 원시 값으로 변환: Date 클래스: toString() 비 Date 클래스: valueOf() 먼저, 그다음 toString()

• 관계 연산자: 객체를 원시 값으로 변환, 문자열을 원시 값으로 변환

변수 선언

중복 선언과 누락된 선언: 최소한 한 번은 var를 사용하여 선언해야 합니다.

변수 스코프

함수 스코프와 선언 승격

함수 스코프: 지역 변수는 함수 전체에 걸쳐 정의되며, 변수 선언 전에도 정의됩니다.

속성으로서의 변수

스코프 체인