while b and c throw ReferenceError when abc is undefined

So abc isn't just undefined, it's undeclared. There's a big difference there.

If you need to handle abc being undeclared, the only safe way to do that (without try/catch) is with typeof:

typeof abc === "undefined"

That will be true, without error, if abc is an undeclared identifier. It will also be true if abc is declared and contains the value undefined.

What is the best and short way to check if abc is undefined before accessing its properties as well as assign blank object {} if undefined?

Probably using var to ensure it's declared:

var abc = abc || {};

Duplicate var declarations are not errors (duplicate let declarations are). So with the above, if abc is undeclared, it gets declared with the initial value undefined and we assign it {}. If it's declared, we replace its value with {} if it's falsy. But, if it may or may not be declared with let or const, then the above will throw an error as well.

So to handle the case where it may or may not be declared with let or const, we need a different variable entirely:

let ourabc = typeof abc === "undefined" || !abc ? {} : abc;

That sets ourabc to {} if abc is undeclared or if it contains a falsy value. Since all non-null object references are truthy, and you've said you want to access object properties, that's probably the shortest way.

2020 Answer, It Exists!!!

You can now directly use ?. inline to test for existence. It is called the Optional Chaining Operator, supported by all modern browsers.

If a property exists, it proceeds to the next check, or returns the value. Any failure will immediately short-circuit and return undefined.

const example = {a: ["first", {b:3}, false]}

example?.a  // ["first", {b:3}, false]
example?.b  // undefined

example?.a?.[0]     // "first"
example?.a?.[1]?.a  // undefined
example?.a?.[1]?.b  // 3

domElement?.parentElement?.children?.[3]?.nextElementSibling

To ensure a default defined value, you can use ??. If you require the first truthy value, you can use ||.

example?.c ?? "c"  // "c"
example?.c || "c"  // "c"

example?.a?.[2] ?? 2  // false
example?.a?.[2] || 2  // 2

If you do not check a case, the left-side property must exist. If not, it will throw an exception.

example?.First         // undefined
example?.First.Second  // Uncaught TypeError: Cannot read property 'Second' of undefined

?. Browser Support - 94%, Oct '22

?? Browser Support - 94%

Node Support - v14+

There is a difference between this:

var ex1 = {foo: undefined};

and this:

var ex2 = {};

Therefore, here's how I would do it:

var args = {
    bing: 'bing',
    boom: 'boom'
};

if (typeof myVar !== 'undefined') {
    args.bang = myVar;
}

someFunc(args, 'yay');

Let's do some fixing. First, this is how you pass optional (non-boolean) parameters in JS (the Good Way^tm):

addFooListeners = function (panelType, handlers) {
    handlers        = handlers        || {};
    handlers.show   = handlers.show   || showFoo;
    handlers.hide   = handlers.hide   || hideFoo;
    handlers.commit = handlers.commit || commitFoo;

The above can be rewritten in a neater way using jQuery (not sure what the name of YUI equivalent to extend is):

handlers = $.extend({
    show  : showFoo, 
    hide  : hideFoo, 
    commit: commitFoo
}, handlers || {})

Now, using eval for this code is criminal. Say the object ns refers to is module, then you can do this instead of eval:

YAHOO.util.Event.addListener("show" + panelType, "click", handlers.show, module["panel_" + panelType], true);
YAHOO.util.Event.addListener("hide" + panelType, "click", handlers.hide, module["panel_" + panelType], true);
YAHOO.util.Event.addListener("commit" + panelType, "click", handlers.commit, module["panel_" + panelType], true);

Now, as you can see, you are assigning a lot of events in a similar fashion. Did you think of defining an addPanelListener function within your function?

function addPanelListener (event, panelType, handler) {
    YAHOO.util.Event.addListener(event + panelType, "click", handler, module["panel_" + panelType], true);
} 

addPanelListener("show"  , panelType, handlers.show);
addPanelListener("hide"  , panelType, handlers.hide);
addPanelListener("commit", panelType, handlers.commit):

Hope it helps.

You're missing the return in your isBreadWinner function.

let isBreadwinner = function() {
    return (user.salary) ? true : false;
};

If you want to skip using a return then you might want to use an ES6 arrow function which has implicit returns if everything is declared on one line without a block, {}.

let isBreadwinner = () => (user.salary) ? true : false;

In general, keep it simple.

To check for undefined, use:

foo === undefined
foo !== undefined

To check for null, use:

foo === null
foo !== null

To check for either at the same time, use:

foo == null
foo != null

And in any case, store your .prop() to a variable to keep it clean. But in your case, if it equals "_blank", then you know it isn't null or undefined, so:

var targ = jQuery(this).prop("target").toLowerCase();

var c = targ === "_blank" ? 1 : 0;

Or you could make it even shorter by coercing the boolean to a number:

var targ = jQuery(this).prop("target").toLowerCase();

var c = +(targ === "_blank");

These last two solutions are safe because .prop() will always return a string.

What you have will work if you finish the ternary expression:

return typeof this.scores != 'undefined' ? this.scores.filter() : null;

You can replace null with whatever value you want to return instead.

var startingNumber = startingNumber || 1;

Something like that what you're looking for, where it defaults if undefined?

var foo = bar || 1; // 1
var bar = 2;
foo = bar || 1;     // 2

By the way, this works for a lot of scenarios, including objects:

var foo = bar || {}; // secure an object is assigned when bar is absent