DEV Community: Zac Heisey

Objects vs. Arrays

Zac Heisey — Thu, 25 Apr 2019 13:36:20 +0000

Both objects and arrays are considered “special” in JavaScript. Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values. So what exactly is the difference between objects and arrays, when do you use which, and how to do work with each of them?

Objects

When to Use Objects

Objects are used to represent a “thing” in your code. That could be a person, a car, a building, a book, a character in a game — basically anything that is made up or can be defined by a set of characteristics. In objects, these characteristics are called properties that consist of a key and a value.

// Basic object syntax
var object = {
  key: 'value'
};

// Example 'person' object
var person = {
  name: 'Zac',
  age: 33,
  likesCoding: true
};

Access, Add, and Remove Items from Objects

Properties in objects can be accessed, added, changed, and removed by using either dot or bracket notation. To get the value of the age key in our personobject with both dot and bracket notation, we’d write:

// Dot notation
person.age // returns 33

// Bracket notation
person['age'] // returns 33

Say we wanted to change the value of likesCoding to false. We can do that with dot notation like this:

person.likesCoding = false;

And if we wanted to add a new property to our person object, we could accomplish that with dot notation as well:

person.hobbies = ['hiking', 'travel', 'reading'];

Finally, to remove a property from an object, we use the delete keyword like so:

delete person.age;

Check out this post on the difference between dot and bracket notation, and when to use each.

Iterating Through Objects

The most common way to loop through properties in an object is with a for…in loop:

for (var key in myObject) {
  console.log(key); // logs keys in myObject
  console.log(myObject[key]); // logs values in myObject
}

Another way to iterate through object properties is by appending the forEach() method to Object.keys():

Object.keys(myObject).forEach(function(key) {
  console.log(key); // logs keys in myObject
  console.log(myObject[key]); // logs values in myObject
});

Arrays

When to Use Arrays

We use arrays whenever we want to create and store a list of multiple items in a single variable. Arrays are especially useful when creating ordered collections where items in the collection can be accessed by their numerical position in the list. Just as object properties can store values of any primitive data type (as well as an array or another object), so too can arrays consist of strings, numbers, booleans, objects, or even other arrays.

Access, Add, and Remove Items from Arrays

Arrays use zero-based indexing, so the first item in an array has an index of 0, the second item an index of 1, and so on. For instance, let’s say we wanted to access the third item (‘Mexico City’) in the following array:

var vacationSpots = ['Tokyo', 'Bali', 'Mexico City', 'Vancouver'];

To do so, we’d write:

vacationSpots[2]; // returns 'Mexico City'

Items can be added and removed from the beginning or end of an array using the push(), pop(), unshift(), and shift() methods:

// push() - Adds item(s) to the end of an array
vacationSpots.push('Miami');

// pop() - Removes the last item from an array
vacationSpots.pop();

// unshift() - Adds item(s) to the beginning of an array
vacationSpots.unshift('Cape Town', 'Moscow');

// shift() - Removes the first item from an array
vacationSpots.shift();

Iterating Through Arrays

We can loop through items in an array in a few ways. First there’s the standard for loop:

for (var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]); // logs items in myArray
}

There’s also the for…of loop:

for (var item of myArray) {
  console.log(item); // logs items in myArray
}

Or we can utilize the forEach() method:

myArray.forEach(item) {
  console.log(item); // logs items in myArray
});

Again, the similarities between iteration techniques of objects and arrays can make things confusing. Here’s a helpful article to clear things up.

Wrapping Up

Objects represent “things” with characteristics (aka properties), while arrays create and store lists of data in a single variable. Both dot and bracket notation allow us to access, add, change, and remove items from an object, while zero-based indexing and a variety of built-in methods let us access and alter items in an array. Finally, we can iterate over object properties and array items using various loops (e.g. for, for…in, for…of, forEach()).

Thanks for reading! If you’re interested in learning more about the fundamentals of HTML, CSS, and JavaScript, follow Web Dev Basics on Medium. Ready to write some code? Sweet! Sign up for course and learn the basics of web development.

4 Non-Coding Skills Every Developer Needs

