Section 9: Objects - A Closer Look

JavaScript - The Complete Guide 2022

Section 9: Objects - A Closer Look - Beyond the Basics

olivia_yj 2022. 10. 19. 16:08

The goals

💪🏻What are Objects

✌🏻Objects in JavaScript

👍🏻Adding a Method to Objects

객체 & 원시 값

객체는 참조 값이라는 점은 이미 배우셨습니다.

아직 명확하지 않을 수도 있지만, 객체가 원시 값으로 구성된다는 점을 이해하는 것이 중요합니다.

다음은 예시입니다.

const complexPerson = {
	name: 'Max',
	hobbies: ['Sports', 'Cooking'],
	address: {
		street: 'Some Street 5',
		stateId: 5,
		country: 'Germany',
		phone: {
			number: 12 345 678 9,
			isMobile: true
		}
	},
};

complexPerson 에 여러 개의 중첩된 참조 값(중첩된 배열과 객체)이 있긴 하지만 이 객체를 파헤쳐보면 결국 원시 값이 됩니다.

name은 문자열('Max')을 저장하고 있습니다 => 원시 값

hobbies 는 문자열로 된('Sports', 'Cooking') (즉 참조 값) 배열을 저장하고 있습니다 => 원시 값

address 는 'Some Street 5' 와 같은 원시 값과 중첩된 객체(phone)를 포함하게 되지만 phone을 더 자세히 살펴보면 숫자와 불리언만 있습니다 => 원시 값

따라서 원시 값은 데이터를 저장하는 핵심 구성 요소이고 객체(와 배열)는 해당 데이터를 구성하고 작업하는 데에 유용합니다.

Add Method to object in JavaScript

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

Adding a method to the object

Adding a method to a javascript object is easier than adding a method to an object constructor. We need to assign the method to the existing property to ensure task completion.

Example

In the following example, initially, the object type is created and later on, the properties of the object were created. Once the creation of properties is done, a method is assigned to each of the objects and the properties were accessed using the method as our requirement.

<html>
<body>
<p id = "prop"></p>
<script>
   function Business(name, property, age, designation) {
      this.Name = name;
      this.prop = property;
      this.age = age;
      this.designation = designation;
   }
   var person1 = new Business("Trump", "$28.05billion", "73", "President");
   var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
   person1.det = function() {
      return this.Name + " "+" has a property of net worth "+ "" + this.prop;
   };
   person2.det = function() {
      return this.Name + " "+" has a property of net worth "+ "" + this.prop;
   };
   document.write(person2.det() +" and "+person1.det());
</script>
</body>
</html>

Output

Jackma has a property of net worth $35.6 billion and Trump has a property of net worth $28.05billion

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

What is this?

In JavaScript, the this keyword refers to an object.

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), apply(), and bind() can refer this to any object.

We don't use the arrow function in object method tho!

bind()

Function.prototype.bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Parameters

thisArg

The value to be passed as the this parameter to the target function func when the bound function is called. If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects. The value is ignored if the bound function is constructed using the new operator.

arg1, …, argN Optional

Arguments to prepend to arguments provided to the bound function when invoking func.

Return value

A copy of the given function with the specified this value, and initial arguments (if provided).

Introduction to JavaScript bind() method

The bind() method returns a new function, when invoked, has its this sets to a specific value.

The following illustrates the syntax of the bind() method:

fn.bind(thisArg[, arg1[, arg2[, ...]]])

In this syntax, the bind() method returns a copy of the function fn with the specific this value (thisArg) and arguments (arg1, arg2, …).

Unlike the call() and apply() methods, the bind() method doesn’t immediately execute the function. It just returns a new version of the function whose this sets to thisArg argument.

Using JavaScript bind() for function binding

When you pass a method an object is to another function as a callback, the this is lost. For example:

let person = { name: 'John Doe', getName: function() { console.log(this.name); } }; setTimeout(person.getName, 1000);

Output:

undefined

As you can see clearly from the output, the person.getName() returns undefined instead of 'John Doe'.

This is because setTimeout() received the function person.getName separately from the person object.

The statement:

setTimeout(person.getName, 1000);

can be rewritten as:

