3. Javascript의 연산

Index

Index 3. Javascript의 연산 3.1 Javascript의 연산 비교연산 논리연산 typeof 연산자 타입 형 변환

3. Javascript의 연산

3.1 Javascript의 연산

자바스크립트는 HTML, CSS와는 다르게 다양한 산술, 대입 등의 연산자를 통해 숫자, 문자 등을 출력할 수 있습니다.


//연산
var x, y;
x = 5;
y = 9;
y++; //10
x--; //4
--x; //3
++x; //4
x = x + 2; //6
x += 2; //8
document.write(x, '<br>');
x *= 2; //16
document.write(x, '<br>');

var 이름 = '이호준';
var 나이 = 10;

document.write('제 이름은 ' + 이름 + ' 제 나이는 ' + 나이 + '입니다.' , '<br>');
document.write(`제 이름은 ${이름}입니다. 제 나이는 ${나이+나이} 입니다.`);

x, y, z로 선언된 변수에 초기 값으로 x는 5, y는 9를 대입하였습니다.

x는 -- 후위 감소 산술 연산 1회 , -- 전위 감소 산술 연산 1회 , ++ 전위 증가 산술 연산 1회, 현재의 값에 2를 두번 더 하여 변수의 값이 8이 되었고 후에 2를 곱하여 최종적으로 16이 되었습니다.

x = x+2 나, x = x*2 와 같은 할당 연산자를 사용할 때는 피연산자를 생략할 수 있습니다. y, z는 write()함수를 통해 출력할 수 있습니다.

자바스크립트에서는 피연산자가 하나라도 문자열이면 주로 결합을 수행하게 됩니다.

이름, 나이로 선언된 변수에 초기 값으로 문자열 '이호준', 10을 대입하였습니다. write()함수를 통해 결합된 결과값 문자열 '이호준'과 10을 출력합니다.

피연산자의 type coercion 은 연산자에 따라 달라집니다. 상세 내용은https://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839를 참고해주세요. 예) '1' & 0

비교연산

객체의 크고 작고를 비교하거나 맞고 틀림을 비교하는 연산을 비교연산이라고 합니다.

비교연산 CODE


var x, y;
x = 20;
y = 10;
document.write(x > y, '<br>');         // true
document.write(x < y, '<br>');         // false
document.write(x <= y, '<br>');        // false
document.write(x >= y, '<br>');        // true

document.write(x == 20, '<br>');       // true
document.write(x === '20', '<br>');    // false
document.write(x != y, '<br>');        // true
document.write(x != y*2, '<br>');      // false


var x, y, z;
x = 10;
y = 20;
z = '10';

document.write(x > y, '<br>');
document.write(x < y, '<br>');
document.write(x >= y, '<br>');
document.write(x <= y, '<br>');

document.write(`x == z : ${x == z} <br>`);
document.write(`x === z : ${x === z} <br>`);
document.write(`x != y : ${x != y} <br>`);
document.write(`x != 10 : ${x != 10} <br>`);

관계연산의 결과는 true, false로 나온다는 것을 기억해 주세요.

논리연산

논리연산 CODE


// 논리연산
// and, or, not
// and = 곱
// or = 합
// true = 1
// false = 0

document.write(`true || true : ${true || true} <br>`);
document.write(`true || false : ${true || false} <br>`);
document.write(`false || true : ${false || true} <br>`);
document.write(`false || false : ${false || false} <br>`);

document.write(`true && true : ${true && true} <br>`);
document.write(`true && false : ${true && false} <br>`);
document.write(`false && true : ${false && true} <br>`);
document.write(`false && false : ${false && false} <br>`);

document.write(`!true : ${!true} <br>`);
document.write(`!false : ${!false} <br>`);

let x = 15
document.write(`x % 3 == 0 || x % 5 == 0 : ${x % 3 == 0 || x % 5 == 0} <br>`);

typeof 연산자

typeof는 변수의 데이터 타입을 반환하는 연산자입니다.

006.html


// 타입 (https://ko.javascript.info/types 참고)

