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 |