let f = person.getName; setTimeout(f, 1000); // lost person context

The this inside the setTimeout() function is set to the global object in non-strict mode and undefined in the strict mode.

Therefore, when the callback person.getName is invoked, the name does not exist in the global object, it is set to undefined.

To fix the issue, you can wrap the call to the person.getName method in an anonymous function, like this:

setTimeout(function () { person.getName(); }, 1000);

This works because it gets the person from the outer scope and then calls the method getName().

Or you can use the bind() method:

let f = person.getName.bind(person); setTimeout(f, 1000);

In this code:

First, bind the person.getName method to the person object.
Second, pass the bound function f with this value set to the person object to the setTimeout() function.

Using bind() to borrow methods from a different object

Suppose you have a runner object that has the run() method:

let runner = { 
	name: 'Runner', 
    run: function(speed) { 
    	console.log(this.name + ' runs at ' + speed + ' mph.'); 
      } 
  };

And the flyer object that has the fly() method:

let flyer = { 
	name: 'Flyer', 
    fly: function(speed) { 
    	console.log(this.name + ' flies at ' + speed + ' mph.'); 
      } 
 };

If you want the flyer object to be able to run, you can use the bind() method to create the run() function with the this sets to the flyer object:

let run = runner.run.bind(flyer, 20); run();

In this statement:

Call the bind() method of the runner.run() method and pass in the flyer object as the first argument and 20 as the second argument.
Invoke the run() function.

Output:

Flyer runs at 20 mph.

The ability to borrow a method of an object without making a copy of that method and maintain it in two separate places is very powerful in JavaScript.

Summary

The bind() method creates a new function, when invoked, has the this sets to a provided value.
The bind() method allows an object to borrow a method from another object without making a copy of that method. This is known as function borrowing in JavaScript.

call()

Introduction to the JavaScript call() method

In JavaScript, a function is an instance of the Function type. For example:

function add(x, y) { 
	return x + y; 
} 
console.log(add instanceof Function); // true

The Function.prototype type has the call() method with the following syntax:

functionName.call(thisArg, arg1, arg2, ...);

In this syntax, the call() method calls a function functionName with the arguments (arg1, arg2, …) and the this set to thisArg object inside the function.

The thisArg is the object that the this object references inside the function functionName.
The arg1, arg2, .. are the function arguments passed into the functionName.

The call() method returns the result of calling the functionName().

The following example defines the add() function and calls it normally:

function add(x, y) { 
	return x + y; 
} 
let result = add(10, 20); 
console.log(result); // 30

The following calls the add() function but use the call() method instead:

function add(x, y) { 
	return x + y; 
} 
let result = add.call(this, 10, 20); 
console.log(result); // 30

By default, the this inside the function is set to the global object i.e., window in the web browsers and global in Node.js.

Note that in the strict mode, the this inside the function is set to undefined instead of the global object.

Consider the following example:

var greeting = 'Hi'; 
var messenger = { greeting: 'Hello' } 
function say(name) { 
	console.log(this.greeting + ' ' + name); 
}

Inside the say() function, we reference the greeting via the this value. If you just invoke the say() function via the call() method as follows:

say.call(this,'John');

It’ll show the following output to the console:

"Hi John"

However, when you invoke the call() method of say function object and pass the messenger object as the this value:

say.call(messenger,'John');

The output will be:

"Hello John"

In this case, the this value inside the say() function references the messenger object, not the global object.

Using the JavaScript call() method to chain constructors for an object

You can use the call() method for chaining constructors of an object. Consider the following example:

function Box(height, width) { 
	this.height = height; 
    this.width = width; 
} 
function Widget(height, width, color) { 
	Box.call(this, height, width); 
    this.color = color; 
} 
let widget = new Widget('red', 100, 200); 
console.log(widget);

Output:

Widget { height: 'red', width: 100, color: 200 }

In this example:

First, initialize the Box object with two properties: height and width.
Second, invoke the call() method of the Box object inside the Widget object, set the this value to the Widget object.

Using the JavaScript call() method for function borrowing

The following example illustrates how to use the call() method for borrowing functions:

