The JavaScript Survival Guide

Summary

هذا النص هو ملخص لفيديو تعليمي يغطي أساسيات لغة برمجة جافا سكريبت، تتضمن المقدمة المزحة التي تقارن جافا سكريبت بفيروس ويناقش كيفية تشغيل الكود في المتصفح والخادم. يغطي النص المفاهيم الأساسية مثل الأنواع الأساسية للبيانات، التحكم في التدفق، المتغيرات، ووظائف جافا سكريبت. يتضمن أيضًا مناقشة المفاهيم المتقدمة مثل الإغلاق والرفع. النص يهدف إلى تعزيز فهم البرمجة الجافا سكريبت والمهارات على التعامل مع الجوانب الغير تقليدية للغة.

Takeaways

• 😀 جافاسكريبت يُعرف بـ 'فيروس'، مما يعني أن مطورو البرمجيات هم 'المضيف' للغة برمجة جافاسكريبت.
• 🔍 في المستقبل قد تصبح جزءًا من مطورو جافاسكريبت، لذا يجب أن تكون مستعدًا للتعامل مع المفاهيم الأساسية للغة برمجة جافاسكريبت.
• 📝 يمكن تشغيل جافاسكريبت على الخادم والعميل، ويمكنك إنشاء تطبيق جافاسكريبت بسيط مثل 'مرحبا بالعالم'.
• 🌐 يمكن تشغيل جافاسكريبت في المتصفح عن طريق إنشاء علامة script في HTML واستخدام خاصية defer لتحميل السكريبت بعد تحميل الوثيقة.
• 📚 في جافاسكريبت، هناك سبع أنواع أساسية من القيم الأصلية، بما في ذلك السلسلة، العدد، المنطقية، الفارغة، الغير محدد، وغير موجود.
• 🔒 القيم الأصلية في جافاسكريبت لا يمكن تغييرها بشكل مباشر، وهي تعتبر قيمة ثابتة.
• 🔄 جافاسكريبت هي لغة ضعيفة النوع ديناميكيًا، مما يعني أنه يمكن استخدام نوع القيمة في وقت التشغيل إذا لزم الأمر.
• 🔄 الكائنات في جافاسكريبت تمثل هياكل بيانات معقدة مثل القوائم والكائنات والوظائف، ويمكن تغييرها بعد تخصيصها.
• 🔄 في جافاسكريبت، يمكن أن تكون القيم المنطقية 'صحيح' أو 'خطأ'، وهذا يعتمد على نوع القيمة ومحتوىها.
• 🔄 يمكن أن تكون الوظائف في جافاسكريبت مجهولة أو معرفة، ويمكن أن تكون مدخلات أو مخرجات لوظائف أخرى، مما يُعرف بـ 'وظائف ترتيب أعلى'.
• 🔒 يمكن أن تكون الوظائف في جافاسكريبت مغلقة، مما يعني أن الدالة الداخلية يمكنها الإشارة إلى متغيرات خارج الدالة المحيطة بها حتى بعد الانتهاء منها.
• 🏷️ في جافاسكريبت، يمكن أن تكون الكائنات مكونًا من أزواج من المفتاح والقيمة، ويمكن تغيير خصائص الكائن بعد إنشائها.

Q & A

ما هي البرمجة الأساسية لغة جافا سكريبت؟

البرمجة الأساسية للغة جافا سكريبت تشمل المفاهيم الأساسية مثل العمليات الأساسية للغة ووظائفها وكيفية تشغيل الكود.

كيف يمكنني تشغيل كود جافا سكريبت؟

يمكنك تشغيل كود جافا سكريبت مباشرة على الماكينة عبر الخط السفلى باستخدام node.js أو في متصفح الويب من خلال علامة script في HTML.

ما هي الفرق بين الأنواع الأساسية والكائنات في جافا سكريبت؟

الأنواع الأساسية هي قيم غير قابلة للتغيير مثل السلسلة والعدد والمنطقية، بينما الكائنات مثل القوائم والعمليات يمكن أن تتغير بعد التعيين.

