JavaScript Syntax & Core Fundamentals – Comprehensive Study Notes
JavaScript Syntax Overview
- Alright, check it! JavaScript Syntax? That's just, like, the super-duper rules for writin' code so the computer brain can totally get what you're tryin' to do. Ya gotta play by the rules, man!
- It's all about statements, expressions, variables, functions, operators, and how the code flows, ya know?
- Basic printing for quick output / debugging, so you can see what's happenin':
js console.log("Basic Print method in JavaScript");
- Here's a cool little example showin' how variables work and some math! It demonstrates statement separation, assigning values, and figuring out what an expression equals:
// Variable declaration
let c, d, e;
// Assign value to the variable
c = 5;
// Compute value of variables
d = c;
e = c / d; // divides 5 by 5 → 1
- Mathematical representation:
JavaScript Values & Literals
- Man, when it comes to values in JavaScript, it's kinda like two main types:
- Fixed values → "literals" (directly embedded, immutable after creation). These are just chillin' there, like a cool rock, not changin'.
- Variable values → "variables" (named storage whose value can change over time). These are like, little named boxes where stuff can totally change over time!
- And get this, these "literals" got their own little gangs and rules:
- Numbers: Can be written with or without a decimal point. Easy peasy!
- Examples:
50,50.05 - Strings: These are sequences of characters, all held together by single
'or double"quotes. Like words in a bubble! - Examples:
"Geek",'Geeks'
- Check out this demonstration – we're gonna print all four literal types, mathematical style!
let num1 = 50;
let num2 = 50.05;
let str1 = "Geek";
let str2 = 'Geeks';
console.log(num1);
console.log(num2);
console.log(str1);
console.log(str2);
- Expected output (in this order, dude!):
- Geek
- Geeks
Variables
- Variables, dude, they're like the fancy names (identifiers) for little spots in your computer's brain where you stash all your important stuff.
- Now, about where these variables can actually, like, hang out – their 'scopes' or 'visibility', ya know? It's kinda groovy:
- Global variables → These guys are like, totally everywhere! Declared outside any function or hooked up to the
window(or 'global' thingy), so everyone can see 'em, ALL THE TIME! - Local variables → But then you got these shy ones, the 'local' variables. They're declared inside a function or a block, and they only show up there, kinda like a secret club!
- Global variables → These guys are like, totally everywhere! Declared outside any function or hooked up to the
- Here's a cool example showin' off both types of scope and how a function swings into action:
// Global variable declaration & initialization, visible everywhere!
let Name = "Apple";
// Function definition, where some local magic happens
function MyFunction() {
// Local variable declaration, only visible inside MyFunction
let num = 45;
// Accessing the global variable – woohoo, I see you, Apple!
console.log(Name);
// Accessing the local variable – hey there, secret number!
console.log(num);
}
// Function invocation, let's make it happen, Captain!
MyFunction();
- The output order?
Apple, then45. Mathematical!
Operators
- Operators, man, these are the little symbols that do all the cool math and stuff on your numbers and words! They just spit out a result, bing-bang-boom!
- We got 'em for mathy stuff (
+,-,*,/) and for assigning values (=,+=,%=, you get the picture!). - Here's a quick rundown of some operators, but remember, the order they go in is like, super important, kinda like PEMDAS, but for JavaScript! Precedence, ya dig?
- Addition:
- Subtraction:
- Multiplication:
- Division:
- Modulus: (that's the remainder, man, using
%)
- Check out this demo for some math and assigning values. It's totally radical:
let x = 3;
let y = 23;
let sum = x + y; // uses + (arithmetic) & = (assignment) – two birds, one stone!
console.log(sum); // → 26, baby!
- Mathematical representation:
Expressions
- Expressions? Oh, those are like, any bit of code that figures itself out and spits out a value. Totally Mathematical!
- They're just a groovy mix of values + variables + operators all mashed up.
- Think
x + y, ora *= 3, or even calling a function likemyFunc(2). - Here's a sample walk-through of building and evaluating one of these bad boys:
let x, y, sum;
x = 3;
y = 23;
sum = x + y; // This whole thing right here? That's an expression! It turns into 26!
console.log(sum);
Keywords
- Keywords, dudes, these are like, sacred words! JavaScript's got 'em reserved, so you can't use 'em for your own variable names or anything. They got special powers!
- Stuff like
letfor declaring variables, andfunctionfor, well, declaring functions! - Peek at this illustration:
let a, b; // declares two variables, totally cool
function GFG() { /*...*/ } // defines a function, also totally cool
Comments
- Comments are like, your secret notes in the code! The computer just skips right over 'em, but they're super helpful for us humans to remember stuff, or even turn off some code for a bit. It helps you keep your thoughts straight, ya know?
- For a single line, just slap
//at the beginning. - For a big block of thoughts, wrap it between
/*and*/. - It's super important, man, it helps explain what you're trying to do, gives warnings, reminds you of stuff to fix later, or even totally silences bits of code if you're tryin' to debug!
- Here's an example jammin' together declarations, expressions, and some awesome comments:
// Variable Declarations, gotta start somewhere!
let x, num, sum;
// Assign values to our variables, filling 'em up!
x = 20;
let y = 30; // (Hey, I fixed a little boo-boo here for ya, added 'let' for consistency, you're welcome!)
// Expression to divide a number, woosh!
num = x / 2; // This'll be 10, easy-peasy!
/*
* Expression to add two numbers
* Feeling that mathematical energy!
*/
sum = x + y; // This'll be 50, totally tubular!
console.log(num + "\n" + sum);
- Output (each on a new line, like stairs!):
Data Types
- JavaScript, man, it's super chill about data types! It's dynamically typed, meaning it figures out what kind of data you got while it's running. No need to tell it upfront, just let it glide!
- And there are two big families of data types, ya dig?
- Primitive (stored by value): These are the simple, fundamental ones, like a single rock. We got
Number(for, like, numbers!),String(for words!),Boolean(true or false, pick one!),null(nothin' really),undefined(haven't decided yet!),Symbol, andBigInt. - Non-primitive / Reference (stored by reference): These are the more complex ones, like a whole pile of rocks! Think
Object(a generic container!),Array(a list of stuff!),Function(those reusable spells!), and more.
- Primitive (stored by value): These are the simple, fundamental ones, like a single rock. We got
- Here's some examples of these types, straight from the transcript:
- String:
let txt = "GeeksforGeeks";(A cool word!) - Number (integer):
let a = 5;(Just a simple number!) - Boolean via comparison:
(a === b)whereb = 5→ evaluates totruewhen both the value and the type match. Super strict, like me with my breakfast bacon! - Array:
let places = ["GFG", "Computer", "Hello"];(A list of cool places!) - Object literal:
js let Student = { firstName: "Johnny", lastName: "Diaz", age: 35, mark: "blueEYE" };
(This is like a little card with all its info!)
- String:
Functions
- Functions, my friend, are like little reusable magic spells! You write 'em once, and then you can call 'em up whenever you need 'em to do their thing!
- Here's how you usually write one, the basic pattern, ya know:
function functionName(par1, par2, ..., parN) {
// Function body, where the magic happens!
}
- You can throw in zero, one, or even a whole bunch of arguments (parameters) into them. Totally flexible!
- And remember that scope thing? Variables declared inside a function are like, totally local to that function, unless you explicitly let 'em out to play with others.
- Here's a practical example, seein' it in action:
function func() {
let num = 45; // This 'num' is a secret, only for this function!
console.log(num);
}
func(); // output → 45. Woohoo, it worked!
Identifiers & Naming Conventions
- Identifiers = names for variables, functions, parameters, or property keys. Those words you choose to call your stuff!
- But there are some cool rules for makin' up these names, ya know? Listen up!
- The very first character has to be a letter (A–Z / a–z), an underscore (
_), or a dollar sign ($). No numbers first, man! - After that first character, you can throw in digits (0–9) too. Go wild (but not too wild)!
- You can't use a reserved keyword. Nope, those are for JavaScript, not for you!
- It's case-sensitive!
firstNameis totally different fromfirstname. It's like calling me 'Jake' versus 'jake' – totally different vibes, man!
- The very first character has to be a letter (A–Z / a–z), an underscore (
- Oh, and everyone usually uses this 'CamelCase' thingy (
firstName,lastName,totalPriceUSD) – makes it easy to read, and we're all on the same page! - Look at this demonstration of case sensitivity, it's pretty neat:
let firstName = "Geek";
let firstname = 100;
console.log(firstName); // Geek, because of the capital 'N'!
console.log(firstname); // 100, because of the little 'n'!
Character Set & Unicode Support
- Dig it: JavaScript code understands the whole wide world of characters thanks to Unicode!
- That means you can use all sorts of faraway letters, symbols, and even your favorite emojis in your text! Though, maybe don't go putting emojis in your variable names, ya weirdo.
- This is super important when you're makin' stuff for people all over the globe, with all their different languages!
Ethical / Practical Implications & Real-World Relevance
- So, like, keeping your code neat and makin' those comments? That's how you keep your code happy and easy to work with, essential for when you're jammin' with your pals on a big project.
- And understandin' scopes? That keeps your variables from messin' up the whole show, which can be a real pain in the butt if you ain't careful and accidentally 'pollute' the global space. Bleh!
- Dynamic typing speeds up making stuff, which is cool, but sometimes it can surprise you with weird type errors when you run it. But don't sweat it too much! You can use cool tools like linters or TypeScript to catch those sneaky bugs, or just check 'em when your code runs.
- Truly understanding those literals, operators, and expressions? That makes debugging way easier and helps you make your code super efficient (like choosing
===over==to avoid wild type changes!). - Good naming conventions (like CamelCase!) and knowin' your Unicode will help you make friendly, readable apps for everyone, no matter where they're from!
Quick Reference Cheat-Sheet (Exam Memory Aids)
- Wanna make a variable? Use
let,const, orvar! (Forgetvar, man, that's old school, not stretchy like me! Stick withletandconstin modern code, for real!) - Output methods (besides
console.log, which is awesome!):alert(pops up a little box!),document.write(writes right on the page!), and doing cool stuff with the DOM (innerText,innerHTML). - Strict equality:
===(checks if the value and the type are identical, super strict!) vs. loose==(just checks the value, might try to change types to make 'em match, kinda messy!). - Function forms: declaration (the normal way), expression (like assigning a function to a variable), arrow function (
const add = (x, y) => x + y;– super short and sweet!). - Single-line comment:
// comment(just one line, dude!). - Block comment:
/* multi
line */
(for ALL your long thoughts!)
- Arithmetic operator precedence (what goes first, highest → lowest):
()(parentheses, always first!), Unary+ - ++ --(single-number operations),* / %(multiplication, division, remainder), then+ -(addition, subtraction), and finally Assignment=(givin' values). - Primitive type check:
typeof variable(tells you what kind of simple data it is!).
Related / Next Reads (Contextual Links)
- JavaScript Tutorial (intro & hands-on projects)
- JS Variables & Datatypes
- JS Operators
- JS Statements & Loops
- Performance & Debugging
- JavaScript Output Methods
- How to Embed JavaScript in HTML
*(Totally tubular! These notes are lookin' mathematical