Почему counter не инкрементируется?

Question

[Nikita_Migushev]

Почему в данной конструкции counter не инкрементируется?

var button = document.getElementById("button")

var productCounter = 0

function incrementCounter(counter) {
counter++
console.log(counter)
}

button.addEventListener("click", function() {
	incrementCounter(productCounter);
})

JS FIDDLE

Answer 1

[Somewhere Intech]

Примитивные типы данных в JS(Number, String) копируются при передаче в функцию, а вот например объекты (Object) передаются по ссылке, не смотря на то, что примитивы тоже объекты:

var productCounter = { a: 0 }

function incrementCounter(counter) {
counter.a++
console.log(counter.a)
}

incrementCounter(productCounter)
console.log(productCounter.a)

Вот статейка

Comments

[Nikita_Migushev]

Johnny Lowhunter, а как можно прописать в рамках одной функции, если у меня в объекте productCounter несколько переменных?

например:

var productCounter = { 
    a: 0,
   b: 0
 }

то есть сделать одну функцию, в аргументе которой указываешь, какой именно counter, а внутри все стандартное?

[Somewhere Intech]

Nikita_Migushev, так можете сделать, передавайте объект целиком а инремент делайте только одного свойства. Я суть проблемы лишь описал, как задизайнить это уже другой вопрос. Можете такой подход рассмотреть, к примеру:

const Product = function(){
	var counter = 0;
	this.incrementCount = (c=1) =>
counter+=c;
	this.getCount = () => counter;
}

let product = new Product();
product.incrementCount();
console.log(product.getCount());
//1
product.incrementCount(2);
console.log(product.getCount());
//3

Answer 2

[0ffff0]

Потому что фунция при вызове обращается к переменной в которой лежит ноль, и поскольку каждый новый вызов функции - это новое замыкание, значение этой переменной измененное в нем, дотупно только внутри него. Для того чтобы сделать доступным в глобальной области значение переменной доступное внутри области видимости функции достаточно просто сделать ретурн: return productCounter = counter
Замыкание не только дает вам доступ к Scope внешней области из внутренней функции, но и скрывает свои внутренние переменные для внешних к ней областей. В JavaScript замыкания создаются каждый раз при созданиии функции, во время ее создания. Чтобы открыть доступ к текущему значению переменной, нужно ее вернуть, у вас это будет выглядеть примерно так:

var button = document.getElementById("button")

var productCounter = 0

function incrementCounter(counter) {
counter++
button.innerHTML = counter
return productCounter = counter

}

button.addEventListener("click", function() {
	incrementCounter(productCounter);
})

Comments

[Nikita_Migushev]

0ffff0, спасибо за развернутый ответ. А как лучше прописать в функции, если у меня несколько глобальных переменных с каунтерами, например:

var productCounter1 = 0
var productCounter2 = 0

То есть сделать так, чтобы в рамках одной функции можно было бы в аргументе указать, какой именно каунтер обновить, а внутри функции уже все стандартное?

[Nikita_Migushev]

0ffff0 , если точнее выразиться, как передать каунтер, который нужно обновить в аргументе? И через аргумент его уже обновить?

[0ffff0]

Nikita_Migushev, чтоб работало, и было универсально, сделайте так:

var elements = document.querySelectorAll("button")

for (let i = 0; i < 3; i ++){

elements[i].counter = 0

elements[i].addEventListener("click", function(){

this.counter++

this.innerHTML = this.counter
})
}

а чтоб
>в аргументе обновить - то только если у вас найдутся аргументы Для чего это надо. Если это просто идея фикс, забудьте про нее.