WebJavaScript

191018_TIL(Unique parts in JS)

JavaScript

자바스크립트의 독특한 특징

자바스크립트는 동적 인터프리터 프로그래밍 언어이다.

자바스크립트의 범위

범위(scope)는 자바스크립트 변수에 대한 접근 권한을 정의하는 것이다.

전역 선언: 전역 범위

자바스크립트에서는 키워드 없이 변수를 선언하면 암묵적으로 전역 변수를 생성한다. 자바스크립트에서 가장 좋지 않는 선언 방법이므로 사용하지 않도록 하자.

var를 사용해 선언하기: 함수 범위

변수를 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동한 것처럼 동작하는데 이를 변수 호이스팅이라고 한다.

let을 활용한 선언: 블록 범위

let을 사용해 선언된 변수는 가장 가까운 블록 범위를 갖는다. (즉, 변수가 선언된 {} 내에서 유효하다.)

등가와 형

변수형

자바스크립트에는 boolean, number, string, undefined, object, null, symbol 과 같은 일곱 개의 자료형이 있다. 특이한 점은 선언만 되고 값이 할당되지 않은 변수에 undefined가 할당된다는 것이다.

참/거짓 확인

if문 내에서 참/거짓 확인이 많이 사용된다. 많은 언어들의 경우 if()의 매개변수는 boolean형이어야 하지만 자바스크립트에서는 좀 더 유연하게 사용할 수 있다.

일반적으로 사용되는 표현식 중 false로 평가되는 경우

  • false
  • 0
  • 빈문자열(‘’, “”)
  • null
  • undefined
  • NaN

=== vs ==

자바스크립트는 스크립트 언어이고 변수 선언 시 변수에 형이 할당되지 않는다. 대신에 코드가 실행될 때 해당 변수의 형이 해석된다.

  • ==는 값만을 확인하다.
  • 반면에 ===는 형과 값 모두 확인한다.

객체

1
2
3
4
5
var o1 = {};
var o2 = {};

o1 == o2 // false
o1 === o2 // false

위 두 객체는 동일한 속성과 값을 지님에도 == 과 ===로 평가 시 동일하지 않다는 결과가 반환된다. 그 이유는 두 객체가 할당된 변수의 메모리 상 주소가 다르기 때문이다.

두 객체의 속성과 값이 같은지 비교하기 위해서는 속성 기반 등가 비교 방식으로 함수를 구현해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function isEquivalent(a, b) {
    // 속성 이름 배열
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // 속성 길이가 다른 경우 두 객체는 다른 객체다.
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // 속성 값이 다른 경우 두 객체는 다른 객체다.
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // 모든 것이 일치하면 두 객체는 일치한다.
    return true;
}
isEquivalent({'hi':12},{'hi':12}); // returns true
1
2
3
4
5
// 'prop2'의 속성 값이 함수이기 때문에 !== 로 평가 시 메모리 상 주소가 다르기 때문에 생각한 바와 같은 결과가 나오지 않는다.
var obj1 = {'prop1': 'test','prop2': function (){} };
var obj2 = {'prop1': 'test','prop2': function (){} };

isEquivalent(obj1,obj2); // returns false

결론적으로 == 와 ===는 객체의 속성을 기반으로 등가를 비교하고 싶을 때는 적절하지 않다. 객체의 속성을 기반으로 등가 확인을 구현하려면 객체의 각 속성을 확인해야 한다.

Share