[JavaScript] 연산자

비교 연산자

// null과 undefined 비교
console.log(null == null);  // true
console.log(undefined == undefined);    // true
console.log(undefined == null); // true,  암기를 할 것

console.log(null === null); // true
console.log(undefined === undefined);   // true
console.log(undefined === null);    // false


// 객체간 비교 (==)
var data1 = ['JavaScript', 'Ajax', 'ASP.NET'];
var data2 = ['JavaScript', 'Ajax', 'ASP.NET'];
console.log(data1 == data2); // false : 이유가 data1과 data2의 address가 틀리기 때문

// 등가 연산자 (==) : 비교하는 한쪽이 문자열, 한쪽이 숫자이면 => 문자열을 숫자로 변환
// 문자열을 숫자로 변환할 때, 숫자로 변환 가능한 부분까지만 숫자로 변환
// 모두 true
console.log('3.14E2' == 314);
console.log('0x10' == 16);
console.log('1' == 1);

// 등치 연산자 (===)
// 모두 false return
console.log('3.14E2' === 314);
console.log('0x10' === 16);
console.log('1' === 1);

console.log('< comparator');

console.log(2 < 12);
// 숫자와 string을 비교할 때 string을 숫자로 변환, 
// "John"은 숫자로 변환하면 NaN가 되고, 이 것은 무조건 false를 return함
console.log(2 < "12");
console.log(2 < "John");
console.log(2 > "John");
console.log(2 == "John");
// string들로 비교하면, string의 첫번째 문자값(ascii code값)이 큰 것을 기준으로 비교
console.log("2" < "12");
console.log("2" > "12");
console.log("2" == "12");

// 3항 연산자 (? :)
var x = 80;
console.log((x >= 70) ? '합격' : '불합격');

개인적으로 == 와 ===가 자바 스크립트에서 젤 특이한 것 같다. ==는 형변환을 해주어서 비교를 한다.

하지만 ===는 형변환을 안 하고 비교한다. 

 

이게 또 웃긴게 undefiend == null는 참인데 

undefined === null은 거짓이란다;;

 

그리고 배열은 또 비교를 못한단다;;;; 주소가 다르다나 뭐라나

왜 여기서만 까다롭게 구는지 모르겠다. 기준을 잘 모르겠다. 

 

또 숫자랑 비교할 때 john과 같은 단어는 NaN이 된다. 때문에 False가 된다. 

이게 뭔;;;

 

하지만 "12"와 2를 비교하면 12는 숫자가 된다.

아니 아까는 string으로 바꾸더니 여기서는 숫자로 바꾼다. 

근데 또 웃긴게 "12" < "2"는 스트링으로 받아서 첫번째 스트링을 비교한다고...

 

3항 연산자는 다른 곳에서도 쓰는 것이라 같다..

 

논리 연산자 

var x = 1;
var y = 2;

console.log(x === 1 && y === 1);    // false
console.log(x === 1 || y === 1);    // true


var x = 1;

// A && B => A가 true이면 B를 강제 실행
if (x === 1) { console.log('안녕하세요'); }
x ===1 && console.log('안녕하세요');

// A || B => A가 false이면 B를 강제 실행
var msg = '';   // empty string '' => false
// msg = '이미 메세지가 있습니다';
// msg값을 초기화할 때, 많이 사용하는 방식
msg = msg || '안녕하세요, 자바스크립트!';
console.log(msg);

논리 연산자는 우리가 아는 것이랑 비슷하다. C언어의 논리 연산자랑 비슷한 느낌이다. 

여기서 if가 좀 웃기게 동작한다. if를 &&처럼 쓸 수 있다. 아니지 &&를 if처럼 쓰는 것이다.

그니까 앞에 것이 참이면 뒤에 것을 실행하게 하는 것이다. 왜 인지는 모르겠다....

그냥 너무 근본 없는 언어인 것 같다...

 

그리고 if False로 쓰려면 ||를 쓰면 된다. 왜냐고? 몰라~

 

삭제

var ary = ['JavaScript', 'Ajax', 'ASP.NET'];
console.log(delete ary[0]);
console.log(ary);

var obj = {x:1, y:2};
console.log(delete obj.x);
console.log(obj.x);

var obj2 = {x:obj, y:2};
console.log(delete obj2.x);
console.log(obj);

var data1 = 1;
console.log(delete data1);
console.log(data1);

data2 = 10; // 삭제 가능
console.log(delete data2);
console.log(data2);

배열에서 원소를 지우려면 delete 를 쓰면 된다. 간단하다!

배열도 가능하고 오브젝트도 된다.

저기서 data2를 삭제 해버리면 오류가 뜨지만 var로 하면 오류가 안 뜬다. 

진짜 진짜 무근본이다.

 

var num = 1;
console.log(typeof num);

var str = '안녕하세요' ;
console.log(typeof str);

