10 javascript basics interns should know before the job

#javascript #typescript #beginners

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)

Tanwi Kumari • Jan 16 '22

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.