DEV Community: Mohamed Yahia

File permissions in unix-like OSs ft. ls stdout

Mohamed Yahia — Fri, 22 Dec 2023 19:44:02 +0000

nuclearegg69@zenbook-f13:~$ ls -l
total 56
-rw-r--r-- 1 nuclearegg69 nuclearegg69    0 Oct 10 07:55 1
-rw-r--r-- 1 nuclearegg69 nuclearegg69    0 Oct 10 07:55 2
-rw-r--r-- 1 nuclearegg69 nuclearegg69    0 Oct 10 07:55 3
-rw-r--r-- 1 nuclearegg69 nuclearegg69   84 Oct  8 15:33 a
-rw-r--r-- 1 nuclearegg69 nuclearegg69   27 Oct  7 15:08 alphabet.txt

When you run the list command with long option, you are faced with some data at the beginning of each file. -rw-r--r-- 1 nuclearegg69 nuclearegg69.

what does this mean?

Lets begin with `-rw-r--r--` (First Column)

- means the object type, here it is a file, so it is denoted by -, directories are denoted by d, symbolic links are denoted by l
r means the file can be read
w means the file can be written upon so it can be modified
- after w means file cant be executed

But - at the beginning meant that the object is a file.

Well, - is used as a negative symbol and if you counted the number of characters at that string of characters, you will find them to be 10 characters.

The first character is for the object type and i stated what character is used to represent each type. Then the rest are 9 characters which are divided into 3 groups of 3 characters.

The first three characters represent the file permissions by the current user
The second three characters represent the file permissions by the current user group
The third three characters represent the file permissions for any user of the system

Let's break this out more:

the first 3 characters out of the 9 characters rw-
- if there is no read, write or execute permissions, it would be denoted by ---. Now, we have rw- which means we have read and write permissions for the current user but no execute permissions.
the second 3 characters are r--. This means the current user group has read permissions but write or execute permissions.
the third 3 characters are r--. This means all other users have read only permissons.

and that's it for file permissions.

Second column

Hey, Mohamed, before you leave. what about the 1 after the 10 file permission characters?

Excellent question, 1 denotes the number of hard links to that file in disk.

Hard links are essentially a pointer to that file. A pointer in the form of a file. So there can be two "apparent" "files" with different names in the same directory but when you edit one the other gets changed as if they are the same file. Well, indeed, they are the same file. When you do ls, you get back a list of directory entries and not "files".

Each directory entry is coupled with an inode number. The inode number identifies the inode. The inode is data structure or a table that contains metadata about that entry. That includes the name, size, number of hard links, modification time and more but more importantly it includes pointers that point to the data blocks in the disk storage that contains the entry data.

nuclearegg69@zenbook-f13:~$ ls -i
 6115 1    6092 a              4833 colt-ex   6062 inNano3.txt     2344 testRen2
 6115 1a   4823 alphabet.txt   6091 echo      1281 inNanoRenamed   6060 unsorted.txt

*Note that entry "1" and entry "1a" have the same inode number"

So, what we actually refer to as files are actually just file names or hard links with an inode number. And we can create hard links by doing ln 1 1a as i previously did.

Third Column

The third column in line is nuclearegg69. This is the current username.

Fourth Column

The fourth column being nuclearegg69 is the current username group. And a group of users are just created to assign them similar permissions.

Rest of Columns

Fifth column is the file size in bytes
Sixth column is the modification time
And the last column is the file name.

Quirks with 'value' attrib/prop on 'input' element/object

Mohamed Yahia — Thu, 21 Dec 2023 12:34:09 +0000

<input value='something'>

If we change the user input (text on ui) to be 'something else', what happens to the attribute value in the html and what happens to the value property on the dom object representing that element?

The property value will change but the attribute value wont change. WHY?

Because if we wanted to reset the user input to the default value attrib value, we wont be able to since with each user input change the attribute value changes and thus the default value is lost

If we changed the property value, it will change the user input on the ui but it wont change the attribute value for the same reasons.

If we changed the attribute value, there are two behaviors.

If the user input changed from the default attribute value even if we changed it and then wrote the default value back again so its based on change and not equality, then if we changed the attribute value it will not reflect either in the ui nor the dom object.

The reason behind this is that we dont want to lose the user input.

If the user input didnt change at all and we changed the attribute value, then it will reflect in the ui and correspondly in the dom object.

The way to change the attribute value is by using 'setAttribute' method