var flag = true;
console.log(typeof flag);

var ary = ['JavaScript', 'Ajax', 'ASP.NET'];
console.log(typeof ary);

var obj = {x:1, y:2};
console.log(typeof obj);

그래도 무근본도 타입은 있는 것 같다. 

number, string, boolean, object, object 순서로 나온다. 배열도 오브젝트네...

 

var x = 30;
if (x >= 20) {
  console.log('변수x는 20이상이다.');
} else if (x >= 10) {
  console.log('변수x는 10이상이다.');
} else {
  console.log('변수x는 10미만이다.');
}

var rank = 'B';
switch(rank) {
  case 'A' :
    console.log('A랭크입니다.');
    break;
  case 'B' :
    console.log('B랭크입니다.');
    break;
  case 'C' :
    console.log('C랭크입니다.');
    break;
  default :
    console.log('아무 랭크도 아닙니다.');
    break;
}

var x = '0';
switch (x) {
  case 0 :
    console.log('숫자 0이다.');
    break;
    case '0' :
      console.log('문자 0이다.');
      break;
}

이건 사실 뭐 당연한 것이겠지?

C랑 비슷한데?

 

for (var x = 8; x < 10; x++) {
  console.log('x의 값은 ' + x);
}


for (var i = 1, j = 1; i < 5; i++, j++) {
  console.log('i * j는'+ i * j);
}

// 객체 for in
var data = { apple:150, orange:100, banana: 120 };
// key에 'apple', 'orange', 'banana' 문자열로 넘어옴
// data['apple'] => 150, data.apple => 150
for (var key in data) {
  console.log(key + '=' + data[key]);
}

// array for in
var data = [ 'apple', 'orange', 'banana' ];
for (var key in data) {
  console.log(data[key]);
}

var data = [ 'apple', 'orange', 'banana' ];
Array.prototype.hoge = function () {}
// for in 사용할 때 Array.prototype.hoge 함수 호출 => Array는 for ~ in 사용 권장 안함
for (var key in data) {
  console.log(data[key]);
}

var data = [ 'apple', 'orange', 'banana' ];
// data.length를 사용하면 정상적으로 동작됨
for (var i = 0, len = data.length; i < len; i++) {
//for (var i = 0; i < data.length; i++) {
  console.log(data[i]);
}

var data = [ 'apple', 'orange', 'banana' ];
Array.prototype.hoge = function () {};
// for key in data
for (var value of data) {
  console.log(value);
}

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

 

for문이 이것저것 섞여있다. C 스타일도 있고 파이썬 스타일도 있다.

in 같은 경우 파이썬에서 iter가 가능한 애들 상대로 쓸 수 있다. 여기서는 아마 오브젝트들이 순회가능할 것이다.

 

오브젝트는 기본적으로 키/밸류 로 구성되어 있어서 키를 기준으로 순회를 하게 된다. 

 

마지막은 boo가 나오는데 o는 앞에 2를 써준다. 무슨말이냐고? 실행해보셈 

 

저기서 of로 순회 하려면 Array.prototype.hoge를 써야 하는데 굉장히 귀찮다..

 

// breake 사용 예
var result = 0;
for (var i = 1; i <= 100; i++) {
  result += i;
  if (result > 1000) { break; }
}
console.log('합계값이 1000을 넘은 것은 ' + i);

// continue 사용 예
var result = 0;
for (var i = 1; i < 100; i++) {
  if (i % 2 === 0) { continue; }
  result += i;
}
console.log('합계：' + result);

오 원래 for 문에서도 break/continue 있었는데 여기서도 있구나.

 

var i = 1;
try{
  i = i * j;
} catch(e) {
  console.log(e.message);
} finally {
  console.log('처리가 완료되었다.');
}

var x = 1;
var y = 0;
try{
  if (y === 0) { throw new Error('0으로 나누려고 하였다.'); }
  var z = x / y;
} catch(e) {
  console.log(e.message);
}

오 이건 파이썬에서 본 문법이다. 시도해보고 안 되면 에러 메세지 띄우는 것인가보다. 

물론 된다면 finally가 출력 되나보네.

 

안되면 throw로 에러 메세지를 던져줄 수도 있다. 

 

// use strict를 사용 권장 => source code의 잠재적 error를 걸러내기 위한 목적
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
console.log(x);

y = 3.14;    // This will not cause an error.
console.log(y);
myFunction();
console.log(y);

function myFunction() {
  "use strict";
  y = 3.14;  // This will cause an error (y is not defined).
}

너무너무 근본이 없어서 에러를 걸러내기 위한 문법이 있다.

아니 애초에 그렇게 안 만들었으면 되는데 웹은 이미 만들어져 있는게 많아서 안된다나 뭐라나

strict는 범위가 좀 작나보다. x는 오류고 y는 아니란다. 이것조차 이상하네;;