자바스크립트 기본

학습 목표

- 자바스크립트의 기본 용어를 이해합니다.

-자바스크립트 기본 자료형과 연산자를 사용하는 방법을 익힙니다.

- 조건문과 반복문을 사용해 자바스크립트 프로그램 흐름을 제어하는 방법을 익힙니다.

- 함수를 선언하고 호출하는 방법을 이해합니다.

- 객체의 기본 개념을 이해하고 속성과 메소드를 구분할 수 있습니다.

자바스크립트는 자유롭고 기능과 기술이 다양한 프로그래밍 언어이지만, 자바스크립트 기능과 실제 사용하는 기능 사이의 괴리가 매우 큽니다. 다음은 '자바스크립트는 기능이 굉장히 많은데 좋은 점은 굉장히 적다'고 놀릴 때 많이 사용하는 그림입니다.

1. 자바스크립트 기본 용어

자바스크립트에서 사용하는 기본 용어부터 알아보겠습니다. 앞으로도 계속 나오는 용어이므로 주의 깊게 살펴보세요.

1.1 표현식과 문장

자바스크립트에서는 다음과 같이 값을 만들어 내는 간단한 코드를 표현식이라고 합니다.

[ 273

  10 + 20 + 30 * 2

  'JavaScript'           ]

표현식이 하나 이상 모이면 문장이 됩니다. 한국어도 문장 끝에 마침표를 찍듯 자바스크립트에서도 코드 맨 마지막에 세미클론(;)을 찍어 종결을 나타냅니다. 표현식 하나도 세미콜론을 찍으면 문장이 됩니다. 그리고 문장이 모이면 프로그램이 됩니다. 즉, 포현식이 모여 문장, 문장이 모여 프로그램이 됩니다.

[ 273;

  10 + 20 + 30 * 2;

  var name = '윤' + '인' + '성' ;

  alert('Hello JavaScript');          ]

NOTE_ 사실 자바스크립트는 문장 끝에 세미콜론이 없어도 행을 바꾸면 문장으로 췩브하므로 프로그램 실행에 문제가 없습니다. 하지만 대부분의 프로그래밍 언어에서 문장 끝에 세미콜론을 입력하므로 자바스크립트도 관례상 입력합니다.

1.2 키워드

키워든은 특별한 의미가 부여된 단어로 자바스크립트를 처음 만들 때 정했습니다. 현재 모든 웹 브라우저에서 [표 9-1]처럼 28가지의 자바스크립트 키워드를 지원합니다.

표 9-1 자바스크립트 키워드

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

[표 9-2]는 앞으로 사용할 가능성이 있는 자바스킯트 키워드입니다. const와 debugger 같은 키워드는 일부 웹 브라우저에서 이미 사용하므로 W3C에서는 프로그램을 작성할 때 예약 키워드를 사용하지 말라고 권고합니다.

[표 9-2] 자바스크립트 예약 키워드

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

"제시된 키워드를 모두 기억해야 하나요?"

자바스크립트를 시작하자마자 낯선 단어가 많이 등장해 당황스러울 수 있습니다. 앞으로 내용을 학습하다 보면 저절로 익힐 수 있으므로 지금은 키워드가 무엇인지만 알고 넘어갑시다.

1.3 식별자

식별자는 자바스크립트에서 이름을 붙일 때 사용하는 단어입니다. 변수나 함수 이름등으로 사용되며 다음 규칙에 맞게 생성합니다.

- 키워드를 사용하면 안 됩니다.

- 특수 문자는 _과 $만 허용합니다.

- 숫자로 시작하면 안됩니다.

- 공백은 입력하면 안 됩니다.

이 규칙을 통과한 단어는 식별자로 사용할 수 있습니다. 예를 들어 왼쪽 단어는 모두 식별자로 상뇽할 수 있지만 오른쪽 단어는 모두 식별자로 사용할 수 없습니다.

alpha alpha10 _alpha $alpha ALPha ALPHA

break 273alpha has space

식별자를 만들 땐은 한글, 한자, 일본어 등 전 세계의 언어를 모두 사용할 수 있지만 알파벳을 사용하는 것이 개발자의 관례입니다. 또 alpha, beta처럼 의미 없는 단어보다 input, output처럼 의미를 알 수 있는 단어를 사용하는 것이 좋습니다.

알파벳 사용 외에도 대부분의 자바스크립트 개발자가 식별자를 만들 때 지키는 관례를 정리하면 다음과 같습니다 .이는 식별자의 의미를 더 명확하게 표시하려고 사용하는 규칙입니다.

1. 생성자 함수의 이름은 항상 대문자로 시작합니다.