لماذا يُعتبر جافا سكريبت 'فيروسًا'؟

هذا التعبير مجرد مقارنة تشير إلى انتشار واسع جافا سكريبت وتأثيرها الineluctable على البرمجة moderna.

ما هي الimmelance في جافا سكريبت؟

الhoisting هي عملية جافا سكريبت التي ت置 التعريفات الأساسية للمتغيرة والوظائف في الأعلى من السياق التنفيذي.

كيف يمكنني إنشاء تطبيق 'hello world' بلغة جافا سكريبت؟

يمكنك إنشاء ملف باسم 'index.js' و在里面写下 'console.log("hello world")'، ثم تشغيله عبر الخط السفلى بكتابة 'node index.js'.

ما هي الفرق بين 'var' و 'let' و 'const' في جافا سكريبت؟

'var' هي الطريقة القديمة للتعريف المتغيرة، 'let' هي للنطاقات المحدودة، و 'const' هي للقيم التي لا يمكن تغييرها.

ما هي الوظائف في جافا سكريبت؟

الوظائف في جافا سكريبت هي قطعة من الكود التي تأخذ مدخلات وتولد ناتج عندما تتم استدعائها.

ما هو ال뜻 بـ 'this' في جافا سكريبت؟

'this' هو مفتاح鲨 يشير إلى الكائن الحالي الذي يشغل الكود، قد يختلف هذا الكائن بناءً على سياق الوظيفة.

ما هي ال分别是 'Truthy' و 'Falsy' في جافا سكريبت؟

'Truthy' هي القيم التي ت coiercible إلى 'true' في الشروط، مثل الأرقام والكائنات، بينما 'Falsy' هي القيم التي ت coiercible إلى 'false' مثل السلسلة الفارغة والعدد 0.

ما هي ال用处 لـ '===' في جافا سكريبت؟

'===' هو العامل المساواة الصارف الذي يتحقق من المساواة في النوع والقيمة معًا، مما يوفر سلوكا أكثر توقعاً في المنطق الشرطي.

Outlines

00:00

😀 JavaScript: Survival Guide and Basics

This paragraph introduces the necessity for developers to understand JavaScript, comparing it to a virus in terms of its ubiquity. The video aims to prepare viewers for the practical aspects of JavaScript programming, including handling its peculiarities. It starts with the fundamental concept of running JavaScript, such as creating a 'Hello World' application using an editor, command line, and within a browser environment. The importance of understanding script tags and their attributes like 'defer' is highlighted, especially for those not using frameworks that abstract this process away.

05:00

📚 JavaScript Fundamentals: Primitives, Objects, and Control Flow

The second paragraph delves into the core building blocks of JavaScript: primitives and objects. It explains the seven primitive types, their immutability, and how JavaScript handles type checking at runtime. The paragraph also contrasts these with objects, which are mutable and can represent complex data structures. The concept of 'truthy' and 'falsy' values in conditional statements is explored, along with logical operators and the difference between abstract and strict equality checks. The summary also touches on variable hoisting and the importance of understanding execution context in JavaScript.

10:01

🔧 Control Flow and Variable Declaration in JavaScript

This section discusses control flow mechanisms in JavaScript, such as if statements, else-if clauses, and the ternary operator. It emphasizes the importance of understanding truthy and falsey values, as well as the use of logical operators like '&&' and '||'. The paragraph also introduces the switch statement and try-catch blocks for error handling. A deeper dive into variable declaration is provided, explaining the differences between 'var', 'let', and 'const', and the concept of hoisting. The execution context and the implications of variable scope are also covered, along with best practices for variable declaration.

🎯 Functions and Closures in JavaScript

The focus of this paragraph is on functions in JavaScript, starting with their definition and usage. It explains the difference between named and anonymous functions, as well as higher-order functions that can take other functions as arguments or return them as values. The concept of closures is introduced, describing how an inner function can access variables from an outer function even after the outer function has completed execution. The paragraph also touches on the use of 'this' keyword within functions and how it can lead to different contexts depending on the function type (regular vs. arrow functions).