Zac Heisey — Wed, 06 Feb 2019 22:17:35 +0000

Napoleon’s got skills. Do you? Image via The Brandsmith Co.

There’s no doubt that if you want to be good (and employable) developer, you need to know how to write code. That’s should be pretty obvious - you wouldn’t hire a an auto mechanic who knew nothing about cars, right?

Besides writing clean code, however, there are other skills that separate good developers from great ones. This post from freeCodeCamp outlines some important skills for programmers to have that don’t involve writing code, but I wanted to add a few more of my own.

Googling Skills

Developers look stuff up online a lot. Even seasoned developers with years of experience spend a good chunk of their time searching for answers or information on the internet, whether in documentation, forums, or search engines.

Knowing how to search for something in order to find what you’re looking for is a critical skill that can help developers of all levels. Like most things in web development, your “Googling skills” will improve with experience, but there are a few things you can do to speed the process along and get to the right answer faster:

Prepend “mdn” to whatever it is you’re trying to look up. For example, if you want to know the best way to loop through items in an array, try doing a search for “mdn looping through array.” This will return a bunch of results from the MDN Web Docs, which is the go-to resource for all things web development. The MDN documentation might seem a little intimidating to beginner devs, but trust me - these docs will become an invaluable resource as you progress toward full-fledged programmer.
No matter what you search for, you’re almost guaranteed to be served up a result from Stack Overflow, which is the largest online community of developers. This is a good and bad thing. The good part is that you can benefit from the collective knowledge of millions of developers around the world. The bad part is you’ll have to wade through some irrelevant or ineffective solutions in order to find something that works for your use case.
Some developers talk trash about it, but I’ve always found W3Schools to a be a useful resource, especially as a means of decoding some of the more complex documentation found on MDN. I recommend playing around with the interactive examples that are included with most of the tutorials. They’re great for hammering home concepts in a hands-on way.

Planning Skills

Every project you work on as a developer should involve some level of planning in order to layout a roadmap for success. Even if you adjust course as you progress (and you almost certainly will), having the skills to carefully plan out an initial route helps make your life as a developer that much easier.

Planning doesn’t necessarily mean multiple iterations of wireframes and mockups before you start coding, either. It can be as simple as sketching out your ideas on paper, then spending some time thinking through how you might go about executing your plan with code.

Chris Ferdinandi, who runs Vanilla JS Academy, does just that. “Before I ever open a text editor or a browser, I plan my script out on paper. It helps me think big picture, and think through the logic of my code before I get bogged down in the specific methods and tactics I need to implement it.”

Chris Ferdinandi plans out his scripts on paper before he writes a line of code.

Determination Skills

This one is important, especially for beginner devs struggling to grasp complex programming concepts. Make no mistake, leaning how to code is hard! To be a good developer, you’ll need strong determination skills to help you persevere through those rough spots (of which there will be plenty, trust me).

There are times when I spend hours, or even days, stuck on a problem that I just can’t crack. I look up possible solutions on Google, search MDN’s docs, read blog posts, test stuff, fail, ask colleagues, test their suggestions, fail again, walk away for a day or two, come back to the problem, test more stuff, fail, test, fail, test…

That is what becoming a web developer is all about. You need the determination to stick with project and work the pain points until you finally stumble upon the solution you’ve been looking for. That might take you 5 minutes, 5 hours, or 5 days. Doesn’t matter. What matters is that you know, no matter how long it takes, you’ll have the determination to eventually find the answer.

Business Skills

Business skills are extremely valuable, whether you’re a solo freelancer or part of a huge software development team. There are tons of amazing developers and engineers who write flawless code, but have no business acumen whatsoever. They aren’t able to think critically about the products or features they’re building, which means they can’t effectively communicate their ideas, concerns, etc. with marketers, managers, and stakeholders.

This is a huge missed opportunity for developers who could make themselves indispensable to their teams and employers. Building up a solid repertoire of business skills - communication, negotiation, networking, marketing & sales, leadership, financial understanding, customer service, etc. - to complement your programming skills will you put on the fast track to job security (and likely more $$$).

