This primer is meant as a checklist for you.
This primer is not about Angular at all, it's about JavaScript and TypeScript (TypeScript being a superset of JavaScript). This is what we believe is fundamental knowledge about JavaScript/TypeScript; and knowing about these concepts is vital for understanding the upcoming Angular course. Most of this primer is about JavaScript, but a small section will adress TypeScript. The Angular course will be in TypeScript, but you will later see why that is not important right now.
It is advised to try and solve all the assignments (the BONUS ones are just for fun and if you're a nerd that likes to party - but are not required!). We have provided you with enough links to learn what is needed for each assignment. If you get stuck in an assignment, ask a buddy for help - that could be another intern or an employee.
Don't sweat it - we won't ask you for proof of completing the assignments (probably) - but it will make the course so much easier, since you can then concentrate on learning Angular and not basic JavaScript syntax.
JavaScript looks like a lot of other object oriented languages, but it behaves differently in some cases. Using appropriate patterns and staying away from problematic structures can make JavaScript development easy though. We will try not to focus on stuff that probably won't be relevant for the course, but here is a few comparison examples that might seem weird :)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
https://dorey.github.io/JavaScript-Equality-Table/
var funActivity = 'Solving problems';
var doingActivity = 'true';
var havingFun = true;
var problem = undefined;
var reference = null;
var smallNumber = 0;
var nextActivity = '';
var wishList = [];
var item = {};
Prove that all these statements are true, and understand why
!false
,!!true
,!!'false'
,!item.funky
,!wishList.length
smallNumber == nextActivity
,smallNumber !== nextActivity
problem == reference
,problem !== reference
funActivity && havingFun
,reference || havingFun
wishList.length === 0
,smallNumber === 0
Prove that these statements are false, and understand why
!true
,!'false'
,!!item.funky
funActivity !== havingFun
problem === reference
,problem != reference
doingActivity === havingFun
,doingActivity == havingFun
(BONUS) What are the following expressions, and why
havingFun && funActivity
doingActivity && funActivity
item + wishList
smallNumber + havingFun
HINT: You can enter the expressions in the console of your favorite browser (Chrome - press F12)
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
- Define or declare a named function
- Define or declare an anonymous function
- Define or declare an arrow functions
- What are the benefits of the different function types. Why are there three different (basic) function types?
- (BONUS) Explain what closure is, and why it is only awsome if you understand it
- (BONUS) Explain what hoisting is
- (BONUS) Define or declare a generator function
Arrays are high-level list-like objects. You recognize them from almost any other language. But refer to this link for more information:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
const numbers = [1, 2, 3, 4, 5];
const persons = [{ name: 'Per' }, { name: 'Rasmus', funky: true }];
- Use
map
and the arraynumbers
to create a list like this:[10, 20, 30, 40, 50]
(each number multiplied by 10) - Use
map
and the arraypersons
to create a list like this:['Per', 'Rasmus']
(thename
property of each item) - use
filter
and the arraynumbers
to create a list like this:[3, 4, 5]
(all numbers equal to or more than 3) - use
filter
and the arraypersons
to create a list like this[{ name: 'Rasmus', funky: true }]
(all the funky persons) - use
filter
andmap
and the arraypersons
to create a list like this['Per']
(the name of all the persons that are not funky) - (BONUS) use
reduce
and the arraynumbers
to calculate the sum 15.
.map
function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
.filter
function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Without going into too much details, all you need to know for now is, that you can add type annotations and interfaces, as well as add attribute annotations to almost any object.
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Since this is just a quick primer, here are a few key concepts to grasp:
- You
export
functions or variables in one file that you want to (re)use in another file. - You
import
functions from other modules (files) that you want to use in your file. - Use
let
to define variables that can be reassigned andconst
if they can not be reassigned. - Any type can be declared or treated as
any
to kind of bypass type checking. This is mostly not a good practice.
https://www.typescriptlang.org/docs/handbook/modules.html
https://www.typescriptlang.org/docs/handbook/module-resolution.html