🛠 Understanding Objects and 'this' in JavaScript

The final paragraph discusses objects in JavaScript as key-value pair collections and how they can be manipulated using dot notation or bracket notation. It explains how functions can be properties of objects and how 'this' can be used to reference the object within its methods. The paragraph clarifies the difference in 'this' binding between regular functions and arrow functions, and how to use the 'call' method to explicitly set the 'this' context. It also addresses the challenges of understanding 'this' in various scenarios, such as within the global scope or custom objects.

Keywords

💡جافاسكريبت (JavaScript)

جافاسكريبت هو لغة برمجة côté العميل (Client-Side) تستخدم عادة في تطوير الويب لجعل الصفحات الإلكترونية تفاعلية. في النص، يُستخدم المصطلح 'جافاسكريبت' لوصف اللغة كجزء أساسي من تطوير الويب، ويُذكر أنه يمكن أن يتسبب في بعض المشاكل التي يمكن أن تواجه مطوري الويب في مسارهم.

💡مبرمج (Developer)

المبرمج هو الشخص الذي يستخدم جافاسكريبت لتطوير البرمجيات. في النص، يُستخدم المصطلح 'المبرمج' لوصف الشخص الذي يمكن أن يواجه تحديات ومفاهيم جديدة في عالم جافاسكريبت.

💡البرمجة العملية (Practical Programming)

البرمجة العملية هي القدرة على استخدام المفاهيم الأساسية لبناء البرمجيات العملاقة. في النص، يُشدد على أهمية فهم المفاهيم الأساسية في جافاسكريبت للبرمجة العملية.

💡النواة (Under the Hood)

النواة هنا تشير إلى فهم التفاصيل التقنية الأساسية لجافاسكريبت. في النص، يُذكر كيف يعمل جافاسكريبت في الخلفية، مما يساعد المبرمج على فهم العمليات التي تحدث عندما يكتب الكود.

💡ملف الelcomer (Hello World App)

ملف الelcomer هو مثال بسيط يستخدم عادة لتوضيح كيف يعمل لغة برمجة معينة. في النص، يُستخدم مثال 'console.log(hello world)' لتوضيح كيف يمكن للمبرمجين بدء استخدام جافاسكريبت.

💡النص البرمجي الخادمي (Back-End Server Side JavaScript)

النص البرمجي الخادمي هو الكود الذي يشغل على الخادم وليس على العميل. في النص، يُشرح كيف يمكن للمبرمجين استخدام جافاسكريبت لكتابة البرمجيات الخادمية.

💡المتصفح (Browser)

المتصفح هو الأداة التي يستخدمها المستخدم لتصفح الويب. في النص، يُستخدم المصطلح 'المتصفح' لتوضيح كيف يمكن لجافاسكريبت أن تشغل ضمن المتصفح وكيف يمكن للمبرمجين استخدام النص البرمجي في الصفحات الإلكترونية.

💡البرمجة الأساسية (Fundamental Features)

البرمجة الأساسية هي الميزات التي تعتبر أساسًا في لغة برمجة. في النص، يُناقش العديد من الميزات الأساسية في جافاسكريبت التي تعتبر مهمة لفهم البرمجة العملية.

💡البرمجة المنطقية (Control Flow)

البرمجة المنطقية هي الطريقة التي يتم بها اتخاذ القرارات في الكود. في النص، يُناقش مفهوم الTruthy والFalsy في جافاسكريبت وكيف يؤثر ذلك على البرمجة المنطقية.

💡المتغيرات (Variables)

المتغيرات هي الوحدات الأساسية التي تحفظ البيانات في البرمجة. في النص، يُناقش الفرق بين أنواع المتغيرات في جافاسكريبت مثل 'var'، 'let'، و 'const' وكيف يؤثر ذلك على البرمجة.

💡الوظائف (Functions)

الوظائف هي الوحدات الأساسية في البرمجة التي تؤدي وظائف معينة. في النص، يُناقش مفهوم الوظائف في جافاسكريبت وكيف يمكن استخدامها في البرمجة.

💡الكائنات (Objects)

الكائنات هي هيكل بيانات يحتوي على مجموعة من الخصائص. في النص، يُشرح كيف يمكن استخدام الكائنات في جافاسكريبت لتنظيم البيانات.

💡الإغلاق (Closures)

الإغلاق هو مفهوم في جافاسكريبت يتيح لوظيفة الوصول إلى متغيرات خارج النطاق الذي تم إنشاؤها. في النص، يُشرح الإغلاق وكيف يعمل في جافاسكريبت.

💡Truthy والFalsy (Truthy and Falsy)

Truthy والFalsy هي القيم التي تحدد ما إذا كانت قيمة صحيحة أو خاطئة في سياق الشروط. في النص، يُناقش القيم التي تعتبر truthy أو falsy في جافاسكريبت.

Highlights

JavaScript is sometimes referred to as a 'virus', implying developers are the 'host'.

The necessity for developers to understand JavaScript's fundamental concepts for survival in the industry.

Introduction to a full JavaScript course focusing on practical programming and interview preparation.

How to run JavaScript code by creating a 'Hello World' application using a simple script.

Explanation of executing JavaScript via the command line with Node.js.

The role of script tags in HTML for browser-based JavaScript execution.

The importance of understanding how script tags work in web development.

JavaScript's seven primitive types: string, number, boolean, null, undefined, symbol, and bigint.

Immutability of primitive types and their inability to be changed directly after assignment.

JavaScript's dynamic and weakly typed nature, allowing for runtime type checks with the typeof operator.

Differences between 'undefined' and 'null', and their respective use cases.

Objects as complex data structures in contrast to primitive types, allowing for mutation.

Concept of 'hoisting' in JavaScript and its implications for variable and function declarations.

The introduction of 'let' and 'const' as alternatives to 'var' for better scope management.

JavaScript's control flow mechanisms, including if statements, else-if, and logical operators.

The concept of 'truthy' and 'falsy' values in JavaScript and their impact on conditional statements.

Explanation of equality operators in JavaScript: abstract comparison with '==' and strict equality with '==='.

Use of the ternary operator for concise variable assignment based on conditions.

JavaScript's 'switch' statement as an alternative to multiple if-else conditions.

The use of 'try-catch' blocks for error handling in JavaScript.

Differences between 'var', 'let', and 'const' in terms of variable scope and reassignment.

Fundamentals of JavaScript functions, including definition, inputs, outputs, and higher-order functions.

The concept of closures in JavaScript and their ability to maintain access to outer function's state.

Introduction to objects in JavaScript as key-value pair collections and their mutability.

The 'this' keyword in JavaScript and its reference to the current object in the code's context.

Different ways to call functions in JavaScript, including using the 'call' method to specify 'this' context.

Transcripts

some people call javascript a virus and

if that's true it means developers are

the host no matter what you label

yourself ads today you have to face the

reality that one day you may join the

hordes of JavaScript developers out

there and when that day comes you need

to be prepared by understanding the

practical fundamental concepts of the

JavaScript programming language today's

video is not about victory it's about

survival welcome to episode 3 of the

full JavaScript course in the last video

we looked at how JavaScript works under

the hood and today we'll look at many of

the fundamental features of the language

as they relate to practical programming

but more importantly I want to help you

survive some of the weirder parts of

JavaScript that might trip you up or

that you might find on an interview

question and many of these concepts like

closures and hoisting can be easily

understood by removing the head or

destroying the brain

chapter 1 where and how do I run my

JavaScript code let's find out by

creating a hello world app open up an

editor like vs code create a file called

index J s and type in console.log hello

world now assuming you have no js'

installed you can run the script

directly on your machine via the command

line we'll have an entire video

dedicated to node.js later in the course

but all you need to know for right now

is that if you type in node index J s in

the command line it will execute the

code in your script so you just wrote a

back-end server side JavaScript

application but when most people think

about J s they're thinking about

browsers and web applications it's

possible to run code in the browser just

like we did from the command line by

opening the developer console in the

previous video we learned that

javascript has an interpreter or JIT

compiler to be precise that will execute

your code when you type it in here but

the browser console is really just a

debugging tool the way that web

applications actually work is they

declare a script tag in an HTML document

we can go ahead and create an index.html

file then we'll add a script tag and set

the source attribute to the JavaScript

file when the browser parses this HTML

file it's going to see the script tag

and then try to load and execute the

script in our case it won't execute the

JavaScript until the document is fully

loaded because we use this defer

attribute this is useful because a lot

of times your JavaScript will reference

HTML elements in the body which won't be

available until the document is fully

loaded now the big caveat here is that

most developers are using frameworks

which will set up the script tag for you

but if you're doing any kind of web

development it's important to understand

how script tags work but now it's time

to move on to chapter 2 primitives and

objects which are two of the lowest

level building blocks in the language

there is a total of seven primitive

types in modern JavaScript with the most

common ones being string number boolean

null and undefined a special

characteristic of primitives is that

they're immutable which means their

value can't be directly changed once

they've been assigned to a variable they

can be reassigned to a different value

but they just can't be changed directly

and because JavaScript is a dynamic

weakly typed language we don't actually

use type annotations in our code but we

can use this type of operator to check a

type at runtime if needed and just for

those who are wondering I'm using the

quota plugin for vs code which displays

the output of my code on the right here

in blue look at these data types in more

detail as we go through the video but

for right now you should know the

difference between undefined in

Knowle undefined is the default value

that you'll see for a variable that

doesn't have a value assigned to it or

for a function that just returns nothing

Knowle is similar in the sense that it

represents an empty value but it's

something that you the developer would

assign explicitly now these primitive

data types can be contrasted with the

object type which represents more

complex data structures like arrays

objects and functions the big difference

is that objects can be seen as a

collection of keys and values or

properties and they can be mutated after

being assigned to a variable so the

bottom line that you need to understand

is that anything that's not a primitive

type is going to inherit from object

that includes things like functions

arrays or any class instances now

there's one other little piece of

weirdness that you might encounter and

that is primitive wrapper objects the

reason I bring this up is because you

may see these out there in the wild and

they allow you to basically wrap a

primitive type in a class instance but

you should never really use them unless

you have a good reason to chapter 3

control flow and truthy versus falsey in

JavaScript we can implement conditional

logic with an if statement if a

condition is true the-- then we execute

this block of code else we execute this

other block of code and we can also use

else--if if there are multiple

conditions to check but the more

important thing to understand here is

what is truthy and what is false e in

JavaScript because JavaScript will

always try to coerce a value into a

boolean when it's encountered inside of

a conditional statement true is

obviously true the-- and anything that's

an object is also true the-- even if

it's an empty array or an empty object

the ones you have to watch out for are

strings and numbers a string that has

length will be true the-- but an empty

string will be false e then the number 0

will be false e but all other numbers

will be true the-- and if you're ever

unsure about a value you can simply add

a double bang in front of it to coerce a

to a boolean yourself now the reason

this works is because the exclamation

mark is a logical not operator a single

exclamation mark will return false if a

value can be converted to true so if you

add two of them then it will give you

the actual boolean that that value will

be course two and what we're talking

about logical operators you should also

know that a double ampersand is logical

and which ensures that all expressions

in the condition will be converted to

true and we also have logical or which

returns true if at least one of the

expressions is true the-- now another

thing you should know is that JavaScript

provides two different equality

operators a double equal sign is called

an abstract

comparison and it will try to make a

type conversion before actually running

the comparison that's pretty weird

so most linters will tell you to never

use it in contrast the strict equality

operator will check for equality on both

the type and the value which will give

you much more predictable behavior when

it comes to conditional logic it can get

pretty verbose if you use an if

statement to define a variable you'll

commonly see this done with the ternary

operator which gives you a shorthand

syntax for defining a variable based on

an if-else statement it has a logical

condition on the left side then a

question mark then the first value is

what will be assigned if the condition

is true the-- and the second value after

the colon is the value if it's false II

now before we leave the topic of control

flow it's also worth noting that

javascript has a switch statement which

allows you to start with an expression

and then compare it to multiple cases

and this can be a good alternative to

if-else statements if you have a lot of

conditions to check and we can also wrap

our code in a try-catch statement which

will attempt to run the code in the try

block but if an error is thrown then it

will move to the catch block you can try

this out yourself by using throw inside

of the try block and then you'll see

that it runs the code inside of catch

and provides that error that was thrown

up above and try if an error is not

thrown then the code inside of catch

will never be run and you can also add a

finally block to the end of all this to

run some code after both try and catch

have been executed and finally a full

six and a half minutes into this video

we're ready for chapter four variables

we'll look at the difference between

varlet and const and also figure out

what hoisting means borrow allows you to

initialize a variable assign a value to

it and then also reassign a value to it

later now before you can really

understand anything else about variables

you need to understand the execution

context and this simply refers to the

way your code is being interpreted

because your JavaScript program likely

contains variables and functions defined

all over the place

so the context defines the relationship

between how your code is written to how

it will be interpreted by the JavaScript

engine we can define a variable anywhere

in our script and that will be

considered a global variable in other

words it's available in the global

execution context that means if I have a

function somewhere else in my code I can

still reference that variable I like to

think of global as an imaginary function

that wraps my script in other words

running a script is just like calling

this imaginary glow

function and that means if we define

additional functions in our code we have

a different execution context for

defining variables for example if we try

to define a variable inside this

function and then reference it in the

global context we'll get a reference

error because the local variable is not

available in this context now that's

pretty straightforward

but there are a few pieces of weirdness

that you need to be aware of if you

assign a value to an undeclared variable

which you should really never do it will

automatically be assigned as a global

variable even if it's done inside of an

enclosing function and the other thing

you need to know about is hoisting which

applies to variables but also function

declarations as well now whenever

JavaScript processes in execution

context it will basically put all the

variables at the top or in other words

hoist them to the top of the context

that means if we initialize a variable

down here at the bottom and then

reference it somewhere higher up in the

code it will still be considered

declared within this scope but the

actual assignment of a value will still

happen wherever you define it in the

code so if you want to keep your sanity

it's always a good idea to declare your

variables at the top of the context but

the bigger problem with var is that it

becomes very hard to keep track of the

scope of variables and there can be a

lot of name collisions as your app grows

more complex luckily we no longer have

to use var because in modern JavaScript

we have let and Const let is similar to

var in most ways but it's limited to the

scope of a block statement that means if

you define a variable inside of an if

statement or a loop it will be limited

to that block and this differs from bar

which would leak out into the parent

scope and also like var variables

defined with let can be a reassigned to

different values later in the code but

in many cases you'll have values that

should never be reassigned this makes it

a lot more difficult to accidentally

override values in your code so when it

comes to variables a good rule to follow

is to always use Const unless you

absolutely know that you'll override

that value later in which case you can

use let and you should respect the

legacy of our but just never use it and

with that we're ready for chapter 5

functions

I think you don't say hello this course

will have an entire video on functions

but there are a few basic things you

should know so let's start by answering

the question of what is a function and

the answer is that it's simply a piece

of code that takes an input and produces

an output when it's called you can use

the function keyword as we're doing here

or you can use the more concise arrow

syntax in modern JavaScript if you omit

braces the code following the arrow will

implicitly return a value so you can

define a function that returns something

on a single line

but as easy as that sounds there's all

kinds of complexity and terminology that

goes along with functions so let's try

