Why Does Console.Log Say Undefined, and Then the Correct Value

Why does console.log say undefined, and then the correct value?

The console will print the result of evaluating an expression. The result of evaluating console.log() is undefined since console.log does not explicitly return something. It has the side effect of printing to the console.

You can observe the same behaviour with many expressions:

> var x = 1;
undefined;

A variable declaration does not produce a value so again undefined is printed to the console.

As a counter-example, expressions containing mathematical operators do produce a value which is printed to the console instead of undefined:

> 2 + 2;
4

Why does console.log return undefined after correct output?

Like the other commenters have said, console.log doesn't return anything so the result is always undefined. It looks like you actually want to return the generated string from your function and then log that. Try the following:

const getWeather = function(country, weatherType) {
    return 'The weather in ' + country + ' is ' + weatherType + '.';
}

console.log(getWeather('Scotland', 'sunny')); // The weather in Scotland is sunny.
console.log(getWeather('Japan', 'beautiful')); // The weather in Japan is beautiful.
console.log(getWeather('Germany', 'frosty')); // The weather in Germany is frosty.

What happens in your original code is that you call your function and log the message inside of it. Your function doesn't return anything so when you attempt to log the output of that function you are logging undefined.

console.log(myFunction()) returns undefined

In JavaScript, if nothing is returned from the function with the keyword return then undefined is returned by default.

var data = greet();
console.log(data);// undefined, since your function does not return.

Is equivalent to:

console.log(greet());

The second output is the returned result from the function. Since you are not returning anything from the function hence prints undefined.

To print 'Hi' in the second console you have to return that from the function.

function greet() {  console.log("Hi");  return 'Hi';};
console.log(greet());

Console.log always returns undefined in Chrome

Are you filtering the messages by chance? Look in the upper right corner of the console to see if it says “1 hidden”.

Value is correct when logged in Console but is undefined when using in variable

Try conditional rendering

import React, { useContext, useState } from "react";
import ApexContext from "../context/apexContext";

const Overview = () => {
  const apexContext = useContext(ApexContext);

  const { gamer } = apexContext;

  const test = () => {
    console.log(gamer.platformInfo.platformSlug);
  };

  return (
    <div>
      <div>
        <img
          src="https://trackercdn.com/cdn/apex.tracker.gg/ranks/gold4.png"
          alt="Rank"
        />
        <h2>
          Active Legend:
          { gamer?.platformInfo?.platformSlug
            ? gamer.platformInfo.platformSlug
            : null}
        </h2>
      </div>
      <div className="ui raised very padded text container segment">
        <button className="ui button" onClick={test}>
          Test
        </button>
      </div>
    </div>
  );
};

export default Overview;

// Update on this answer

You can achieve the same using optional chaining
{ gamer?.platformInfo?.platformSlug}

Looks elegant, isn't it?

Why does console.log say undefined, and then the correct value?

The console will print the result of evaluating an expression. The result of evaluating console.log() is undefined since console.log does not explicitly return something. It has the side effect of printing to the console.

You can observe the same behaviour with many expressions:

> var x = 1;
undefined;

A variable declaration does not produce a value so again undefined is printed to the console.

As a counter-example, expressions containing mathematical operators do produce a value which is printed to the console instead of undefined:

> 2 + 2;
4

What does it mean if console.log(4) outputs undefined in Chrome Console?

The undefined is the return value of console.log(...).

You can see this by defining two functions in the console, one returning something, and the other returning nothing, e.g. like this:

function f1() {
  return 1;
}
function f2() {
  return;
}

And then calling them separately (manually)

f1(); // shows '1'

and

f2(); // shows 'undefined'

Also note the little symbol before these return value string.

---

Related Topics