2. 변수, 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작합니다.

3. 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 합니다.

1.번 규칙은 이 내용에서 다루는 범위가 아닙니다. 2번은 앞으로 알아갈 것입니다. 3번은 식별자의 의미를 쉽게 파악하려고 만든 규칙입니다. 식별자에 공백을 넣으면 안되므로 이 규칙을 사용합니다. 다음 예에서 오른쪽 식별자는 글자가 모두 붙어있지만 대소문자로 구분했으므로 쉽게 끊어 읽을 수 있습니다.

i love you -> i Love You

i am a boy -> iAmABoy

create server -> createServer

자바스크립트의 식별자는 크게 변수,, 속성, 함수, 메소드 네 종류로 나눌 수 있습니다.

[표 9-3] 자바스크립트의 식별자 종류

구분	단독으로 사용	다른 식별자와 함께 사용
식별자 뒤에 괄호 없음	변수	속성
식별자 뒤에 괄호 있음	함수	메소드

아직 배우지 않았지만 [표 9-3]에 정리된 특징을 적용해 식별자를 구분할 수 있습니다. 다음 표현식에서 파란색으로 표시한 식별자를 변수, 속성, 함수, 메소드로 구분해 보세요.

alert('Hello World') -> 함수

Array, length -> 속성

input -> 변수

