Javascript Part 1
variables and Datatypes.
This is part one of a simple to learn process of all the parts that make up javascript. We start with variables and Datatypes.
Variables:
A Variable is like a container that holds a value (number, string, object..). The value of the variable can be changed(only using var or let, NOT const). To use a variable, you must first declare it like so;
We initialize it with “var” keyword (more on that in a bit), then a name usually what's in “the box” is the standard for naming variables and then an equal sign, with a value.
There are three different variables you can use:
(bare-bones concept’s)
- var = this variable is allowed to be used everywhere(or Globally), and it can be reassigned. (hardly used)
- Let = this variable is only allowed to be called in certain areas(or local scope) and it can be reassigned. (used sometimes)
- Const = this variable is only allowed to be called in certain areas(or local scope) and can NOT be reassigned. (used mostly)
Back to my box analogy; you put “objects” in a box. Then when you call on those boxes, they output the values in that box(If that makes sense…).
Why we use variables is so we can fill it with data and use it at a later time.
So, what's happening here?
We are setting two variables one to “myName” and another to “myLastName”. Then running console.log() (console.log is just a method to output information in your console on your browser). In between the parentheses, I put what we want to output, which is done with the “+” to “concatenate” two words (or join together.).
Thus leaving you with “jonathanBleibdrey,” (javascript does not put spaces, it's a computer. So that's why I ran it a second time with empty quotations to show you that you literally have to put spaces when concatenating .)
moving on;
If we wanted to change the value of “myName” or “myLastName,” we would have to write the variable(without keyword var or let) and change the value with “=” and then the new value, like so;
We use “myName” and then a “=” sign to change the initial value to anything we want it to be.
Now if you call myName again it changed its value, easy peasy.
We use a “camel case convention”as well in javascript, the first word is always lowercase, and then every other word after is capitalized…like, “myName” or “myLastName.”
You can also use numbers “0–9”, lowercase “a-z,” uppercase “A-Z” in your variables names.
IT IS CASE SENSITIVE, so “myName” and “MyName” are two different things.
Try to name the variable something intuitive or something that describes what value it is holding.
THE DONT’S OF VARIABLES:
- Don't ever use underscores at the beginning of a variable name, like this “_button.”
- Don't ever put a number at the beginning of a variable.
- Don't use javascript “keywords” like var, const, if, for, function, this, etc.…
NEXT, we talk about;
DATA types:
There are SEVEN data types in javascript
- Boolean it returns a “true” or “false” value
If you look down below, we set the variable to data, and the value of that is true. We then use an “if-else statement” if the first value is true then it will return “hurray it worked”. If it is false, it would go to the next part or “else” and run “nope!.” So since we set the data to equal to true, it returns that first console.log “hurray it worked”
I also switched the data value to false, which in turn skips over the first console.log since it is no longer true and it outputs “nope!”.
2. null means “no value.”
it's not going anywhere(DEAD INPUT, Not really though).
We use this sometimes, when you are writing code and you cant leave it blank statement.
You could also use null for math, because it outputs the same thing as 0;
3.undefined is very similar to null. Undefined means a variable has not been declared or has been declared but not giving a value.
Here we set a variable, but don't give it a value.
We try to add 2 to A, but we back “NaN” Which stands for “Not a number,” that's because it's undefined or we haven't set a value to that variable.
4. Number’s are pretty self-explanatory it's any number(look at the picture for examples)
Dont feel the need to explain this one to much, you can do math with numbers in javascript or in the console.
one thing to mention, is that a number can be decimals,integers and whole numbers, as well.
5.String is just words, it's usually surrounded by quotations.
We set the variable “fun” to the value “bacon bits.” When we console.log it, we use the “+” symbol to concatenate it to the string “hello my name is ”.
Which outputs “hello my name is bacon bits”. Moving on…
6.symbol’s these are new to ES6, they have a unique identity and are immutable(value can not change).
With strings, if you had two variables that both had the same value of “Jonathan” they would return true. With symbols, they are unique and would return false, as it is set to have unique characteristics.
I have yet to use “Symbol()” yet in my coding adventure, but it's basically a way to make a very unique character string.
7.objects collection of properties. A property is an association between a key and value.
Here we are setting “myCar” variable to be a “new object()”
(basically making an empty object, with no characteristics.)
Then we are giving “myCar” some key elements and some values. By saying “myCar.make = “Ford” ”.(we are setting the key and the value at the same time)
Think of objects as Accordion Folder (myCar is what name is of the whole folder), then we have the sub-levels (The key names like make, model, doors, etc…) and then the values are what's actually inside those sub-folders(Ford, Mustang, 3, etc…).
You can also set the key and values like the photo above, and recommend it (probably the easiest way.)
ok, well, that was definitely the hitchhikers' guide to dummy javascript…! I hope this helped a little bit and link for the next one is down below. Feel free to hop around.
check out some more….
Javascript 1 (link to: variables and data types)
Javascript 2 (link to: numbers and strings)
Javascript 3 (link to: bracket notation and 20 diff string methods)
Javascript 4 (link to: functions and how they work)
Javascript 5 (link to: hoisting, comparison operators, and if-else statements)
Javascript 6 (link to: diff. Equal signs, null, and undefined)
Javascript 7 (link to: logical operator, &&, || and ternary operators)
Javascript 8 (link to: switch statements and arrays)
Javascript 9 (link to: commonly used arrays in javascript)
Javascript 10 (link to: Math. And parseInt Usage)
Javascript 11 (link to: for loops and nested for loops)
Javascript 12(link to: while loops and for..in and for..of loops)
Javascript 13( link to: 8 diff array methods)
Javascript 14( link to: objects and ways to use objects)
Javascript 15(link to: JSON and fetch request)
Javascript 16(link to: “this” keyword)
Javascript 17(link to: strict mode and error handling)
Javascript 18(link to: setInterval/setTimeout and Dates)
Also we have React framework…
React part 1 (How to start a react app)
React part 2 (components and dynamic values)
React part 3 (Multiple components and small styling)
React part 4 (click events with functions and react dev tools)
React part 5 (link to: useState hook and how to output lists in react)
React part 6 (Props and reusable components)
React part 7 (passing functions as props and use effect hook)
React part 9 (Fetching data with JSON)
React part 10 (loading bar and fetch errors)
React part 12(React Router Dom, Exact, and Links)
The Social Media…