input.setAttribute('value', 'something else')

How to reset input to be default attribute value?

input.value = input.getAttribute('value')

CLOSURES!!

Mohamed Yahia — Mon, 18 Dec 2023 17:59:39 +0000

A closure is a function with its outer function lexical scope/environment.

What does 'lexical' mean?

'Lexical' means relating to words, so the 'lexical scope of a function' is the scope related to the wording of that function or the definition of that function.

function doSth() {
  //some code
  function doSthFancy() {
    // do sth fancy
  }
}

function doSthElse() {
  doSth();
}

doSthElse();

The 'lexical scope' of the function above doSth is the global context since it is worded/defined in the global space, but the invocation scope is the doSthElse function space since it runs there.

Now back to the closure definition.

A closure is a function lexical scope with its outer function lexical scope/environment.

So, what is the closure of doSth? its doSth + global scope (which contains doSthElse as a variable).

Why we were able to run doSth from doSthElse? Because doSth is in the lexical scope of doSthElse (lexical scope of doSthElse is the global scope and doSth is defined there so it is available for doSthElse to use).

BUT if we added doSthFancy,

function doSthElse() {
  doSth();
  doSthFancy();
}

and tried to execute doSthElse, it would throw an error complaining that doSthFancy is not defined.

So, why is a closure useful? JUST A DEFINITION!?

Let's see.

First: (which is the boring usecase)

function outerFunction() {
  let variable = "some variable";

  function innerFunction() {
    console.log(variable);
  }
  innerFunction();
}

outerFunction(); // 'some variable'

If we ran outerFunction, 'some variable' is console logged but why? There is no variable variable declared in the innerFunction, how did innerFunction get the value of variable from the outerFunction? That is because functions have access to variables declared within its lexical scope which includes the outerFunction.

SO BORING YES, but watch this:

function outerFunction() {
  let variable = "some variable";

  function innerFunction() {
    console.log(variable);
  }

  return innerFunction;
}

const someFunction = outerFunction();

someFunction();

NOW, in the assignment of someFunction to the outerFunction call, the innerFunction is returned AND it didnt run. Outer function got executed, finished executing, no longer there in the call stack, variable value is not there anymore sinced its gone.

BUT then we run the innerFunction at someFunction() where the invokation context now is the global space and there is no variable variable there so the console log value should be undefined BUT THAT IS NOT THE CASE.

The logged value is 'some variable' MAGIC? No, its closures baby. That function someFunction gets the variables defined in its lexical scope when it is invoked to work with.

You might be thinking now, that's interesting. You know what is more interesting? You. Nah, I am joking. You are not that interesting or you are but you know what's more interesting? You're not falling for it again, huh. Ok, what's more interesting is that someFunction doesnt only get its lexical scope but also its parent/outer function lexical scope, watch this.

function outerOuter() {
  function something() {
    console.log("something");
  }

  function outer() {
    return function inner() {
      something();
    };
  }

  return outer;
}

const outer = outerOuter();
const inner = outer();

inner(); //something

The lexical scope of the parent function is this

and that's why 'something' was logged

Practical Example for closures

Lets say we have some buttons and we want to run event handlers when they are clicked

button.addEventListener("click", () => {
  document.body.appendChild("div");
});
button2.addEventListener("click", () => {
  document.body.appendChild("p");
});
button3.addEventListener("click", () => {
  document.body.appendChild("a");
});

document.body.appendChild is repeated in these 3 handlers, I dont like that, the only thing changing is the element name. so what can we do?

Well the first guess is that we would make a function that accepts that dynamic/changing part as a parameter and it would return that repeated logic with the element name that it got passed

function appendEl(el) {
  document.body.appendChild(el);
}

Spectactular. Now we only have to pass that function as the event handler of the click event

button.addEventListener("click", appendEl(el));

Is that right? Nope, because we are not passing a function, we are invoking it and what we are actually passing is the evaluation of the appendEl call which is the return value of it which is undefined. so how could we solve this?

an easy way would be this

button.addEventListener("click", () => {
  appendEl("div");
});

To just add it as the function body of another function

Another solution would be to use bind (and it is more useful in some cases where we need to assign the button object to this)

button.addEventListener("click", appendEl("div").bind());

Third solution which I consider the cleanist is by making appendEl return a function containing the logic.

** ALERT: HIGHER ORDER FUNCTION INCOMING **

