10 javascript basics interns should know before the job
Tags: javascript, typescript, beginners
Published: 2022-01-15 18:05:49

**tldr; learn [typescript](https://www.typescriptlang.org/) and [es6](http://es6-features.org/#ObjectAndArrayMatchingDefaultValues)** | 

_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](https://egghead.io/courses/up-and-running-with-typescript) on [egghead.io](egghead.io) or this [longer course](https://www.udemy.com/course/understanding-typescript/) on udemy by our friend Max. And try and remember: typescript doesn't run at runtime!

**2. Arrow functions**

```javascript
const coolFunction = () => returnValue // FAVOUR THIS
const coolFunction = function() { return returnValue } // AVOID THIS, UNLESS NEEDED
```

**3. Template literals**
```javascript
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_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

**4. Property shorthand**
```javascript
let a = "something"
let b = "something else"
const myObject = { a, b } // same as { a: a, b: b}
```

**5. Destructuring assignment**
```javascript
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
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) instead.

```javascript
// 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

```javascript
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**
```javascript

/**
 * 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:

```typescript
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;
```