@burakboduroglu/penote 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +223 -0
- package/CHANGELOG.md +64 -0
- package/CONTRIBUTING.md +102 -0
- package/Java-Notes/jpa_hibernate.md +168 -0
- package/Java-Notes/lombok.md +41 -0
- package/Java-Notes/readme.md +15 -0
- package/Java-Notes/spring_boot_framework.md +227 -0
- package/Javascript-Notes/async_js.md +82 -0
- package/Javascript-Notes/closures_currying_compose.md +63 -0
- package/Javascript-Notes/javascirpt_array_methods.md +339 -0
- package/Javascript-Notes/readme.md +16 -0
- package/Javascript-Notes/regex_part_1.md +258 -0
- package/LICENSE +21 -0
- package/MongoDB-Notes/mongodb_basic_1.md +1 -0
- package/MongoDB-Notes/readme.md +13 -0
- package/Python-Notes/advanced_python_1.md +142 -0
- package/Python-Notes/advanced_python_2.md +155 -0
- package/Python-Notes/python_basic_1.md +132 -0
- package/Python-Notes/python_basic_2.md +137 -0
- package/Python-Notes/python_basic_3.md +139 -0
- package/Python-Notes/python_db_process.md +126 -0
- package/Python-Notes/readme.md +18 -0
- package/README.md +179 -0
- package/SQL-Notes/psql_on_terminal.md +26 -0
- package/SQL-Notes/readme.md +16 -0
- package/SQL-Notes/sql_advanced_1.md +92 -0
- package/SQL-Notes/sql_basic_1.md +114 -0
- package/SQL-Notes/sql_basic_2.md +92 -0
- package/assets/demo.png +0 -0
- package/assets/penote-logo.svg +34 -0
- package/library/cli.js +1253 -0
- package/library/index.html +475 -0
- package/package.json +57 -0
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
## 🌱 Spring Annotations
|
|
2
|
+
|
|
3
|
+
#### @Repository :
|
|
4
|
+
|
|
5
|
+
- Class Level Annotation
|
|
6
|
+
- It can reach the database and do all the operations.
|
|
7
|
+
- It make the connection between the database and the business logic.
|
|
8
|
+
- DAO is a repository.
|
|
9
|
+
- It is a marker interface.
|
|
10
|
+
|
|
11
|
+
```java
|
|
12
|
+
@Repository
|
|
13
|
+
public class TestRepo{
|
|
14
|
+
public void add(){
|
|
15
|
+
System.out.println("Added");
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
#### @Service :
|
|
21
|
+
|
|
22
|
+
- Class Level Annotation
|
|
23
|
+
- It is a marker interface.
|
|
24
|
+
- It is a business logic.
|
|
25
|
+
- It is a service layer.
|
|
26
|
+
- It used to create a service layer.
|
|
27
|
+
|
|
28
|
+
```java
|
|
29
|
+
@Service
|
|
30
|
+
public class TestService{
|
|
31
|
+
public void service1(){
|
|
32
|
+
//business code (iş kodları)
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
#### @Autowired :
|
|
40
|
+
|
|
41
|
+
- Field Level Annotation
|
|
42
|
+
- It is used to inject the dependency.
|
|
43
|
+
- It is used to inject the object.
|
|
44
|
+
- It is used to inject the object reference.
|
|
45
|
+
- Dependency Injection is a design pattern.
|
|
46
|
+
|
|
47
|
+
```java
|
|
48
|
+
public class Brand{
|
|
49
|
+
private int id;
|
|
50
|
+
private String name;
|
|
51
|
+
|
|
52
|
+
@Autowired
|
|
53
|
+
public Brand(int id, String name){
|
|
54
|
+
this.id = id;
|
|
55
|
+
this.name = name;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
#### @Controller :
|
|
63
|
+
|
|
64
|
+
- Class Level Annotation
|
|
65
|
+
- It is a marker interface.
|
|
66
|
+
- It is a controller layer.
|
|
67
|
+
- It is used to create a controller layer.
|
|
68
|
+
- It use with @RequestMapping annotation.
|
|
69
|
+
|
|
70
|
+
```java
|
|
71
|
+
@Controller
|
|
72
|
+
@RequestMapping("/api/brands")
|
|
73
|
+
public class BrandsController{
|
|
74
|
+
@GetMapping("/getall")
|
|
75
|
+
public Employee getAll(){
|
|
76
|
+
return brandService.getAll();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
#### @RequestMapping :
|
|
84
|
+
|
|
85
|
+
- Method Level Annotation
|
|
86
|
+
- It is used to map the HTTP request with specific method.
|
|
87
|
+
|
|
88
|
+
```java
|
|
89
|
+
@Controller
|
|
90
|
+
@RequestMapping("/api/brands")
|
|
91
|
+
public class BrandsController{
|
|
92
|
+
@GetMapping("/getall")
|
|
93
|
+
public Employee getAll(){
|
|
94
|
+
return brandService.getAll();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
#### @GetMapping :
|
|
102
|
+
|
|
103
|
+
- Method Level Annotation
|
|
104
|
+
- It is used to map the HTTP GET request with specific method.
|
|
105
|
+
- It is used to get the data.
|
|
106
|
+
- It is used to read the data.
|
|
107
|
+
```java
|
|
108
|
+
@GetMapping("/getall")
|
|
109
|
+
public Employee getAll(){
|
|
110
|
+
return brandService.getAll();
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
#### @PostMapping :
|
|
117
|
+
|
|
118
|
+
- Method Level Annotation
|
|
119
|
+
- It is used to map the HTTP POST request with specific method.
|
|
120
|
+
- It is used to add the data.
|
|
121
|
+
- It is used to create the data.
|
|
122
|
+
```java
|
|
123
|
+
@PostMapping("/add")
|
|
124
|
+
public void add(@RequestBody Brand brand){
|
|
125
|
+
brandService.add(brand);
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
#### @PutMapping :
|
|
132
|
+
|
|
133
|
+
- Method Level Annotation
|
|
134
|
+
- It is used to map the HTTP PUT request with specific method.
|
|
135
|
+
- It is used to update the data.
|
|
136
|
+
```java
|
|
137
|
+
@PutMapping("/update")
|
|
138
|
+
public void update(@RequestBody Brand brand){
|
|
139
|
+
brandService.update(brand);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
#### @DeleteMapping :
|
|
146
|
+
|
|
147
|
+
- Method Level Annotation
|
|
148
|
+
- It is used to map the HTTP DELETE request with specific method.
|
|
149
|
+
- It is used to delete the data.
|
|
150
|
+
```java
|
|
151
|
+
@DeleteMapping("/delete")
|
|
152
|
+
public void delete(@RequestBody Brand brand){
|
|
153
|
+
brandService.delete(brand);
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
#### @PathVariable :
|
|
160
|
+
|
|
161
|
+
- Method Level Annotation
|
|
162
|
+
- It is used to get the data from the URL.
|
|
163
|
+
- It is the most suitable for RESTful web service that contains a path variable.
|
|
164
|
+
```java
|
|
165
|
+
@GetMapping("/getbyid/{id}")
|
|
166
|
+
public Brand getById(@PathVariable int id){
|
|
167
|
+
return brandService.getById(id);
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
#### @RequestBody:
|
|
174
|
+
|
|
175
|
+
- It is used to get the data from the request body.
|
|
176
|
+
- It is used to get the data from the HTTP request.
|
|
177
|
+
- It is used to get the data from the HTTP request body.
|
|
178
|
+
|
|
179
|
+
```java
|
|
180
|
+
@PostMapping("/add")
|
|
181
|
+
public void add(@RequestBody Brand brand){
|
|
182
|
+
brandService.add(brand);
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
#### @RequestParam:
|
|
189
|
+
|
|
190
|
+
- It is used to get the data from the URL.
|
|
191
|
+
- It is used to get the data from the URL query parameters.
|
|
192
|
+
- It is also known as query parameter.
|
|
193
|
+
|
|
194
|
+
```java
|
|
195
|
+
@GetMapping("/getbyid")
|
|
196
|
+
public Brand getById(@RequestParam int id){
|
|
197
|
+
return brandService.getById(id);
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
#### @RestController:
|
|
204
|
+
|
|
205
|
+
- Class Level Annotation
|
|
206
|
+
- It is a marker interface.
|
|
207
|
+
- It is a controller layer.
|
|
208
|
+
- It is used to create a controller layer.
|
|
209
|
+
- It use with @RequestMapping annotation.
|
|
210
|
+
- It is a combination of @Controller and @ResponseBody annotations.
|
|
211
|
+
- @RestController annotation is explained with @ResponseBody annotation.
|
|
212
|
+
- @ResponseBody eliminates the need to add a comment to every method.
|
|
213
|
+
|
|
214
|
+
```java
|
|
215
|
+
@RestController
|
|
216
|
+
@RequestMapping("/api/brands")
|
|
217
|
+
public class BrandsController{
|
|
218
|
+
@GetMapping("/getall")
|
|
219
|
+
public Employee getAll(){
|
|
220
|
+
return brandService.getAll();
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
* ✅ Beğendiyseniz depoya yıldız verebilirsiniz. Okuduğunuz için teşekkürler.
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
## `Fetch API:`
|
|
2
|
+
- The Fetch API is a JavaScript interface that allows for making network requests in a modern and flexible way.
|
|
3
|
+
|
|
4
|
+
```javascript
|
|
5
|
+
fetch("https://jsonplaceholder.typicode.com/users")
|
|
6
|
+
.then(resp => resp.json())
|
|
7
|
+
.then(console.log)
|
|
8
|
+
```
|
|
9
|
+
- This code block uses the Fetch API to make a GET request to the URL "https://jsonplaceholder.typicode.com/users", which returns a JSON response containing an array of user data.
|
|
10
|
+
- The `then()` method is used twice to handle the response: the first `then()` method converts the response to a JSON object, and the second `then()` method logs the JSON object to the console.
|
|
11
|
+
|
|
12
|
+
## `Promise:`
|
|
13
|
+
- A promise is a JavaScript object that represents an eventual result of an asynchronous operation.
|
|
14
|
+
```javascript
|
|
15
|
+
const promise = new Promise((resolve, reject) => {
|
|
16
|
+
if(true){
|
|
17
|
+
resolve("RESOLVE WORKED!!!")
|
|
18
|
+
} else {
|
|
19
|
+
reject("REJECT WORKED!!!")
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
promise.then(result => console.log(result))
|
|
23
|
+
```
|
|
24
|
+
- This code block creates a new Promise object that takes a function as an argument with resolve and reject functions as parameters.
|
|
25
|
+
- The if statement checks whether a condition is true or false, and if true, the resolve function is called with a message.
|
|
26
|
+
- The then() method is used to handle the resolved value of the promise and logs it to the console.
|
|
27
|
+
|
|
28
|
+
## `ASYNC Function:`
|
|
29
|
+
- An async function in JavaScript allows you to write asynchronous code that looks like synchronous code, making it easier to read and understand.
|
|
30
|
+
```javascript
|
|
31
|
+
async function fetchUsers(){
|
|
32
|
+
const resp = await fetch(urls[0]);
|
|
33
|
+
const data = await resp.json();
|
|
34
|
+
console.log(data);
|
|
35
|
+
}
|
|
36
|
+
fetchUsers();
|
|
37
|
+
```
|
|
38
|
+
- This code block declares an `async` function `fetchUsers()` which makes an asynchronous network request using the Fetch API to the URL stored in the `urls` array. The `await` keyword is used to wait for the response from the request and then for the response body to be converted to a JSON object.
|
|
39
|
+
- Finally, the JSON object is logged to the console using `console.log()`. The `fetchUsers()` function is then called to execute this asynchronous operation.
|
|
40
|
+
|
|
41
|
+
## `More Example About This Topic:`
|
|
42
|
+
### `Example-1:`
|
|
43
|
+
```javascript
|
|
44
|
+
const urls = [
|
|
45
|
+
"https://jsonplaceholder.typicode.com/users", //users
|
|
46
|
+
"https://jsonplaceholder.typicode.com/albums", //albums
|
|
47
|
+
"https://jsonplaceholder.typicode.com/photos" //photos
|
|
48
|
+
]
|
|
49
|
+
|
|
50
|
+
// With Promise
|
|
51
|
+
Promise.all(urls.map(url =>
|
|
52
|
+
fetch(url).then(resp => resp.json())
|
|
53
|
+
)).then(arr => {
|
|
54
|
+
console.log("Users: ", arr[0]);
|
|
55
|
+
console.log("Albums: ", arr[1]);
|
|
56
|
+
console.log("Photos: ", arr[2]);
|
|
57
|
+
}).catch("Errorrrrr!!!!");
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### `Example-2:`
|
|
62
|
+
```javascript
|
|
63
|
+
const urls = [
|
|
64
|
+
"https://jsonplaceholder.typicode.com/users", //users
|
|
65
|
+
"https://jsonplaceholder.typicode.com/albums", //albums
|
|
66
|
+
"https://jsonplaceholder.typicode.com/photos" //photos
|
|
67
|
+
]
|
|
68
|
+
|
|
69
|
+
// With ASYNC-AWAIT
|
|
70
|
+
try {
|
|
71
|
+
const getData = async function() {
|
|
72
|
+
const [users, albums, photos] = await Promise.all(urls.map(url => fetch(url).then(resp => resp.json())))
|
|
73
|
+
console.log("Users: ", users);
|
|
74
|
+
console.log("Albums: ", albums);
|
|
75
|
+
console.log("Photos: ", photos);
|
|
76
|
+
}
|
|
77
|
+
getData();
|
|
78
|
+
} catch (err) {
|
|
79
|
+
console.log("Errorrrr!!!");
|
|
80
|
+
console.log(err);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
### Javascript Closure, Currying and Compose
|
|
2
|
+
|
|
3
|
+
## `Closure:`
|
|
4
|
+
- A closure is a function having access to the parent scope, even after the parent function has closed.
|
|
5
|
+
- Example:
|
|
6
|
+
```javascript
|
|
7
|
+
function outer() {
|
|
8
|
+
let a = 10;
|
|
9
|
+
function inner() {
|
|
10
|
+
console.log(a);
|
|
11
|
+
}
|
|
12
|
+
return inner;
|
|
13
|
+
}
|
|
14
|
+
const innerFn = outer();
|
|
15
|
+
innerFn(); // 10
|
|
16
|
+
```
|
|
17
|
+
- In the above example, the inner function has access to the variable a, even after the outer function has returned. This is because of closure.
|
|
18
|
+
|
|
19
|
+
## `Currying:`
|
|
20
|
+
- Currying is a technique of evaluating function with multiple arguments, into sequence of functions with single argument.
|
|
21
|
+
- Example:
|
|
22
|
+
```javascript
|
|
23
|
+
function curriedAdd(a) {
|
|
24
|
+
return function(b) {
|
|
25
|
+
return a + b;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const add5 = curriedAdd(5);
|
|
29
|
+
add5(10); // 15
|
|
30
|
+
```
|
|
31
|
+
- In the above example, the curriedAdd function returns a function which takes a single argument and returns the sum of the argument passed to the curriedAdd function and the argument passed to the returned function.
|
|
32
|
+
- Example with 'Arrow Function':
|
|
33
|
+
```javascript
|
|
34
|
+
const curriedAdd = a => b => a + b;
|
|
35
|
+
const add5 = curriedAdd(5);
|
|
36
|
+
add5(10); // 15
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## `Compose:`
|
|
40
|
+
- Compose is a technique of combining two or more functions to produce a new function.
|
|
41
|
+
- Example:
|
|
42
|
+
```javascript
|
|
43
|
+
function compose(f, g) {
|
|
44
|
+
return function(a) {
|
|
45
|
+
return f(g(a));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
const sum = num => num + 1;
|
|
49
|
+
const multiply = num => num * 2;
|
|
50
|
+
const multiplyAndSum = compose(sum, multiply);
|
|
51
|
+
multiplyAndSum(5); // 11
|
|
52
|
+
```
|
|
53
|
+
- In the above example, the compose function takes two functions as arguments and returns a new function which takes a single argument and returns the result of the first function applied to the result of the second function applied to the argument.
|
|
54
|
+
- Example with 'Arrow Function':
|
|
55
|
+
```javascript
|
|
56
|
+
const compose = (f, g) => a => f(g(a));
|
|
57
|
+
const sum = num => num + 1;
|
|
58
|
+
const multiply = num => num * 2;
|
|
59
|
+
const multiplyAndSum = compose(sum, multiply);
|
|
60
|
+
multiplyAndSum(5); // 11
|
|
61
|
+
```
|
|
62
|
+
✅ If you like this article, you can give me a star on. 😎
|
|
63
|
+
Thanks for reading. 🙏
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
### Javascript Array Methods
|
|
2
|
+
|
|
3
|
+
- #### -> **Map:**
|
|
4
|
+
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
|
|
5
|
+
|
|
6
|
+
```javascript
|
|
7
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
8
|
+
let newArr = arr.map(function (val) {
|
|
9
|
+
return val * 2;
|
|
10
|
+
});
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
- #### -> **Filter:**
|
|
16
|
+
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
|
|
17
|
+
|
|
18
|
+
```javascript
|
|
19
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
20
|
+
let newArr = arr.filter(function (val) {
|
|
21
|
+
return val % 2 === 0;
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
- #### -> **Reduce:**
|
|
28
|
+
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
32
|
+
let newArr = arr.reduce(function (acc, val) {
|
|
33
|
+
return acc + val;
|
|
34
|
+
}, 0);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
- #### -> **Every:**
|
|
40
|
+
The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
44
|
+
let newArr = arr.every(function (val) {
|
|
45
|
+
return val % 2 == 0;
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
- #### -> **Some:**
|
|
52
|
+
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
56
|
+
let newArr = arr.some(function (val) {
|
|
57
|
+
return val > 5;
|
|
58
|
+
});
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
- #### -> **Sort:**
|
|
64
|
+
The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
|
|
65
|
+
|
|
66
|
+
```javascript
|
|
67
|
+
let arr = [12, 2, 34, 14, 5, 86, 17, 8, 91, 10];
|
|
68
|
+
let newArr = arr.sort(function (a, b) {
|
|
69
|
+
return a - b;
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
- #### -> **Reverse:**
|
|
76
|
+
The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
|
|
77
|
+
|
|
78
|
+
```javascript
|
|
79
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
80
|
+
let newArr = arr.reverse();
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
- #### -> **Concat:**
|
|
86
|
+
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
let arr1 = [1, 2, 3, 4, 5];
|
|
90
|
+
let arr2 = [6, 7, 8, 9, 10];
|
|
91
|
+
let newArr = arr1.concat(arr2);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
- #### -> **Slice:**
|
|
97
|
+
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
101
|
+
let newArr = arr.slice(2, 5);
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
- #### -> **Splice:**
|
|
107
|
+
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
111
|
+
let newArr = arr.splice(2, 5);
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
- #### -> **Join:**
|
|
117
|
+
The join() method joins all elements of an array into a string.
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
121
|
+
let newStr = arr.join('-');
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
- #### -> **Split:**
|
|
127
|
+
The split() method is used to split a string into an array of substrings, and returns the new array.
|
|
128
|
+
|
|
129
|
+
```javascript
|
|
130
|
+
let str = '1-2-3-4-5-6-7-8-9-10';
|
|
131
|
+
let newArr = str.split('-');
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
- #### -> **Push:**
|
|
137
|
+
The push() method adds one or more elements to the end of an array and returns the new length of the array.
|
|
138
|
+
|
|
139
|
+
```javascript
|
|
140
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
141
|
+
let newArr = arr.push(11);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
- #### -> **Pop:**
|
|
147
|
+
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
|
|
148
|
+
|
|
149
|
+
```javascript
|
|
150
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
151
|
+
let newArr = arr.pop();
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
- #### -> **Shift:**
|
|
157
|
+
The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.
|
|
158
|
+
|
|
159
|
+
```javascript
|
|
160
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
161
|
+
let newArr = arr.shift();
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
- #### -> **Unshift:**
|
|
167
|
+
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
|
|
168
|
+
|
|
169
|
+
```javascript
|
|
170
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
171
|
+
let newArr = arr.unshift(0);
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
- #### -> **Includes:**
|
|
177
|
+
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
|
|
178
|
+
|
|
179
|
+
```javascript
|
|
180
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
181
|
+
let bool = arr.includes(5);
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
- #### -> **IndexOf:**
|
|
187
|
+
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
191
|
+
let index = arr.indexOf(5);
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
- #### -> **LastIndexOf:**
|
|
197
|
+
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
|
|
198
|
+
|
|
199
|
+
```javascript
|
|
200
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 5, 10];
|
|
201
|
+
let index = arr.lastIndexOf(5);
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
- #### -> **Find:**
|
|
207
|
+
The find() method returns the value of the first element in the provided array that satisfies the provided testing function. Otherwise undefined is returned.
|
|
208
|
+
|
|
209
|
+
```javascript
|
|
210
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
211
|
+
let newArr = arr.find(function (val) {
|
|
212
|
+
return val === 5;
|
|
213
|
+
});
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
- #### -> **FindIndex:**
|
|
219
|
+
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.
|
|
220
|
+
|
|
221
|
+
```javascript
|
|
222
|
+
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
223
|
+
let newArr = arr.findIndex(function (val) {
|
|
224
|
+
return val === 5;
|
|
225
|
+
});
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
## -> Other Features
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
### **Destructuring Objects:**
|
|
235
|
+
|
|
236
|
+
Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
|
|
237
|
+
|
|
238
|
+
```javascript
|
|
239
|
+
let obj = {
|
|
240
|
+
name: 'John',
|
|
241
|
+
age: 30,
|
|
242
|
+
city: 'New York',
|
|
243
|
+
};
|
|
244
|
+
let { name, age, city } = obj;
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
### **Destructuring Arrays:**
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
let arr = ['John', 30, 'New York'];
|
|
253
|
+
let [name, age, city] = arr;
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
### **Rest Parameters:**
|
|
259
|
+
|
|
260
|
+
```javascript
|
|
261
|
+
function sum(...args) {
|
|
262
|
+
let sum = 0;
|
|
263
|
+
for (let arg of args) sum += arg;
|
|
264
|
+
return sum;
|
|
265
|
+
}
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
---
|
|
269
|
+
|
|
270
|
+
### **Spread Objects:**
|
|
271
|
+
|
|
272
|
+
```javascript
|
|
273
|
+
let obj1 = { name: 'John', age: 30 };
|
|
274
|
+
let obj2 = { city: 'New York' };
|
|
275
|
+
let obj3 = { ...obj1, ...obj2 };
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
### **Spread Arrays:**
|
|
281
|
+
|
|
282
|
+
```javascript
|
|
283
|
+
let arr1 = [1, 2, 3];
|
|
284
|
+
let arr2 = [4, 5, 6];
|
|
285
|
+
let arr3 = [...arr1, ...arr2];
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
### **Default Parameters:**
|
|
291
|
+
|
|
292
|
+
```javascript
|
|
293
|
+
function sum(a = 0, b = 0) {
|
|
294
|
+
return a + b;
|
|
295
|
+
}
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
300
|
+
### **Arrow Functions:**
|
|
301
|
+
|
|
302
|
+
```javascript
|
|
303
|
+
let sum = (a, b) => a + b;
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
---
|
|
307
|
+
|
|
308
|
+
### **Template Literals:**
|
|
309
|
+
|
|
310
|
+
```javascript
|
|
311
|
+
let name = 'John';
|
|
312
|
+
let age = 30;
|
|
313
|
+
let city = 'New York';
|
|
314
|
+
let str = `My name is ${name}, I'm ${age} years old, and I live in ${city}.`;
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
### **Object Literal Shorthand:**
|
|
320
|
+
|
|
321
|
+
```javascript
|
|
322
|
+
let name = 'John';
|
|
323
|
+
let age = 30;
|
|
324
|
+
let city = 'New York';
|
|
325
|
+
let obj = { name, age, city };
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
### **Destructuring Params:**
|
|
331
|
+
|
|
332
|
+
```javascript
|
|
333
|
+
function sum({ a, b }) {
|
|
334
|
+
return a + b;
|
|
335
|
+
}
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
✅ If you like this article, you can give me a star on. 😎
|
|
339
|
+
Thanks for reading. 🙏
|