자바스크립트 기초

HTML이 웹의 뼈대를 만들고, CSS가 웹의 표현 방식을 추가했다면, 자바스크립트(JavaScript)는 웹을 동적으로 작동할 수 있게 만들어 주는 중요한 요소이다.

1. 자바스크립트의 타입들

자바스크립트에서는 변수로 var(variables)를 사용한다. 숫자, 문자, 함수 등을 가리지 않고 담을 수 있다. 아래에서 var은 각 타입을 담는 변수로 활용된다. 변수명은 첫 글자로 문자나 $, _ 으로 시작해야 한다.

1-1. 숫자(Number)

자바스크립트는 정수와 실수를 따로 구분하지 않는다. 대신 모든 수를 실수로 표현한다. e표기법도 사용이 가능하다.

var intNum = 10;
var floatNum =3.1415;
var veryBigNum = 10e5;
var verySmallNum = 10e-5;

1-2. 문자열(String)

자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표("")로 둘러싸서 표현한다. 큰따옴표로 시작한 문자열은 큰따옴표로 끝내야 하며, 작은따옴표로 시작한 문자열은 작은따옴표로 끝내야 한다.

var string = "큰따옴표 사용";
var string = "작은따옴표 사용";

 

 

*기본적인 사칙연산을 제공하기 때문에 다음과 같이 숫자와 문자열을 더하거나 빼는 상황이 생길 수 있다. 그렇다면 숫자와 문자열을 더하고, 숫자와 문자열을 빼는 행위를 한다면 어떤 결과가 나올 것인가?

var num = 10;
var str = "34";
// num + str = ?
// num - str = ?

위의 그림처럼 숫자와 문자열을 더하는 상황에선 num을 문자열로 인식해서 문자열 "1034"가 결과값으로 나오게 되고, 숫자와 문자열을 빼는 상황에서는 str을 숫자로 인식해서 숫자 -24라는 결과값을 가지게 된다.(이러한 결과가 나오는 이유를 아시는 분이 계시다면 알려주시면 감사하겠습니다.) 이러한 현상을 방지하기 위해 숫자는 숫자와, 문자열은 문자열과 함께 사용해주는 것이 좋다.

1-3. 불리언(Boolean)

불리언은 참(true, 1)과 거짓(false, 0) 두 가지 값을 표현할 수 있는 타입이다.

1-4. Undefined

var 변수가 아직 초기화 되지 않았을 때의 반환 타입이다.

//num에 숫자나 문자, 불리언 등의 타입을 할당하지 않았으므로 Undefined 타입이 된다.
var num;

초기화 시키지 않아서 undefined 타입으로 반환됨.

1-5. Null

값이 없음을 나타내는 타입이다. Undefined은 아직 할당되지 않은 값을 나타내기 때문에 둘의 차이가 있음을 알아야 한다.

 

그림처럼 undefinedObj와 nullObj를 정의한 뒤에, undefinedObj는 비어있는 객체를 생성해서 할당해주었고, nullObj에는 null 값을 할당해주었다.

그 뒤, undefinedObj에 name이라는 속성을 추가해준 뒤에 그 값으로 Kim을 주면 undefinedObj는 새로운 값을 받으면서 객체의 정보를 가지고 있게 된다.

반면 nullObj도 처음에는 undefined라는 값을 가지고 있는 것처럼 보이지만, 속성과 값을 추가해주려고 하니 null이라는 값을 가지고 있기 때문에, name이라는 속성을 추가할 수 없다는 에러가 나타나게 된다.

 

1-6. Symbol (new in ECMAScript 6 )

이름처럼 단 하나만 존재하는 타입이다. 심볼 사용법은 간단하다. 변수를 선언하고 Symbol이라는 명령어로 심볼화시킬 문장이나 숫자들을 입력해주면 된다. 이렇게 심볼화된 데이터는 안에 있는 값이 같더라도 비교해보면 false라는 결과값이 나오는 것을 볼 수 있다. 즉, Symbol을 통해 반환되는 값은 모두 자신만의 고유한 값을 가지고 있기 때문에, 프로그램 내부에서 유일한 값을 가지고 있다고 볼 수 있다.

 

1-7. Object

속성(Propety)와 값(Value)로 이루어진 자바스크립트의 Object(객체)는 변수를 선언하고 중괄호를 사용하여 사용할 수 있다.

var myObject = {

    a : "a";
    b : 2;
    c : function() {
    	console.log("Hello");
        }
};

속성은 문자열로만 만들어야 되지만, 값은 문자열, 숫자, 함수 기타 등등 제한이 없다. 이렇게 만들어진 객체 내부의 값에 접근하려면 myObject.a, myObject.b와 같이 . 을 이용해서 접근할 수 있다.

2. 자바스크립트의 비교연산자