function appendEl(el) {
  return function () {
    document.body.appendChild(el);
  };
}

button.addEventListener("click", appendEl("div"));

Then we could just do this. Now appendEl will return a function and when it runs it will need the el variable which will be present for the inner function to use even though appendEl ran and finished execution and that was made possible by CLOSURES.

That is the CLOSURE of this article (see what I did there!), hope you enjoyed it, understood it, and sEe yOu iN tHe nExT oNe.

HTML Collection vs NodeList

Mohamed Yahia — Sun, 17 Dec 2023 11:18:49 +0000

Both are array-like objects but they differ in some areas

HTML Collection

is a collection of element nodes
is returned by 'getElementsByClassName' and 'getElementsByTagName'

Nodelist

contains all types of nodes: element nodes, text nodes, etc
is returned by 'querySelectorAll'

====

NodeList returned by querySelectorAll is static. Static means that it doesnt get updated if more items that match the query are added, removed, modified. It doesnt mean that updating properties of an item inside a nodelist wont be reflected.

<html>
    <p class="luck">easy mate</p>
     <p class="luck">easy bait</p>
      <p class="luck">easy late</p>
</html>

const pEls = document.querySelectorAll('p')
console.log(pEls) // {p, p , p}
document.querySelector('html').appendChild(document.createElement('p'))
console.log(pEls) // {p, p , p}

so it didnt get added to the node list but if we did the same but used getElementsByTagName it would get reflected and we would see the fourth p added to the html collection

window object and the DOM

Mohamed Yahia — Thu, 14 Dec 2023 10:47:02 +0000

When we query an element in js using document.querySelector syntax. We might would want to stop a bit and think about what we wrote document.querySelector looks like the syntax we use for properties on a object where the name before the dot (.) represents the name of the object and the name after the dot represent a property or method on that object. since querySelector is a function, we can say that querySelector is a method of the object document.

But where did that document object come from, we didnt create it. That object is created by the browser so that we could those functions that we also didnt create like querySelector.

You might hear a buzzword called the DOM. What does DOM stand for? DOM stands for document object model. The model of the document object. So now, what i understand that it has sth to do with that document object we were talking about earlier. Or they are kind of the same thing ..except for the 'model' part. Lets understand what the document object contains and we will come back the model part.

If we want to know what the document object contains, we might go to the console and write document and enter and we will get the html of the page

SO now, I am confused is the document object the html code of the html document we wrote. But if that so, how is it an object, html is not javascript. Well that's because that's what the browser dev tools wants you to see. We know that an object contains key value pairs.

To be able to see the real document object, we write console.dir(document)

If we scroll down, we will find a children property that has a value of type HTMLCollection.

HTML Collections are array-like objects. At its first index 0, we have some properties including an outerHTML, localName, nodeName all indicating that it is an object that represents the HTML element and if we scroll down we will find another children property which includes the head and body elements at index 0, 1 respectively.

This informs us that the document object is a representation of the html tree and the document object in itself the way it is designed through the children properties (@@looks like) a tree and that why it is called the document object model because it is modeling the html code.

When we use querySelector what it actually does is it searches the document object for the object that represents the element we are looking for and that object has properties attached to it and we can change those properties like 'element.backgroundColor' and set them to be something else just like we change properties on simple objects.

There is also another object that provided to us by the browser called the 'window' object. It also has some other properties like height and width of the current window/tab and other methods and actually one of its properties is the document object. SO the document object is a subset of the window object and that makes sense since the document object, which is a representation of the html code, is part of the window.

Execute commands on 'find' output ft. -exec and xargs

Mohamed Yahia — Wed, 13 Dec 2023 19:43:30 +0000

How to run commands on files found

If I want to delete any log files in a directory and log files in this directory have common substring "log" in their name, we could do it all in one command.

nuclearegg69@zenbook-f13:~$ ls
1   2  a             b  colt-ex  empty  hello2   inNano3.txt    inNanoSymlink  testRen2      unsortedNums.txt  world2
1a  3  alphabet.txt  c  echo     hello  inNano3  inNanoRenamed  testRen        unsorted.txt  world
nuclearegg69@zenbook-f13:~$ find ~ -name "*hello*" -exec rm -r '{}' ';'
nuclearegg69@zenbook-f13:~$ ls
1   2  a             b  colt-ex  empty    inNano3.txt    inNanoSymlink  testRen2      unsortedNums.txt  world2
1a  3  alphabet.txt  c  echo     inNano3  inNanoRenamed  testRen        unsorted.txt  world
nuclearegg69@zenbook-f13:~$

