자바스크립트[JavaScript] 002. 자바스크립트의 요소 7가지

안녕하세요!

 

지난 시간엔 자바스크립트 포스팅의 첫 시작으로 가장 기본적인 개념을 설명드렸어요.

자바스크립트[JavaScript] 001. 자바스크립트?

(위 글을 참고해주세요!)

 

오늘은 자바스크립트에서 사용되는 요소들을 소개드리려고 합니다.

 

<요약>

1. String(문자열) & Number(숫자열) 알기

2. Function(함수) 알기

3. array(배열) 알기

4. undefined & null 알기

5. Boolean(불린) 알기

---

1. String(문자열) & Number(숫자열)

첫 번째로는 문자열과 숫자열인데요.

제가 지금 작성하고 있는 글들, 우리가 사용하는 말들은 문자열이라고 보시면 됩니다.

숫자열은 말 그대로 숫자를 나타내는 요소인데요. 코드를 보며 더 정확히 알아볼까요?

var color=['red','white','black'];
var color_count=3;
var age="20";

color 변수와 color_count변수, age변수를 선언해보았습니다.

이때 color 변수 안에 있는 red, white, black처럼 작은따옴표(또는 큰 따옴표)로 감싸 져 있는 데이터는 문자열,

color_count 변수 안에 따옴표 없이 숫자 3으로 작성되어있는 데이터는 숫자열이라고 합니다.

그렇다면 age변수 안에 있는 데이터는 어떤 속성을 가질까요?

 

네, 정답은 문자열 속성입니다!

숫자인데 왜 문자열이냐구요? 20은 큰따옴표로 감싸 져 있기 때문입니다.

 

문자와 숫자를 구분하는 가장 중요한 포인트는 바로 ''(작은 따옴표)와 ""(큰 따옴표)입니다!

따옴표 없이 숫자를 쓰면 숫자열, 따옴표를 사용하여 숫자를 쓰면 문자열이 되는 것 이죠.

 

간단하지만 중요한 내용이니 꼭! 기억해주세요 =)

 

2. Function(함수)

여러분 혹시 학창 시절에 수학 과목에서 함수를 배우셨던 것 기억하세요?

자바스크립트에서의 함수 개념과 우리가 배웠던 수학에서의 함수 개념이 비슷합니다.

바로 코드를 통해 확인해볼게요.

var sum=function(a, b) {
	return a+b;
}

위 코드를 해석해봅시다.

첫번째 줄은 sum은 a, b를 매개변수로 가지는 함수이다.라고 선언을 하는 거예요.

그리고 중괄호 안에 return a+b;라는 내용이 적혀있는데요.

sum이라는 함수를 사용할 경우 a+b값을 반환(return)하겠다.라는 의미입니다.

즉, sum(a, b)=a+b라는 함수를 선언하는 것입니다.

 

그리고 위 코드는 아래 코드와 같은 코드입니다. 이렇게도 쓸 수 있어요.

function sum(a,b) {
	return a+b;
}

더욱 간단해졌죠? =)

주의해야 할 점은 function과 sum(a, b) 사이 그리고 return과 a+b 사이에 '=' 등호가 들어가지 않는다는 점입니다. 참고로 제가 문제 풀 때 이 부분 때문에 계속 오류를 냈어요 ^^; 여러분들은 그러지 않기..!

 

그러면 이 함수를 한번 적용하여 호출해볼까요?

#1
var sum=function(a,b) {
	return a+b;
}

sum(1,2);

#2
function sum(a,b) {
	return a+b;
}

sum(1,2);

sum(1,2);를 호출하면 1은 a에 대입, 2는 b에 대입되어 1+2 = 3.

3이 출력되게 되는 거죠^^ 생각보다 간단하죠?!

 

3. array(배열)

사실 지금까지 배열의 정의를 알려드리지 않았지만 같이 본 적이 있어요!

오늘도 배열이 나왔다는 사실..!!

처음에 문자열과 숫자열을 알려드릴 때 color 변수에 담겨있던 데이터 기억나세요?

color = ['red', 'white', 'black']

바로 이 것이 배열입니다! 짜잔! 

배열은 대괄호 안에 묶여있는 값들을 말합니다. 그리고 배열 안에 또 다른 배열을 넣을 수 있어요.

var number=[
[1,2,3,4,5],
[6,7,8,9,10]
];

이렇게요 =)

배열 안에 데이터를 셀 땐 1부터 세는 게 아니라 0부터 세는 것, 알고 계시죠?

파이썬에서 인덱싱 할 때 이 개념이 나오는데요. 배열에서도 동일하게 적용되는 개념이랍니다 =)

 

4. undefined & null

다음은 undefined, null(널) 요소를 알려드릴게요.

undifined 말 그대로 정의되지 않았다는 의미인데요.

지난 시간에 변수 안에 데이터를 입력하기 위해서 데이터를 초기화한다고 알려드렸죠?

undefined는 데이터를 초기화하지 않은 것 즉, 변수 안에 데이터를 입력하지 않아 데이터가 없는 상태를 말합니다.

변수가 아무런 데이터 없이 텅 비어있는 상태라는 것 이죠.

 

그렇다면 null은 어떤 의미일까요?

undefined와는 다르게 null은 데이터를 초기화한 상태입니다. 즉, 변수 안에 데이터를 넣어뒀다는 말이죠.

그렇지만 여타 다른 변수와는 다르게 변수 안에 넣은 것은 비어있는 상태의 데이터를 넣는 성질을 가지고 있습니다.

다시 말해 변수 안에 빈 데이터를 저장했다는 것이죠.

 

묘한 차이를 아시겠나요?

 

정리하자면 undefined는 아무런 데이터 없이 정의되지 않은 요소이고

null은 데이터가 있긴 하지만 비어있는 데이터를 가지고 있는 요소이다.라고 보시면 되겠습니다. =)

 

5. Boolean(불린)

마지막으로 boolean을 알아보겠습니다!

불린은 True, False! 참과 거짓의 값을 가지는 요소입니다.

 

만약 10과 20의 크기 비교를 할 때 10 <20은? 참(True)이고 10>20은 거짓(False)입니다.

이러한 속성을 boolean이라고 해요.

 

이 불린 속성은 나중에 알려드릴 반복문, 조건문에서 유용하게 쓰입니다.

반복문에서는 내가 작성한 조건문이 참이라면 반복을 해라,

조건문에서는 내가 작성한 조건문이 참이라면 이 수행문을 거쳐라, 라는 과정을 시킬 수 있게 되는 거죠!

---

자, 오늘은 일곱 가지의 속성들을 알아봤습니다!

한번 천천히 읽어보시면 복잡하지 않고 쉽다고 생각될 거예요=)

 

다음 시간에는 오늘 알려드린 요소들을 어떻게 활용하는지 알려드리겠습니다!