Javascript는 웹 페이지의 컨텐츠가 바뀌는 등 동적인 움직임을 줄 때 주로 사용된다.

 

  • Variable

어떠한 값을 저장하여 불필요한 중복을 줄여주고 재사용할 수 있다. 이것을 가능케 하는 것이 변수(Variable)이다.

var one = 1;
var something = function hello() {};
var array = [1, 2, 3];
var name = 'Jun';

위와 같이 숫자, 함수, 배열, 문자열 등을 넣을 수 있다. 자바스크립트에서 '='는 오른쪽에 위치한 값을 왼쪽 변수에 대입하겠다는 의미이다. 자바스크립트에서 변수로 선언하기 위해서는 위와 같이 앞에 var(혹은 const)를 붙여주어야 한다.

 

  • Identifiers
var jun; // valid
var _jun; // valid
var $jun; // valid
var 7jun; // invalid
var if; // invalid
var for; // invalid

변수를 선언할 때 우리가 지어주는 이름을 Identifier라고 칭한다. 자바스크립트에서는 Identifier를 정할 때 몇 가지 규칙이 있다.

 

숫자, 알바펫, $, _가 포함될 수 있다. 허나 숫자로 시작해서는 안된다.(var 7jun; // invalid) 그리고 for, if, function과 같이 이름만으로 자바스크립트에서 어떠한 기능을 수행 중인 단어(예약어)는 Identifier로 사용할 수 없다.

 

참고로 위와 같이, 대입 연산자 없이 그저 변수를 선언하기만 하면 변수에는 undefined라는 값이 설정된다.

 

  • Boolean

Boolean, 불린이라고 발음하며 true(참) 혹은 false(거짓) 값만을 가질 수 있는, 참 혹은 거짓으로 논리를 따지는 논리적인 데이터 유형이다. 기호 논리학 분야의 선구자인 영국 수학자, 조지 불의 이름을 따와 만들어졌다.

var t = true;

 

  • null & undefined

null과 undefined 모두 자바스크립트에서 '없음'을 표현할 때 사용된다. 비슷한 의미이지만 다른 용도로 사용된다.

var nothing1 === null;
console.log(nothing1 === null); // true

var nothing2 === undefined;
console.log(nothing2 === undefined); // true;

console.log(nothing1 === nothing2); // false;

위와 같이 null과 undefined가 같냐고 자바스크립트로 물었을 때 false가 뜨는 것을 알 수 있다. 이는 자바스크립트에서 둘을 다르게 인식한다는 것이다. 당연히 다르게 쓸거니까 이름을 다르게 만들지 않았을까.

 

undefined는 말처럼 정의되지 않았다는 뜻으로 우리가 어떠한 값도 지정해주지 않았을 때 사용된다. 값이 대입되지 않은 상태인 것이다.

var k;
console.log(k); // undefined

var k = 'something'이 아닌, 그저 var k;로 끝났기 때문에 우리는 k에게 아무런 값도 지정해주지 않은 셈이다. 따라서 console.log로 k를 확인해보면 정의되지 않았다는 뜻인 undefined가 뜬다.

 

굳이 var k = undefined;를 해주지 않아도 var k;만으로 undefined가 되니 var k = undefined;라고 쓰진 않는다.

var k;
console.log(k); // undefined

var l = undefined;
console.log(l); // undefined

undefined와 비슷하지만 다르게도, null은 '의도적으로! 값이 없음'을 표현할 때 사용된다.

var obj = {
	name: 'jun'
};

// 위 obj를 활용한 작업 실행

// 더 이상 obj를 사용하지 않을 것이기 때문에 obj를 의도적으로 '없음'으로 만듦

obj = null;

인터넷 쇼핑몰에서 자신이 사고 싶은 것들을 장바구니에 담아 구입하고 난 뒤, 장바구니를 클릭했을 때 '없음'이 뜨는 예가 바로 null을 활용한 것이 아닐까?

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

Step 2. JavaScript(3) - Truthy and Falsy + Logical Operator  (0) 2021.11.25
Step 2. JavaScript(2)  (0) 2021.11.25
Step 1. Google Clone  (0) 2021.11.14
Step 1. CSS  (0) 2021.11.02
Step 1. HTML  (0) 2021.10.29

+ Recent posts