Author: Learners Store

JavaScript Coding Question – 14

const number1 = (number = 123) => {
    return number;
}

const number2 = (number = 345) => {
    return number;
}

const result1 = number1() === number2(new Number(123));
const result2 = number1() == number2(new Number(123))

console.log(result1);
console.log(result2);
Output:

false
true
  • number1() : This will give output as 123. Because it calls with no arguments and returns default value 123.
  • number2(new Number(123)) : This is called with a Number object wrapping 123, so number2 returns this Number object as-is as [Number: 123]
  • The === operator checks for both value and type. Since a primitive number (123) and a Number object wrapping 123 have different types, the comparison returns false.
  • NOTE : Suppose if we use == operator for comparison it gives the output as true because JavaScript attempts to convert the Number object into a primitive for comparison. When an object like new Number(123) is compared to a primitive, JavaScript calls the object’s .valueOf() method to get its primitive value.

Heart Beat Animation with ReactJS and CSS

Heart.js

import React from 'react';
import './Heart.css';

const Heart = () => {
  return (
    <div className="heart-container">
      <div className="heart"></div>
    </div>
  );
};

export default Heart;
Heart.css

/* Align the heart to the center of the page */
.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* creating two circles */
.heart::before,
.heart::after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #e63946;
    position: absolute;
    border-radius: 50%;
}

.heart::before {
    top: -50px;
}

.heart::after {
    left: 50px;
}

/* Creating square */
.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #e63946;
    transform: rotate(-45deg);
    animation: beat 1s infinite;
}

/* Heart Beat Animation */
@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
}
  • By using div with className(.heart) we have created heart shape
  • By using the div with the className(.heart-container) we have aligned the heart to the center of the page.
  • Heart Shape: We have created the heart by positioning two circular divs (::before and ::after) next to a square div, then rotating the main .heart div by -45deg.
  • Animation: The @keyframes beat animation makes the heart scale up and down, creating a “beating” effect.
  • 0%, 100%: The heart starts and ends at its original scale (1), so it returns to the original size after each beat.
  • 50%: The heart scales up to 1.2 times its original size, creating the “pumping” effect in the middle of each beat cycle.

JavaScript Coding Question – 13

const Person = {
    firstName: 'abc',
    lastName: 'xyz',
    age: 50
};

const result = Object.entries(Person);

console.log(result);
Output:

[
  [ 'firstName', 'abc' ],
  [ 'lastName', 'xyz' ],
  [ 'age', 50 ]
]
  • Above code will convert the properties of the Person object into an array of key-value pairs using Object.entries().
  • Object.entries(Person) : takes each property of the Person object and convert it into an array, where each element is a [key, value] pair.