const car = { 
	name: 'car', 
    start() { 
    	console.log('Start the ' + this.name); 
    }, 
    speedUp() { 
    	console.log('Speed up the ' + this.name); 
    }, 
    stop() { 
    	console.log('Stop the ' + this.name); 
    }, 
}; 
const aircraft = { 
	name: 'aircraft', 
    fly() { 
    	console.log('Fly'); 
    }, 
}; 
car.start.call(aircraft); 
car.speedUp.call(aircraft); 
aircraft.fly();

Output:

Start the aircraft 
Speed up the aircraft 
Fly

How it works.

First, define a car object with one property name and three methods start, speedUp, and stop:

const car = { 
	name: 'car', 
    start() { 
    	console.log('Start the ' + this.name); 
    }, 
    speedUp() { 
    	console.log('Speed up the ' + this.name); 
    }, 
    stop() { 
    	console.log('Stop the ' + this.name); 
    }, 
};

Second, define the aircraft object with one property name and a method:

const aircraft = { 
	name: 'aircraft', 
    fly() { 
    	console.log('Fly'); 
    }, 
};

Third, call the start() and speedUp() method of the car object and the fly() method of the aircraft object. However, passing the aircraft as the first argument into the start() and speedUp() methods:

car.start.call(aircraft); 
car.speedUp.call(aircraft); 
aircraft.fly();

Inside the start() and speedUp() methods, the this references the aircraft object, not the car object. Therefore, the this.name returns the 'aircraf' string. Hence, the methods output the following message:

Start the aircraft 
Speed up the aircraft

Technically, the aircraft object borrows the start() and speedUp() method of the car object. And function borrowing refers to an object that uses a method of another object.

The following example illustrates how the arguments object borrows the filter() method of the Array.prototype via the call() function:

function isOdd(number) { 
	return number % 2; 
} 
function getOddNumbers() { 
	return Array.prototype.filter.call(arguments, isOdd); 
} 
let results = getOddNumbers(10, 1, 3, 4, 8, 9); 
console.log(results);

Output:

[ 1, 3, 9 ]

How it works.

First, define the isOdd() function that returns true if the number is an odd number:

function isOdd(number) { 
	return number % 2; 
}

Second, define the getOddNumbers() function that accepts any number of arguments and returns an array that contains only odd numbers:

function getOddNumbers() { 
	return Array.prototype.filter.call(arguments, isOdd); 
}

In this example, the arguments object borrows the filter() method of the Array.prototype object.

Third, call the getOddNumbers() function:

let results = getOddNumbers(10, 1, 3, 4, 8, 9); 
console.log(results);

In this tutorial, you have learned about the JavaScript call() method and how to use it more effectively.

apply()

Introduction to the JavaScript apply() method

The Function.prototype.apply() method allows you to call a function with a given this value and arguments provided as an array. Here is the syntax of the apply() method:

fn.apply(thisArg, [args]);

The apply() method accepts two arguments:

The thisArg is the value of this provided for the call to the function fn.
The args argument is an array that specifies the arguments of the function fn. Since the ES5, the args argument can be an array-like object or array object.

THe apply() method is similar to the call() method except that it takes the arguments of the function as an array instead of the individual arguments.

JavaScript apply() method examples

Let’s take some examples of using the apply() method.

1) Simple JavaScript apply() method example

Suppose that you have a person object:

const person = { firstName: 'John', lastName: 'Doe' }

…and a function named greet() as follows:

function greet(greeting, message) { 
	return `${greeting} ${this.firstName}. ${message}`; 
}

The greet() function accepts two parameters: greeting and message. Inside the greet() function, we reference an object that has the firstName property.

The following example shows how to use the apply() method to call the greet() function with the this set to the person object:

let result = greet.apply(
	person, ['Hello', 'How are you?']
 ); 
 console.log(result);

Output:

Hello John. How are you?

In this example, we set the this value inside the function to the person object. The arguments of the greet() function was passed into the apply() method as an array.

The apply() method invoked the greet() function with the this value set to the person object and arguments as an array ['Hello', 'How are you?'].

If you use the call() method, you need to pass the arguments of the greet() function separately as follows:

let result = greet.call(person, Hello', 'How are you?');

2) Function borrowing

The apply() method allows an object to borrow the method of another object without duplicating the code.

