TIL_170926 Data type(자료형), Control Flow(제어문)

Data type (자료형)

  • 기본자료형 6개 + 객체형 1개 = 총 7개

1. 기본자료형 (primitive data type)

  • 변경 불가능한 값 (immutable value)
  • Pass-by-value: 값에 의한 전달 (재할당 시, 해당 값을 복사)
    1
    2
    3
    var num = 10;
    var x = num;
    // 이때 x는 num의 값을 복사하여 새로운 메모리 공간에 할당
  1. Boolean: true, false
  2. null: 의도적으로 변수값이 없음을 나타냄 (false로 취급)
  3. undefined: 값을 할당하지 않은 변수의 값 (false로 취급)
  4. Number: 정수, 실수, 음의 정수, infinity, NaN
  5. String: ‘’, “” 로 사용하는 문자열
  6. Symbel : ECMAScript 6에서 추가, 유일무이한 프로퍼티 키

2. 객체형 (Objective data type)

  • 참조형이라고도 불림
  • 기본자료형을 제외한 나머지 값들 (배열, 함수, 정규표현식 등)

변수

  • 앞 문자는 영문자, underscore, $ 로 시작해야함
  • 이후 숫자 사용도 가능
  • 대소문자 구별
  • 문법적으로는 중복선언이 가능하나, 사용 비추천 (의도하지 않게 변수값을 변경할 수 있음)
  • var키워드 생략을 허용하나, 전역변수가 됨으로 사용 비추천
  • 동적 타이핑: undefined, object, number, String등 여러 데이터 타입을 가질 수 있음
  • Function-level scope

변수 호이스팅

변수의 3단계 생성과정

  1. 선언 단계
  2. 초기화 단계
  3. 할당 단계
  • 변수는 선언단계와 초기화단계가 한번에 이루어짐
  • 스코프에 변수를 등록 > 메모리에 공간을 확보 > ‘undefined’로 값을 초기화
  • 변수를 할당해야만, 3단계 할당 단계가 진행
  • 즉, 선언하지 않은 변수의 값을 출력하면 ‘undefined’값을 반환 (JS 특징)

5. 연산자

산술연산자

  1. 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지, 증가(++), 감소(–)
  2. 증가, 감소 연산자의 위치에 따른 연산방법
    • ++ : 선대입후증가 (z = x++;) / 선증가후대입 (z = ++x;)
    • – : 선대입후감소 (z = x–;) / 선감소후대입 (z = –x;)
  3. ‘+’연산자는 좌항 or 우항에 문자열이 있을 시, 문자열로 더함

대입연산자

  • = : 우항값을 좌항에 대입함 (수학의 ‘같다’와 다름)
  • 단축표기법 (ex: x += y —-> x = x + y)

비교연산자

  1. == 과 === 의 차이

    1. == (동등비교, loose equality)

      • 자료의 타입을 강제변환하여 비교함
      • 최대한 true 값을 가지고자 함
    2. === (일치비교, strict equality)

      • 자료의 타입까지 일치해야 true
      1
      2
      3
      4
      5
      6
      var x = 5;
      x == 5 ; //true
      x == '5'; //true
      x === 5 //true
      x === '5'; //false
  2. ? (삼항연산자, ternary operator)

    • 조건문처럼, 조건이 true일때 반환할 값과 false일때 반환할 값 설정 가능
      1
      2
      3
      4
      // 조건 ? 조건이 ture일때 반환할 값 : 조건이 false일때 반환할 값
      var condition = true;
      var result = condition ? 'true' : 'false';
      console.log(result); // 'true'

논리연산자

  1. || (or, 논리 합 연산자)

    1
    2
    3
    4
    5
    // 둘 중 하나의 값이 true라면 true
    var o1 = true || true; // t || t returns true
    var o2 = false || true; // f || t returns true
    var o3 = true || false; // t || f returns true
    var o4 = false || (3 == 4); // f || f returns false
  2. && (and, 논리 곱 연산자)

    1
    2
    3
    4
    5
    // 둘 다 true여야만 true
    var a1 = true && true; // t && t returns true
    var a2 = true && false; // t && f returns false
    var a3 = false && true; // f && t returns false
    var a4 = false && (3 == 4); // f && f returns false
  3. ! (not, 논리 부정 연산자)

    1
    2
    3
    4
    var n1 = !true; // false
    var n2 = !false; // true
    var n3 = !'Cat'; // false
    // 빈문자열이 아닌 이상 true로 간주하여, 'Cat'은 true로 취급

단축 평가(Short-Circuit Evaluation)

  • 논리연산자가 boolean값과 함꼐 사용되지 않을 경우
  • && : 반드시 뒤의 값까지 봐야 하는 경우
  • || : 앞의 값만으로도 검사에 지장이 없는 경우
    1
    2
    3
    4
    (true || anything) // true
    (false || anything) // anything
    (true && anything) // anything
    (false && anything) // false

타입 연산자(Type-Operators)

  • typeof [sth] 피연산자의 데이터 타입을 문자열로 반환

    1
    2
    3
    console.log(typeof 'John'); // string
    console.log(typeof myCar); // undefined (설계적 결함)
    console.log(typeof null); // object (설계적 결함)
  • instanceof [sth] 객체가 동일 객체형의 인스턴스이면 true 반환

    1
    2
    3
    function Person() {}
    var me = new Person();
    console.log(me instanceof Person); // true