I’d argue that the true unicorns in the tech industry are not the fullstack devs or designer/developers, but rather people who can move effortlessly between writing code, crafting an internal email to team members, developing new promotional copy for an upcoming feature, and responding to customer inquiries. That, my friends, is a unicorn.

Thanks for reading! If you’re interested in learning more about the fundamentals of HTML, CSS, and JavaScript, follow my Medium publication, Web Dev Basics. Ready to write some code? Sweet! Sign up for course and learn the basics of web development.

ES5 vs. ES6: Functions

Zac Heisey — Fri, 01 Feb 2019 21:29:29 +0000

Functions in ES5

There are two ways to write functions in ES5, and both variations produce essentially the same outcome.

In a Function Declaration (sometimes referred to as a “named” function), we use the function keyword to declare our function, give it a name (sum in the example below), and use the return keyword to return the result of our statement in the code block.

ES5 Function Declarations require parentheses and a return statement — but no semicolon.

Function Expressions (aka “Anonymous” functions) have many of the same characteristics as function declarations (basic structure, function and return keywords, etc.). However, we store function expressions in a variables, and terminate them with a semicolon (as we do with all variables in JavaScript).

ES5 Function Expressions require parentheses, a return statement, and a terminating semicolon.

What’s the Difference Between a Function Declaration and a Function Expression?

The key difference between function declarations and function expressions has to do with hoisting. Function declarations are hoisted by the browser when your script initially runs. In other words, any named functions you have in your script will be hoisted to the top of your code and interpreted before any other code is executed.

This means that you can actually call a named function before you’ve declared that function it in your code. Check out the example below:

Functions in ES6

We can still use both of the ES5 function types outlined above, but ES6 also introduced Arrow Functions to the JavaScript landscape. Arrow functions provide a simplified structure, allowing for a more concise way to write function expressions.

The syntax of an arrow function does away with the function keyword and instead uses a => symbol, which is placed to the right of the parentheses containing your parameters.

ES6 Arrow Functions have a few syntactical options, depending on the structure of the function.

Arrow functions also come with some nifty shorthand options we can use to make things even more concise, depending on the required structure of our functions.

ES6 Arrow Functions have shorthand options depending on statements, parameters, etc.

If you’d like to dive deeper into ES6 Arrow Functions and learn more about when and how you can use them, check out some of these resources and tutorials:

JavaScript: Arrow Functions for Beginners - codeburst.io

A Tutorial to JavaScript Arrow Functions - Flavio Copes

Arrow functions - MDN web docs

When (and why) you should use ES6 arrow functions — and why you shouldn’t - freeCodeCamp

7 Alternatives to the div Tag in HTML

Zac Heisey — Wed, 30 Jan 2019 17:01:03 +0000

In the early stages of learning how to structure an HTML document, it’s not uncommon to end up with what some developers call “div soup.” Need a content section your homepage? Wrap in a div! Building a sidebar? Div it up! Three column layout? Div, div, div!

There isn’t anything functionally wrong with writing HTML this way. Browsers will still be able to render your markup and display your content to users. The primary issue with heavy use of <div> tags is that they lack semantic meaning. Writing Semantic HTML gives your markup meaning to web browsers and screen readers, can help with SEO, makes it easier to debug code, and more.

According to the W3C:

“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”

Ok, so what are these “more appropriate elements” that the W3C mentions? When HTML5 was released in 2014, it introduced some new section and grouping elements that web developers could use to enhance the semantic meaning of their markup.

Let’s explore a few of the more semantic alternatives to the <div> tag.

The Main Element

The main element indicates to browsers and screen readers which portion of your markup contains the main section of content on a given page. This can help with keyboard command access, zooming on mobile browsers, and more. It should be used only once per page.

<!-- other content -->

<main role="main">

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around.</p>

</main>

<!-- other content -->

The Section Element

The section element is used to group content by theme and represents a section of a document or application. Sections can have their own header and footer elements, and there can be multiple section elements used on a single page.

<!-- other content -->

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>
  </section>

</main>

<!-- other content -->

The Aside Element

aside elements are mainly used to represent part of a page containing related content to a given section. Asides are typically used as sidebars.

