03. 변수(variable)

with 양지은

변수(variable)란?

파파고 번역본 참조

https://sites.google.com/site/citcluster/programming-vocab/variable

변수는 변할 수 있는 값을 담는 공간이다. 가방 안에 필통을 넣었다가 빼고책을 넣었다가 다시 알림장을 넣는다고 가정해보자. 그 상태에서 가방은 변수이고 필통과 책, 알림장은 값이 되는 것이다. (JavaScript 변수는 Variable의 var을 따와 사용한다.)

First Tab

var bag = "필통";
bag = "책";
bag = "알림장"
console.log(bag); // "알림장"

console.log()는 지금은 가볍게 넘어가도록 하자.

또한 변수는 키워드(Keyword), 식별자(identifier), 자료형(DataType)으로 나뉜다.

var a = 2; 
// var keyword
// a identifier
// 2 DataType

First Tab

let c = 2;
let c = 3;

Second Tab

let은 var과 같은 변수 키워드다.

위와 같이 영문 이름을 잘 알고 있으면 디버깅(오류 고치기) 할 때 유용하다. 내가 어디서 오류 났는지 쉽게 파악할 수 있기 때문에 반드시 알아둬야 한다.

여기서 헷갈릴만한 점이 또 있다. JavaScript 변수는 변수 타입이 딱히 없다는 것이다. var, let, const (나중에 설명할 상수 키워드) 와 같이 키워드만 선언해주고 자료형(Data type)을 다르게 주면 된다.

First Tab

var age = 20;
var name = "이름";
// JavaScript

Second Tab

int age = 20;
char *name = "이름";
// C언어

자료형(Data Type) 이란?

앞에서 얘기한 자료형(Data type)이란 그럼 무엇일까?

https://tutorial.eyehunts.com/js/javascript-data-types-and-examples/

쉽게 말해 컴퓨터가 처리하는 자료의 형태를 일컷는다. var a = 2; 라는 값은 Number로 var b = "two" 라는 값은 String으로 처리한다는 말이다.

JavaScript 변수 타입은 쉽게 원시 (Primitive) 타입과 객체 (Object) 타입으로 나뉘지만 책에서는 기본형과 복합형으로 설명했기 때문에 기본형과 복합형으로 설명을 덧붙이려고 한다.

First Tab

var num = 1;
var str = "one";
var boo = "true";
var undi = undefined;
var nu = null;
// 기본형

Second Tab

var arr = [1, "2", 3, false, true, null];
var obj = {
    name : "person",
    age : 20
};
// 복합형

쉽게 말해 기본형은 하나의 자료형(Data type)만 변수에 담기는 것이고, 복합형은 두 개 이상의 자료형(Data type)이 담기는 것이다.

기본형

+ * / % 등의 연산자를 사용한다. 또한 연산자를 제외한 나머지 것들을 피연산자라고 한다. 예를들어 1+2가 있다고 했을 때 +는 연산자 1과 2는 피연산자다.

숫자형(Number type)

First Tab

var num = 2; // Number Type

Second Tab

typeof 연산자를 사용하면 변수의 Data type을 알 수있다.

+ 연산자

var num = 1;
num+2;
// 3

- 연산자

var num = 1.2;
num+1.8;
// 3

* / %

var num = 2*2; // 4
var num2 = 10;
num2/2; // 5
num2%2; // 0

※ /는 나눈값 이고 %는 나머지 값이다.

문자형(String type)

First Tab

var str = "two"; // String Type;
str = 'three'; // '' 로 해도 된다.

Second Tab

+ 연산자

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)

https://blog.digilentinc.com/true-or-false-boolean-is-a-data-type/

First Tab

var age = 12;
age > 11; // true
age > 13; // false

Second Tab

true 아니면 false를 출력

+ 연산자

var c = "true";
c+true; // 2
c+false; // 1

+ 결과값

true는 1 false는 0으로 인식한다.

Undefined vs null

First Tab

var a;
typeof a; // undefined
var b = null;
typeof b // object

Second Tab

null은 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

복합형

Array

var arr = [1, "two", true, false, undefined, null]; 

Object

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; // 5

증감 연산자

var 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); // 11

비교 연산자

var 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는 먼저 증가가 (혹은 감소가) 된다는 것이 특징이다. 비교 연산자는 == 보다 === 가 더 엄격하다.

논리 연산자

OR (||)

var a = 5;
var b = 6
a > 5 || b > 7; // false
a > 5 || b === 6; // true
a > 4 || b > 5; // true

AND (&&)

var a = 5;
var b = 6;
a > 5 && b > 6; // false
a === 5 && b > 7; // false
a > 4 && b > 5; // true

! (NOT)

var isDog = false;
!isDog // true

논리 연산자 OR (||) 은 둘 중 하나만 true여도 true다. AND (&&)는 둘 다 true여야 true다. NOT (!) 은 원래 값에서 반대되는 값을 출력한다.

ES6

ES6란? 쉽게 말해 JavaScript의 버전이다. 자세한 부분은 이쪽을 참고하자.

let, const는 ES6 이후 생긴 문법이다.

First Tab

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 참조)