document.write(`typeof(5) : ${typeof(5)} <br>`);
document.write(`typeof(5.5) : ${typeof(5.5)} <br>`);
document.write(`typeof('5') : ${typeof('5')} <br>`);
document.write(`typeof('leehojun') : ${typeof('leehojun')} <br>`);
document.write(`typeof(x) : ${typeof(x)} <br>`);
document.write(`typeof(undefined) : ${typeof(undefined)} <br>`);
document.write(`typeof([1, 2, 3, 4]) : ${typeof([1, 2, 3, 4])} <br>`);
document.write(`typeof({'one':'하나', 'two':'둘'}) : ${typeof({'one':'하나', 'two':'둘'})} <br>`);

function js(){
}
document.write(`typeof(js) : ${typeof(js)} <br>`);
document.write(`typeof(js / 2) : ${typeof(js / 2)} <br>`);
document.write(js / 2, '<br>');

document.write(`typeof('1'+1) : ${typeof('1' + 1)} <br>`);
document.write('1' + 1, '<br>');
document.write(`typeof('leehojun' / 3) : ${typeof('leehojun' / 3)} <br>`);
document.write('leehojun' / 3, '<br>');
document.write(`typeof(true) : ${typeof(true)} <br>`);

let test = null;
document.write(typeof(test), '<br>');

타입 형 변환


// 타입의 형 변환 (https://ko.javascript.info/type-conversions 참고)

let one = 1;
document.write(`<p> one + one : ${one + one} </p>`);
document.write(`<p> String(one) + String(one) : ${String(one) + String(one)} </p>`);

let two = '2';
document.write(`<p> two + two : ${two + two} </p>`);
document.write(`<p> Number(two) + Number(two) : ${Number(two) + Number(two)} </p>`);

let three = two + two;
document.write(`<p> typeof(three) : ${typeof(three)} </p>`);

document.write(`<p> Boolean(-1) : ${Boolean(-1)} </p>`);
document.write(`<p> Boolean(0) : ${Boolean(0)} </p>`);
document.write(`<p> Boolean(' ') : ${Boolean(' ')} </p>`);
document.write(`<p> Boolean('') : ${Boolean('')} </p>`);
document.write(`<p> Boolean([]) : ${Boolean([])} </p>`);
document.write(`<p> Boolean([0]) : ${Boolean([0])} </p>`);
document.write(`<p> Boolean('0') : ${Boolean('0')} </p>`);


//드모르간 법칙
!(x || y) === (!x && !y)


//3항연산자 처럼 사용 가능
let job = true;
job && '완료' || '미완료'
//'완료'
job = false;
job && '완료' || '미완료'
'미완료'


Boolean('호준')
true
Boolean('')
false
Boolean(1)
true
Boolean(0)
false
Boolean(' ')
true
Boolean(-1)
true
Boolean(true)
true
Boolean('true')
true
Boolean('false')
true
typeof '5'
'string'
typeof 5
'number'
typeof true
'boolean'
String(5)
'5'
Number(true)
1
Number(false)
0
Number('5')
5
typeof([1, 2, 3, 4])
'object'
typeof({'one':'하나', 'two':'둘'})
'object'
typeof('1' + 1)
'string'

// string은 +연산자로만!
'1' + 1
'11'

1 + '1'
'11'

'11' - 1
10

// 실무에서 사용하는 형변환
123 + ''
'123'
!!true
true
!!'hojun'
true
!!''
false
!!1
true
!!0
false
!!undefined
false
!!NaN
false
!true
false
!(!true)
true
'0' == 0
true
0 == ''
true
0 == '0'
true
false == 'false'
false
false == '0'
true
false == null
false
false == undefined
false
false == NaN
false
!!null
false
!!undefined
false
!!NaN
false
Boolean('false')
true
false === 0
false
false == 0
true
false == '0'
true
'false'
'false'
'11'-'sdaf'
NaN
let x = '10000'
undefined
+x
10000
-x
-10000
+x
10000
x * 1
10000
+x
10000
x = -10000
-10000
x = '-10000'
'-10000'
+x
-10000
x = +x
-10000
x
-10000
Number('10')
10
parseInt('1230123', 10)
1230123
parseInt('1230123asdfasdf', 10)
1230123
x = '123asdfasdf'
'123asdfasdf'
+x
NaN