The error TypeError: Cannot set property 'x' of null occurs when you try to assign a value to a property of a variable that is null. This is similar to the "cannot read property" error but happens during assignment.
// ⌠Problem
let user = null;
user.name = 'John'; // TypeError!
// ✅ Solution 1: Check if exists
if (user) {
user.name = 'John';
}
// ✅ Solution 2: Initialize object first
let user = {};
user.name = 'John'; // Works!
// ✅ Solution 3: Optional chaining with nullish coalescing
user = user ?? {};
user.name = 'John';The most common case - trying to set properties on a DOM element that doesn't exist.
Trying to set a property on a variable that is explicitly null.
Setting a property on a nested object when the parent is null.
JavaScript executes before HTML elements are created.
// Element doesn't exist in HTML
const input = document.querySelector('#username');
input.value = 'John'; // TypeError: Cannot set property 'value' of null
// Typo in selector
const button = document.querySelector('#sumbit-btn'); // typo: sumbit
button.disabled = true; // TypeError!// Solution 1: Check if element exists
const input = document.querySelector('#username');
if (input) {
input.value = 'John';
} else {
console.error('Input element not found');
}
// Solution 2: Use optional chaining (modern browsers)
const button = document.querySelector('#submit-btn');
if (button) button.disabled = true;
// Solution 3: Wait for DOM to load
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#username');
if (input) input.value = 'John';
});let user = null;
user.name = 'John'; // TypeError!
// Or from function return
function getUser() {
return null; // User not found
}
const user = getUser();
user.email = 'john@example.com'; // TypeError!// Solution 1: Initialize before use
let user = {}; // Initialize as empty object
user.name = 'John'; // Works!
// Solution 2: Check before setting
let user = null;
if (user === null) {
user = {};
}
user.name = 'John';
// Solution 3: Use nullish coalescing
let user = null;
user = user ?? {}; // If null, use empty object
user.name = 'John';
// Solution 4: Handle in function
function getUser() {
return null;
}
const user = getUser() || {}; // Default to empty object
user.email = 'john@example.com'; // Safe nowlet data = {
user: null
};
data.user.name = 'John'; // TypeError: Cannot set property 'name' of null
// Or with API response
const response = {
data: null
};
response.data.items = []; // TypeError!// Solution 1: Initialize nested object
let data = {
user: {} // Initialize as empty object
};
data.user.name = 'John'; // Works!
// Solution 2: Check before setting
let data = {
user: null
};
if (!data.user) {
data.user = {};
}
data.user.name = 'John';
// Solution 3: Use nullish coalescing
let data = {
user: null
};
data.user = data.user ?? {};
data.user.name = 'John';
// Solution 4: Safe assignment function
function safeSet(obj, path, value) {
const keys = path.split('.');
let current = obj;
for (let i = 0; i < keys.length - 1; i++) {
if (!current[keys[i]]) {
current[keys[i]] = {};
}
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
}
let data = { user: null };
safeSet(data, 'user.name', 'John'); // Safe!<!DOCTYPE html>
<html>
<head>
<script>
// Runs before body is parsed
const input = document.querySelector('#username');
input.value = 'John'; // TypeError: input is null
</script>
</head>
<body>
<input id="username" type="text">
</body>
</html><!-- Solution 1: Move script to end of body -->
<body>
<input id="username" type="text">
<script>
const input = document.querySelector('#username');
input.value = 'John'; // Works!
</script>
</body>
<!-- Solution 2: Use DOMContentLoaded -->
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#username');
if (input) input.value = 'John';
});
</script>
</head>
<!-- Solution 3: Use defer attribute -->
<head>
<script defer src="app.js"></script>
</head>This error occurs when you try to assign a value to a property of a variable that is null. Common causes include DOM elements not found, uninitialized objects, or scripts running before DOM is ready.
Check if the object exists before setting properties using if statements, initialize objects as {} instead of null, or use optional chaining with nullish coalescing (?? operator).
querySelector returns null when no element matches the selector. Common reasons: typo in selector, element doesn't exist in HTML, or script runs before DOM is loaded.
null is an intentional absence of value (explicitly set), while undefined means a variable has been declared but not assigned. Both cause similar errors when accessing properties.
In React, check if refs exist before accessing them, initialize state with proper default values (not null), and use optional chaining when accessing nested properties.
Explore 500+ free tutorials across 20+ languages and frameworks.