tldr; learn typescript and es6 |
I have spent a lot of time doing crash courses on JS and TS basics instead of using the time to work on the actual code. Here is what I would recommend anyone know before getting an internship or job for js related work.
1. Typescript . Yes, learn typescript before getting any javascript job. It's a steep learning curve and you will struggle so much trying to understand it if you don't have the basics. See this course on egghead.io or this longer course on udemy by our friend Max. And try and remember: typescript doesn't run at runtime!
2. Arrow functions
const coolFunction = () => returnValue // FAVOUR THIS
const coolFunction = function() { return returnValue } // AVOID THIS, UNLESS NEEDED
3. Template literals
let fruit = "oranges"
const stringValue = `I love ${fruit}` // I love oranges
const fancier = `I love ${favFruit()?.answers?.[0]?.value ?? "fruit"}` // See below for what this means
You could use || instead of ?? read more about nullish coalescing
4. Property shorthand
let a = "something"
let b = "something else"
const myObject = { a, b } // same as { a: a, b: b}
5. Destructuring assignment
let { name, email } = contact // same as name = contact.name..
// or go deeper - careful as contact needs
// to exist and wont be set as variable, only address will
let { contact : { address}} = person // address = person.contact.address
6. Spread operators
Merge arrays and objects easily
let stuff = [ "bye", false, 3 ]
var mergedStuff = [ 1, 2, ...stuff ] // [ 1, 2, "bye", false, 3 ]
7. Optional chaining
Only use if ... then when you need it. Use optional chaining instead.
// this is a getter, ie computed type variable
// learn that too!
get pronouns() {
// safely returns undefined rather than
// blowing up with "can't get property x of undefined"
return person?.details?.pronouns
}
// How to use it with functions and arrays:
let email = getSomething()?.email
// You could also do this:
let { email } = getSomething();
let deepThing = myFunction()?.someArrayProp?.[0]?.detail
8. Common JS methods
Don't shy away from the MDN webdocs, see e.g. .some
let transformedArray = myArray.map(...)
let anArray = myArray.filter(...) // filters out
let aBoolean = myArray.some(...) // .includes, .many, .every
let anItem = myArray.find(...) // returns first item
9. Lodash
Mainly, _.get, _.set, _.uniq, _.omit, _.difference
You will find it in lots of codebases you work on, but many of these are available in vanilla js.
10. JS Doc
/**
* Documenting stuff matters
* @param thing - An important input
* @returns otherthing - Clearly expected result
*/
const gardenFunction = (thing: string) => otherthing
Combining these learnings you need to be able to write and understand:
type Contact = {
readonly address: string;
readonly email?: string;
};
type Person = {
readonly name: string;
readonly contact: Contact;
};
const listOfPeople: ReadonlyArray<Person> = [];
/**
* Find a person's email by name (case insensitive).
*
* @param name Name you are looking for.
* @returns The person's email or `undefined` if not found.
*/
const findPersonEmailByName = (name: string) =>
listOfPeople.find(
person => person.name.toLocaleLowerCase() === name.toLocaleLowerCase(),
)?.contact.email;
Top comments (3)
Yes, As an intern I must say These all are very important topics and some few topics like Hoisting, coercion, Currying function and few more. All these topics are very basics but important to keep us in mind and having the basics concept clear will make the task easy to work with different frameworks.
Thanks for taking the time to provide such great feedback! I have updated the post.
Good article