DEV Community

Cover image for 10 javascript basics interns should know before the job
Olivier
Olivier

Posted on

10 javascript basics interns should know before the job

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

6. Spread operators
Merge arrays and objects easily

let stuff = [ "bye", false, 3 ]
var mergedStuff = [ 1, 2, ...stuff ] // [ 1, 2, "bye", false, 3 ]
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
lukeshiru profile image
Luke Shiru

Yes, learn typescript before getting any javascript job

I love TypeScript, and use it since it's first public release in 2012, and yet I don't agree with this statement. If the interview is about JavaScript and they ask about TypeScript, run away from there. You can still learn TypeScript, just avoid places where they say they are looking for JS devs and then they ask you about TS.

Arrow functions

Your snippet has a typo in the first part:

const coolFunction = function () { return returnValue; }; // DON'T DO THIS
const coolFunction = () => returnValue; // DO THIS
Enter fullscreen mode Exit fullscreen mode

And I would say "favor arrow functions over regular functions", but I wouldn't say "don't do regular functions", because they might be useful in some scenarios.

Template literals

Nothing wrong with the snippet, just that you could do ?? instead of ||.

Lodash

Not a requirement at all, even more so when pretty much everything you might need is already in vanilla JS.


Finally, the last example has some typos as well (the return type of the function isn't Person, you didn't specify the type of the name that function takes, etc). Here's a fixed version:

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;
Enter fullscreen mode Exit fullscreen mode

We also rely more in type inference, and type only what's needed.

Cheers!

Collapse
omills profile image
Olivier Author

Thanks for taking the time to provide such great feedback! I have updated the post.

Collapse
tanwi2209 profile image
Tanwi Kumari

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.

Collapse
anshuman_bhardwaj profile image
Anshuman Bhardwaj

Good article