자바스크립트 간단한 문법

여기에서는 간단한 자바스크립트 문법을 정리해볼 것이다.

데이터 타입

자바스크립트가 지원하는 데이터 타입은 숫자와 문자열, 논리값, 배열, 오브젝트 등 다양하지만 여기에서는 가장 중요하고 가장 많이 사용하는 숫자(Number)와 문자열(String)만 다룰 것이다.

숫자 데이터 타입 - Number

console.log(1 + 1);	// 2
console.log(4 - 1);	// 3
console.log(2 * 2);	// 4
console.log(10 / 2);	// 5

위 코드는 자바스크립트에서 숫자라는 데이터를 표현한 예이다. 자바스크립트에서 숫자를 쓰는 방법은 숫자를 적으면 숫자로 인식한다.
자바스크립트에서 숫자 데이터를 처리하는 여러 가지 방법을 제공하는데, 코드에서 숫자와 숫자 사이의 기호는 '연산자(operator)'
라고 한다.
코드에서 사용된 연산자는 두 항을 대상으로 연산하므로 '이항연산자(binary operator)'라고도 한다.

문자열 데이터 타입 - String

문자열 표현

문자열을 표현할 때는 해당 문자열을 큰따옴표(" ")로 묶어야 한다. 또는 짜옴표(' ')로 묶어도 되는데, 여닫는 따옴표의 종류만 같게 해주면 상관 없다.

console.log(1 + 1);		// 2 - 숫자 2
console.log('1' + '1'); // 11 - 문자열 11

덧셈 연산자(+)의 연산 대상인 피연산자가 숫자이면 두 수를 덧셈하고, 문자열이면 두 문자열을 결합하기 때문에 위와 같은 코드에서 다른 결과가 나온다. 이처럼 같은 연산이라도 데이터의 종류에 따라 결과가 달라질 수 있다.

문자열 처리 예: 문자열의 길이 구하기

아래는 아무런 의미가 없는 문자열이다.

klajsdklf;alksjdflkjashjkldgfiu2webnfjkbqwelkjfhbzxcnm,bvl

이 문자열이 1억 개의 글자로 이루어졌다고 가정하고, 문자열이 총 몇 글자인지 세는 일을 한다면 매우 힘들 것이다.
자바스크립트에서는 문자열을 처리하는 여러 가지 방법을 제공하는데, 그중 하나가 문자열의 길이를 나타내는 length 속성이다. 앞에서 제시한 문자열에 length 속성을 사용하면 문자열의 길이를 알 수 있다.

console.log('klajsdklf;alksjdflkjashjkldgfiu2webnfjkbqwelkjfhbzxcnm,bvl'.length);

이러한 자바스크립트에서 제공하는 기능을 잘 사용한다면 원하는 기능을 쉽게 구현할 수 있다.

불리언 데이터 타입 - Boolean

불리언 데이터 타입은 단 두개의 데이터로 이루어져 있다.

• 참(true)
• 거짓(false)

console.log(true);	// true
console.log(false);	// false

'true', 'false'라고 하는 텍스트는 불리언 데이터 타입의 값 중 하나인 true, false를 표현하는 방법으로 약속돼 있기 때문에 변수 이름으로 사용할 수 없다.

변수

변수 사용법

a = 1;
console.log(a);	// 1
a = 2;
console.log(a);	// 2

위 코드에서 첫 줄에 작성한 'a'가 자바스크립트 변수이다. 변수 'a' 다음에 입력한 '=' 기호는 대입 연산자로서 왼쪽 변수에 오른쪽 값을 대입한다.
실행 결과를 보면 첫 줄에서 변수 'a'에 1을 대입했으므로 1이 출력된다. 그리고 다시 'a' 변수에 2를 대입했으므로 두 번째 출력에서는 2가 출력된다.

자바스크립트에서 변수 이름을 지을 때는 다음과 같은 지켜야 할 몇가지 규칙이 았다.

• 변수명에는 공백을 넣을 수 없다.
• 변수명은 문자나 밑줄(_), 달러 기호($)로 시작해야 하고, 첫 글자 이후로는 문자, 숫자, 밑줄, 달러 기호만 쓸 수 있다.
• 변수명은 대소문자를 구분한다.
• 자바스크립트 예약어를 변수명으로 쓸 수 없다.

