ReasonJun

Javascript : Operators Basic 본문

Frontend/Javasciprt

Javascript : Operators Basic

ReasonJun 2023. 6. 7. 01:22
728x90
console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(3 * 4); // 12
console.log(10 / 2); // 5
console.log(7 % 5); // 2
console.log(5 ** 2); // 25
console.log(Math.pow(5, 2)); // 25

let text = 'two' + 'string';
console.log(text); // twostring
text = '1' + 1; // Adding a number and a string converts it to a string
console.log(text); // 11 : string

// Unary Operators
let a = 5;
a = -a; // -1 * 5
console.log(a); // -5
a = -a;
console.log(a); // 5

a = +a;
console.log(a); // 5

a = -a; // -5
a = +a; // +(-5)
console.log(a); // -5

// boolean Operators
let boolean = true;
console.log(boolean); // true
console.log(!boolean); // false
console.log(!!boolean); // true

console.log(+false); // 0
console.log(+null); // 0
console.log(+''); // 0
console.log(+true); // 1
console.log(+'text'); // NaN
console.log(+undefined); // NaN

// Assignment operators
let a = 1;
a = a + 2;
console.log(a); // 3

a += 2; // a = a + 2; 
console.log(a); // 5

a -= 2;
console.log(a); // 3 

a *= 2;
console.log(a); // 6

a /= 2;
a %= 2;
a **= 2;

// Increment & Decrement Operators
let a = 0;
console.log(a); // 0
a++; // a = a + 1;
console.log(a); // 1
a--; // a = a - 1;
console.log(a); // 0

a = 0;
console.log(a++); // 0
console.log(a); // 1
let b = a++;
console.log(b); // 1
console.log(a); // 2

// Compare Operators
console.log(2 > 3); // false
console.log(2 < 3); // true
console.log(3 < 2); // false
console.log(3 > 2); // true
console.log(3 <= 2); // false
console.log(3 <= 3); // true
console.log(3 >= 3); // true
console.log(3 >= 2); // ture

// Equality operators
console.log(2 == 2); // true
console.log(2 != 2); // false
console.log(2 != 3); // true
console.log(2 == 3); // false
console.log(2 == '2'); // true
console.log(2 === '2'); // ✨ false
console.log(true == 1); // true
console.log(true === 1); // false
console.log(false == 0); // true
console.log(false === 0); // false

const obj1 = {
  name: 'js',
};
const obj2 = {
  name: 'js',
};

console.log(obj1 == obj2); // false
console.log(obj1 === obj2); // false
console.log(obj1.name == obj2.name); // true
console.log(obj1.name === obj2.name); // true

let obj3 = obj2;
console.log(obj3 == obj2); // true
console.log(obj3 === obj2); // true
// and / or
const a = true;
const b = false;

if (a && b) {
  console.log('all true');
}

if (a || b) {
  console.log('one or more true');
}

// &&
console.log(true && false); // false
console.log(1 && 0); // 0
console.log(1 && 2 && 0); // 0
console.log(1 && 0 && 2); // 0
console.log('a' && 'b' && 'c'); // c

// ||
console.log(false || true); // true
console.log(0 || 1); // 1
console.log(false || 0 || {}); // {}
console.log(false || [] || null); // []
console.log(function () {} || undefined || ''); // [Function (anonymous)]
console.log(false || 0 || NaN); // NaN
// Nullish
const n = 0;
const num1 = n || 7;

console.log(num1); // 7

// Only null and undefined are skipped.
const num2 = n ?? 7;
console.log(num2); // 0

console.log(null ?? 1); // 1
console.log(undefined ?? 1); // 1
console.log(null ?? undefined); // undefined
console.log(null ?? 1 ?? 2); // 1

const a = 1;

if (a < 2) {
  console.log('true'); // true
} else {
  console.log('false');
}

console.log(a < 2 ? 'true' : 'false'); // true
// Logical Operator
// &&
// || 

const obj1 = { name: '🐶' };
const obj2 = { name: '🐱', owner: 'youjun' };

if (obj1 && obj2) {
  console.log('both true!'); // both true!
}

if (obj1 || obj2) {
  console.log('both true!'); // both true!
}

// short-circuit evaluation
let result = obj1 && obj2;
console.log(result);  // { name: '🐱', owner: 'youjun' }

result = obj1 || obj2;
console.log(result); // { name: '🐶' }


// truthy => && 
// falshy => || 
function changeOwner(animal) {
  if (!animal.owner) {
    throw new Error('no owner');
  }
  animal.owner = 'owner changed!';
}
function makeNewOwner(animal) {
  if (animal.owner) {
    throw new Error('owner');
  }
  animal.owner = 'new owner!';
}

obj1.owner && changeOwner(obj1);
obj2.owner && changeOwner(obj2); // true => execute
console.log(obj1); // { name: '🐶' }
console.log(obj2); // { name: '🐱', owner: 'changed owner!' }

obj1.owner || makeNewOwner(obj1); // false => execute
obj2.owner || makeNewOwner(obj2);
console.log(obj1); // { name: '🐶', owner: 'new owner!' }
console.log(obj2); // { name: '🐱', owner: 'changed owner!' }


let item = { price: 1 };
const price = item && item.price;
console.log(price); // 1

// set default
// if falsy : 0, -0, null, undefined, ''
function print(message) {
  const text = message || 'Hello';
  console.log(text);
}
print(); // Hello
print(undefined); // Hello
print(null); // Hello
print(0); // Hello




let num = 0;
console.log(num || '-1'); // -1
console.log(num ?? '-1'); // 0

num = null;
console.log(num ?? '-1'); // -1
728x90

'Frontend > Javasciprt' 카테고리의 다른 글

javascript : Async  (0) 2023.06.07
javascript : module  (0) 2023.06.07
javascript : spread / destructing assignment  (0) 2023.06.07
Javascript : Loop  (1) 2023.06.07
javascript : built-in object [array]  (0) 2023.06.07
Comments