<!-- other content -->

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>

    <aside id="timeline">
      <p>1940s: Lorem Ipsum</p>
      <p>1950s: Lorem Ipsum</p>
      <p>1960s: Lorem Ipsum</p>
    </aside>

  </section>

</main>

<!-- other content -->

The Article Element

The article element can be used for portions of content that could stand on their own. Blog posts, newspaper articles, and user comments are some possible use cases the the article element.

<!-- other content -->

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>

    <aside id="timeline">
      <p>1940s: Lorem Ipsum</p>
      <p>1950s: Lorem Ipsum</p>
      <p>1960s: Lorem Ipsum</p>
    </aside>

  </section>

  <article class="blog-posts">
    <header>
      <h2>Why I Love Skateboarding</h2>
      <p>By Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
  </article>

</main>

<!-- other content -->

The Blockquote Element

The blockquote element represents content that is being quoted from an external source (a person, document, newspaper, case study, etc.). It is often accompanied by an internal <footer> element to attribute the quote to its source.

<!-- other content -->

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>

    <aside id="timeline">
      <p>1940s: Lorem Ipsum</p>
      <p>1950s: Lorem Ipsum</p>
      <p>1960s: Lorem Ipsum</p>
    </aside>

  </section>

  <article class="blog-posts">
    <header>
      <h2>Why I Love Skateboarding</h2>
      <p>By Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
  </article>

  <blockquote cite="http://www.tonyhawkshreds.com">
    "Skateboarding is life. The rest is just details."
    <footer>- Tony Hawk</footer>
  </blockquote>

</main>

<!-- other content -->

The Nav Element

As the name implies, nav elements represent the navigation section of a document. The nav element should include the primary navigation links for a give page, application, etc.

<!-- other content -->

<nav id="main-navigation">
  <ul>
    <li><a href="#skateboards-intro"></a>Introduction to Skateboards</li>
    <li><a href="#skateboards-history"></a>History of Skateboards</li>
  </ul>
</nav>

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>

    <aside id="timeline">
      <p>1940s: Lorem Ipsum</p>
      <p>1950s: Lorem Ipsum</p>
      <p>1960s: Lorem Ipsum</p>
    </aside>

  </section>

  <article class="blog-posts">
    <header>
      <h2>Why I Love Skateboarding</h2>
      <p>By Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
  </article>

  <blockquote cite="http://www.tonyhawkshreds.com">
    "Skateboarding is life. The rest is just details."
    <footer>- Tony Hawk</footer>
  </blockquote>

</main>

<!-- other content -->

The Footer Element

The footer element represents the “footer” section of a document or section. In many websites, the footer element will contain contact and copyright information, a brief “about” blurb, social media logos and links, etc.

<!-- other content -->

<nav id="main-navigation">
  <ul>
    <li><a href="#skateboards-intro"></a>Introduction to Skateboards</li>
    <li><a href="#skateboards-history"></a>History of Skateboards</li>
  </ul>
</nav>

<main role="main">

  <section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The skateboard is the way cool kids get around.</p>
  </section>

  <section id="skateboards-history">
    <h1>History of Skateboards</h1>
    <p>Skateboarding was born in the late 1940s or early 1950s.</p>

    <aside id="timeline">
      <p>1940s: Lorem Ipsum</p>
      <p>1950s: Lorem Ipsum</p>
      <p>1960s: Lorem Ipsum</p>
    </aside>

  </section>

  <article class="blog-posts">
    <header>
      <h2>Why I Love Skateboarding</h2>
      <p>By Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
  </article>

  <blockquote cite="http://www.tonyhawkshreds.com">
    "Skateboarding is life. The rest is just details."
    <footer>- Tony Hawk</footer>
  </blockquote>

</main>

<footer>
  <p>© 2019 Skateboards, Inc.</p>
  <a href="https://twitter.com/@skateboards">Twitter Profile</a>
  <a href="https://www.facebook.com/Skateboards">Facebook Page</a>
</footer>

<!-- other content -->

Now that we know about some semantically optimized alternatives to the div element, how do we know when to use each of them? And when (if ever) is it ok to still use div elements in our markup? HTML5 Doctor has a really handy flowchart to help answer that question: