03. 변수(variable)
with 양지은
변수(variable)란?
변수는 변할 수 있는 값을 담는 공간이다. 가방 안에 필통을 넣었다가 빼고책을 넣었다가 다시 알림장을 넣는다고 가정해보자. 그 상태에서 가방은 변수이고 필통과 책, 알림장은 값이 되는 것이다. (JavaScript 변수는 Variable의 var을 따와 사용한다.)
var bag = "필통";
bag = "책";
bag = "알림장"
console.log(bag); // "알림장"
또한 변수는 키워드(Keyword), 식별자(identifier), 자료형(DataType)으로 나뉜다.
var a = 2;
// var keyword
// a identifier
// 2 DataTypelet c = 2;
let c = 3;
위와 같이 영문 이름을 잘 알고 있으면 디버깅(오류 고치기) 할 때 유용하다. 내가 어디서 오류 났는지 쉽게 파악할 수 있기 때문에 반드시 알아둬야 한다.
여기서 헷갈릴만한 점이 또 있다. JavaScript 변수는 변수 타입이 딱히 없다는 것이다. var, let, const (나중에 설명할 상수 키워드) 와 같이 키워드만 선언해주고 자료형(Data type)을 다르게 주면 된다.
var age = 20;
var name = "이름";
// JavaScriptint age = 20;
char *name = "이름";
// C언어자료형(Data Type) 이란?
앞에서 얘기한 자료형(Data type)이란 그럼 무엇일까?
쉽게 말해 컴퓨터가 처리하는 자료의 형태를 일컷는다. var a = 2; 라는 값은 Number로 var b = "two" 라는 값은 String으로 처리한다는 말이다.
JavaScript 변수 타입은 쉽게 원시 (Primitive) 타입과 객체 (Object) 타입으로 나뉘지만 책에서는 기본형과 복합형으로 설명했기 때문에 기본형과 복합형으로 설명을 덧붙이려고 한다.
var num = 1;
var str = "one";
var boo = "true";
var undi = undefined;
var nu = null;
// 기본형var arr = [1, "2", 3, false, true, null];
var obj = {
name : "person",
age : 20
};
// 복합형쉽게 말해 기본형은 하나의 자료형(Data type)만 변수에 담기는 것이고, 복합형은 두 개 이상의 자료형(Data type)이 담기는 것이다.
기본형
숫자형(Number type)
var num = 2; // Number Type
var num = 1;
num+2;
// 3var num = 1.2;
num+1.8;
// 3var num = 2*2; // 4
var num2 = 10;
num2/2; // 5
num2%2; // 0※ /는 나눈값 이고 %는 나머지 값이다.
문자형(String type)
var str = "two"; // String Type;
str = 'three'; // '' 로 해도 된다.
var a = "3";
var ab = "2";
a+ab; // "32"
" " 와 ' ' 의 차이
document.write('<span class="num">', 2018, "</spen>");
document.write("<span class='num'>", 2018, "</spen>")
console.log("I'm apple");
// 때에 따라 자유롭게 사용하면 된다.논리형(Boolean Type)
var age = 12;
age > 11; // true
age > 13; // false
var c = "true";
c+true; // 2
c+false; // 1
Undefined vs null
var a;
typeof a; // undefined
var b = null;
typeof b // object
null을 object로 인식하는 것은 JavaScript의 대표적인 오류 중 하나다. 원래 null이 NULL 포인터 였기 때문에 object로 인식한다. 자세한 부분은 여기서 참고하자.
undefined는 정의되지 않았다는 뜻으로 값이 할당되지 않았다는 뜻이고, null은 값이 유효하지 않다는 말이다. 얼핏보면 '없음' 이라는 의미로 비슷해보이지만 둘은 다르다.
var a; // undefinde (정의되지 않음)
var a = undefined; // undefinde (변수에 정의 했는데 undefinde)위와 같이 '없음' 을 나타내기 위해 undefined를 사용할 시 혼동이 올 수 있으므로 null을 사용하는 것이 좋다.
그렇다고 '없음' 이라는 의미를 나타내기 위해 null을 중구난방 사용하는 것은 좋지 않다. 객체의 경우 속성이 부재할 시 그냥 속성을 작성하지 않는다. (자세한 것은 객체 참조)
var obj = {
name : "이름",
age : null // x
};
var obj = {
name : "이름"
}; // o복합형
var arr = [1, "two", true, false, undefined, null]; var obj = {
name : "name",
age : 20,
job : "Student",
pet : false
};앞서 말했듯, Array와 Object는 여러가지 자료형(Data type)을 넣을 수 있다. 자세한 부분은 06과 07을 참조하자.
연산자 (위에 참조)
var a+b;
1+2; // 3
var c = 3;
c-1; // 2
var d = 10;
var e = 2;
d%e; // 0
var f = 20;
var g = 4;
var ff = f/g;
ff; // 5var a = 10;
var b = a++;
console.log(b); // 10
var c = 10;
var d = ++c;
console.log(d); // 11
console.log(b); // 11
console.log(d); // 11var a = 3;
var b = 4;
a == b; // false
var d = 4;
b == d; // true
var a = "2";
var b = 2;
a == b; // true
a === b; // false연산자는 기본 사칙연산을 일컷는다. 증감 연산자는 a++는 나중에 ++a는 먼저 증가가 (혹은 감소가) 된다는 것이 특징이다. 비교 연산자는 == 보다 === 가 더 엄격하다.
논리 연산자
var a = 5;
var b = 6
a > 5 || b > 7; // false
a > 5 || b === 6; // true
a > 4 || b > 5; // truevar a = 5;
var b = 6;
a > 5 && b > 6; // false
a === 5 && b > 7; // false
a > 4 && b > 5; // truevar isDog = false;
!isDog // true논리 연산자 OR (||) 은 둘 중 하나만 true여도 true다. AND (&&)는 둘 다 true여야 true다. NOT (!) 은 원래 값에서 반대되는 값을 출력한다.
ES6
let, const는 ES6 이후 생긴 문법이다.
var a = 10;
a = 20; // 20
var a = 25 // 25
let b = 30;
let b = 35;
// Uncaught SyntaxError:
// Identifier 'b' has already been declared
b = 40; // 40
const c = 50;
c = 55;
// Uncaught SyntaxError:
// Identifier 'c' has already been declared
const c = 60;
// Uncaught TypeError: Assignment to constant variable.var은 전역변수 처럼 계속해서 재할당이 가능한 반면, let은 한번 선언한 변수 이름(식별자)에 다른 값 재할당 하면 에러가 뜬다. const는 상수 (변하지 않는) 여서 한 번 선언한 값에 다른 값을 선언하지 못 한다. (자세한 부분 Scope 참조)
Last updated
Was this helpful?