[javascript] 12-07 javascript study

2021-12-07

12-07 (화)

  1. 대괄호를 사용해서 키값을 변수로 지정할 수 있음

     const property = 'name';
        
     const obj = {
       [property]: 'Ken Huh'
     };
        
     obj.property;  // undefined
     obj.name;      // 'Ken Huh'
    

    위와 같이 대괄호를 사용해서 다른 변수에 저장된 문자열을 속성(Key)의 이름으로 쓰는 것도 가능합니다.

  2. 실제 코드에서, 존재하는 변수들을 속성 이름의 value로 빈번히 사용한다. 예를 들면 아래처럼..

     function makeUser(name, age) {
       return {
         name: name,
         age: age,
         // ...other properties
       };
     }
        
     let user = makeUser("John", 30);
     alert(user.name); // John
    

    위의 예시와 같이, 프로퍼티들은 매개변수들과 똑같은 이름들을 가지는 경우가 있다. 이렇게 속성을 만드는 사용법은 매우 공통적이다. 특정 프로퍼티의 값의 속기로 매우 단축해서 쓸 수 있다.

    name:name 과 같이 표기하는 대신에 name 만 쓰는 것처럼, 아래와 같이 말이다.

     function makeUser(name, age) {
       return {
         name, // same as name: name
         age,  // same as age: age
         // ...
       };
     }
    
  3. 속성의 존재 여부를 체크할 때 쓰이는 in operator

    다른 언어들과 달리, 자바스크립트 객체의 눈에 띄는 특징 중 하나는, 어떤 속성이든 접근가능하다는 점이다. 심지어 존재하지 않는 속성도 에러를 뱉지 않는다.

    존재하지 않는 속성은 그저 undefined 를 리턴할 뿐이고, 그래서 우리는 그걸로 속성이 존재하는지 아닌지 쉽게 테스트할 수 있다.

     let user = {};
        
     alert( user.noSuchProperty === undefined ); // true means "no such property"
    

    그리고 또한 in 이라는 특별한 오퍼레이터도 있다.

     "key" in object
        
     let user = { name: "John", age: 30 };
        
     alert( "age" in user ); // true, user.age exists
     alert( "blabla" in user ); // false, user.blabla doesn't exist
    

    속성이름은 in 오퍼레이터로부터 꼭 왼쪽 방향에 위치해야할 것임을 기억해라. 그리고 그것은 보통 따옴표로 나타낸다. 만약 우리가 변수가 선언이 된 채로 따옴표를 생략한다면, 실제로 선언된 변수값으로 테스트가 될 것이다. 아래처럼 말이다

     let user = { age: 30 };
        
     let key = "age";
     alert( key in user ); // true, property "age" exists
    

    in 오퍼레이터가 존재하는걸까? undefined 으로 속성의 존재여부를 판단하는걸로 충분하지 않나?

    사실상 대부분 undefined 를 통한 비교는 잘 돌아가긴 한다. 하지만 그런 비교가 안통하는 몇몇 특수한 경우가 있다. 그럴 때 in 오퍼레이터가 통한다.

    객체의 속성이 존재는 하되, undefined 란 값이 담겨져있을 때 그러하당

     let obj = {
       test: undefined
     };
        
     alert( obj.test ); // it's undefined, so - no such property?
        
     alert( "test" in obj ); // true, the property does exist!
    

    상기 코드에서, obj.test는 기술적으로 존재하고, in 오퍼레이터는 잘 동작한다. 위와 같은 상황이 흔하진 않다. 왜냐면 undefined를 보통 명시적으로 선언하지 않는다. 우린 거의 알수없거나 빈값일 때는 null값을 선언한다. 때문에 상기 코드는 in 오퍼레이터를 적용해서 확인할 수 있는 특이케이스라 볼 수 있다