nuclearegg69@zenbook-f13:~$ ls
1   2  a             b  colt-ex  empty  hello2   inNano3.txt    inNanoSymlink  testRen2      unsortedNums.txt  world2
1a  3  alphabet.txt  c  echo     hello  inNano3  inNanoRenamed  testRen        unsorted.txt  world
nuclearegg69@zenbook-f13:~$ find . -name "*hello*" | xargs rm -r
nuclearegg69@zenbook-f13:~$ ls
1   2  a             b  colt-ex  empty    inNano3.txt    inNanoSymlink  testRen2      unsortedNums.txt  world2
1a  3  alphabet.txt  c  echo     inNano3  inNanoRenamed  testRen        unsorted.txt  world

Let's break those commands apart starting with the first one:

find: used to find objects (files, dirs, links)
~ : in home directory
-name: with a name of
"*hello*": containing substring hello (i.e. with zero or more characters before 'hello' and zero or more after)
-exec: execute following operation/command on every record found
rm -r: delete recursively (so dir and all dirs and files nested within it)
'{}' placeholder for current file/dir (so rm -r '{}' = delete current file/dir and it will run for every file/dir found)
';' : indicate the end of the rm command and is passed as a parameter to dir to not confuse the bash that it ends the whole find command

'{}' since this is a placeholder for current file name, it provides a convenient way for renaming files

find . -type f -exec mv '{}' '{}_new' ';'

This adds a substring _new at the end of each file name

xargs: the pipe passes the list of files found to xargs standard input and xargs runs the command following it on each file, passing the file as an argument

GIT RESET

Mohamed Yahia — Mon, 11 Dec 2023 23:57:59 +0000

Usecase

My most common usecase for git reset is when i stage changes by mistake. Maybe i make some changes that involve multiple things and i want to divide them into seperate commits.

If you add them, git tells you this

use "git restore --staged <file>..." to unstage

since you know . denotes the whole directory, you try git restore --staged . and it unstages the changes. Here comes reset with its shorter syntax, just git reset and voila your changes are gone.

Usage

git reset is mainly used to undo commits.
git reset <commit hash> and it will delete all commits up until that commit and most importantly KEEP THE CHANGES or to be most specific move the changes to the working directory.

That's why git reset without providing a commit, moves changes from the staging area to the working directory

git reset --hard deletes the changes so if you run this command bare it will delete the working directory and the staging area GONE but UNTRACKED FILES ARE NOT AFFECTED.

This behavior for untracked files is the same with any git reset command, it's not specific to the hard option.

git reset --hard <commit hash> will delete changes up to that commit.

CRLF — The line break character

Mohamed Yahia — Mon, 11 Dec 2023 20:54:27 +0000

Usecase

Just yesterday, after i committed my lovely work on windows through vscode source control feature, I did a git status through wsl and then I find multiple files that are modified. So they are modified files in wsl terminal but not on powershell, not on git bash and certainly not on vscode.

I did a git diff to investigate the issue and i find that all the lines in all files are highlighted in both versions except that they are the same. So why was git telling me there are changes when there was not, I wondered.

I investigated the issue furthur through google and i found that the issue lies within the line break character which differs in windows from unix/unix-like systems.

Line breaks (windows vs unix)

In unix, the line break character is the linefeed character LF but in windows it is both a carriage-return CR and a linefeed character, hence CRLF.

By default, git commits whatever line character is in the text but when you turn on core.autocrlf in the repo or globally by $ git config --global core.autocrlf true what git does, is it will convert LF characters to CRLF when viewed on windows but it will convert CRLF to LF when you commit code. So the repo will have LF characters.

This feature should always be turned on if you are working on windows.

If you are on linux, you could do $ git config --global core.autocrlf input this will convert any CRLF characters to LF but not the other way around.

npm projects

Mohamed Yahia — Mon, 16 Oct 2023 18:56:50 +0000

To start an npm project, you can run npm init in the directory where you want to initiate the project.

You will be prompted with some prompts about the name of the project and some other stuff that you can just skip by pressing enter.

After that a package.json file will be created. It will in a json format as can be interpretted from the file extension.

JSON is a text-based format for representing JS Objects. JSON stands for Javascript Object Notation.

That is the default content of the file. The two curly braces and what's inside them is a JSON object literal.

