3. Javascript의 연산

Index

Index 3. Javascript의 연산 3.1 Javascript의 연산 비교연산 논리연산 typeof 연산자

3. Javascript의 연산

3.1 Javascript의 연산

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


// 연산
var x, y, z;
x = 5;
y = 9;
y++; // 10
x--; // 4
x--; // 3
x = x + 2; // 5
x += 5; // 10
y *= 10; // 100
z = x + y; //110

document.write(x, '<br>'); // 10
document.write(y, '<br>'); // 100
document.write(z, '<br>'); // 110

var 이름_성 = '이';
var 이름 = '호준';
var 나이 = '비밀';

document.write(이름_성+이름, '<br>');
document.write('나이는 '+나이+'입니다.', '<br>');

//ES6
document.write(`${이름_성}${이름}, <br> 나이는 ${나이}입니다.`);

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

x는 -- 후위 감소 산술 연산 2회 , += 덧셈 할당 연산 2회를 통해 변수의 값이 5가 되었습니다. y는 ++ 후위 증가 산술 연산 1회, *= 곱셈 할당 연산을 통해 변수의 값이 100이 되었습니다. z는 x(10)과 y(100)를 더한 값으로 110이며, x, y, z는 write()함수를 통해 출력할 수 있습니다.

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

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

피연산자의 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

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

논리연산

논리연산 CODE


document.write(true || true, '<br>');    //true
document.write(true || false, '<br>');   //true
document.write(false || true, '<br>');   //true
document.write(false || false, '<br>');  //false

document.write(true && true, '<br>');    //true
document.write(true && false, '<br>');   //false
document.write(false && true, '<br>');   //false
document.write(false && false, '<br>');  //false

document.write(!true, '<br>');           //false
document.write(!false, '<br>');          //true

var x = 5;
var y = 20;

document.write(x < 25 && y < 25, '<br>');     //true
document.write(x === 5 || y === 5, '<br>');   //true
document.write(!(x < y), '<br>');             //false

typeof 연산자

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

006.html


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

document.write(typeof(5), '<br>');             //number
document.write(typeof(5.5), '<br>');           //number
document.write(typeof('js100제'), '<br>');     //string
document.write(typeof('1'), '<br>');           //string
document.write(typeof(x), '<br>');             //undefined
document.write(typeof(undefined), '<br>');     //undefined
document.write(typeof([1, 2, 3, 4]), '<br>');  //object
document.write(typeof({'one':'하나', 'two':'둘'}), '<br>'); //object
document.write(typeof(js), '<br>');            //function

function js(){
  return 0;
}

document.write("안녕?" / 2, '<br>');            //NaN
document.write(typeof("안녕?" / 2), '<br>');    //number
//number에는 일반적인 숫자 외 Infinity, -Infinity, NaN 포함
document.write(typeof(true), '<br>');           //boolean(true, false)

let test = null;
document.write(typeof(test), '<br>');           //object
//null은 'object'로 표시되지만 특수 값을 가지는 객체가 아닙니다.
//해당 오류는 호환성 유지를 위해 수정하지 않고 남겨둔 상황입니다.

006_1.html


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

let one = '1'
document.write(one + one, '<br>');
document.write(Number(one) + Number(one), '<br>');

let two = 2
document.write(two + two, '<br>');
document.write(String(two) + String(two), '<br>');

document.write(one + two, '<br>');     //자동 스트링 변환 : 12

let three = one + two;
document.write(typeof(three), '<br>'); //string

let four = 'leehojun' + two;           //leehojun2
document.write(four);

//boolean 형변환
document.write(Boolean(1), '<br>');      // true
document.write(Boolean(0), '<br>');      // false
document.write(Boolean('0'), '<br>');    // true (문자열 있음)

document.write(Boolean("hello"), '<br>'); // true
document.write(Boolean(""), '<br>');      // false (빈문자열)