!!

  • 피연산자를 Boolean값으로 변환

    1
    2
    3
    4
    5
    6
    7
    8
    9
    console.log(!!1); // true
    console.log(!!0); // false
    console.log(!!'string'); // true
    console.log(!!''); // false
    console.log(!!null); // false
    console.log(!!undefined); // false
    console.log(!!{}); // true
    console.log(!![]); // true
    // 빈 객체라도 존재하기만 하면 true로
  • 객체의 존재를 확인할때도 유용하게 쓰임

    1
    2
    3
    4
    5
    var obj;
    console.log(!!obj); // false
    obj = {};
    console.log(!!obj); // true

제어문

블록구문

  • 불록구문: 구문들의 집합
  • 함수, 객체리터럴, 흐름제어구문 등에서 사용
  • {} 중괄호 사이를 블록구문이라고 함.

    조건문

  1. if문

    1
    2
    3
    4
    5
    6
    7
    if (조건식A) {
    // 조건식A가 참이면 이 코드블록이 실행
    } else if (조건식B) {
    // 조건식A가 거짓이고 조건식B가 참이면 이 코드블록이 실행
    } else {
    // 조건식A, B가 모두 거짓이면 이 코드블록이 실행
    }
  2. switch문

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 선택형 조건일 경우 사용할 수 있음
    // 그러나 현업에서 거의 쓰이지 않음
    // break; 를 잊지 말되 마지막엔 생략가능
    var color = 'red';
    switch (color) {
    case 'yellow':
    console.log('yellow color');
    break;
    case 'red':
    console.log('red color');
    break;
    case 'blue':
    console.log('blue color');
    break;
    default:
    console.log('unknown color');
    }

반복문

  1. for문
  • for문은 그 실행순서가 중요
  • 초기문에서 사용된 변수는 전역변수로 처리(ES5 특징)
  • 모든 식은 선택사항임 (어떤식도 쓰지 않으면 무한루프)
    1
    2
    3
    4
    5
    6
    7
    8
    for ([초기문]; [조건문]; [증감문]) {
    구문;
    }
    // 예시: 0부터 10미만의 모든 정수 출력
    for (var i = 0; i < 10; i++) {
    console.log(i);
    }
  1. while문
  • 조건문이 참이면 코드블럭을 계속 반복실행
  • (조건문이 언제나 참일경우)무한루프를 탈출하기 위해 break 사용
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    while(조건){
    // 조건이 참이면 구문을 실행
    // 조건이 거짓일 때까지 반복
    구문;
    }
    // 예시: n이 3보다 작을 때까지 계속 반복
    while (n < 3) {
    n++;
    x += n;
    console.log(x);
    }
  1. do while문
  • while과 거의 비슷하나 조건문을 확인하기 전에 무조건 1회 실행
    1
    2
    3
    4
    5
    6
    // 현업에서 거의 쓰이지 않는다.
    var i = 0;
    do {
    console.log(i);
    i++;
    } while (i < 3);
  1. continue
  • break문은 반복문 하나를 탈출하는 반면, continue는 이후 구문을 스킵 후, 반복문의 조건문으로 이동
    1
    2
    3
    4
    5
    6
    7
    8
    9
    for (var i = 0; i < 10; i++) {
    if (i % 2 == 0) continue;
    console.log(i);
    }
    // 1
    // 3
    // 5
    // 7
    // 9

평가

  1. 암묵적 강제 형 변화
  • JavaScript에서는 조건식을 평가할 때 여러 환경의 문맥(context)을 고려하여 최대한 참/거짓의 boolean값으로 해석하려 노력한다. 이때 암묵적인 강제 형 변화가 발생
  • 이를 통해 조건식을 평가한다.
  • 이때 의도하지 않은 값이 만들어질 수 있어 주의가 필요.
  1. Type Conversion table
  1. Data type conversion
  • string -> number

    1
    2
    3
    4
    5
    6
    var val = '123';
    val = +val; // unary "+" operator
    // val = val * 1;
    // val = parseInt(val);
    // (비추) val = Number(val);
  • number -> string

    1
    2
    3
    4
    5
    var val = 123;
    val = val + '';
    // val = val.toString();
    // (비추) val = String(val);
  1. Truthy & Falsy values
  • 긍정적인 느낌은 true, 부정적인 느낌은 false
  • false으로 간주되는 대표적인 (Falsy values)
    • false
    • undefined
    • null
    • 0
    • NaN
    • '' (빈 문자열)
  1. Checking equality
    • 타입까지 비교해주는 일치연산자(===, !===) 사용 권장
  2. Checking Existence
    • 객체나 배열(배열도 객체)이 값을 갖고 있다면 true로 간주
    • 요소의 존재 -> true, 존재하지 않음 -> false
    • 하지만 간주된다는 것이지 실제 boolean값 true와 같지 X

오늘의 느낀점

  • 어떤 것을 변수로, 어떤 제어문을, 어떤 구문으로 표현하는가에 대한 고민을 할수록 양질의 코딩을 할 수 있다
  • ‘다들 그렇게 사용하니까’ 보다는 ‘왜’ 그렇게 짰는지가 중요하다
  • 그러려면 자료형 별 기본적인 특성과 각 제어문의 특징을 잘 파악해두자