Why literal or what does literal mean?

Me too have wondered what is the meaning of literal that is shoved between text while the text itself makes sense without it JSON object is understandable without the literal in the end.

Also, you might have heard about the literal syntax of declaring objects in javascript or the string literal.

Literal is a notation (way of writing) for representing values. It is the "literal" notation of representing values. And literal here means the same meaning we know it for i.e. literally.
Lets make it more clear.

let a = "boboddy"

a is a string.
"boboddy" is also a string.

What is the difference between the two.

One is a variable representing the string, the other is the "literal" way of representing the string.

SO variables and constants cant be string literals or any value literal.



let stringVar = String("something")

so String("something") here is a value right? and it is a string because the string method will return a string as an output (it will get stored to stringVar but we are not talking about the variable here, we are talking about String("something") as a value. It is a string but it is not a string literal because it is not a literal string notation, the literal string notation is "something")

and the same goes for the other kind of values.

5 is an integer literal but 2 + 3 is not. Neither is Number("5"). They are integers (in the sense that their 2 +3 expression will evaluate to 5 and the same goes for the other but they are not integer literals)

You would often hear about the literal syntax of declaring an object. It is like that:



let car = {
    model: "BMW",
    year: 2012
}

because those curly braces and the way of writing the key value pairs is the literal syntax.



let car = new Object();
car.model = "BMW"
car.year = 2012

That is another way of declaring an object but it is not the literal way.

I hope this is clear now.

Ok, lets go back. Where were we? Yes, JSON Objects. Ok, so you can see a JSON object with key value pairs.
The scripts key contains a value of an object and this object consists of other key-value pairs. the default one we find is "test" but we can add more.
Every key we add to the scripts object is a script name and the value would the script itself (the script is a command or series of commands)

The first default script is test and when run it runs this line of code echo \"Error: no test specified\" && exit 1

So it will echo to the terminal "Error: no test specified" but not only that it will also run another command of exit 1

Scripts when run successfully exit with a code status of 0. 0 indicates success. In this case, yes, echo did run successfully but the script as a whole is a test script. we didnt run any tests, so it would be logical to assume that the script has failed (technically it didnt yes). In that case, we want to change the exit status to a number that indicates failure. Any number other than zero indicates failure. So they choose 1 as the exit status.
Note that line of code is just a placeholder for the actual test scripts we might have and we would like to replace this line with.

Now, if your project is dependent upon a library like react or a framework, mostly you would find a dev key with some command. When you npm run dev, the app is running on a local server and you can make a request to the server through your browser in which the server responds with the index.html file.

Since we have learned earlier how an npm project is created and how can we manipulate the package.json file, and I told you when the test script runs it does blah blah blah but we didnt learn how to run it.

Well, to run it, you open the terminal (VSCode Integrated Terminal) or any terminal program at the project directory and run npm run ScriptNameInPackage.jsonFileWeWantToRun so in our case npm run test



PS D:\Teach\BLOGS\NPM> npm run test

> npm@1.0.0 test
> echo "Error: no test specified" && exit 1

"Error: no test specified"

We could also do npm test and the script would run but that's for some special script names only like test and start (If we added a start script, it would run with npm start as well as npm run start). But for any other custom names we do, we have to run them using npm run scriptName

Now, why does a server spin up serving our web app when we do npm run dev in most web app projects using a library or framework?

Because the dev key is configured to a script that script will run a program/dependency (called dependency since our app depends on it to run) which will bundle the app and transform the code of the library or the framework into vanilla js along with html,css. This dependency might be vite or webpack or another program.

My focus here is that npm run dev has nothing to do with those frameworks/libraries. You could create an empty directory, run npm init to initialize (hence init) an npm project, add an html file and add a dev key yourself whose value is live-server. live server is a program that spins up a local server which will serve your app. You have probably used it as an extension in vscode but you can also install it globally on your system by running npm i -g live-server. After you have installed it, you can run npm run dev in your directory and voila the html file is open in your browser. You can go back and add some text to the html file to confirm that it is indeed working.

Just one more thing that is intuitive but the file is called package because its main purpose is to keep a list of all the packages (hence package.json) aka dependencies aka programs that your app needs to run.

so in another key called dependencies it will store an object of the dependencies and the allowed versions so ^11.11.0 allows running newer minor verions so 11.12.0 is acceptable (middle or second number is the minor version, first is the major and the third i.e 0 in this case is for patch versions)
Read more about semantic versioning to get a clear idea of how versioning works

