Duvida sobre validação de CPF

O meu código estava apresentando um erro de que "cpf.substring is not a function" quando eu tentava testar o envio de cpf. O problema que eu encontrei foi que no arquivo "cadastro-cliente.js" eu não tinha atribuído o .value do cpf e nome para as const. Estava:

formCadastro.addEventListener('submit', 
    event => {
        event.preventDefault();
        const nome = event.target.querySelector('[data-nome]');
        const cpf = event.target.querySelector('[data-cpf]');

        if(validaCPF(cpf) && cpf.lenght === 11){
            cadastrarClientes(nome.value, cpf.value)
        }else{
            return console.log("CPF Não é valido")
        }

})

E ficou:

formCadastro.addEventListener('submit', 
    event => {
        event.preventDefault();
        const nome = event.target.querySelector('[data-nome]').value;
        const cpf = event.target.querySelector('[data-cpf]').value;

        if(validaCPF(cpf) && cpf.lenght === 11){
            cadastrarClientes(nome, cpf)
        }else{
            return console.log("CPF Não é valido")
        }

})

Gostaria de saber o por que ao atribuir o .value para os argumentos o navegador não identifica o cpf como uma função.