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

Sunny's Blog

2017-09-26

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의 값을 복사하여 새로운 메모리 공간에 할당

Boolean: true, false
null: 의도적으로 변수값이 없음을 나타냄 (false로 취급)
undefined: 값을 할당하지 않은 변수의 값 (false로 취급)
Number: 정수, 실수, 음의 정수, infinity, NaN
String: ‘’, “” 로 사용하는 문자열
Symbel : ECMAScript 6에서 추가, 유일무이한 프로퍼티 키

2. 객체형 (Objective data type)

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

변수

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

변수 호이스팅

변수의 3단계 생성과정

선언 단계
초기화 단계
할당 단계

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

5. 연산자

산술연산자

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

대입연산자

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

비교연산자

반환값의 타입이 Boolean
비교연산자 표

== 과 === 의 차이
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

? (삼항연산자, ternary operator)

조건문처럼, 조건이 true일때 반환할 값과 false일때 반환할 값 설정 가능

// 조건 ? 조건이 ture일때 반환할 값 : 조건이 false일때 반환할 값
var condition = true;
var result = condition ? 'true' : 'false';
console.log(result); // 'true'

논리연산자

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

// 둘 중 하나의 값이 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

&& (and, 논리 곱 연산자)

// 둘 다 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

! (not, 논리 부정 연산자)

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

단축 평가(Short-Circuit Evaluation)

논리연산자가 boolean값과 함꼐 사용되지 않을 경우
&& : 반드시 뒤의 값까지 봐야 하는 경우

|| : 앞의 값만으로도 검사에 지장이 없는 경우

(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값으로 변환

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로

객체의 존재를 확인할때도 유용하게 쓰임

var obj;
console.log(!!obj); // false
obj = {};
console.log(!!obj); // true

제어문

블록구문

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

if문

if (조건식A) {
  // 조건식A가 참이면 이 코드블록이 실행
} else if (조건식B) {
  // 조건식A가 거짓이고 조건식B가 참이면 이 코드블록이 실행
} else {
  // 조건식A, B가 모두 거짓이면 이 코드블록이 실행
}

switch문

// 선택형 조건일 경우 사용할 수 있음
// 그러나 현업에서 거의 쓰이지 않음
// 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');
}

반복문

for문

for문은 그 실행순서가 중요
초기문에서 사용된 변수는 전역변수로 처리(ES5 특징)

모든 식은 선택사항임 (어떤식도 쓰지 않으면 무한루프)

for ([초기문]; [조건문]; [증감문]) {
  구문;
}
// 예시: 0부터 10미만의 모든 정수 출력
for (var i = 0; i < 10; i++) {
  console.log(i);
}

while문

조건문이 참이면 코드블럭을 계속 반복실행

(조건문이 언제나 참일경우)무한루프를 탈출하기 위해 break 사용

while(조건){
  // 조건이 참이면 구문을 실행
  // 조건이 거짓일 때까지 반복
  구문;
}
// 예시: n이 3보다 작을 때까지 계속 반복
while (n < 3) {
  n++;
  x += n;
  console.log(x);
}

do while문

while과 거의 비슷하나 조건문을 확인하기 전에 무조건 1회 실행

// 현업에서 거의 쓰이지 않는다.
var i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

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

평가

암묵적 강제 형 변화

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

Type Conversion table

표 보기

Data type conversion

string -> number

var val = '123';
val = +val; // unary "+" operator
// val = val * 1;
// val = parseInt(val);
// (비추) val = Number(val);

number -> string

var val = 123;
val = val + '';
// val = val.toString();
// (비추) val = String(val);

Truthy & Falsy values

긍정적인 느낌은 true, 부정적인 느낌은 false
false으로 간주되는 대표적인 (Falsy values)
- false
- undefined
- null
- 0
- NaN
- '' (빈 문자열)

Checking equality
- 타입까지 비교해주는 일치연산자(===, !===) 사용 권장
Checking Existence
- 객체나 배열(배열도 객체)이 값을 갖고 있다면 true로 간주
- 요소의 존재 -> true, 존재하지 않음 -> false
- 하지만 간주된다는 것이지 실제 boolean값 true와 같지 X

오늘의 느낀점

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