Common Mistakes in JS
Pronunciation, articulations & explanation
Challenge
Learning to describe and explain code is essential in convincing an interviewer that you are the right person for the job.
Objective
We want to display our coding expertise without the barrier of being hindered by pronunciation and articulation
1
Expertise
We want to demonstrate to an interviewer that we are confident, not only with programming constructs and paradigms, but also using the language
2
Confidence
We want to turn things like articulation, pronunciation and explanation into something that is second nature
3
Mastery
LET'S GET STARTED
Sounds like: 1-2-3
Ternary
Pronunciation:
Incorrect:
Ternarary
const x = sum === 0 ? 'Your account is empty' : `Your total is ${sum}`Say: Turn-uh-ree
Say: Dee-struc-tcher
Destructure
Pronunciation:
Incorrect:
Deconstruct
const {firstName, lastName} = propsSimilar to: 'Thee Structure'
Say: Con-cat-tin-ney-shun
Concatenation
Pronunciation:
Incorrect:
Catination
const str1 = "HELLO"
const str2 = "JD"
return str1 + ' ' + str21-2-3... Turn-uh-ree
Syntactic Sugar
Pronunciation:
Say: Sin-tack-tick sugar
conat [data,setData] = useState([])
// syntactic sugar for a promise
async function getData(){
const res = await axios.get(URL)
const data = await res.data
setData(res.data)
}
function getData(){
axios.get(URL)
.then(data=>setData(res.data)
}
Definition: a more concise syntax that provides the same functionality for something that already exists
e.g. async...await is syntactic sugar for a promise
What about explanations?
"I declared a constant variable, firstName, and assigned it a string value of JD, then re-assigned the variable to a string value of James"
Good
Less Good
"I set firstName equal to JD. Then made it equal to James"
const firstName = "JD"
firstName = "James"Assign, Declared, Value
Statement vs Expression
STATEMENT
if(1+2 === 3) {
console.log('Three')
}
function sum(num1, num2){
return num1 + num2
}
EXPRESSION
const x = 5
const add = function sum(num1, num2){
return num1 + num2
}A statement is a group of expressions and/or statements that you design to carry out a task or an action.
Expressions can be assigned or used as operands
What about copies?
Shallow
DEEP
Shallow Copy
SHALLOW COPY
const arr = [1,2,3,[4,5]]
const arr1 = [...arr]
OR
const arr2 = arrA shallow copy of an array, using the spread operator, can only be made IF the array or object is one level and there are no nested arrays or objects
A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.
As a result, when you change either the source or the copy, you may also cause the other object to change too
Deep Copy
SHALLOW COPY
const arr = [1,2,3,[4,5]]
const arr1 = JSON.parse(JSON.stringify(arr))
A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you're not causing the other object to change too
To Deep Copy, you can use JSON.stringify() to convert the object to a JSON string, and then JSON.parse() to convert the string back into a (completely new) JavaScript object
That's all folks!
Questions?
Palette
By JD Richards
