Zen and the art of Coding

Submit

Please email hello@zenandtheartofcoding.info for a password

Data Types & Syntax

• this is where shit gets mad real. most of this stuff is applicable to all programming languages. once you learn how most of these data types work, you can essentially pick up any other programming language by learning that language's specific syntax and nuances.
• also, this may seem like a lot to take in all at once. it always will make more sense in context as you go.

JavaScript Statements ;

• real quick, before we really get into it, I just want to clear up the semi-colon thing
• you know how in HTML we have elements, which are valid bits of HTML code.
• in JS (and other languages), we call them statements, and statements in JS end with a semi-colon (;).
• a script, or computer program, is essentially a list of intructions for computers and the instructions are usually called statements.
• it might be important to note that semi-colons have become technically optional in recent years so you may see JS code with or without them.
  • fun fact: one of the reasons they are technically optional is because behind the scenes the semi-colons are being added automatically
• so, it is good practice to use them for a few reasons:
  • when the computer adds them automatically, you are leaving yourself open to potential bugs
  • the semi-colons help your eye and brain move along and understand code that you are reading and writing
  • TLDR; they help prevent bugs and errors

Primitive Data Types

• JavaScript has 8 data types

1. Strings

• first up are strings. strings are what you think of as text. a string of text.
• most programming languages use quotation marks to represent strings.

"I am a string";

• in JS you can use single ('') or double ("") quotation marks for strings. it is generally good practice to use the double quotes though. a lot of code formatters will change your single quotes to doubles for you. the main reason is if you are using single quotes for a string and you need an apostrophe in a word, the computer will think your string is ending and you will get errors. so try to default to double quotes.
• you can also use back-ticks (``) for strings. these are actually called template literals (opens in a new tab). you use these when you need multi-line strings or when you want to use a variable in a string

`I am also a string`;

• more on variables on the next page but just to get the syntax out of the way; with the back-ticks, you can slip variables into strings using a dollar sign and curly braces (${}) like this:

`I am a string with a ${variable}`;

2. Numbers

• this one is pretty easy. if you don't know what a number is, maybe coding isn't for you 🥴
• JavaScript actually makes numbers super easy. in some other programming languages (C++, Python, Java, etc.) there are different kinds of numbers like ints, floats and doubles. can this potentially cause precision and rounding issues with large floating point numbers? definitely. do you have to worry about that right now? not even a little. and when you do have to worry about that, JS still has you covered with integer methods and (conveniently) our next data type.

// this is a number
420;
 
// this is also a number
420.69;
 
// this is also a number
420.0;
 
// this is NOT a number, this is a string bc of the quotes
("420");

3. BigInt

• since JS is a little loose with numbers, it can really only handle numbers that are about 15 characters long. after that results will start to automatically round and results can get a little weird.
• so if you need to deal with calculating gigantic numbers, you can use BigInt, which is technically not considered a "number" by JS 🤷‍♂️
• use BigInt like this:

BigInt(999999999999999);

4. Boolean

• a boolean is a fancy way to say something is either true or false.
• true and false values are super common in programming and in JavaScript there are a bunch of ways to determine if something is true or false.
• you can explicitly define something as true or false using the keywords.
• the syntax for booleans is just true or false, just like that in all lowercase.

let isAuthenticated = false;

• maybe more common though is for something to return a boolean value
• those are implicit (or coercive) ways to get boolean values

5 < 10;
// returns true bc 5 is less than 10

• so, technically the above is not actually a boolean, but it returns a boolean value (true)
• these implicit or coercive boolean values are known as truthy and falsey values (spellcheck and autocorrect love those words 🙃)

truthy & falsey

• there are a few rules for truthy and falsey values. I debated getting into this here but fuck it, I think its good to know. dont't worry about memorizing this right now and again this will make more sense with more context
• there are only a handful of values that get coerced to falsey, all other values are truthy
• 0 and -0 are falsey. all other numbers, including BigInts are truthy
• undefined & null are falsey
• empty strings ("") are falsey. all other strings are truthy

5. Undefined

• this one is a little self explanatory.
• you get undefined when something has not been assigned a value.
• syntax is again just all lowercase:

undefined;

• you usually don't write undefined in your code, you more often will see it when a function is not working properly.

6. Null

• null is similar to undefined except null is when something is intentionally not assigned a value.
• unlike undefined, you will use null in your code to represent nothing

let aValue = null;

note: comparing undefined and null can be a little confusing bc they both represent the absence of a value. think of them more as intentional and unintentional. if you are using null, you are telling the computer "nothing goes here". if your function is returning undefined, then something is probably fucked up.

7. Symbol

• this one is a newer data type and tbh I would say it is mostly unnecessary to even get into
• its used mostly to make a value unique
• deep dive (opens in a new tab) if you are curious
• this is a little confusing bc a lot of people might think of things like < (less than), == (equality), !=(inequality), etc as symbols but those are operators

8. Object

• objects are super imprtant
• basically objects describe things in key: value pairs
• objects are awesome for holding specific data and theres a bunch of ways to use objects for reading and writing to them
• the JavaScript object, specifically in modern programming, has become almost its own animal. you may have heard of JSON seemingly referred to as something separate from JavaScript but it stands for JavaScript Object Notation
  • a lot of modern databases are even in JSON formats (these are called NoSQL databases FYI)
• the values in JS objects can be any data type too
• the syntax is to use curly braces for the entire object, a colon (:) to separate the key and the value, and commas (,) to separate the pairs:

const adam = {
  name: "Adam",
  favFood: "ramen",
  lovesCoffee: true,
  numOfGuitarsOwned: 12,
  favBandsThisWeek: [
    "Trapped Under Ice",
    "Tom Petty & The Heartbreakers",
    "Oasis",
    "Silent Majority",
    "Queens of the Stone Age",
  ],
};

• that is me as an object. I used a few different data types as vales and even snuck in an array 🤓

Array

• technically an array is a data structure, not a data type but arrays are so important that I thought it would be good to see it here and get a jump on them
• some languages like Python 🐍 simply call them lists and that is exactly what they are. an array is a list of any of the above data types. you can mix and match data types too, meaning you can have multiple data types in your arrays
• the syntax for arrays is to use the square brackets [] and then separate the items in the array with commas (,)

// a sorted array of numbers 1 - 5
[1, 2, 3, 4, 5];

• JavaScript, like most programming languages, has a ton of built-in functions (called methods) for working with arrays. we will get deep into that but for now just know that square brackets make an array

const arrOfStrings = ["Wu", "Tang", "Clan"];
 
const aMixedArr = ["Method Man", 420, false, "420.69"];
 
const arrOfObjects = [
  {
    id: 1,
    name: "Raekwon the Chef",
  },
  {
    id: 2,
    name: "Ghostface Kila",
  },
  {
    id: 3,
    name: "Dirt McGirt",
  },
];