Forem: adenaddis

Javascript vs Ruby: Syntax Edition

adenaddis — Fri, 16 Sep 2022 17:14:16 +0000

Transitioning from consistently working with javascript to moving straight into ruby might be difficult due to adjusting our eyes to look at a new way of writing code and with that changing our habits.

Lets start simple...

Javascript Syntax

function jsFunction(param) {
  console.log("Look how Im written");
  return param + 5;
}

Lets jot down a couple things we see with js syntax

Use starter keyword function to show the code is a function
jsFunction is the variable name (we use this term to refer to the code wherever we please)
NEED parentheses ( ) right after the variable name to place any parameters we might have in them.
param is the variable name for the functions parameter that will be used when the function is later passing an argument and being invoked.
Next, curly brackets { } is a MUST to indicate the body of the function
console.log() is what will be displayed in the terminal
return is different in which it is not specifically for the terminal. We use this so that our function can have a return value when it is called on. For this example we have param plus 5.

How to check function !

const jsFunctionReturnValue = jsFunction(3);
// => ""Look how Im written"
console.log(myFunctionReturnValue);
// => 8

Above we just called the jsFunction and passed an argument of 3 and assigned that to a variable called jsFunctionReturnValue. This in turn displays my earlier console.log in the terminal. When I console.log the new variable I made, I get the number 8 due to the 3 + 5.

Ruby Syntax

def rb_method(param)
  puts "Look how Im_written"
  param + 5
end

Lets see what makes ruby different:

Use starter keyword def to show the code is a method
We use snake case for the variable name of the method. This just means the words are separated by an underscore (_). While JS uses camel case.
Parameters still come after the method name, parentheses are optional
Since we don't need curly braces here like in js, we use the keyword end after the code to identify where the code finishes.
The return keyword is not needed in Ruby but you can use it. It is just known to ruby that the last line will the the return value.

Now to check Ruby code, you need to run IRB and put your previous code, press enter then check with the following:

rb_method_return_value = rb_method(10)
# Look how Im_written
# => 15
rb_method_return_value
# => 15

Here we can see the argument of 10 being passed into our method and being assigned to a new variable which then we can call on and we get 15 because of 10 + 5.

Fun fact

Props for Beginners (react)

adenaddis — Thu, 04 Aug 2022 16:05:00 +0000

What makes the framework react so interesting and much better than vanilla javascript, is the fact that it is built on sections of your app called components. These components are functions that return what you would like that section of the app to do and results in much cleaner code. But what we will be focusing on is how we pass information from one component to the next.

What is a prop

Props is short for properties and like I said above, it is used to pass information/data from one component to another.

Lets look at an example:

// PARENT COMPONENT

function ArticlePost() {
  return (
    <div>
      <ArticleContent articleText="Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" />
    </div>
  );
}

// CHILD COMPONENT

function ArticleContent(props) {
  return <div>{props.articleText}</div>;
}

In this example we can see 2 components. One being the parent and one the child. The parent component (ArticlePost) is returning a div containing article text. When we go on to the child component (ArticleContent) we can use props as the parameter followed by a return that states (props.articleText). This lets the code know that we want to grab article text from the parent component.

NOTE: Data only flows from parent component to the child component. In the same way that the parent tells the child what to do, not the other way around.

Double check:

console.log(props);
// => { articleText: "Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" }

We can console.log props so we can see that it is indeed referring to the parent components data of article text.

Why is this helpful ?

Usually components will be in different files so the use of props allows you to write a piece of code once and use it in multiple other areas without having to rewrite it everywhere you want to use it.

Why would you even want to pass that data down, can't you just use the original component ?

Well, different component have different functions. The second component might want to access just a piece of data from the first component so it can make that data do something else.

For example we can take a look here:

There is a parent component which is holding (isPublished) but we brought it here to the child component(BlogContent) so that we can manipulate the data via conditional rendering. If isPublished is false (is not published) then return null so the user can see no DOM elements displayed. But if it is published, display the following published content (shown in the return. The return wants to show the user the article text and the minutes to read. This is a more developed example of how and why we use props to grab data from the parent function/component to use it in the child and manipulate the data to show us something we want.

Variables:Code's Harmonizer

adenaddis — Wed, 13 Jul 2022 06:28:21 +0000

You'd be surprised how much the simple things mean until they're not there anymore. In Javascript or just code all together, one of the most common things done by a developer is variable assignment. It goes over many peoples head how vital this is to the coding process.

Variables let code harmonize and work together beautifully. Makes for much cleaner code. If you're a beginner, prepare to use variable assignment like it's your best friend. It'll make your life a hundred times easier.

What is Variable Assignment ?

It's quite simple. You just set your code expression equal to a word that best describes it. This way you can store the information the expression provides all into one word. It's just like a storage box that stores data so that Javascript can keep it in its memory so that we can access it later.

Why do we need to access it you may ask ? Well lets look at an example

We need to access the data with a simple variable so that we can do things to it like in this example remove it. Here we are selecting the main through its id and assigning it to the word 'main'. Now in the second line we can use the word 'main' to remove it from html instead of writing out the whole document.getElementById("main"). This will be extra extra handy for when you have to do multiple things to that variable (see below for advanced example).

Now how do we write out variable assignment ?

The two recommended methods to assign a variable are 'let' or 'const'. Followed by the name of the variable you choose and the assignment operator which is an equal sign (=). Followed then, by your expression.

Let is used to assign a variable that can be reassigned. If you're doing a long code where you would need to change the value of a variable, let allows that.
Const is used when you are certain of the value for that variable because it cannot be reassigned. If you're doing a long code and don't want to mess yourself up by accidentally reusing the same variable name for a different value, const is the way to go.

In the example above, we used let on the variable y and const on the variable x. When we tried to reassign y to a different string, it worked and the new value popped right below it. However when we tried to reassign the x, we got an error. This is because const is permanent, let is not.

More advanced example of why variables are amazing

Without the variable assignment of form, newComment and li, we would get the longest lines of code that are much more prone to errors and bugs. Because we stored those expressions into variables we get a much cleaner code that is also easier for other coders to read. Now we can give form a submit event listener, create a list and through that list give newComment text content to make a successful comment section for people to submit things into.

Resources:
Replit