Suppose that you have the following computer object:

const computer = { 
	name: 'MacBook', 
    isOn: false, 
    turnOn() { 
    	this.isOn = true; 
        return `The ${this.name} is On`; 
   }, 
    turnOff() { 
    	this.isOn = false; 
        return `The ${this.name} is Off`; 
   } 
};

… and the following server object:

const server = { name: 'Dell PowerEdge T30', isOn: false };

The server object doesn’t have the turnOn() and turnOff() methods.

To execute the turnOn() method of the computer object on the server object, you can use the apply() method as follows:

let result = computer.turnOn.apply(server); console.log(result);

Output:

The Dell PowerEdge T30 is On

In this example, the server object borrows the turnOn() method of the computer object.

Similarly, you can call the turnOff() method of the computer object on the server object:

let result = computer.turnOff.apply(server); console.log(result);

Output:

The Dell PowerEdge T30 is Off

3) Using the apply() method to append an array to another

The apply() method allows you to append elements of an array to another:

let arr = [1, 2, 3]; 
let numbers = [4, 5, 6]; 
arr.push.apply(arr, numbers); 
console.log(arr);

In this example, the apply() method modifies the original array arr. Note that the Array.prototype.concat() method also provides the same result except that it returns the new array instead of modifying the original array.

Summary

The apply() method invokes a function with a given this value and arguments provided as an array.
The apply() method is similar to the call() method excepts that it accepts the arguments of the function as an array instead of individual arguments.

“This” - 요약

this 키워드는 JavaScript에서 골칫거리가 될 수 있습니다. 이 요약이 해결책이 되기를 바랍니다.

this는 사용 위치와 (함수에서 사용되는 경우) 함수 호출 방법에 따라 다른 것을 참조합니다.

보통 this는 (함수 내부에서 사용되는 경우) 함수를 호출한 '무언가'를 나타냅니다. 이는 전역 컨텍스트, 객체 또는 바인딩된 데이터/객체일 수도 있습니다(예: 브라우저가 클릭 이벤트를 트리거한 버튼과 this를 바인드할 때).

1) 전역 컨텍스트(즉 함수 외부)에서의 this

function something() { ... }
 
console.log(this); // 전역 객체(브라우저의 창)를 기록합니다 - 항상(엄격 모드에서도)!

2) (화살표 함수가 아닌)함수에서의 this - 전역 컨텍스트에서 호출됐을 때

function something() { 
    console.log(this);
}
 
something(); // 엄격 모드가 아닐 땐 전역 객체(브라우저의 창)를 기록하고 엄격

3) 화살표 함수에서의 this - 전역 컨텍스트에서 호출됐을 때

const something = () => {
console.log(this);
}
 
something(); // 전역 객체(브라우저의 창)를 기록합니다 - 항상(엄격 모드에서도)!

4) (화살표가 아닌) 메서드에서의 this - 객체에서 호출됐을 때

const person = {
name: 'Max',
greet: function() { // or use method shorthand: greet() { ... }
console.log(this.name);
}
};
 
person.greet(); // 'Max'를 기록하고, "this"는 person 객체를 참조함

5) (화살표 함수) 메서드에서의 this - 객체에서 호출됐을 때

const person = {
name: 'Max',
greet: () => {
console.log(this.name);
}
};
 
person.greet(); // 아무것도 기록하지 않음(아니면 창 객체의 일부 전역 이름을 기록), "this"는 엄격 모드에서도 전역(창) 객체를 나타냅니다.

this는 다른 객체에서 호출하는 경우 예상치 못한 것을 나타낼 수도 있습니다. 예시:

const person = {
name: 'Max',
greet() {
console.log(this.name);
}
};
 
const anotherPerson = { name: 'Manuel' }; // 내장된 greet 메서드가 없습니다!
 
anotherPerson.sayHi = person.greet; // greet은 여기서 호출되는 것이 아니라 "anotherPerson" 객체의 새로운 프로퍼티/메서드에 할당됩니다.
 
anotherPerson.sayHi(); // "anotherPerson" 객체에서 호출되었기 때문에 ‘Manuel’을 기록합니다 => "this"는 호출한 "무언가"를 나타냅니다

