Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
wrapper objects in javascript JavaScript

06. Wrapper objects in Javascript

  • September 23, 2022September 23, 2022
  • by Coder Kai

Javascript provides many concepts under the hood. You may be using it without knowledge of its existence. Wrapper objects are one concept like that.

We know that javascript is object-oriented and we can create instances of objects and invoke it’s functions.

class Cat {
    sound = () => console.log('Meow...')      
}

const cat = new Cat();

cat.sound(); // Meow...

In the above example, you can see that the Cat is a class that is a constructor function and you can call its method `sound()` by creating a variable.

Also if you could notice, you can invoke functions of string by just declaring it.

const aboutMe = "My name is: John";
const name = aboutMe.split(':')[1].trim(); 

const length = 'Hi there'.length();

You can see that in the above example the strings are not objects, but it inherits properties and methods of a `String` class. How does it happen?

This happens in Wrapper classes. It will create an object with `new String(str)` and then resolve the methods or properties when you access it. After that, it will be discarded. Same happens with `Object()` `Array`, `Function`, `Number()` `Boolean()` classes. The `null` and `undefined` values don’t have any wrapper classes

You can see this by the following example:

const str = 'Hi there';
str.myProperty = 'John'

console.log(str.myProperty); // prints undefined

From this, we can derive it doesn’t refer to any object but rather it will create an object for certain property or method is accessed from the string literal. These objects are what we refer to as Wrapper objects.

Equality of Wrapper Objects

You can create objects out of Wrapper classes when necessary. They will be converted to primitive values when needed. The object and its value can be compared for equality but they would not be strictly equal to each other.

const str = 'Hello'
const num = 12.2;

strObj = new String('Hello')
numObj = new Number(12.2)

strObj === str // false
strObj == str // true

numObj === num // false
numObj == num // true
05 Global, null and undefined values in Javascript
07. Immutable and Mutable Values in Javascript
Coder Kai
A humble developer
wrapper unwrapping in javascript

Related articles

Multiple refs for an array of React Elements
Using multiple refs for an…
Immutable and Mutable Values in Javascript
07. Immutable and Mutable Values…
globals undefined and null values in javascript
05 Global, null and undefined…
Javascript Booleans and Equality
04. Javascript Guide Booleans and…
How to add Chakra UI Animations
Chakra UI Animations
SSL Websocket using Nginx Proxy
SSL Websocket proxy with Nginx…
Change python version correctly
Python is not setting correct…
optimize React.js load time
How to optimize React.js app…
Multiple refs for an array of React Elements
How to use IntersectionObserver to…
Multiple refs for an array of React Elements
How to dismiss dropdowns when…
Javascript guide Strings
03. Javascript Guide – Strings
How to fetch data with useEffect
How to fetch data with…
add styles to stripe elements
How to add styles to…
Typescript
How to use Typescript with…
how to optimize react-native map view
How to optimize react-native map…
debounce with react hooks
Avoid multiple clicks using debounce…
Numbers inJavascript
02. Javascript Guide – Numbers
Introduction to Javascript
01. Javascript Guide – Introduction…
Nginx Load Balancer with docker…
Create React App Using npx

Categories

  • android 3
  • Apollo Client 1
  • AWS 8
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
    • S3 1
  • AWS Amplify 1
  • Chakra UI 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 39
    • Express.js 4
    • Javascript Guide 7
    • Node.js 3
    • react-native 4
    • React.js 17
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • PostgreSQL 1
  • Python 2
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Terraform 2
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • Pamela587 on Chakra UI Animations
  • Alicia1760 on Chakra UI Animations
  • vneuweluso on How to add styles to stripe elements without using CardElement

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • October 2022 3
  • September 2022 7
  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress