TIL_170926 Data type(자료형), Control Flow(제어문)
Data type (자료형)
- 기본자료형 6개 + 객체형 1개 = 총 7개
1. 기본자료형 (primitive data type)
- 변경 불가능한 값 (immutable value)
- Pass-by-value: 값에 의한 전달 (재할당 시, 해당 값을 복사)123var 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
- 비교연산자 표
== 과 === 의 차이
== (동등비교, loose equality)
- 자료의 타입을 강제변환하여 비교함
- 최대한 true 값을 가지고자 함
=== (일치비교, strict equality)
- 자료의 타입까지 일치해야 true
123456var x = 5;x == 5 ; //truex == '5'; //truex === 5 //truex === '5'; //false
? (삼항연산자, ternary operator)
- 조건문처럼, 조건이 true일때 반환할 값과 false일때 반환할 값 설정 가능1234// 조건 ? 조건이 ture일때 반환할 값 : 조건이 false일때 반환할 값var condition = true;var result = condition ? 'true' : 'false';console.log(result); // 'true'
- 조건문처럼, 조건이 true일때 반환할 값과 false일때 반환할 값 설정 가능
논리연산자
|| (or, 논리 합 연산자)
12345// 둘 중 하나의 값이 true라면 truevar o1 = true || true; // t || t returns truevar o2 = false || true; // f || t returns truevar o3 = true || false; // t || f returns truevar o4 = false || (3 == 4); // f || f returns false&& (and, 논리 곱 연산자)
12345// 둘 다 true여야만 truevar a1 = true && true; // t && t returns truevar a2 = true && false; // t && f returns falsevar a3 = false && true; // f && t returns falsevar a4 = false && (3 == 4); // f && f returns false! (not, 논리 부정 연산자)
1234var n1 = !true; // falsevar n2 = !false; // truevar n3 = !'Cat'; // false// 빈문자열이 아닌 이상 true로 간주하여, 'Cat'은 true로 취급
단축 평가(Short-Circuit Evaluation)
- 논리연산자가 boolean값과 함꼐 사용되지 않을 경우
- && : 반드시 뒤의 값까지 봐야 하는 경우
- || : 앞의 값만으로도 검사에 지장이 없는 경우1234(true || anything) // true(false || anything) // anything(true && anything) // anything(false && anything) // false
타입 연산자(Type-Operators)
typeof [sth]
피연산자의 데이터 타입을 문자열로 반환123console.log(typeof 'John'); // stringconsole.log(typeof myCar); // undefined (설계적 결함)console.log(typeof null); // object (설계적 결함)instanceof [sth]
객체가 동일 객체형의 인스턴스이면true
반환123function Person() {}var me = new Person();console.log(me instanceof Person); // true
!!
피연산자를 Boolean값으로 변환
123456789console.log(!!1); // trueconsole.log(!!0); // falseconsole.log(!!'string'); // trueconsole.log(!!''); // falseconsole.log(!!null); // falseconsole.log(!!undefined); // falseconsole.log(!!{}); // trueconsole.log(!![]); // true// 빈 객체라도 존재하기만 하면 true로객체의 존재를 확인할때도 유용하게 쓰임
12345var obj;console.log(!!obj); // falseobj = {};console.log(!!obj); // true
제어문
블록구문
if문
1234567if (조건식A) {// 조건식A가 참이면 이 코드블록이 실행} else if (조건식B) {// 조건식A가 거짓이고 조건식B가 참이면 이 코드블록이 실행} else {// 조건식A, B가 모두 거짓이면 이 코드블록이 실행}switch문
123456789101112131415161718// 선택형 조건일 경우 사용할 수 있음// 그러나 현업에서 거의 쓰이지 않음// 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 특징)
- 모든 식은 선택사항임 (어떤식도 쓰지 않으면 무한루프)12345678for ([초기문]; [조건문]; [증감문]) {구문;}// 예시: 0부터 10미만의 모든 정수 출력for (var i = 0; i < 10; i++) {console.log(i);}
- while문
- 조건문이 참이면 코드블럭을 계속 반복실행
- (조건문이 언제나 참일경우)무한루프를 탈출하기 위해 break 사용123456789101112while(조건){// 조건이 참이면 구문을 실행// 조건이 거짓일 때까지 반복구문;}// 예시: n이 3보다 작을 때까지 계속 반복while (n < 3) {n++;x += n;console.log(x);}
- do while문
- while과 거의 비슷하나 조건문을 확인하기 전에 무조건 1회 실행123456// 현업에서 거의 쓰이지 않는다.var i = 0;do {console.log(i);i++;} while (i < 3);
- continue
- break문은 반복문 하나를 탈출하는 반면, continue는 이후 구문을 스킵 후, 반복문의 조건문으로 이동123456789for (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
123456var val = '123';val = +val; // unary "+" operator// val = val * 1;// val = parseInt(val);// (비추) val = Number(val);number -> string
12345var 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
오늘의 느낀점
- 어떤 것을 변수로, 어떤 제어문을, 어떤 구문으로 표현하는가에 대한 고민을 할수록 양질의 코딩을 할 수 있다
- ‘다들 그렇게 사용하니까’ 보다는 ‘왜’ 그렇게 짰는지가 중요하다
- 그러려면 자료형 별 기본적인 특성과 각 제어문의 특징을 잘 파악해두자