비교연산자는 변수 또는 값을 비교하는 연산에 사용된다. 결과값으로 true or false를 반환한다.

2-1. ===, !==

해당 비교 연산자는 비교 대상이 되는 두 변수의 타입과 값이 동일한지, 동일하지 않은지 비교하는 기능을 가지고 있다. ===의 경우에는 두 변수의 타입과 값이 동일하다면 true, 그렇지 않다면 false를 반환한다. !==는 반대로 두 변수의 타입과 값이 동일하지 않을 경우에 true를, 그렇지 않을 경우에 false를 반환한다.

var a = "5";
var b = 5;
a === b; // false -> a와 b의 값이 같지만, 타입이 다름( a : 문자열, b 숫자 )
a !== b; // true -> 위와 반대의 결과가 나옴

a == b; // true -> a와 b의 값이 같음.
a != b; // false - > 위와 반대의 결과가 나옴

* ==, != : 해당 비교 연산자는 두 변수에 들어있는 값만을 비교한다. 

2-2. >=, >, <, <=

수학에서 쓰이는 부등호와 같은 용도이다.

var a = 5;
var b = 10;

a>b; // false
a<b; // true

var c = 6;
var d = 6;

c>=d; // true;
c<=d; // true;

//주의
var a = 6;
var b = 3;
var c = 2;

a>b>c; // false
//이렇게 한 라인에 부등호를 두 개 이상 사용할 경우에는 왼쪽부터(a>b) 하나씩 먼저 실행된다.
//a>b가 실행돼서 결과로 true(1)이 나오고 1>c라는 계산을 수행하기에 결과로 false가 나온다.

3. 자바스크립트의 변수

3-1. Variables

자바스크립트의 변수는 정수, 실수, 문자열 등을 구분하지 않고 모두 var 안으로 담아서 쓸 수 있다. 아래 코드에서 x, y, z 모두 변수이다. 변수명을 지을 때에는 미리 정해진 키워드(var, if, for, funcition...)는 사용할 수 없으며, 변수명의 첫 글자로는 문자, $, _ 가 와야 한다.

var x = 3;
var y = 5;
var z = x+y;

4. 자바스크립트의 조건문

조건문을 사용하면 조건에 따라 다른 행동을 수행할 수 있게 된다.

4-1. if, else, else if

//if statement
if(condition) {
 //condition이 true일 경우 중괄호 안의 문장을 실행
}

//else statement
if (condition) {
  //condition이 true일 경우 중괄호 안의 문장을 실행
} else {
  //condition이 false일 경우 중괄호 안의 문장을 실행
}

//else if statement {
if (condition1) {
  //condition이 true일 경우 중괄호 안의 문장을 실행
} else if (condition2) {
  //첫 번째 if의 condition이 false이고 condition2가 true일 경우 중괄호 안의 문장을 실행
} else {
  //첫 번째 if의 condition이 false이고 condition2가 false 경우 중괄호 안의 문장을 실행
}

5. 자바스크립트의 논리연산자

논리연산자는 비교연산자와 유사하게 true 나 false 만을 값으로 반환한다.

5-1. &&

and 연산자는 비교 대상이 되는 두 변수가 모두 true일 경우에만 true를 결과값으로 내놓는다.

5-2. ||

or 연산자는 비교 대상이 되는 두 변수 중, 하나만 true여도 true를 결과값으로 내놓는다.

5-3. !

not 연산자는 비교 대상이 되는 두 변수가 서로 다른 값을 가지고 있을 때 true를 결과값으로 내놓는다.

var a =true;
var b =false;

a||b; // true
a&&b; // false
a!b; // true

6. 자바스크립트의 함수

6-1. 함수 선언(Function Declaration)

이 방법은 다른 프로그래밍 언어와 유사하다.

// 선언적 함수 선언과 사용

//함수 선언
function SUM(a,b) {
	return a+b;
}

//사용
var sum = SUM(3,4); // 결과로 6이 sum에 저장됨

*선언을 통해 함수를 사용하면 호이스팅(Hoisting) 덕분에 함수가 아래에 위치하여도 사용할 수 있다.

 

6-2. 익명 함수(Anomymous Function)

함수 표현식을 이용해서 사용하는 방법중 하나. 사용변수의 이름은 testFunction이지만 함수 자체에는 이름이 없다. 그렇기 때문에 익명 함수라 불린다.

// 익명 함수 사용

// 익명 함수 선언
var testFunction = function(a,b) {
	return a+b;
}

// 사용
testFunction(3,4); //결과 : 7, 즉시 실행됨.

*표현식은 즉시 값을 반환한다. 그렇기 때문에 위 코드에서 결과 7이 즉시 화면에 출력된다. 또한, 함수 표현식을 사용하면 호이스팅이 일어나지 않기 때문에 코드를 직관적으로 짤 수 있게 된다.