FrontJavascript

type & operator

javascript, weirdparts

Dynamic typing

자바스크립트는 동적 타이핑 을 사용한다. 자바스크립트 엔진이 코드가 실행될 때 자동으로 변수들의 type을 확인함.

Primitive types

a single value 를 의미

undefined (아무것도 없음, 변수에 명시적으로 undefined를 할당하지 말 것)

null(아무것도 없음, 명시적으로 null 지정해도 괜찮음)

Boolean

Number

String

Symbol (ES6)

Operator

자바스크립트에서 연산자는 조금 특별한 방식으로 쓰여진 함수이다 인자들을 받아 하나의 결과값을 내는.

1
2
3
4
5
6
7
8
var num = 3 + 4;

+ (3,4);

// 어딘가에 다른 방식으로 + 라는 function이 정의되어있기에 자바스크립트에서 연산자들 사용가능
function + (a, b) {
    return // add the two numbers
}

Operator precedence (우선순위) & Associativity(연관)

Precedence - 어떤 연산을 먼저 처리 할 것인가

Associativity - 같은 우선순위를 가진 연산자끼리는 어떤걸 먼저 처리 할 것인가?

Javascript 우선순위, 연관 확인

1
2
3
4
5
6
7
// Precedence example

var a = 3 + 4 * 5;
console.log(a);

// var a = (4 * 5) + 3 
// 23
1
2
3
4
5
6
7
8
9
10
11
12
13
// Associativity example

var a = 2, b = 3, c = 4;

a = b = c;

console.log(a);
console.log(b);
console.log(c);

// assignment(=) 의 연관이 rigth-to-left 이기 때문에
// 1)b = c  2) a = b 순으로 연산, 따라서 결과는
//4 4 4

coercion

변수의 타입을 변형시키는 것

자바스크립트는 동적 타이핑 이기때문에 coercion이 빈번하게 발생

1
2
3
4
var a = 1 + '2';
console.log(a);

// '12' coercion 이 자바스크립트 엔진에 의해 자동으로 수행됨
1
2
3
4
5
6
7
Number(false) // 0
Number(true) // 1
Number(undefined) // NaN
Number(null) // 0

console.log(3 < 2 < 1); //true  왜!?!?
(연관 left-to-right) 3 < 2 = false =>0 , 0 < 1 = true

coercion 자동변환으로 편의성도 제공하지만 위의 예제처럼 개발자(사람) 관점에서는 이해할 수 없는 오류를 발생시킬 가능성 내포, 주의가 필요함

1
2
3
4
5
6
7
8
9
10
11
12
false == 0 // true
null == 0 // false
null < 1 // true

"" == 0 // true
"" == false // true

//coercion 은 코드결과 예측을 불확실하게 만들 수 있다. (특히 == 연산자)
//대신 '===', '!==' 연산자를 사용 할 것 추천

3 === 3 // true
3 === '3' // false

Existence & Booleans

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a;

if (a) // 조건문 () 안에 들어가면 Boolean 으로 coercion 된다
{
   console.log('Something is there.');
}

a = 0;

if (a) // Boolean(0) => false , 0이라는 값이 있음에도 잘못된 결과를 유발, 이때는

if (a || a === 0) {   
	console.log('Something is there.');
}

// === 연산자 우선순위에 따라 a || true 가되고 || 연산자에 따라
// 그 다음 a || true 를 따지면 최종적으로 괄호안 조건은 true 됨

//Something is there

Default Values

1
2
3
4
5
6
7
8
function greet(name) {
	// default value 지정하는 법
	name = name || '<Your name here>'; 
    console.log('Hello ' + name);
}

greet('Tony'); //Hello Tony
greet(); // Hello <Your name here>

Object

Context & Lexical environment

Share