[JavaScript] 변수/연산자/타입

JavaScript의 버전

자바스크립트의 버전은 ECMAScript(줄여서 ES)의 버전에 따라서 결정되고, 이를 자바스크립트 실행 엔진이 반영한다.

ES5, ES6(ES2015)... 이런식으로 버전을 일컫는다.

2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇년간 ES6문법이 표준으로 쓰이는 상황이다.

ES6는 ES5문법을 포함하고 있어서 하위호환성 문제가 없다. 다만 feature별로 지원하지 않는 브라우저가 있을 수 있어 조심해야 한다.

변수

변수는 var, let, const로 선언할 수 있다. 어떤 것을 사용하는 가에 의해서 scope라는 변수의 유효범위가 달라진다.

ES6이전에는 var만을 사용해서 변수를 선언할 수 있었다. 

컴파일 단계가 없는 자바스크립트의 type은 실행단계에서 결정된다.

지정된 초기값이 없이 var 혹은 let을 이용해서 선언된 변수는 undefined 값을 가지며, 선언되지 않은 변수에 접근을 시도하는 경우에는 ReferenceError 예외가 발생된다.

var a;
console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.
 
console.log('b 값은 ' + b); // b 값은 undefined
var b;
 
console.log("c 값은 " + c); // ReferenceError 예외 던짐
 
let x;
console.log('x 값은 ' + x); // x 값은 undefined
 
console.oog('y 값은 ' + y); // ReferenceError 예외 던짐

- var

지역 및 전역 변수를 선언하는데 모두 사용될 수 있다.

같은 변수에 새로운 값을 재할당하는 것이 가능하다.

var a = 2;
var b = "aaa";
var c = 'aaa';
var d = true;
var a = [];
var b = {};
var c = undefined;

- const

읽기 전용 상수로, 한번 할당한 값에 재할당이 되지 않는다.

스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없으며, 값으로 초기화해야 한다.

같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없다.

// 오류가 발생합니다
function f() {};
const f = 5;
 
// 역시 오류가 발생합니다
function f() {
  const g = 5;
  var g;
}

그러나, 상수에 할당된 객체의 속성과, 배열의 내용은 보호되지 않아서 다음은 문제없이 실행된다.

const MY_OBJECT = {'key': 'value'};
MY_OBJECT.key = 'otherValue';
const MY_ARRAY = ['HTML','CSS'];
MY_ARRAY.push('JAVASCRIPT');
console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];

- let

블록 범위(scope) 지역 변수이다.

변수의 범위

if (true) {
  var x = 5;
}
console.log(x); // 5
 
if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y is not defined

var의 경우에는 x의 범위가 if문 블록이 아닌 x가 선언된 함수 또는 전역이다.

let의 경우에는 지역변수로 동작하기 때문에 선언되지 않았다고 판단하여 예외가 발생한다.

연산자

연산자 우선순위를 표현하기 위해서는 ()를 사용하면 된다.

수학연산자는 +, -, *, /, % 등이 있다.

논리연산자, 관계연산자, 삼항연산자, 비교연산자도 있다.

- 논리연산자

//or 연산자 활용
const name = "hh_lin";
const result = name || "tistory";
console.log(result);    // hh_lin
const name = "";
const result = name || "tistory";    
console.log(result);    // tistory

변수 name에 값을 할당하지 않으면 false로 인식하고 값이 할당되어 있으면 true로 인식한다.

비교대상이 모두 true인 경우 OR연산자의 경우 왼쪽 값을, AND연산자의 경우 오른쪽값을 택한다.

- 삼항연산자

const data = 11;
const result = (data > 10) ? : "ok" : "fail";
console.log(result);    // ok

- 비교연산자

==로 인한 다양한 오류 상황이 있기 때문에 비교는 ==보다는 ===를 사용한다.

===의 경우에는 타입까지 비교한다.

0 == false;            // true
"" == false;           // true
null == false;         // false
0 == "0";              // true
null == undefined;     // true

타입

자바스크립트 타입에는 다양한 것이 존재한다.

undefined, null, boolean, number, string, object, function, array, Date, RegExp

타입은 선언할 때가 아니고, 실행타임에 결정된다. 함수 안에서의 파라미터나 변수는 실행될 때 그 타입이 결정된다.(dynamic type)

function run(a) {
    console.log(typeof a);
}
run("hh_lin");        // string
run(false);            // boolean

타입을 체크하는 또렷한 방법은 없다. 정확하게는 toString.call 함수를 이용해서 그 결과를 매칭하고는 하는데, 문자, 숫자와 같은 자바스크립트 기본 타입은 'typeof' 키워드를 사용해서 체크할 수 있다.

Object.prototype.toString.call([])                // "[object Array]"
Object.prototype.toString.call(function(){})      // "[object Function]"
Object.prototype.toString.call({})                // "[object Object]"
Object.prototype.toString.call(null)              // "[object Null]"
Object.prototype.toString.call(undefined)         // "[object Undefined]"
Object.prototype.toString.call(/./g)              // "[object RegExp]"
Object.prototype.toString.call(new Date())        // "[object Date]"

배열은 타입을 체크하는 isArray함수가 표준으로 생겼다.

function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = document.getElementById("demo");
    x.innerHTML = Array.isArray(fruits);
}

IE와 같은 구 브라우저를 사용해야 한다면 지원범위를 살펴보고 사용해야한다.

undefined의 경우 boolean 문맥에서 사용될 때는 false로, 수치 문맥에서 사용될 때는 NaN으로 변환된다.

null의 경우 boolean 문맥에서 사용될 때는 false로, 수치 문맥에서 사용될 때는 0으로 변환된다.

참고자료

https://www.edwith.org

https://gist.github.com/pbakondy/f442e91995e9d206c056

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_isarray

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Data_structures_and_types