헷갈리는 경우에는 console.log(this);가 항상 this가 현재 무엇을 의미하는지 알아내는 데에 도움을 줄 수 있습니다!

Quiz

질문 3:

아래 예에서 this가 참조하는 것은 무엇일까요?

const person = {
name: 'Max',
greet() {
console.log(this); // ???
console.log(this.name);
}
};
 
const admin = { age: 30 };
 
admin.greet = person.greet;
admin.greet();

정답: this 는 admin 객체를 참조합니다

"person"에서 정의되어 있지만 "admin"에 추가된 다음 "admin"에 대해 호출됩니다. 따라서 "this"는 admin 객체를 참조합니다.

Getters and Setters

In this tutorial, you will learn about JavaScript getter and setter methods with the help of examples.

In JavaScript, there are two kinds of object properties:

Data properties
Accessor properties

Data Property

Here's an example of data property that we have been using in the previous tutorials.

const student = {

    // data property
    firstName: 'Monica';
};

Accessor Property

In JavaScript, accessor properties are methods that get or set the value of an object. For that, we use these two keywords:

get - to define a getter method to get the property value
set - to define a setter method to set the property value

JavaScript Getter

In JavaScript, getter methods are used to access the properties of an object. For example,

const student = {

    // data property
    firstName: 'Monica',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

// trying to access as a method
console.log(student.getName()); // error

In the above program, a getter method getName() is created to access the property of an object.

get getName() {
    return this.firstName;
}

Note: To create a getter method, the get keyword is used.

And also when accessing the value, we access the value as a property.

student.getName;

When you try to access the value as a method, an error occurs.

console.log(student.getName()); // error

JavaScript Setter

In JavaScript, setter methods are used to change the values of an object. For example,

const student = {
    firstName: 'Monica',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Monica

// change(set) object property using a setter
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

In the above example, the setter method is used to change the value of an object.

set changeName(newName) {
    this.firstName = newName;
}

Note: To create a setter method, the set keyword is used.

As shown in the above program, the value of firstName is Monica.

Then the value is changed to Sarah.

student.changeName = 'Sarah';

Note: Setter must have exactly one formal parameter.

JavaScript Object.defineProperty()

In JavaScript, you can also use Object.defineProperty() method to add getters and setters. For example,

const student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

In the above example, Object.defineProperty() is used to access and change the property of an object.

The syntax for using Object.defineProperty() is:

Object.defineProperty(obj, prop, descriptor)

The Object.defineProperty() method takes three arguments.

The first argument is the objectName.
The second argument is the name of the property.
The third argument is an object that describes the property.

Sources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Working with objects - JavaScript | MDN

developer.mozilla.org

https://www.javascripttutorial.net/javascript-bind/

JavaScript bind() Method and Its Practical Applications

In this tutorial, you will learn about the JavaScript bind() method and how to apply it effectively.

www.javascripttutorial.net

https://www.javascripttutorial.net/javascript-apply-method/

JavaScript apply() Method By Practical Examples

In this tutorial, you'll learn about the JavaScript apply() method of the Function type and how to use it effectively.

www.javascripttutorial.net

https://www.javascripttutorial.net/javascript-call/

JavaScript call() Method and Its Practical Applications

In this tutorial, you will learn about the JavaScript call() method and how to apply it in various contexts.

www.javascripttutorial.net

'JavaScript - The Complete Guide 2022' 카테고리의 다른 글

Section 11: Behind the Scenes: Classes & OOP - Prototypes & More (0)	2022.10.29
Section 10: Classes & Object-oriented Programming - Unleashing the Full Power of Objects (0)	2022.10.28
Section 8: Arrays & Iterables - Lists of Data (0)	2022.10.18
Section 7: Interacting with the HTML Page - Exploring the DOM (0)	2022.10.17
Section 6: More about Functions - Beyond function basic() {} (0)	2022.10.14

현재글Section 9: Objects - A Closer Look - Beyond the Basics

livlog

object, Database, axios, useState, spa, input, cors, css tips, ejs, Props, Component, express, node.js, Promise, form, react, API, firebase, jsx, class,

Today :
Yesterday :

livlog