[JavaScript 101] 자바스크립트 기본 문법

본 글은 '모던 자바스크립트 Deep Dive' 를 참고하여 작성된 글입니다.

 

 

 

 

 

---

 

변수

 

호이스팅 (hoisting)

 - 변수 선언이 마치 코드의 처음 부분에 끌어 올려진 것처럼 동작하는 자바스크립트의 특징을 변수 호이스팅 (variable hoisting)이라고 함.

 - 런타임 이전에 소스코드의 평가 과정을 거치면서 모든 선언문(변수, 함수 등..) 을 먼저 실행함.

 - 즉, 아래와 같이 코드를 작성해도 Reference Error가 발생하지 않고 undefined가 잘 출력됨.

console.log(result);

var result;

 - 하지만 값의 할당은 런타임에 실행됨

 - 고로, 아래의 코드 역시 undefined가 출력됨

console.log(result);

var result = 100;

 

 

 

var 키워드

var userId = 12345678;
var userName = 'Kim';

var user = { uid: 1, name: 'Kim' };

var users = [
	{ id: 1, name: 'Kim' },
    { id: 2, name: 'Lee' },
    { id: 3, name: 'Park' },
];

 - 변수 선언은 var, let, const 키워드를 사용.

 - var는 경우 블록 레벨 스코프(block-level scope)가 아니라 함수 레벨 스코프(.function-level scope)를 지원

 - var 키워드로 변수 선언 후 값을 할당하지 않으면 자바스크립트 엔진이 초기값을 undefined로 설정.

 

 

 

const 키워드

 - 값을 재할당 할 수 없는 상수를 선언하는 키워드 (재할당 하려고 하는 경우 TypeError 발생)

 - let과 const는 추후 블록 레벨 스코프를 다루는 글에서 다시 다룰 예정

 

 

 

예약어

await	break	case	catch	class	const	continue	debugger	default
delete	do	else	enum	export	extends	false	finally	for
function	if	implements	import	in	instanceof	interface	let	new
null	package	private	protected	public	return	super	static	switch
this	throw	true	try	typeof	var	void	while	with
yield

 

 

변수 선언 규칙

 - 알파벳, 숫자, 언더스코어, 달러기호 포함 가능

 - 숫자로 시작할 수 없음

 - 예약어 사용 불가

 - 쉼표로 여러 변수 선언 지양

 - 대소문자 구별

 - 일반적으로 변수, 함수에는 카멜케이스, 생성자 함수, 클래스에는 파스칼 케이스 사용

 

 

---

 

표현식과 문

 

 

값, 리터럴, 문, 토큰

 - 값은 식(표현식; expression)이 평가(evaluate) 되어 생성된 결과

 - 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)

 - 리터럴 : 정수(1), 16진수(0x43d), boolean(true), 객체({name: 'Kim'}), 배열([1, 2]), 정규표현식(/[A-Z]*/) 등..

 - 표현식(expression)은 값으로 평가될 수 있는 문(statement)

 - 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

 - 토큰은 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 (var sum = 1 + 2 이면, var, sum, =, 1, +, 2 모두가 토큰)

 

 

 

세미콜론

 - 자바스크립트 엔진에는 세미콜론 자동 삽입 기능(ASI; automatic semicolon insertion)이 있음.

 - 하지만 붙이는 것이 권장됨.

 - 코드 블록 (중괄호로 묶은 코드)에는 세미콜론을 붙이지 않음

 

 

---

 

데이터 타입

 

구분	데이터 타입	설명
원시 타입 (primitive type)	숫자(number) 타입	정수 실수 등의 구분 없음
	문자열(string) 타입	문자열
	불리언(boolean) 타입	true, false
	undefined 타입	var 키워드 초기값
	null 타입	값이 없다는 것을 나타내는 값
	심벌(symbol) 타입	ES6에 추가됨
객체 타입 (object / reference type)		객체, 함수, 배열 등..

 

 

 

숫자 타입 (number type)

 - 64비트 부동소수점 형식을 따름. (정수, 2진수, 16진수 등도 모두 실수(부동 소수점의 2진수)로 처리)

 - Infinity, -Infinity, NaN 이 있음. 뜻 그대로 사용 가능 (0으로 나누면 에러 발생하지 않고 Infinity나 -Infinity 나옴)

 

 

 

문자열 타입 (string type)

 - 작은 따옴표(일반적), 큰 따옴표, 백틱 모두 사용 가능

 - 작은 따옴표 안의 큰 따옴표, 큰 따옴표 안의 작은 따옴표 등은 문자열로 인식

 - 이스케이프 시퀀스 사용 가능.