to unpack some of the most important

concepts that you should understand as

ajs developer first of all functions can

be anonymous or they can have a name

which will immediately follow the

function keyword and you'll also

commonly see anonymous functions

assigned to the value of a variable and

another thing you'll hear is that

JavaScript supports higher-order

functions and that means we can provide

functions as the input or arguments to

another function or as the return value

from a function in the previous video we

talked about the JavaScript event loop

and callbacks and this is important with

functions because you'll often use

anonymous functions as arguments to

other functions that will be called back

later after some asynchronous code is

finished executing in addition you can

define new functions within a function

and this example the outer function is

the one that wraps the inner function

and that's related to a very important

question that you'll hear in a lot of

JavaScript interviews what is a closure

in the most simple sense a closure is

just a function within a function where

the inner function references a variable

that was declared in the scope of the

outer function now what makes this

special versus a lot of other

programming languages is that the

variable in the outer function will be

maintained in memory even after that

function returns and has popped off the

call stack so this means the inner

function always has access to this state

from the outer function at the time it

was created in the code here you can see

we define a couple of variables in the

outer function then we operate on them

and return them from the inner function

and then expose the inner function by

simply returning it and now because that

outer function has closed over the inner

function we can call it and still have

reference to the state in the outer

function even though we only called the

outer function once we still have access

to its local variables and that's how

you make a closure if you have

experience with an object-oriented

programming language a closure is very

similar to a class

instance at least from a conceptual

standpoint because you have a function

that contains some state and then you

have an inner function that can operate

and change that state in the same way

that a class instance has some

properties and then you have methods

that can change those properties in fact

the class keyword in JavaScript is just

syntactic sugar for functions and

closures but we'll look at classes and

object-oriented programming in a future

video because now we're ready for

chapter 6 objects an object is just a

data structure that allows you to

associate a collection of key value

pairs which is similar to a map or a

hash map in other languages it's

possible to instantiate an object and

then add properties to it one by one but

in most cases you'll use the object

literal syntax this allows you to define

an object by simply enclosing your key

value pairs inside of braces you can

access the value of a key by using dot

notation or with brackets and a string

and you can mutate properties on an

object even when it's defined as a Const

variable and it's also important to

point out that functions can be used as

values on an object then inside a

function we can actually reference

properties on this object by using this

but what the hell is this this is one of

the more challenging concepts to grasp

in JavaScript now remember earlier I

said that anything that's not a

primitive value is an object and this is

just a keyword that refers to the

current object that the code is

operating in if you go into the browser

console and say console like this it's

going to print out the window object

that's because window is the global

scope and browsers when referenced by

itself or if used in a function that's

called normally it will reference the

global object that's easy enough but

what if we have our own custom object

and on that object we have two

properties that define functions the

first function uses the function keyword

but the second function it uses the

arrow syntax now intuitively you might

think that these functions are exactly

the same but that's not the case in the

first function this refers to the object

that it's defined on but when it comes

to the arrow function it doesn't have

its own bindings to this which means it

bypasses our custom function and this

becomes the global object now the other

thing you should know is that when you

have a function there are other ways to

call it beyond just using parentheses

for example you can use it's call method

and in pass in the this context that you

want to buy into the function now any

references that you have to this and the

function will

prints the object that you passed a call

in the code here we're calling this face

and the function but it's currently

bound to the global object which doesn't

have a face property but if we pass in

an object that does have a face property

like a clown or a ghost then it will

return a defined value understanding

this will make you a better JavaScript

developer but it won't be something that

you have to use on a daily basis and

with that being said I think we've

covered enough information for one video

and don't worry too much if that felt

overwhelming we can't have anyone

freaked out out there ok gotta keep our

composure we'll revisit many of these

concepts when we look at the practical

applications of functions objects and

more I'm gonna go ahead and wrap things

up there if this video helped you please

like and subscribe and make sure to

check out the full source code on fire

ship IO

thanks for watching and I will talk to

you soon

[Music]

you