devDependencies is for dependencies that are used in the development environment for the development process but we dont need in production (also shorted prod).

And that concludes it. Hope you have enjoyed the read. If it wont bother you, leave a like or comment and share your thoughts.

what does "literal" mean?? string literal? object literal? literal syntax???

Mohamed Yahia — Mon, 16 Oct 2023 18:50:40 +0000

Me too have wondered what is the meaning of literal that is shoved between text while the text itself makes sense. String literal they say, and I am wondering why not just say "string". Literal syntax of declaring objects !!

Okay, Okay, enough talk, more action (or technically... more talk).

let a = "boboddy"

a is a string.
"boboddy" is also a string.

What is the difference between the two.

One is a variable representing the string, the other is the "literal" way of representing the string.

SO variables and constants cant be string literals or any value literal.

let stringVar = String("something")

and the same goes for the other kind of values.

You would often hear about the literal syntax of declaring an object. It is like that:

let car = {
    model: "BMW",
    year: 2012
}

because those curly braces and the way of writing the key value pairs is the literal syntax.

let car = new Object();
car.model = "BMW"
car.year = 2012

That is another way of declaring an object but it is not the literal way.

I hope this is clear now.

Thank you for taking the time to read this article. If you found it helpful, leave a like or a comment. If you have any questions, feel free to ask them down below.

Expansion and Substitution in Unix-like Operating Systems

Mohamed Yahia — Thu, 12 Oct 2023 10:14:55 +0000

Pathname expansion

expanding a pathname, how do we do that?

if we do echo 2 * 3

nuclearegg69@zenbook-f13:~/testRen$ echo 2 * 3
2 a apple b banana c cactus inNano2Ren test2 3

I am presented with those what appears to be file names of current directory, all of them, the 2 and 3 are present at both ends but the asterisk * got replaced/expanded into those file names

This one of the wildcard characters that we can use for expansion. The following list contain some more:

* asterisk:
- it matches 0 or more characters
- ex: *.txt matches file.txt and 0.txt and .txt
? question mark:
- matches any one character
- ex: blue?.txt matches blue1.txt and bluez.txt but doenst match blue12.txt
[] square brackets or range wilcards:
- they match a range of characters inside them
- ex: [rbc]at matches rat, bat or cat
- ex: [a-h]* matches any name that starts with a to h (case sensitivity matters so only small letters a to h)
- ex: [0-9]* matches any name that starts with a number

Arithmetic expansion

nuclearegg69@zenbook-f13:~$ echo $((5+5))
10

syntax: $((arithmetic_expression))

Command substitution

nuclearegg69@zenbook-f13:~/testRen$ echo today is $(date)
today is Thu Oct 12 11:50:06 +03 2023

syntax: $(command)

Changing-behavior Quotes

nuclearegg69@zenbook-f13:~/testRen$ a=5
nuclearegg69@zenbook-f13:~/testRen$ echo $a
5
nuclearegg69@zenbook-f13:~/testRen$ echo "$a"
5
nuclearegg69@zenbook-f13:~/testRen$ echo "\$a"
$a
nuclearegg69@zenbook-f13:~/testRen$ echo '$a'
$a
nuclearegg69@zenbook-f13:~/testRen$ echo "$((a+4))"
9
nuclearegg69@zenbook-f13:~/testRen$ echo '$((a+4))'
$((a+4))
nuclearegg69@zenbook-f13:~/testRen$ echo 1..9
1..9
nuclearegg69@zenbook-f13:~/testRen$ echo {1..9}
1 2 3 4 5 6 7 8 9
nuclearegg69@zenbook-f13:~/testRen$ echo "{1..9}"
{1..9}
nuclearegg69@zenbook-f13:~/testRen$ echo ~
/home/nuclearegg69
nuclearegg69@zenbook-f13:~/testRen$ echo "~"
~
nuclearegg69@zenbook-f13:~/testRen$ echo '~'
~
nuclearegg69@zenbook-f13:~/testRen$ echo *
a apple b banana c cactus inNano2Ren test2
nuclearegg69@zenbook-f13:~/testRen$ echo '*'
*
nuclearegg69@zenbook-f13:~/testRen$ echo "*"
*
nuclearegg69@zenbook-f13:~/testRen$ echo "`ls`"
a
apple
b
banana
c
cactus
inNano2Ren
test2
nuclearegg69@zenbook-f13:~/testRen$ echo '`ls`'
`ls`

