[JavaScript] 기본자료형과 문법

오늘은 가볍게 자바스크립트 기본 자료형에 대한 간략한 설명을 하겠습니다.

우선 자바스크립트 자료형은 기본타입과 참조타입으로 나뉩니다.

ES6 미만에서는 모든 변수는 var로 선언하고 할당했지만

ES6 에서는 const, let으로 선언하고 할당합니다.

const는 상수이고 let은 블록스코프 변수 입니다. 여기서는 ES6 문법으로 설명하겠습니다.

기본타입

    // 1.1 기본타입
    const num = 1;
    const str = "str";
    const bool = false;
    let und;
    let nul = null;

    console.log(num);
    console.log(str);
    console.log(bool);
    console.log(und);
    console.log(nul);

    console.log(typeof num); // number
    console.log(typeof str); // string
    console.log(typeof bool); // boolean
    console.log(typeof und); // undefined
    console.log(typeof nul); // object

참조타입

    // 1.2 참조타입
    const obj = {
      name:"jack",
      age: 32,
    };
    const arr = [1,2,3];
    const fn = () => console.log('i am a function');
    let reg = /^[0-9]+$/;

    console.log(obj);
    console.log(arr);
    console.log(fn);
    console.log(reg);

    console.log(typeof obj); // object
    console.log(typeof arr); // object
    console.log(typeof fn); // function
    console.log(typeof reg); // object

위 변수들을 크롬브라우저 개발자도구 콘솔로 보면 다음과 같습니다.

참조타입 개발자도구 콘솔

보면 object인데 __proto__ 가 다른걸 볼 수 있습니다.  Array 프로토타입에는 유용한 메소드들이 있습니다.

객체 프로퍼티와 배열 프로퍼티는 간단히 아래와 같이 접근이 가능합니다.

    // 객체 프로퍼티 접근
    console.log(obj.name); // jack
    console.log(obj["name"]); // jack

    // 객체 프로퍼티 동적 추가
    obj.car = "abante";
    console.log(obj.car); // abante

    // 배열 프로퍼티 접근
    console.log(arr[0]); // 1

    // 배열 프로퍼티 동적 추가
    arr.push(4); 
    console.log(arr[arr.length - 1]); // 4

배열과 객체는 간단히 아래와 같이 순회할 수 있습니다.

    // for in 문
    for(const a in obj) {
      console.log(a, obj[a]);
    }

    // for of 문
    for(const a of arr) {
      console.log(a);
    }

for in 문과 for of 문의 차이는 iterator가 있냐 없냐의 차이입니다. 배열로 선언된경우 for of 문을 돌리면되고 객체인경우 for in문을 쓰면 됩니다.

자바스크립트에서 연산자 + 

    // 2.연산자 + 
    const add1 = 1 + 2;
    const add2 = 'i am' + 'a girl';
    const add3 = 1 + '2' + 1;
    const add4 = 1 + 2 + '1';

    console.log(add1); // 3
    console.log(add2); // i am a girl
    console.log(add3); // 121
    console.log(add4); // 31

    console.log(typeof add1); // number
    console.log(typeof add2); // string
    console.log(typeof add3); // string
    console.log(typeof add4); // string

위와 같이 동작합니다. 왼쪽에서 오른쪽으로 한번이라도 문자열을 만날경우 문자열로 변환되며 + 는 산술연산이 아닌 문자열 합치기 동작을 수행합니다.

자바스크립트 NaN

    // NaN (Not a Number).
    // 어떤 연산을 시행했을때 계산할 수 없는경우 NaN이라고 표현.
    // 자바스크립트에서는 문자열이라도 계산할수 있는경우 자동 변환하여 계산됨. 숫자로 지정된 문자열 등...
    const nan1 = 1 * 2;
    const nan2 = 1 * 2 * '2';
    const nan3 = 1 * 'i am a girl';
    const nan4 = '1' * 2;

    console.log(nan1); // 2
    console.log(nan2); // 4
    console.log(nan3); // NaN
    console.log(nan4); // 2

    console.log(typeof nan1); // number
    console.log(typeof nan2); // number
    console.log(typeof nan3); // number
    console.log(typeof nan4); // number

위와 같이 동작합니다. 특이한점은 NaN도 타입은 넘버 라는 점과 문자열과 숫자가 연산되어도 숫자로 변환된다는 점입니다.

Number 객체의 isNaN을 활용하면 좋습니다.

    // 그리고 NaN이 나왔을때는 Number 객체의 isNaN 메소드를 처리하면 유용함
    if(Number.isNaN(nan3)) console.log('nan3은 NaN 입니다.');

마지막으로 !! 연산자에 대해서 설명하겠습니다.

    // !!연산자.
    // 피연산자를 불린값으로 변환시켜준다.
    console.log(!!0); // false
    console.log(!!1); // true
    console.log(!!'string'); // true
    console.log(!!'0'); // true
    console.log(!!''); // false
    console.log(!!true); // true
    console.log(!!false); // false
    console.log(!!null); // false
    console.log(!!undefined); // false
    console.log(!!{}); // true
    console.log(!![]); // true

위와 같이 동작합니다. 주의할 점은 빈 객체나 배열도 true인점과 '0' 문자열은 true 라는 점입니다.

이상 오늘은 간략한 자바스크립트 기본자료형과 문법에 대해서 다뤄봤습니다.

감사합니다.