promat('Message', Defstr') -> 함수

Math.PI -> 속성

Math.abs(-273) -> 메소드

1.4 주석

주석은 프로그램의 진행에 전혀 영향을 주지 않는 코드로 프로그램을 설명하는 데 사용합니다. HTML5를 배우면서 다루었으므로 쉽게 이해할 수 있을 것입니다.

자바스크립트에서는 두 가지 방법으로 주석을 처리합니다.  방법 ①은 //를 사용해 한 행만 주석으로 처리하는 방법입니다. // 뒤의 문장은 실행되지 않습니다. 방법 ②는 /*와 */를 사용해 여러 행을 주석으로 처리하는 방법입니다. /*와 */사이의 문장이 모두 실행되지 않습니다.

[표 9-4] 주석 처리 방법

방법	표현
① 한 행 주석처리 ② 여러 행 주석 처리	// 주석문 /* 주석문 주석문 */

다음 코드는 자바스크립트에서 주석을 사용한 예입니다. alert() 함수를 실행했지만, 주석으로 처리했으므로 모두 무시됩니다.

<script>

// 주석은 코드의 실행에 영향을 주지 않습니다.

/*

alert('Hello JavaScript .. !');

alert('Hello JavaScript .. !');

alert('Hello JavaScript .. !');

*/

</script>

간단하게 자바스크립트에서 사용하는 용어를 살펴보았습니다. 여기서 설명한 용어를 얼마나 잘 이해하고 있는지에 따라 앞으로 공부할 내용을 습득하는 속도가 다릅니다. 다음 용어는 꼭 정리하고 넘어가기 바랍니다. 아직 변수, 함수, 속성, 메소드는 형태만 구분할 수 있으면 됩니다.

● 표현식	● 변수
● 문장	● 함수
● 키워드	● 속성
● 식별자	● 메소드

NOTE_ 변수, 함수, 속성, 메소드는 뒤에서 자세하게 다룹니다. 하지만 종종 다른 설명을 할 때도 등장하므로 일단은 다음 내용 정도로만 기억하기 바랍니다.

* 변수 : 값을 저장할 때 사용하는 식별자입니다.

* 함수 : 코드의 집합으로 자바스크립트의 함수는 변수의 일종입니다.

* 객체 : 값을 묶어 저장하는 자료 형입니다.

* 속성 : 객체에 소속된 변수입니다.

* 메소드 : 객체에 소속된 함수입니다.

2. 자바스크립트 출력

현재 무엇을 하는지 알 수 있도록 메시지를 출력하는 방법부터 알아보겠습니다. 자바스크립트의 가장 기본적인 출력 방법은 alert() 함수를 사용해 웹 브라우저에 경고창을 띄우는 것입니다. alert() 함수는 [그림 9-1]처럼 함수의 괄호 안에 문자 열을 입력해서 사용합니다.

alert("메시지")

[그림 9-1] alert() 함수 상태

기본 예제 9-1 자바스크립트의 기본 출력

alert() 함수를 사용해 경고창에 문자열 'Hello JavaScript ..!'를 출력해 봅시다. 함수 내부에 입력한 문자열을 확인할 수 있습니다.

코드 9-1 메시지 출력

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Basic</title>

<script>

alert('Hello JavaScript ..!');

</script>

</haed>

<body>

</body>

</html>

NOTE_ 크롬 개발자 도구로 실행 결과 확인

간단한 내용을 살펴볼 때 파일을 일일이 만들고 alert() 함수를 사용하는 것은 비효율적입니다. 더 간단하게 자바스크립트 실행 결과를 확인할 수 있는 방법을 살펴보겠습니다. 크롬 웹 브라우저에서 F12를 누릅니다. 개발자 도구가 실행되면 [Console] 탭을 클릭합니다. 이곳에 자바스크립트 코드를 입력하고 Enter를 누르면 실행 결과를 바로 확인할 수 있습니다. 이 장의 앞 부분에서는 빠르게 진행하려고 [Console] 탭을 사용합니다.

[그림 9-2] 크롬 개발자 도구를 이용한 실행 결과 확인

3. 자료형

프로그래밍 언어는 자료를 손쉽게 다루려고 만들었습니다. 따라서 어떤 프로그램이 언어를 공부하든 해당 프로그래밍 언어에서 사용하는 자료형(자료의 형식)을 먼저 알아야 합니다. 자바스크립트에는 숫자, 문자열, 불, 함수, 객체, 정의되지 않은 자료형(undefined)이 있습니다. 기본 자료형에 속하는 숫자, 문자열, 불, 함수를 알아본 후 함수와 객체를 살펴보겠습니다. 간단한 내용이므로 크롬 개발자 도구를 사용해 확인합니다.

3.1 숫자

가장 기본적인 자료형은 숫자입니다. 자바스크립트는 정수와 실수를 구분하지 않으므로 숫자를 쉽게 다룰 수 있습니다. 숫자는 [코드 9-2]처럼 [Console] 탭에 입력하면 자동으로 생성됩니다.

[코드 9-2] 숫자

> 273

273

> 52.273

52.273

자바스크립트에서는 숫자를 사용해 [표 9-5]처럼 사칙 연산을 수행할 수 있습니다.

[표 9-5] 기본적인 사칙 연산자

연산자	설명
+	덧셈 연산자
-	뺄셈 연산자
*	곱셈 연산자
/	나눗셈 연산자

사칙 연산은 초등학교 때부터 배운 내용이므로 무리 없이 사용할 수 있을 것입니다.

[코드 9-3] 사칙 연산

> 52 + 273

325

> 52.273 +103.57

155.843

연산을 할 때는 연산자 우선순위를 고려합니다. 우선 다음 표현식의 결과를 예측해 봅시다.

5 + 3 * 2

16이라고 답했다면 연산자의 우선순위를 적용하지 않은 것입니다. 곱셈이 덧셈보다 우선순위가 높으므로 곱셈을 먼저 계산해야 합니다. 앞의 두 수를 먼저 더하고 싶으면 '(5+3) *2'처럼 괄호를 사용합니다. 연산자 우선순위가 헷갈린다면 괄호를 꼭 사용하기 바랍니다.

숫자를 사용해 나머지 연산도 할 수 있습니다. 나머지 연산자는 익숙하지 않을 텐데, 좌변을 우변으로 나눈 나머지를 표시합니다.

[표 9-6] 나머지 연산자

연산자	설명
%	나머지 연산자

[코드 9-4]를 직접 입력하고 실행 결과를 확인해 봅시다. 10을 5로 나눈 나머지는 0입니다. 또 7을 3으로 나누면 나머지 1입니다. 쉽게 이해할 수 있겠죠?

[코드 9-4] 나머지 연산

> 10 % 5

0

> 7 % 3

1

3.2 문자열

문자의 집합을 문자열이라고 합니다. 예를 들어 'abcdefg', 'Hello World'. '안녕하세요.'가 문자열에 해당합니다.

자바스크립트는 두 가지 방법으로 문자열을 생성합니다. 첫 번째는 큰 따옴표 안에 문자를 넣는 방법이고, 두 번재는 작은따옴표 안에 문자를 넣는 방법입니다. 어떤 방법을 사용하든 상관없지만, 자바스크립트에서는 문자열 내부에 큰 따옴표를 자주 넣으므로 작은 따옴표를 사용해 문자열을 생성하는 방법을 추천합니다.

[코드 9-5] 문자열 생성

> "Hello Javascript .. !"

   "Hello Javascript .. !"

> "Hello Javascript .. !"

   "Hello Javascript .. !"

문자열 안에 따옴표를 넣고 싶으면 [코드 9-6]처럼 서로 다른 따옴표로 문자열을 감쌉니다. 즉, 작은 따옴표를 넣으려면 큰 따옴표로 감싸고, 큰 따옴표를 넣으려면 작은 따옴표로 감쌉니다.

[코드 9-6] 따옴표를 포함하는 문자열 생성

> "'문자열' 입니다."

   "'문자열' 입니다."

> "'문자열' 입니다."

   "'문자열' 입니다."

동일한 따옴표를 사용하고 싶을 때는 문자열 내부에 ＼' 또는 ＼"를 사용합니다. 이를 이스케이프 문자라고 하는데 특수한 기능을 수행합니다. 이스케이프 문자의 종류는 매우 다양하지만 일반적으로 [표 9-7]의 문자를 주로 사용합니다.

표 9-7 이스케이프 문자

역슬래시 = \

이스케이프 문자	설명	이스케이프 문자	설명
＼t	수평 탭	＼'	작은 따옴표
＼n	행 바꿈	＼"	큰 따옴표
＼＼	역 슬래시

 

[코드 9-7] 이스케이프 문자를 이용한 문자열 출력

> '한빛\t아카데미'

   "한빛        아카데미"

> '한빛\n아카데미'

  "한빛

아카데미"

> "\"\"\""

"""""

> '\'\'\''

"'''"

문자열은 [코드 9-8]처럼 문자열 연결 연산자를 사용해 합칠 수도 있습니다.

표 9-8 문자열 연결 연산자

연산자	설명
+	문자열 연결 연산자

코드 9-8 문자열 연결

> '가나다' + '라마' + '바사아' + '자차카타' + '파하'

   "가나다라마바사아자차카타파하"

3.3 불

불은 결과를 참과 거짓으로 표현할 때 사용합니다. 이론만 보면 이해하기 어려우므로 바로 예제로 살펴보겠습니다. 다음 두 식의 참과 거짓을 구분할 수 있나요?

    52 < 273

    52 > 273

[Console] 탭에 이 수식을 입력하면 실행 결과가 true 또는 false로 출력됩니다. 이것이 바로 불입니다. 숫자와 문자열은 생성하는 방법에 따라 수많은 종류를 만들 수 있지만, 불은 true와 false 두 가지만 만들 수 있습니다.

[코드 9-9] 불 결과

> 52 < 273

true

> 52 > 273

false

두 대상을 비교할 수 있는 연산자를 비교 연산자라고 합니다. 자바스크립트는 [표 9-9]처럼 비교연산자를 지원합니다.

[표 9-9] 비교 연산자

연산자	설명
>=	좌변이 우변보다 크거간 같음
<=	우변이 좌변보다 크거나 같음
>	좌변이 우변보다 큼
<	우변이 좌변보다 큼
==	좌변과 우변이 같음
!=	좌변과 우변이 다름

비교 연산자를 사용해 숫자는 물론 문자열도 비교할 수 있습니다. 문자열은 국어 사전의 앞ㅉ똑에 위치할수록 값이 작습니다. [코드 9-10]의 표현식에서는 가방이 하마보다 앞ㅉ똑에 있으므로 false 입니다.

[코드 9-10] 비교 연산

> '가방' > '하마'

false

유니코드 문자를 사용해 전 세계의 모든 언어를 비교할 수 있고, 앞에서 살펴본 비교 연산자를 사용하면 불을 만들 수도 있습니다. 불끼리는논리 연산자를 사용합니다. 자바스크립트 [표 9-10]처럼 세 가지 논리 연산자를 제공합니다.

[표 9-10] 논리 연산자

연산자	설명
!	논리 부정 연산자
ll	논리곱 연산자
&&	논리합 연산자

논리 부정 연산자는 단순히 참을 거짓을, 거짓을 참으로 바꿉니다.

코드 9-11 논리 부정 연산

> !true

   false

> !(10 == 10)

   false

이제 논리합 연산자와 곱리곱 연산자를 알아보겠습니다. 처음 불을 접한 독자라면 논리합과 논리곱이 어려울 수 있습니다. 너무 어렵게 느껴진다면 읽고만 넘어가세요. 예제를 따라하다 보면 자동으로 익힐 수 있을 것입니다.

논리합 연산자는 좌변과우변이 모두 거짓일 때만 거짓입니다. 반면 논리곱 연산자는 좌변과우변이 모두 참일 때만 참입니다. 이 둘을 표로 정리하면 [표 9-11]과 같습니다.

[표 9-11] 논리합과 논리곱 연산 결과

좌변	우변	논리합 연산 결과	논리곱 연산 결과
true	true	true	true
true	false	true	false
false	frue	true	false
false	false	false	false

논리 연산자는 [코드 9-12]처럼 표현합니다.

[코드 9-12] 논리연산

> true !! false

true

> (10 < 20) && (20 < 30)

true