Как правильно присваивать переменную?

#javascript #переменные

Почему такая конструкция работает:

let outputData = document.querySelector('#outputData');
outputData.innerHTML = 'Введите значение';


А вот такая уже нет:

let outputData = document.querySelector('#outputData').innerHTML;
outputData = 'Введите значение';


Складывается впечатление, что методы нельзя добавлять в переменную. Или возможно
я не до конца понимаю особенности присваивания переменной.

Кто может объяснить эту ситуацию?
    

Ответы

Ответ 1

Складывается впечатление, что методы нельзя добавлять в переменную.


Методы можно добавлять в переменную, однако, в данном случае в коде нет методов. 

innerHTML - это свойство, возвращающее строку.


  возможно я не до конца понимаю особенности присваивания переменной.


Особенностей нет: присваивая что-то в переменную, никак не влияет на предыдущее значение
переменной.

var a = {};
a = 'a';
a = 3;


Во всех трех случаях предыдущее значение теряется и никак не меняется.



Почему работает первый вариант?

В первом варианте: outputData.innerHTML = 'Введите значение';

Нет присваивания переменной. Есть изменение значения свойства объекта.

При этом, .innerHTML еще и особое свойство, которое разбирает переданную строку и
генерирует нужный html, который затем и отображается.


Ответ 2

querySelector возвращает ссылку на объект, а innerHTML - строка, базовые типы в js
не ссылочные, поэтому когда вы приравниваете строке, то переменная будет типа string,
а он базовый и ее изменение не будет менять ее в первоначальном месте. Например:



const simpleType = 'string'
let simpleType2 = simpleType

simpleType2 = 'another string'

// should be false
console.log(simpleType === simpleType2)

const obj = { string: 'string' }
const obj2 = obj

obj2.string = 'another strig'

// should be true
console.log(obj.string === obj2.string)