이처럼 변수는 변할 수 있는 수로서 계속 다른 값으로 변경할 수 있다. 반면 1과 2처럼 변하지 않는 수를 '상수'라고 한다. 그리고 대입 연산자의 왼쪽에는 반드시 변수가 와야 한다.

주석

자바스크립트에서 '//' 다음에 나오는 명령들은 없는 명령처럼 제외한다. 즉, 해석을 생략하고 실행에서 제외한다.
이처럼 이러한 문장을 '주석(comment)'이라고 한다.

주석은 자신이나 다른 사람이 코드를 해석할 때 도움이 되라고 표시하는 일종의 메모라고 생각하면 된다.

var 키워드로 변수 선언

자바스크립트에서 변수를 선언할 때는 변수 이름 앞에 var라는 키워드를 붙이는 것이 좋다.

// 변수 선언 형식
var 변수명;

var는 변수를 나타내는 variable의 앞 세 글자로서, 자바스크립트에서 변수를 선언하는 키워드다. 변수를 선언할 때 var 키워드를 생략해도 괜찮지만, 생략하는 이유를 모른다면 항상 붙이는 것이 좋다.
그리고 var 키워드는 해당 변수를 처음 선언할 때만 붙이고 다음에 사용할 대는 붙일 필요가 없다.

var a = 1;
console.log(a);	// 1
a = 2;
console.log(a);	// 2

변수의 활용

변수를 사용하는 목적은 여러 가지이지만, 여기에서는 2가지만 살펴볼 것이다.

데이터 이름을 붙이는 이름표 역할

console.long('alskjhdfkljajskldfj');

위와 같이 변수를 사용하지 않았을 때 만약 엄청나게 큰 데이터라면 어떤 데이터인지 바로 알기 힘들다. 이럴 때 도움을 주는 것이 변수이다.
변수에는 여러 가지 목적이 있는데, 그중 기본은 데이터에 이름을 붙이는 용도이다. 즉, 변수를 이용해 데이터에 이름을 붙이면 해당 데이터가 의미하는 바를 쉽게 알 수 있다.

var letter = 'alskjhdfkljajskldfj'
console.long(letter);

중복되는 코드를 줄일 수 있다.

좋은 프로그래밍 방법의 하나는 중복을 피하는 코드이다. 즉, 같은 코드가 중복되는 것을 최대한 줄이려고 노력하는 것이다.
만약 특정 데이터가 중복으로 나올 경우 해당 데이터를 변수에 저장해 중복되는 코드를 줄이고 가독성을 늘릴 수 있다.

템플릿 리터럴

'템플릿 리터럴(Template literals)'또는 '템플릿 문자열(Template string)'이라고 부르는 자바스크립트에서 문자를 표현하는 편리한 방법이 있다.

자바스크립트에서는 역슬래시()를 이용해 코드 상에서 줄 바꿈을 의미할 뿐, 실행 결과에는 반영되지 않아 줄바꿈을 이용해 긴 코드를 여러 줄로 나눌 수 있다. 또한 실행 결과에서 줄 바꿈을 하려면 줄 바꿈이라는 의미로 제공하는 특수 기호인 \n을 사용하면 된다.
하지만 이러한 방법은 문자열 안에 내용과 상관 없는 특수 기호를 사용해서 불편할 수 있다. 이때 템플릿 리터럴을 사용할 수 있다.

먼저 리터럴(literal)이 의미하는 바는 '문자열 그 자체가 값을 나타내는 것'이다. 예를 들어 var a = '1'에서 문자열 '1'은 1이라는 값을 나타내는 리터럴이다. 문자열을 템플릿 리터럴로 표시하려면 역따옴표(`)로 묶어야 한다.

var name = 'octo';
var letter = `hello ${name}

world, ${name}`;
console.log(letter)

// 결과
// hello octo
//
// world, octo

위의 코드처럼 문자열을 역따옴표(`)로 묶어서 템플릿 리터럴로 만들면 문자열 안에서 줄 바꿈이나 변수 값을 사용할 수 있다. 또한 '${}' 형식으로 중괄호안에 수식을 비롯해 다른 명령을 입력할 수도 있다.

비교 연산자

비교 연산자는 왼쪽에 있는 항과 오른쪽에 있는 항(피연산자)을 대상으로 값을 비교하는 이항 연산자이다. 이때 연산(비교)의 결과가 참이면 true, 거짓이면 false를 반환한다. 즉, 어떤 값에 비교 연산자를 사용하면 결과는 불리언 타입(boolean type)으로 나온다.

