Skip to content

Commit 782b482

Browse files
iifeoluwambeaudru
authored andcommitted
Added section on static methods (mbeaudru#63)
* Added static methods explanation * Fixed typo, added comments and little more explanation * Fixed incorrect external resources navigation from menu
1 parent ca8e08e commit 782b482

File tree

1 file changed

+100
-0
lines changed

1 file changed

+100
-0
lines changed

readme.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,13 @@ When you struggle to understand a notion, I suggest you look for answers on the
9595
- [External resources](#external-resources-6)
9696
+ [Truthy / Falsy](#truthy--falsy)
9797
- [External resources](#external-resources-7)
98+
+ [Static Methods](#static-methods)
99+
- [Short Explanation](#short-explanation-1)
100+
- [Sample Code](#sample-code-7)
101+
- [Detailed Explanation](#detailed-explanation-2)
102+
* [Calling other static methods from a static method](#calling-other-static-methods-from-a-static-method)
103+
* [Calling static methods from non-static methods](#calling-static-methods-from-non-static-methods)
104+
- [External resources](#external-resources-9)
98105
* [Glossary](#glossary)
99106
+ [Scope](#-scope)
100107
+ [Variable mutation](#-variable-mutation)
@@ -1426,6 +1433,99 @@ myVar ? "truthy" : "falsy"
14261433

14271434
myVar is evaluated in a boolean context.
14281435

1436+
### Static Methods
1437+
1438+
#### Short explanation
1439+
1440+
The `static` keyword is used in classes to declare static methods. Static methods are functions in a class that belongs to the class object and are not available to any instance of that class.
1441+
1442+
#### Sample code
1443+
1444+
```js
1445+
class Repo{
1446+
static getName() {
1447+
return "Repo name is modern-js-cheatsheet"
1448+
}
1449+
}
1450+
1451+
//Note that we did not have to create an instance of the Repo class
1452+
console.log(Repo.getName()) //Repo name is modern-js-cheatsheet
1453+
1454+
let r = new Repo();
1455+
console.log(r.getName()) //Uncaught TypeError: repo.getName is not a function
1456+
```
1457+
1458+
#### Detailed explanation
1459+
1460+
Static methods can be called within another static method by using the `this` keyword, this doesn't work for non-static methods though. Non-static methods cannot directly access static methods using the `this` keyword.
1461+
1462+
##### Calling other static methods from a static method.
1463+
1464+
To call a static method from another static method, the `this` keyword can be used like so;
1465+
1466+
```js
1467+
class Repo{
1468+
static getName() {
1469+
return "Repo name is modern-js-cheatsheet"
1470+
}
1471+
1472+
static modifyName(){
1473+
return this.getName() + '-added-this'
1474+
}
1475+
}
1476+
1477+
console.log(Repo.modifyName()) //Repo name is modern-js-cheatsheet-added-this
1478+
```
1479+
1480+
##### Calling static methods from non-static methods.
1481+
1482+
Non-static methods can call static methods in 2 ways;
1483+
1. ###### Using the class name.
1484+
1485+
To get access to a static method from a non-static method we use the class name and call the static method like a property. e.g `ClassName.StaticMethodName`
1486+
1487+
```js
1488+
class Repo{
1489+
static getName() {
1490+
return "Repo name is modern-js-cheatsheet"
1491+
}
1492+
1493+
useName(){
1494+
return Repo.getName() + ' and it contains some really important stuff'
1495+
}
1496+
}
1497+
1498+
// we need to instantiate the class to use non-static methods
1499+
let r = new Repo()
1500+
console.log(r.useName()) //Repo name is modern-js-cheatsheet and it contains some really important stuff
1501+
```
1502+
1503+
2. ###### Using the constructor
1504+
1505+
Static methods can be called as properties on the constructor object.
1506+
1507+
```js
1508+
class Repo{
1509+
static getName() {
1510+
return "Repo name is modern-js-cheatsheet"
1511+
}
1512+
1513+
useName(){
1514+
//Calls the static method as a property of the constructor
1515+
return this.constructor.getName() + ' and it contains some really important stuff'
1516+
}
1517+
}
1518+
1519+
// we need to instantiate the class to use non-static methods
1520+
let r = new Repo()
1521+
console.log(r.useName()) //Repo name is modern-js-cheatsheet and it contains some really important stuff
1522+
```
1523+
1524+
#### External resources
1525+
- [static keyword- MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static)
1526+
- [Static Methods- Javascript.info](https://javascript.info/class#static-methods)
1527+
- [Static Members in ES6- OdeToCode](http://odetocode.com/blogs/scott/archive/2015/02/02/static-members-in-es6.aspx)
1528+
14291529
## Glossary
14301530

14311531
### <a name="scope_def"></a> Scope

0 commit comments

Comments
 (0)