Based on the above commands, we can deduce that:

1- double quotes: they disable all substitutions except those that involve a $ (dollar sign), \ (backslash), ` (backtick)

2- single quotes: disable all substitutions.

All About JS Functions

Mohamed Yahia — Wed, 11 Oct 2023 22:32:00 +0000

Not All, I have tricked you.

typeof functions

When you do typeof <someFunction>, you get back 'function'. But, you might have heard that functions are objects??

Well, they are indeed objects, if you do console.dir() on a function, you will get an object with key value pairs and a prototype, the reason why you get 'function' when you pass it as an operand to typeof operator is because that is the way typeof is configured

As you can see in the image, objects which are callable return 'function'

function declarations vs function expressions

//function declaration

function doSth() {
  //do sth
}


// function expression

const doSth = ()=> {
  // do sth
}

what are the implications of using either one of those??

Functions and variables are hoisted (as if they are lifted up at the top of the code, metaphorically). But only the declaration is hoisted, this has a very important implications, variables will be declared but they will not be assigned a value (another term of assigning a value is initializating). That means if you call functions before they are declared, you can but if you try to access a variable before it is declared, you will get

BONUS for English Non-native Speakers: hoisting actually means to lift sth up, it is not a word that is javascript-specific.

The image below shows a hoist (lifter)

So, what are the implications again??

You can declare functions which are in the form of function declarations AFTER they are called but you can't with function expressions because they are variables and they are assigned a function (which is also a value or variable)

So you can do this

doSth()

function doSth() {
  //do sth
}

But not this

doSth()

const doSth = ()=> {
//do sth
}

What happens if I call a function that expects two arguments with one argument, will the function run??

Yes, it will run. The second argument will be undefined.

If I want to call a function but I dont know the number of arguments beforehand, what should I do?

There are two ways to do it:

ES5 way

function getSum() {
  let sum = 0;
  for (const number of arguments) {
    sum += number;
  }
  return sum;
}

console.log(getSum(1, 2, 3, 4));

WHAT IS "ARGUMENTS", WHERE DID THAT ARRAY COME FROM??

That is actually an array-like object, not an array. Array-like objects are objects that have a length property and have indices as properties which have array-like items as values

Array-like objects are iterables in js and that means we can iterate over them using for..of or for i = 0 loops but not forEach because that is an array method.

arguments is a reserved keyword or variable and its value is an array-like object of all arguments you called the function with

ES6 way

With es6, we have a new operator called the rest operator.

function getSum(...numbers) {
  let sum = 0;
  for (const number of numbers) {
    sum += number;
  }
  return sum;
}
console.log(getSum(1, 2, 3, 4));

The rest operator simply combines values passed into an array. The naming behind comes from that we can do this:

function getSum(firstNumber, ...numbers) {
  let sum = 0;
  for (const number of numbers) {
    sum += number;
  }
  return sum;
}

Now the first argument passed will be assigned to firstNumber and ''the rest'' of the arguments will form an array called numbers

That's the end of this article. Thanks for reading. I hope I have added something new to your arsenal of knowledge. If you liked the article, a quick thumps up or a comment would be appreciated and would help me continue sharing information. See you in the next one!

DEV Community: Mohamed Yahia

File permissions in unix-like OSs ft. ls stdout

Lets begin with -rw-r--r-- (First Column)

Second column

Third Column

Fourth Column

Rest of Columns

Quirks with 'value' attrib/prop on 'input' element/object

CLOSURES!!

Practical Example for closures

HTML Collection vs NodeList

HTML Collection

Nodelist

window object and the DOM

Execute commands on 'find' output ft. -exec and xargs

How to run commands on files found

GIT RESET

Usecase

Usage

CRLF — The line break character

Usecase

Line breaks (windows vs unix)

npm projects

Why literal or what does literal mean?

what does "literal" mean?? string literal? object literal? literal syntax???

Expansion and Substitution in Unix-like Operating Systems

Pathname expansion

Arithmetic expansion

Command substitution

Changing-behavior Quotes

All About JS Functions

typeof functions

function declarations vs function expressions

what are the implications of using either one of those??

What happens if I call a function that expects two arguments with one argument, will the function run??

If I want to call a function but I dont know the number of arguments beforehand, what should I do?

Lets begin with `-rw-r--r--` (First Column)