console.log(1 == 1);	// true
console.log(1 == 2);	// false

== 연산자는 피연산자의 값이 서로 같은지 비교한다. 이 외에도 비교 연산자에는 크고 작음을 비교하는 연산자도 있다.

console.log(1 == 1);	// true
console.log(1 == 2);	// false
console.log(1 > 2);		// false
console.log(1 < 2);		// true;

마지막으로 피연산자가 서로 같은지 비교할 때 == 연산자 말고 === 연산자도 있다. === 연산자는 == 연산자보다 더 강력하게 같은지 비교한다. 즉, == 연산자는 값만 같은지 비교하지만, === 연산자는 값뿐만 아니라 데이터 타입까지 같은지 비교한다.

console.log(1 == true);		// true (true가 1로 인식되어서)
console.log(1 === true);	// false

조건문

조건문(Conditional statement)은 실행의 흐름을 제어해 다르게 동작하게 만드는 제어문의 대표적인 사례로 조건에 따라 서로 다른 코드가 동작하도록 프로그램의 실행 흐름을 제어한다.

조건문의 형식은 아래와 같다.

// 조건이 참이라면 실행, 조건이 거짓이라면 실행하지 않음
if (조건) {
	조건이 참이면 실행할 문장;
}

조건이 2개(true / false)만 있다면 조건문 2개를 사용할 수도 있지만 else문을 이용해 조금 더 간결하게 사용할 수 있다.

// 조건이 참이면 if문 실행, 조건이 거짓이면 else문 실행
if (조건) {
	조건이 참이면 실행할 문장;
} else {
	조건이 거짓이면 실행할 문장;
}

또한 여러 조건이 존재한다면 else if 를 사용해 간결하게 사용할 수 있다.

if (조건1) {
	조건1이 참이면 실행할 문장;
} else if (조건2) {
	조건2가 참이면 실행할 문장;
} else {
	조건1, 조건2 둘 다 거짓이면 실행할 문장;
}

반복문

반복문(Loop statement)은 반복적인 동작을 프로그램의 실행 흐름을 제어한다.
반복문에는 for 문, while 문, do-while 문 등 여러 종류가 있고, 상황에 따라 사용하기 편리한 반복문이 다르다.

for 문

초기식, 표현식, 증감식을 모두 포함하고 있는 반복문으로 간결하게 반복문을 표현할 수 있다.

for (초기식; 조건식; 증감식) {
	조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

for 문을 구정하는 초기식, 조건식, 증감식은 각각 생략될 수 있다. 또한 쉼표 연산자(,)를 사용하면 여러 개의 초기식이나 증감식을 동시에 사용할 수도 있다.
사용 예는 아래와 같다.

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

// 1\n2\n3\n4\n5\n6\n7\n8\n9\n

for / in 문

for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumberable properties)를 순회할 수 있도록 해준다.

열거할 수 있는 프로퍼티란 내부적으로 enumberable 플래그가 true로 설정된 프로퍼티를 의미한다. 이런한 프로퍼티들은 for / in 문으로 접근할 수 있게 된다.

