(Javascript) 자바스크립트 기초문법 (1)

안녕하세요~ 

영감을 주는 개발자 방민방민입니다.

오늘은 자바스크립트 기본 문법에 대해서 조금더 디테일하게 공부를 해보고자 합니다.

아주 기초적인 자바스크립트 문법에 대해서는 코드카데미와 본 블로그의 자바스크립트 기초(1) 과 (2) 에서 맛보았습니다. 아주 기초적인 내용만 다루었기 때문에 본 포스팅부터 몇회에 걸쳐 자바스크립트의 아주 기초적인 문법을 공부해 보겠습니다.

본 포스팅은 니콜라스 자카스의 책 "프론태엔드 개발자를 위한 자바스크립트 프로그래밍" 을 토대로 만들어 졌습니다. 

1. 대소문자

자바스크립트는 대소문자를 구별합니다. 즉 test 와 Test 는 다른 변수입니다.

2. 식별자

자바스크립트에서 식별자는 함수, 변수 등의 이름을 말합니다.

보통 소문자로 작성하며 두개의 단어를 연결할때는 myCom 처럼 두번째 단어에 시작을 대문자로 시작합니다.

3. 주석

한줄 주석은 //

여러줄 주석은 /* 내용 */로 나타냅니다.

4. 문장의 끝

C 언어나 Java 를 공부해 보셨던 분들이라면 

var sum = a+b; 와 같이 ;을 사용하여 문장을 끝내는 것에 익숙할 것입니다. 

사실 자바스크립트의 경우 var sum = a+b 로 ;을 쓰지 않고 문장을 끝내도 괜찮습니다. 하지만 성능과 가독성 면에서 ;을 사용하여 문장을 끝내는 것을 권장합니다.

5. 키워드와 예약어

자바스크립트에는 사용자가 임의로 식별자로 사용할수 없는 키워드와 예약어가 있습니다. 이는 자바스크립트 자체로 특정한 조작을 목적으로 사용되기 때문에 사용자가 선언하여 사용할수 없습니다.

키워드입니다.

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger	function	this	with
default	if	throw	delete
in	try

예약어입니다.

abstract	enum	int	short
boolean	export	interface	static
byte	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
char	extends	long	super
double	import	public

일반모드, 스트릭트모드에서 추가되는 예약어도 있지만 그때그때 찾아가며 임의로 사용하지 않도록 합니다.

6. 변수

아래와 같은 형식으로 변수를 지정합니다. varName 은 변수 이름 value 는 변수에 저장되는 값을 나타냅니다.

var varName = value;

이때 데이터 타입은 입력되는 value 에 따라 지정됩니다. value 값이 1,2,3, 와 같은 수자라면 number, "문자열"과 같이 ""로 둘러싸여있는 형태라면 문자열을 저장합니다. 값에 따라 boolean 과 같은 값이 될수도 있습니다.

변수를 전역으로 설정하고싶을때는 아래와 같이 var이 없는 상태로 선언하면 됩니다.

varName = value;

 7. 데이터 타입

데이터 타입은 문자열, 숫자, 객체, 함수, boolean, Null, undefined 등으로 정의됩니다. 그리고 typeof 함수를 통해 확인할수 있습니다.

var message = "some string";
alert(typeof message);
alert(typeof 95);

위와같이 입력하면 자바스크립트는 "some string" 이라는 스트링의 문자열 타입과 95라는 숫자 타입을 반환하는 알림창을 출력합니다.

 7. NaN

NaN 는 Not a Number 의 약자입니다. 이는 어떤 수를 0으로 나누는등의 상황에서 반환되는 코드이며 NaN 을 반환하고 이후에 다른 프로그램을 처리합니다.

NaN 와 NaN 는 같은 값이 아닐수도 있습니다. 따라서 프로그래밍에 있어서 항상 주의해야할 대상입니다.

isNaN(); 함수를 사용하면 입력되는 값이 숫자인지 아닌지 확인할수 있습니다. 이때, "red" 와 같이 명백한 문자열이나은 true 를 반환하지만, "10" 과 같은 문자열이나 true , false 등은 각각 숫자 10 , 1 , 0 으로 변환이 가능하기때문에 false 를 반환하게됩니다.

 8.숫자 변환

숫자변환에는 Number(), parseInt(), parseFloat() 3가지의 함수가 사용됩니다.

Number() 함수의 경우 숫자변환에 있어서 다양한 규칙이 적용됩니다. 그렇기때문에 보통 parseInt() 함수를 사용합니다. parseFloat() 함수는 부동소수점형태로 데이터를 저장합니다.

9. 문자열

문자열을 표현할때,    '' 와 "" 안에 들어간 문자열은 완벽하게 같습니다.

그보다는 문자 리터럴을 유용하게 사용할수 있습니다.

\n	줄바꿈
\t	탭
\b	백스페이스
\f	폼피드
\\	역슬레시
\r	캐리지 리턴

문자열로 바꾸는 방법은 toString() 메소드를 사용하는 것입니다.

var age = 11;
var ageAsString = age.toString();
var found = true;
var foundAsString = found.toString();

이렇게 하면 숫자로 저장된 11을 문자열로, boolean 값인 true 도 문자열로 저장합니다.

10. 객체

새롭게 객체를 생성할때는 아래와 같은 문법을 사용합니다.

var o = new Object();

o 는 새로운 객체로 기능을 할 수 있습니다. 이 객체에 대한 이야기는 이후에 독립된 내용으로 더욱 자세하게 다루어 보도록 하겠습니다.

11. 연산자

자바스크립트에서는 기본적으로 우리가 알고있는 +, -, *, / 과 다양한 연산자를 사용합니다.

연산자	예시	설명
++	a++	명령어 실행 후 a 값을 1 증가
++	++a	명령어 실행 전 a 값을 1 증가
--	a--	명령어 실행 후 a 값을 1 감소
--	--a	명령어 실행 전 a 값을 1 감소
!	a!	true , false 에서 반대 값을 내놓습니다.
&&	a&&b	a와 b 가 모두 참인지를 확인
||	a||b	a와 b 중 하나라도 참인지를 확인
%	a% b	a를 b로 나눈 나머지
==, !=	a==b , a!= b	a와 b 가 같은지, 혹은 다른지 확인

비교 연산 에서 == 와 != 말고 ===와 !== 을 사용하기도 합니다. 차이는 전자의 경우 형변환을 통해 같아질수 있는 1 과 true 같은 값을 같다고 판단하고 === 을 사용하면 다르다고 판단합니다.

오늘은 여기까지 자바스크립트에서 사용되는 정말 간단한 문법에 대하여 알아보았습니다.

기초문법(2) 에서 조건문, 반복문과 같은 내용에 대하여서도 알아보도록 하겠습니다.

그러면 지금까지 영감을 주는 개발자 방민방민이었습니다.

감사합니다 :)