[JS] JavaScript의 기본 문법

사실 티스토리에 글을 올리면서, 아직 방문자 분들이 많지는 않지만 지식 공유가 목적의 한 부분이긴 했으나, 내용 정리에 목적도 있어 C#, C++ 등의 언어를 다룰 때에는 기본적으로 프로그래밍에 대해서 어느 정도 안다고 하고 글을 쓰고 있었다.
하지만 이번에 자바스크립트 강좌는 상당히 기초부터 시작해서, 입출력/자료형 등 기본적인 부분부터 다루고 있다. 필자는 자바스크립트를 미약하게나마 써본 적은 있어서 실제 강좌에서는 스킵했으나, 정리는 해 두려고 한다.

---

자바스크립트의 문법은 다른 언어들과의 문법과 비슷하다. 이전 글에서 설명한 'var' 키워드나 나중에 비동기, 콜백 부분으로 넘어갔을 때 아마 많은 차이를 느낄 것이다.

연산

기본적인 사칙연산(+, -, *, /, %)과 증감연산(++, --), 논리연산(&&, ||) 모두 가능하다. 이 중 초반에 의외로 놓치기 쉬운 부분인 증감연산에 대해 간단하게 짚고 넘어 가겠다.

var num = 10;
// 전위 증감
console.log(++num); // 11 출력
console.log(--num); // 10 출력
// 후위 증감
console.log(num++); // 10 출력
console.log(num--); // 11 출력

이 연산자의 표현식은 꽤나 직관적이기 때문에 출력을 봤다면 어떤 동작인지 짐작이 갈 것이다. 일단 먼저 ++는 1 증가, --는 1 감소이다. a+=1과 같은 식이다. 어셈블리어 레벨에서는 동작이 다르지만 그 얘기는 언젠가 나중에..

각설하고, 변수의 앞에 붙는 전위 증감은 연산을 한 이후에 출력 등 동작을 하고, 후위 증감은 출력 등 동작을 한 이후에 연산을 진행한다.

비교 연산자 부분에서 다른 언어와 살짝 다른 부분이 나온다. >, <, >=, <= 등 대소비교는 동일하지만 동등/일치 비교가 약간 다르다.

// 추상(동등) 비교
console.log(10==20); // false
console.log(10==10); // true
console.log('10'==10); // true, 형변환 이후에 비교
// 엄격(일치) 비교
console.log(10===20); // false
console.log(10===10); // true
console.log('10'===10); // false, type이 다름

일반적으로 우리가 쓰는 ==은 자바스크립트에서는 형이 다르더라도 같다고 보는 '동등'의 개념이다. != 또한 마찬가지로  '부등'의 개념이다.

===은 형까지 완전히 같은, '일치'의 개념이다. !== 또한 마찬가지다.

null과 undefined는 서로 '동등'하지만, 서로 '일치'하지는 않다. 즉, ==으로는 같지만 ===으로는 같지 않다. 자기 자신에 대해서는 '일치'한다.

조건문(분기)

반복문과 더불어 가장 많이 쓰지 않을까 하는 조건문이다. 조건이 참인지 거짓인지에 따라 분기하여 처리하는 것을 말한다. if문을 쓰는 문법은 타 언어와 같다.

var a=20;
var b=30;
if( a < b ) {
	console.log("small");
}
else if( a > b ) {
	console.log("big");
}
else {
	console.log("same");
}

if는 괄호 안이 참이면 body 수행, 거짓이면 밑으로 넘어 간다. else if는 위의 조건문이 거짓이고 괄호 안이 참이면 body를 수행한다. else는 위의 조건문들이 모두 거짓일 때 수행한다.

이런 조건문들은 중첩할 수 있고, 조건에도 논리 연산자(&&, ||)를 통해 여러 가지를 넣을 수 있기 때문에 활용이 무궁무진하다.

반복문(loop)

위에서도 썼지만 조건문과 더불어 가장 많이 쓰지 않을까 하는 반복문이다. 만약 1부터 1000000까지 차례대로 출력해야 할 때, console.log(1)를 1000000개나 쓰는 것은 굉장히 고될 것이다. 복붙을 하더라도 굉장히 길어지고 가독성도 떨어질 것이다. 그래서 나온 것이 반복문이다.

여담으로 사실 초기 언어들에서는 for, while등의 문법은 없었고, 반복 횟수를 지정해서 다시 코드의 윗부분으로 되돌아가게 하는 loop를 사용했으나 90년대, 00년대를 지나면서 요즘 언어들은 모두 for, while을 쓰게 되었다.

var hi = 10;

while(hi < 100) {
	hi+=20;
    console.log(hi);
}

var hello = 200;
do{
	hello+=20;
    console.log(hello);
}while(hello<100);

for(var i=0; i<10;i++) {
	console.log(i);
}

var arr = [1,2,3];
for(var value in arr) {
	console.log(value);
}

위에 네 가지의 반복문의 형태를 작성했다.

while : 괄호 안이 참일 동안에 루프를 계속 실행하고, 거짓이 되면 탈출한다. 주로 반복에 <조건>이 필요할 때 사용한다.

do-while : while문과 동일하지만, 맨 첫 실행은 조건에 관계없이 실행된다. 주로 반복에 <조건>이 필요하고, 최소 한 번은 실행되어야 할 때 사용한다.

for : for(초깃값; 조건; 루프 후처리) 이 중 조건이 참일 동안 실행한다. 주로 위에 작성한 것처럼 횟수를 세는 용도로 사용하기 때문에, 반복의 횟수가 필요할 때 사용한다.

for-in : for문에서 파생되었는데, arr과 같이 배열이나, 안에 원소를 가진 타입의 경우 안에 든 원소를 iterator로 모두 순회한다. 반복하고자 하는 객체의 타입이나 개수 변화에 대해서 대응할 필요가 없기 때문에 매우 유용하다.