for (변수 in 객체) {
	객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

사용 예는 아래와 같다.

var arr = [1, 2, 3];

for (var i in arr) {
	console.log(i);
}

// 1\n2\n3\n

var obj = {
	name: '이순신',
    age: 20
};

for (var i in obj) {
	consol.log(i);
}

// name\nage\n

for / of 문

for / of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문이다. 자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments 객체 등이 있다.
이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입한다. for / of 문의 경우 익스플로러에서는 지원하지 않는다.

for (변수 of 객체) {
	객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

아래는 사용 예이다.

var arr = [3, 4, 5];

for (var value of arr) {
	console.log(value);
}

// 3\n4\n5\n

var arr = new Set([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 5, 5]);

for (var value of arr) {
	console.log(value);
}

// 1\n2\n3\n4\n5\n

while 문

while 문의 형식은 아래와 같다.

while (불리언 값) {
	반복 실행해야 하는 실행문들;
}

while 문은 괄호 안의 불리언 값에 따라 중괄호 안에 작성한 명령문을 반복해서 실행한다. 즉, 불리언 값이 true이면 반복문을 실행하고, 불리언 값이 false라면 반복문을 더 이상 실행하지 않고 반복문 다음의 실행문들을 실행한다.

만약 while 문 안에 반복 조건으로 true를 넣어서 반복문을 실행하면 반복문이 계속 실행되어 반복문이 끝나지 않게 된다.
이처럼 반복문에 빠져나오지 못하고 계속 실행되는 현상을 무한 루프라고 한다. 프로그램이 무한 루프에 빠지면 시스템의 리소스를 많이 소비하면서 위험한 상황을 발생시킬 수 있다. 즉, 개발자가 의도하지 않은 무한 루프는 심각한 오류이다.

이를 방지하려면 반복 조건을 true로 고정하지 말고, 언젠가는 false로 바뀌어서 반복문을 빠져나오게 설계해야 한다.

var i = 0
while (i < 2) {
	console.log(i + ' ');
    i = i + 1;
}

// 0\n1\n

do-while 문

do-while 문의 형식은 다음과 같다.

do {
	반복 실행해야 하는 실행문들;
} while (불리언 값)

do-while 문은 while 문과 유사하지만 반복 조건에 관계 없이 최소 한 번은 실행된다.

배열

배열(array)는 여러 개의 데이터가 한 곳에 모여져 있는 자료형이다.
이를 이용해 데이터를 효율적으로 관리할 수 있다.

배열 만들기

배열을 만드는 방법에는 두 가지가 있다.

• 배열 리터럴(array literal)
• Array() 생성자 함수로 배열을 생성

먼저 배열 리터럴로 배열을 생성하려면 대괄호([와 ]) 안에 배열에 넣으려는 데이터를 쉼표로 구분해서 넣으면 된다.

var arr = ['A', 'B', 'C', 'D'];

다음은 자바스크립트에는 Array() 라는 배열을 생성해주는 생성자 함수가 존재한다. 새로운 배열을 만든다는 의미로 new라는 키워드와 Array() 함수 안에 배열에 넣으며는 데이터를 쉼표로 구분해 넣으면 된다.

var arr = new Array('A', 'B', 'C', 'D');

배열에서 값 읽기

배열에 저장된 값을 읽을 때는 변수처럼 이름을 이용한다.

var arr = ['A', 'B', 'C', 'D'];
console.log(arr);

// ['A', 'B', 'C', 'D']

위 예제를 실행하면 배열에 담긴 데이터가 순서대로 출력된다.
하지만 배열에서 특정 값을 가져오고 싶을 때가 있을 수 있다. 그때는 배열 이름에 대괄호를 작성하고 그 안에 인덱스(index)를 명시하면 된다. 인덱스는 배열에서 데이터를 가리키는 순서로, 배열을 만들 때 데이터가 저장된 순서에 따라 0부터 1씩 증가하면서 매겨진다.

var arr = ['A', 'B', 'C', 'D'];
console.log(arr[1]);	// B
console.log(arr[3]);	// D

배열에서 값 갱신하기

배열에서 값을 갱신하고 싶다면 바꾸고 싶은 값이 있는 인덱스 번호를 이용해 바꾸면 된다.

var arr = ['A', 'B', 'C', 'D'];
arr[2] = 3;
console.log(arr);

// ['A', 'B', 3, 'D']

배열의 크기 구하기

배열의 크기를 구하고 싶다면 간단하게 자바스크립트의 length 기능를 사용하면 된다.

var arr = ['A', 'B', 'C', 'D'];
console.log(arr.length);

// 4

이 때 헷갈리지 않아야 하는 부분은 인덱스를 셀 때는 0부터 세지만, length로 크기를 확인할 대는 1부터 센다.

배열의 마지막에 값 추가하기

자바스크립트의 push 기능을 사용하면 배열의 마지막에 값을 추가할 수 있다.

var arr = ['A', 'B', 'C', 'D'];
arr.push('E');
console.log(arr);

// ['A', 'B', 'C', 'D', 'E']

함수

자바스크립트에서는 다음과 같은 형태로 함수를 정의할 수 있다.

function 함수이름 (파라미터들) {
	함수에서 실행할 코드;
}

함수 정의에서 파라미터(parameter)들은 외부에서 인자(argument)를 받아 코드를 실행할 때 사용하는데, 파라미터를 사용하지 않을 경우 아무 것도 넣지 않아도 괜찮다.
또한 함수 내에서 return을 이용해 함수에서 계산된 데이터를 외부로 내보낼 수도 있다.