Skip to content

Commit eb9240a

Browse files
kkm980kkm980
authored
Merge pull request #13 from kkm980/test_branch
Test branch
2 parents a0378a5 + bbc34b5 commit eb9240a

File tree

1 file changed

+220
-1
lines changed

1 file changed

+220
-1
lines changed

‎README.md‎

Lines changed: 220 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,17 @@ One liner clean code snippets in javascript/react with ES6 syntax
1414
| 1 | [Conditional statement](#conditional-statement) |
1515
| 2 | [Add a key-value pair in object conditionally](#add-a-key-value-pair-in-object-conditionally) |
1616
| 3 | [Deleting a particular key from object](#deleting-a-particular-key-from-object) |
17-
| 4 | [filling-array-with-dummy-values](#filling-array-with-dummy-values) |
17+
| 4 | [Filling array with dummy values](#filling-array-with-dummy-values) |
1818

19+
| 5 | [Call function if it exists](#call-function-if-it-exists) |
1920

21+
| 6 | [String to Number](#string-to-number) |
22+
23+
| 7 | [Console related optimisation](#console-related-optimisation) |
24+
25+
| 8 | [Overwrite by default values](#overwrite-by-default-values) |
26+
27+
| 9 | [Conditional default value assignment for numbers](#conditional-default-value-assignment-for-numbers) |
2028

2129
---
2230

@@ -171,11 +179,222 @@ One liner clean code snippets in javascript/react with ES6 syntax
171179
**[⬆ Back to Top](#table-of-contents)**
172180

173181

182+
5. ### Call function if it exists
183+
184+
**Plain javascript conditional calling**
185+
186+
```javascript
187+
const fun=()=>{
188+
<!-- do something -->
189+
}
190+
191+
<!-- call fun function if it exists -->
192+
if(fun){
193+
fun();
194+
}
195+
```
196+
197+
198+
- We will use logical AND operator to achieve same task
199+
200+
```javascript
201+
202+
const fun=()=>{
203+
<!-- do something -->
204+
}
205+
206+
<!-- call fun function if it exists -->
207+
fun && fun();
208+
209+
```
210+
211+
- Better way to do this
212+
213+
```javascript
214+
215+
const fun=()=>{
216+
<!-- do something -->
217+
}
218+
219+
fun?.();
220+
221+
```
222+
223+
**[⬆ Back to Top](#table-of-contents)**
224+
225+
226+
227+
6. ### String to Number
228+
229+
**Plain javascript conversion**
230+
231+
```javascript
232+
const num = '22';
233+
234+
console.log(Number(num));
235+
```
236+
- Better way to do this using unary plus operator
237+
238+
```javascript
239+
const num = '22';
240+
241+
console.log(+num);
242+
```
243+
244+
245+
**[⬆ Back to Top](#table-of-contents)**
246+
247+
248+
7. ### Console related optimization
249+
250+
**i. Plain javascript conditional console**
251+
252+
```javascript
253+
const country = 'India';
254+
255+
if(country){
256+
console.log(`country is:${country}`);
257+
}
258+
```
259+
- Better way to do console using ***console.assert***
260+
261+
```javascript
262+
const country = 'India';
263+
console.assert(country, `country is ${country}`);
264+
```
265+
266+
267+
**ii. Named variable console**
268+
269+
- Often we need to console for debugging, to keep track of variable, part and line of code, variable named console can be done by using object format.
270+
271+
```javascript
272+
const name = 'Krishna Kant';
273+
274+
console.log(name);
275+
```
276+
- Better way to do it
277+
278+
```javascript
279+
const name = 'Krishna Kant';
280+
281+
console.log({name});
282+
```
283+
284+
285+
**iii. Grouping a set of console together**
286+
287+
- Often we need to console a set of variables in a given component or function for debugging, to keep track of variable, part and line of code, we can bind them together using ***console.group***
288+
289+
```javascript
290+
const name = 'Krishna Kant';
291+
const country = 'India';
292+
293+
const employee_details = {
294+
organisation: 'Inventives.ai',
295+
project: 'health care product',
296+
team_size:'5'
297+
}
298+
299+
console.group('general');
300+
301+
console.log({name});
302+
console.log({country});
303+
304+
console.groupEnd();
305+
306+
307+
console.group('employe_details');
308+
309+
console.log({name});
310+
console.log({country});
311+
312+
console.groupEnd();
313+
314+
```
315+
316+
317+
**[⬆ Back to Top](#table-of-contents)**
318+
319+
320+
8. ### Overwrite blocked variables by default values
321+
322+
- There might be instances where some variables from database could have undefined/null values and could break the code operation potentially, so we need to replace them by default values set by us manually.
323+
324+
**Noob assignment**
325+
326+
```javascript
327+
let name = 'Krishna Kant';
328+
let organisation = 'Inventives.ai';
329+
let project = 'health care product';
330+
let team_size = '5';
331+
332+
function print(name, organisation, project, team_size){
333+
const employee_name = name || 'Krishna';
334+
const employee_organisation = organisation || 'Inventives';
335+
const project = project || 'health care startup project';
336+
}
337+
338+
```
339+
- Better way to achieve this task using default parameters, what it does is if the value is not null or undefined, it will be assigned to the new variable otherwise new variable value assignment will pick up default values.
340+
341+
```javascript
342+
let name = 'Krishna Kant';
343+
let organisation = 'Inventives.ai';
344+
let project = 'health care product';
345+
let team_size = '5';
346+
347+
function redefine(name ='Krishna', organisation = 'Inventives', project = 'health care startup project', team_size = 'five'){
348+
const employee_name = name;
349+
const employee_organisation;
350+
const project = project;
351+
}
352+
353+
```
354+
355+
356+
9. ### Conditional default value assignment for numbers
357+
358+
- Using *** || *** operator with number data types might be problematic while logical default value assignment if some variables have value 0 because 0 is read as falsey value by logical operators,
359+
360+
**Plain logical assignment by || operator**
361+
362+
```javascript
363+
const age = 0;
364+
const pending_tasks =0;
365+
const team_size = 5;
366+
367+
const age_copy = age || 1; <! --results 1 -->
368+
const pending_tasks_copy = pending_tasks || 1; <! --results 1 -->
369+
const team_size_copy = team_size || 2; <! --results 5 -->
370+
371+
372+
```
373+
- Better way to achieve this task using default parameters, what it does is if the value is not null or undefined, it will be assigned to the new variable otherwise new variable value assignment will pick up default values.
374+
375+
```javascript
376+
const age = 0;
377+
const pending_tasks =0;
378+
const team_size = 5;
379+
380+
const age_copy = age ? 1; <! --results 0 -->
381+
const pending_tasks_copy = pending_tasks || 1; <! --results 0 -->
382+
const team_size_copy = team_size || 2; <! --results 5 -->
383+
384+
385+
```
386+
387+
**[⬆ Back to Top](#table-of-contents)**
388+
389+
390+
- More code snippets are being added
391+
174392

175393

176394

177395
## Disclaimer
178396

397+
These code snippets are not to understand how to do a task from scratch, assuming that you already know how to achieve a given task successfully, above snippets focus more on clean, reusability, optimisation and lesser-code principle to make the code simple, organised and enhanced.
179398
The code snippets mentioned in this repository are the summary of frequently used codes in Javascript and/or React with ES6 syntax. We cannot guarantee that only these snippets will actually make the code cleaner, smoother and optimised, nor should you focus on copying and pasting them all. The primary purpose is for you to get a sense of how some bulk codes might be replaced with one-liner ES6 conditional and operational statements!
180399

181400

0 commit comments

Comments
 (0)