Image of JavaScript passing by reference

Pass By Value vs. By Reference In JavaScript


So I’m building a little app in JavaScript and a piece of the code that I thought was simple, didn’t want to cooperate. I proceed to dig into WHY this was happening and came across one of those features of JavaScript that I felt could use a little explanation here.

JavaScript values are passed by value, not by reference.

This is one of those features of JavaScript you don’t see getting too much attention.

For example if you have an input and you then select it like so:

var input = document.querySelector(‘input’);

Plus:

var finalScore = 7;

var finalScoreDisplay = document.querySelector(‘#finalScoreDisplay’);

Then you do:

var userFinalScore = input.value;
var userFinalNumber = Number(userFinalScore);

And you also have:

input.addEventListener(‘change’, function(){
finalScore = userFinalNumber;
finalScoreDisplay.textContent = finalScore;
});

Weird things start happening when you start putting DOM (Document Object Model) representations of HTML elements, while accessing their properties, and then trying to put that into variables. They don’t seem to work anymore. It’s as if the value gets overwritten, AND/OR the variable’s not actually getting assigned the value. Or at least the value you intended to assign it.

This would be because the variable is getting assigned a reference to the location of the object, as a value. As opposed to the variable getting assigned the value of the object’s property itself.

Interesting.

By the way if you see something else going on here I might like to know about, let me know! Comment, email, smoke signal, it’s all fine. I’d appreciate it.

And now, back to coding.

Love & Peace,

Danielle

React.js logo

React.js! Let’s Talk About It…

I first got familiar with the concepts of React.js about 5 months ago. I loved the idea of Single Page Apps and how reactive (pun totally intended) the page elements and application were to the user, without reloading the page. And to have a better understanding of React, I set aside some time to work with the DOM (Document Object Model) more, as well as JavaScript. And on top of that I worked on Data Structures, and vanilla JavaScript in the DOM  and boom. It’s like my understanding of DOM manipulation was “clicking” way more just by working with the DOM on a more complex level with React.

Plus having worked to really understand the concepts of using React, it seemed to make DOM manipulation much simpler than before when just working with the DOM without React.js. And at the same time, with a much better understanding of the DOM, my understanding of React has increased. I React.js and especially now that Facebook has changed it AND React Native to the MIT License, I’m really looking forward to creating amazing things with React 🙂

Love & Peace,

Danielle

MongoDB vs MySQL thumbnail image

MongoDB vs. MySQL

First of all I love the flexibility you have with a non-relational database, in terms of being able to have a varying data set. Though it’s great to be able to have a schema for the data so it can still have a predictable structure. With MySQL, the data sets are tabular which is great for comparing, but with MongoDB the data sets are “collections” which are basically syntactically like JavaScript objects, actually BSON (Binary JSON), which of course is a plus! I’m already familiar with SQL commands so I was able to connect the MongoDB CRUD concepts with MySQL, though the commands are different and more like JavaScript as well. It’s fun comparing and contrasting. I’ll keep experimenting.

Love & Peace,

Danielle

Node.js logo

Post Requests with Express

I’ve been looking forward to getting to doing manual Post Routes and Requests for some time now. It’s interesting to see things like variables and arrays being passed around as objects on the server-side via Express on Node.js. And parsing the req.body into a JavaScript object to capture and show the request data. I’m also experimenting with Reddit Route Parameters by duplicating subreddit route params, defining a pattern in a route, and making a dynamic webpage with those parameters.

Love & Peace,

Danielle

ES6

ES6

I was a fan of For Loops and the way they make everything explicit in terms of what exactly it’s doing, and how you can get to exact solutions to specific problems. But I’ve been studying ES6 and that’s when forEach came along. I’ve been converted. This method on the array prototype is helping me get acquainted with abstraction. And after working with it for a bit I’m actually starting to like it. I’m also finding the map and filter methods, const/let and arrow functions very helpful as well. This is great preparation for React.js.

Love & Peace,

Danielle

Template Engines - EJS and Node.js video thumbnail

Template Engines – EJS and Node.js

(video re-post)

 

Video transcript:

Love & Peace! What’s up y’all it’s Danielle, we’re talking about tech, coding, coding tutorials, vlogging, blogging, and self-development books so make sure you Subscribe and Like. And today’s topic is… Template Engines. So I’ve been working with template engines on the backend with Node.js and JavaScript of course. And I’ve come to find I’m seeing a lot of similarities between this and PHP. I was working with PHP earlier this year, and making dynamic web apps using things like header files, and footer files and things like that. Seeing how it all comes together with minimal repeated code, which is obviously infinitely easier to maintain. So now I’m seeing similarities between that and template engines on the backend with JavaScript and Node.js. And you know, now that I think about it they’re both server-side languages. PHP being a server-side language, and JavaScript with Node.js, it has those server-side capabilities. So I’m definitely making the connections and seeing the similarities between the two. So with JavaScript basically doing those same things, plus with JavaScript it’s able to do it with basically good old, client-side, vanilla JavaScript. So that’s awesome, and that’s it for now. So again Subscribe, Like, you know get more tech, programming tutorials, vlogs, blogs, self-development books and that’s it for now. Talk to you later, love and peace.

Love & Peace,

Danielle

JavaScript Functions Are Objects

(video re-posted)

 

Video transcript:

What’s up it’s Danielle, I’m hanging out in the library. I like to get a good book from time to time but today’s topic, vlog, blog, is Functions Are Objects. Functions are objects? I just found this out so I’m like wait a minute, I feel like JavaScript lied to me lol because all this time… But I should be more specific. In JavaScript, Functions are First-Class Objects. So I’m gonna have a good time, I’m gonna play around with this. And this should be the key with Functional Programming. You know, passing around functions to functions and really kind of playing with it, sort of like a set of Legos. And this should be key to unlocking JavaScript’s potential.

 

So right now I’m working with IIFE’s (Immediately-Invoked Function Expressions), the ‘this’ keyword, Closures, Hoisting, call(), apply(), bind(), of course Object-Oriented Programming, the ‘new’ keyword and Prototypal Inheritance. And I’m also gaining an understanding of Function Constructors. And while I’m doing that, I’m really kind of studying all these things in the Underscore.js library. It’s actually pretty good for studying Functional Programming. They comment everything, and everything’s really well explained. So if you haven’t seen it check it out. And that’s today’s video, that’s it for today. Again Subscribe, Like, you get plenty of tech, vlogs, self-development, reviewing and reading books. Check it out, stay tune, talk to you later.

P.S. It’s interesting the clever ways a lot of these concepts are used in the Underscore.js library.

 

Love & Peace,

Danielle