Skip to content

0531.md

Latest commit

 

History

History
191 lines (165 loc) · 6.79 KB

0531.md

File metadata and controls

191 lines (165 loc) · 6.79 KB

JavaScript 연산자

증감 연산자

  • 숫자 데이터를 증감 시키는 연산자
  • 변수에 적용되는 위치에 따라 연산 순서가 달라진다. (선연산, 후연산)
  • ++ (증가 연산자)

데이터 값을 1 증가 시킨다.

var k = 1;  // k : 1
k++;        // k : 1
++k;        // k : 3
  • -- (감소 연산자)

데이터 값을 1 감소 시킨다.

var k = 3;  // k : 3
k--;        // k : 3
--k;        // k : 1

할당 연산자

  • 우변의 값 좌변의 값을 연산자로 연산한 결과값을 좌변의 연산자에 할당한다.
+= -= *= /= %=
덧셈 할당 뺄셈 할당 곱셈할당 나눗셈 할당 나머지 할당

modulo(%)의 응용

정수 전체에 대하여 어떤 수 x로 나눴을때의 나머지는 0 과 x-1 사이의 정수다. 따라서 x가지의 분기를 만들때 %연산자를 응용할 수 있다. 예를 들어 carousel 등.

비교 연산자

==, === !=, !== <, >, >=, <=
피 연산자 동일 값 여부 피 연산자 비동일 값 여부 피 연산자의 크고 작은 값 비교
  • ==(!=)와 ===(!==)의 차이
    자바스크립트의 자동형변환은 ==, != 연산자 사용시에도 일어난다. 이에 대하여 데이터 형까지 같음(같지않음)을 엄격하게 검사하는 연산자가 ===(!==) 이다.

데이터 타입 검증

typeof

typeof Object

  • 객체 타입 반환

typeof의 문제점

var arr = [1,2,3,4,5];      // Array
var obj = { fisrtName : 'first', lastName : 'last' }; // Object

console.log(typeof arr);    // object
console.log(typeof obj);    // object
console.log(typeof null);   // object

배열, null을 포함하여 constructor가 객체를 구분하지 못하고 'object'를 반환한다.

Array.isArray()

Array.isArray(Object)

  • 객체가 배열인지 확인
  • 배열이면 true 값을 반환하며, 아닌경우 false를 반환한다.
Array.isArray([]);              // true
Array.isArray(new Array());     // true
Array.isArray('Array');         // false

instanceof

Object instanceof constructor

  • 객체의 생성자 확인
  • primitive type는 객체로 랩핑 되어 검사가 가능하나 불완전하다. 또한 null과 undefined에 대해선 오류를 내보낸다.
new Array()     instanceof Array;   // true
new Array()     instanceof Object;  // true
90              instanceof Number;  // false
new Number(90)  instanceof Number;  // true
null            instanceof null;    // ERR!
({})            instanceof Object;  // true, 오브젝트 리터럴 노테이션으로 생성된 오브젝트

instanceof 문제점

  1. primitive type에는 사용할 수 없다
  2. 부모 클래스에 대한 연산결과를 구분 할 수 없다

constructor

Object.constructor

  • 객체의 속성 확인
  • null, undefined 와 같이 객체가 아닌 유형에는 사용할 수 없다.
new Array().constructor === Array;      // true
false.constructor       === Boolean;    // true
null.constructor        === null;       // ERR!

분명한 데이터 타입 검증

Object.prototype.toString.call(data);

  • data 에서 Object.prototype.toString 함수를 빌려(call), 해당 객체의 타입을 반환
  • 대소문자가 구분된 [object Type] 포멧으로 반환되므로, slice와 toLowerCase 함수를 이용하여 가공한다.
function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

생성자함수 (일급함수객체)

  • 모든 생성자가 생성자로써 활용될 수 있는 능력은 prototype 프로퍼티에서 온다.
  • prototype 프로퍼티는 프로토타입 객체를 참조하며
  • 객체 생성시 new 생성자(); 참조하고 있는 프로토타입 객체로부터 구조를 상속받는다.
  • 생성된 객체의 constructor는 생성자를 참조한다.

OOP

클래스란?

OOP에서 사용자 정의 데이터 형의 프로퍼티(멤버 변수, 메소드)의 추상적 명세. 구체적인 값과 상태에 대해서 완전히 독립적이다.

객체란?

클래스의 구조 위에 구체적인 값과 상태(메모리에 할당된 상태)를 갖는다. 객체는 클래스의 instance다. 한 클래스의 객체끼리는 그 구조가 같지만 물리적으로는 완전히 불리된 존재들이다.

JavaScript Statement

Block문

코드를 묶는 기본적인 문법 대괄호({})로 범위 결정하나 변수의 범위를 정의하지는 않는다.

조건문

if ... else 문

특정 조건을 만족할 경우 수행할 블록(Block)을 정할 수 있다.

if (condition1) {
  statement_1;  //condition1이 true 일 경우 수행
}


if (condition2) {
  statement_1;  //condition2가 true 일 경우 수행
} else {
  statement_2;  //condition2가 false 일 경우 수행
}

  • else if 문을 추가하여 조건을 추가할 수 있다.

  • if 문 내부 블록이 1 line인 경우 블록문({})을 생략할 수 있다.

  • 거짓으로 판단되는 값

    • false
    • undefined
    • null
    • 0
    • NaN
    • ""

  • 축약법

  • &&, || 연산자를 이용해 소스코드를 줄일 수 있다.
condition && statement;     //condition이 true일 경우 statement 수행
condition || statement;     //condition이 false일 경우 statement 수행

switch 문

값과 조건이 일치하는 경우 하위 문장 실행

switch (expression) {
  case label_1:     // => if (expression == label_1)
    statements_1
    [break;]        // break 문을 만날때까지 수행
  case label_2:     // => if (expression == label_2)
    statements_2
    [break;]
    ...
  default:          // 일치하는 case 조건이 없을 경우 수행(생략 가능)
    statements_def
    [break;]
}

예외처리문

throw 문

  • 예외 시, 사용할 값을 포함하는 표현

throw [ String | Number | Boolean | Function ... ]

try...catch 문

try{
    // 블록 내부 구문을 수행
} catch (e){
    // try 블록에서 발생하는 예외를 처리하는 블록
} finally {
    // try-catch 수행 후 return 값과 관계없이 항시 수행
}

Chrome Dev tool

stop point

source창 (자바스크립트 파일이 열린 상태에서) 좌측 행번호를 클릭하면 javascript 실행 중 해당 행에서 실행이 일시정지 된다. 정지된 상태에서 변수의 값등을 콘솔에서 확인할 수 있다.

source prettify

source창 하단 좌측의 '{ }' 버튼을 누르면 압축된 소스코드가 읽기 쉽게 변한다.