Why can’t I reach this block of code?

I have this snippet of code that has a bug in it. Do you see it?

'use strict';

var arr = ["hello", "world"];

if (arr.indexOf("hello")) {
 console.log("hello exists!");
} else{
 console.log("hello doesn't exist!");
}

if (arr.indexOf("world")) {
 console.log("world exists!");
} else{
 console.log("world doesn't exist!");
}

This is what we see in the console –

hello world doesn't exist!
world exists!

Clearly “hello” does exist, so why is it logging that it doesn’t exist? Why am I not reaching line 6 of this code?

If you remember which values are falsy in Javascript then you will have your answer. The number 0 is a falsy value so we will never reach line 6 of this code. Line 5 will read  if(arr.indexOf("hello")) and since “hello” is at position 0 in the array then that means this line is the same as saying if(0) or more clearly if(false) and this means that when this code is executed it will move onto the else statement.

To avoid this problem you can explicitly check that the value returned from the indexOf method is not -1.  The indexOf method returns -1 if the value does not exist in the array or it returns the index at which the value was found.

'use strict';

var arr = ["hello", "world"];

if (arr.indexOf("hello") != -1) {
 console.log("hello exists!");
} else{
 console.log("hello doesn't exist!");
}

if (arr.indexOf("world")) {
 console.log("world exists!");
} else{
 console.log("world doesn't exist!");
}

Remember that these are the falsy values in Javascript:

  • false
  • 0 (the number zero)
  • NaN
  • null
  • undefined
  • “” (an empty string)

If it isn’t on that list, then it is truthy.

Happy coding!

Logical Operator && – Return Values

Take a look at the code snippet below. What do you think will be logged to the console?

'use strict';

function sendTwo(){
 return 2;
}

function sendFour(){
 return 4;
}

console.log(sendFour() && sendTwo()); // ?
console.log(sendTwo() && sendFour()); // ?

If you said true and true you are incorrect, but you are not alone.

Many people don’t realize that when you use the && operator, if the first expression is falsy, then you will get that value back, otherwise, you will get the results from the second expression.

So, since both of these expressions evaluate to a truthy value, you will get the second value back.

console.log(sendFour() && sendTwo()); // 2
console.log(sendTwo() && sendFour()); // 4

What do you think will be logged in the following snippet of code?

'use strict';

function sendZero(){
 return 0;
}

function sendFalse(){
 return false;
}

console.log(sendFalse() && sendZero()); // ?
console.log(sendZero() && sendFalse()); // ?

If you said false and 0, you are absolutely right! Since both values are falsy, then the first one that is evaluated is the one that gets returned. This is short circuit evaluation. There is no need to continue evaluating the && operation if the first value is falsy!

console.log(sendFalse() && sendZero()); // false
console.log(sendZero() && sendFalse()); // 0

That’s it for today! Happy coding!

Crush Code with Code Wars

Keep you brain sharp by solving problems in the language(s) you are learning. Lately I’ve been using Code Wars. What I love about this site is that you have the option of solving a problem using a variety of languages (I’ve only used javascript so far) and once you’ve solved it you can see and learn from other people’s solutions. You can also view discussions about the problem which I’ve found very useful.

code wars screen shot

code wars screen shot

Keep crushing code!

gSchool week 25 – What’s Next?

Wow, I can’t believe we are done! I’ve learned so much in the last 24 weeks and now our time here is done. So what’s next? I don’t know, but I do know that I will have to continue with the mantra of my class at gSchool:

  1. Crush Code
  2. Be Legit

I love you guys!!

G7 students and instructors

G7 students and instructors. Photo by Luke Bartel

Gschool – Week 24 Galvanize Full Stack Capstone Project – My Image Finder

This is a demo of the web app that I created as my capstone project for the Galvanize Full Stack web developer program in Boulder, CO. In this app I used Node with Express, jQuery, and Bootstrap and connected to the Cloudinary API for image hosting and the Microsoft Project Oxford API for facial recognition.
The concept of the application is to allow you to upload a photo of a person and a collection of photos and it will find and return all of the photos that the person appears in.

In this video I give a quick overview of what I did, the challenges I faced, where I see the project going from here and then of course I demo the app.

If you want to see code, check out the app on github.

To see the rollercoaster ride of developing this app see my Capstone Project Diary.

Teddi Maull – My Image Finder from Teddi on Vimeo.

Capstone Project Diary – Mission Accomplished

Whoa! That was a rollercoaster ride and I loved it!!!! The anticipation, the loop de loops, the not knowing when the drop would happen. Thrilling and exhausting.

Today I had to present my project to an audience of about 75 people and it went very well. I talked about the concept, my challenges, plans for the future of the app and then came the moment of truth – a LIVE DEMO. I selected the images and let the app do it’s work and held my breath as I hoped the results would come back as I’d expected. Phew! They did :). I’ll post a video demo soon. If you want to see the code that made it all happen, check out my github account.