ReasonJun

Javascript : Variable (3) (truthy, falsy, object) 본문

Frontend/Javasciprt

Javascript : Variable (3) (truthy, falsy, object)

ReasonJun 2023. 6. 7. 00:57
728x90

truthy / falsy

if (0) {
  console.log('true');
}

if ('0') {
  console.log('true'); // true
}

// false
//  1) false
//  2) 0
//  3) null
//  4) undefined
//  5) NaN
//  6) ''
//  7) 0n

const fruits = ['apple', 'banana'];

if (fruits) {
  console.log('item here'); // item here
}

const fruits1 = [];

if (fruits1.length) {
  console.log('item here'); // 
}

object

// Object literal { key: value }
// new Object()
// Object.create();
// key - letters, numbers, strings, symbols
// value - Primitives, Objects (Functions)

const user = new Object();

user.name = 'youjun';
user.age = 85;

console.log(user); // { name: 'youjun', age: 85 }

function User() {
  this.name = 'youjun';
  this.age = 85;
}

const user1 = new User();

console.log(user1); // User { name: 'youjun', age: 85 }

let apple = {
  name: 'apple', // Unless it's a special case, it's better to specify it like this.
  'hello-bye': '✋',
  0: 1,
  ['hello-bye1']: '✋',
};

apple.name; // dot notation
console.log(apple['hello-bye1']); // bracket notation
apple['name'];

// Add property
apple.emoji = '🍎';
console.log(apple.emoji);
console.log(apple['emoji']);

// remove property
delete apple.emoji;
console.log(apple);

const user2 = {
  name: 'youjun',
  age: 85,
};

const key = 'name';

console.log(user2); // { name: 'youjun', age: 85 }
console.log(user2.name); // youjun
console.log(user['name']); // youjun
console.log(user[key]); // youjun

const userA = {
  name: 'you',
  age: 85,
};

const userB = {
  name: 'jun',
  age: 88,
  parent: userA,
};

console.log(userB); // { name: 'jun', age: 88, parent: { name: 'you', age: 85 } }
console.log(userB.parent.name); // you
console.log(userB['parent']['name']); // you

const users = [userA, userB];
console.log(users[0]['name']); // you
const obj = {
  name: '',
  age: 20,
};

obj.name;
obj.age;

// Use square bracket notation when you want to access properties dynamically!
function getValue(obj, key) {
  return obj[key];
}
console.log(getValue(obj, 'name'));

function addKey(obj, key, value) {
  obj[key] = value;
}
addKey(obj, 'job', 'engineer');
console.log(obj);

function deleteKey(obj, key) {
  delete object[key];
}
const x = 0;
const y = 0;
const coordinate = { x, y }; //{ x: x, y: y };
console.log(coordinate); // { x: 0, y: 0 }

function makeObj(name, age) {
  return {
    name, // name: name,
    age, // age: age,
  };
}
const apple = {
  name: 'apple',
  display: function () {
    console.log(`${this.name}: 🍎`); // this : apple
  },
};

apple.display();

constructor function

// constructor function
function Fruit(name, emoji) {
  this.name = name;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };
  // return this; 
}

const apple = new Fruit('apple', '🍎');
const orange = new Fruit('orange', '🍊');

Destructing assignment

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

console.log(a, b, c); // 1 2 3

const [aa, bb, cc] = arr;

console.log(aa, bb, cc); // 1 2 3

let qq = 0;
let ww = 0;

const arr1 = [1, 2, 3];

[, , ee] = arr;
console.log(ee); // 3

const arr2 = [1, 2, 3];
const [zz, ...rest] = arr2;
console.log(a, rest); // 1 [ 2, 3 ]

//

const obj = {
  a1: 1,
  b1: 2,
  c1: 3,
  x: 7,
  y: 100,
};
// Data can be found directly by attribute name.
const { a1, b1 } = obj;
console.log(a1, b1); // 1 2

const { x = 4, a1: you, y: ten = 10 } = obj;
console.log(x, you, ten); // 7 1 100 => 4 if there is no x data, 100 if there is no y data

Optional chaining

const user = undefined;

// Prints undefined without raising an error.
console.log(user?.name); // undefined

const userA = {
  name: 'you',
  age: 85,
  address: {
    country: 'Korea',
    city: 'Seoul',
  },
};

const userB = {
  name: 'neo',
  age: 22,
};

function getCity(user) {
  return user.address?.city || 'no address';
}

console.log(getCity(userA)); // Seoul
console.log(getCity(userB)); // no address

 

728x90
Comments