\0	\b	\f	\n	\r	\t	\v	\'	\"	\\
Null	백스페이스	폼피드	개행	개행	수평 탭	수직 탭	따옴표	따옴표	백 슬래시

 - 백틱을 사용하면 템플릿 리터럴(template literal) 사용 가능

 - 멀티라인 문자열 (multi-line string), 표현식 삽입(expression interpolation), 태그드 템플릿(tagged template) 등 제공

 - + 연산자를 사용해 변수와 함께 사용할 수 있음.

 - 템플릿 리터럴 이용시 ${변수명}를 통해서도 사용할 수 있음

 

 

 

그외 데이터 타입들

 - boolean, undefined, null은 표에 명시된 것이 전부.

 - 심벌과 객체는 추후에 별도 게시 글로 다룰 예정

 

 

 

 

---

 

연산자

 

산술 연산자

연산자		의미	부가 설명
이항 산술 연산자	+	덧셈
	-	뺄셈
	*	곱셈
	/	나눗셈
	%	나머지
	**	지수 연산자	a**b = a^b
단항 산술 연산자	++	증가	prefix, postfix 주의
	--	감소	prefix, postfix 주의
	+	효과 x
	-	부호 반전	음수와 양수를 반전한 값을 반환

 - 숫자가 아닌 피연산자에 + 단항 연산자를 사용하면 숫자 타입으로 변환하여 반환

 - 이항 연산자 +의 경우 하나 이상이 문자열이면 문자열 연결 연산자로 동작함.

 - 이런 것을 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이라고 함

 

 

 

할당 연산자

 - '=' 외에도 이항 산술 연산자와 붙여 사용하는 '+=', '-=' 등이 있다.

 - 타 언어와 같은 쓰임새

 

 

 

비교 연산자

비교 연산자	값 비교	타입 비교	의미
==	O	X	값이 같음
===	O	O	값과 타입이 같음
!=	O	X	값이 다름
!==	O	O	값과 타입이 다름

 - NaN은 자신과 일치하지 않음. isNaN 함수나  Object.is() 함수를 이용해야 함

 - == 와 ===은 +0과 -0을 동등하다고 판단하지만 Object.is() 함수는 다르다고 판단

 - !== 는 타입과 값 중 하나만 달라고 true (or)

 

 

 

기타 연산자

연산자	개요
?.	옵셔널 체이닝 연산자
??	null 병합 연산자
delete	프로퍼티 삭제
new	생성자 함수를 호출하여 인스턴스 생성
instanceof	인스턴스인지 판별
in	프로퍼티 존재 확인

 - 옵셔널 체이닝 연산자는 좌항의 피연산자가 null이나 undefined 이면 undefined를 반환하고 아니면 우항의 참조를 이어감

 - null 병합 연산자는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항 반환

// 옵셔널 체이닝 연산자

var elem = null;

var value = elem?.value;
console.log(value);		// undefined



// null 변합 연산자

var foo = null ?? 'default string';

console.log(foo);	// "default string"

 

 

 

그 외 연산자

 - 대소 관계 연산자는 >, < >-, <= 가 있음. 타 언어와 같은 쓰임새.

 - 삼항 조건 연산자 : 조건 ? (true) : (false). 타 언어와 같은 쓰임새.

 - 논리 연산자, ||, &&, !. 타 언어와 같은 쓰임

 - 쉼표 연산자, 그룹 연산자 도 동일

 - typeof의 경우 다 그대로 나오지만, null, Date, 정규표현식, 배열, 함수 객체 등은 모두 Object로 나오며, 함수만 function

 

 

 

 

---

 

타입 변환과 단축 평가

 

타입변환

 - 의도적으로 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting) 이라 한다.

// [1] String 타입으로 변환

String(1)
Sting(NaN)		// 'NaN'
String(true)	// 'true'

(1).toString();
(Infinity).toString();	// 'Infinity'
(false).toString();		// 'true'

1 + '';			// '1'
true + '';		// 'true'




// [2] Number 타입으로 변환

Number('1');
Number('0.123');
Number('true');		// 1

parseInt('2');
parseInt('-1');
parseInt('-10.123');	// -10.123

+'3';
+'-0.123';

+true;		// 1
+false;		// 0

'0' * 1		// 0
true * 1	// 1



// [3] Boolean 타입으로 변환

Boolean('a');		// true
Boolean('');		// false
Boolean('false')	// true

Boolean(0);			// false
Boolean(NaN);		// false
Boolean(Infinity);	//true

Boolean(Null);			// false
Boolean(undefined);		// false

Boolean({});	// true
Boolean([]);	// true

!!'a';
!!0;
!!undefined;
!![];​

 

 

 

단축 평가

 - 논리 곱 연산자는 모두 true 일때 우항으로 평가가 진행

 - 논리 합 연산자는 처음 true 인 항으로 평가가 진행

'Cat' && 'Dog'		// 'Dog'
'Cat' || 'Dog'		// 'Cat'
false || 'Dog'		// 'Dog'

 

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false