1

Eu tenho esse código em javascript e quero tirar algumas dúvidas:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3>Faça uma saída de soma de 2 inteiros, ex: alert(2 + 2)</h3>
            </div>

            <div class="col-lg-3">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">N1</span>
                    </div>
                    <input type="text" class="form-control" id="n1" placeholder="Digite o n1">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">N2</span>
                    </div>
                    <input type="text" class="form-control" id="n2" placeholder="Digite o n2">
                </div>
            </div>

            <div class="col-lg-1">
                <button class="btn btn-success">Somar</button>
            </div>

            <div class="col-lg-3">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">Result</span>
                    </div>
                    <input type="text" class="form-control" id="result" placeholder="Result">
                </div>
            </div>

        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="soma.js"></script>
</html>

JS

var result = document.querySelector("input#result");
var button = document.querySelector("button");
/* function add(n1, n2) { ---> Possui parâmetros
    n1 = document.querySelector("input#n1");
    n2 = document.querySelector("input#n2");
    result.value = parseInt(n1.value) + parseInt(n2.value);
    return result;
} */
function add(){
    var n1 = document.querySelector("input#n1");
    var n2 = document.querySelector("input#n2");
    result.value = parseInt(n1.value) + parseInt(n2.value);
}
button.onclick = function(){
    add();
}
  • É a mesma função, porém escrita de maneiras diferentes, qual situação devo usar uma função com parâmetros e outra não?
  • Testei a função de parâmetros e com retorno normalmente, porém quando chamo essa função, não especifico nenhum argumento nela, porém emite o mesmo resultado, como isso é possível (é por conta dos parâmetros serem opcionais?)?
  • Talvez javascript não seja a melhor ferramenta para esse tipo de pergunta, mas caso queremos usar tipagem forte, teria como? Se sim, qual seria a forma?
  • Se eu colocar um parseInt em result, ele diz que o retorno deve ser number, porém se tento executar qualquer uma das funções, não retorna nada, por quê disso?

Referência: Wikipedia, Mozilla

2 Respostas 2

1

É a mesma função, porém escrita de maneiras diferentes, qual situação devo usar uma função com parâmetros e outra não?

Você deve usar uma função com parâmetros quando essa função manipular ou alterar um resultado.

Exemplo

function soma(a, b) {
  console.log(a + b);
}

soma(2, 3); // Resultado 5
soma(3, 3); // Resultado 6
soma(6, 4); // Resultado 10

Testei a função de parâmetros e com retorno normalmente, porém quando chamo essa função, não especifico nenhum argumento nela, porém emite o mesmo resultado, como isso é possível (é por conta dos parâmetros serem opcionais?)?

Os parâmetros não são opcionais, nesse caso ambos recebem undefined. Como pode ver no trecho abaixo, o console irá mostrar undefined quando não informado um valor.

function soma(a, b) {
  console.log(`valor de A: ${a}`);
  console.log(`valor de B: ${b}`);
}

soma(); // Undefined
soma(1); // A = 1, B = undefined
soma(1,2) // Ambos tem valor;

Por que emitiu os mesmos resultados?

Emitiu o mesmo resultado por que os parâmetros n1 e n2 estão setados dentro da função, independente do valor passado com ou sem parâmetro os valores serão sobrepostos.

Exemplo

function soma(a, b) {
  a = 1;
  b = 3;
  
  console.log(`Valor de A: ${a}`);
  console.log(`Valor de B: ${b}`);
}

soma();
soma(5, 10);

Talvez javascript não seja a melhor ferramenta para esse tipo de pergunta, mas caso queremos usar tipagem forte, teria como? Se sim, qual seria a forma?

Utilize o modo 'use strict' do Javascript. O strict mode é um modo mais rigoroso de interpretação da linguagem, que proíbe certas práticas que sempre foram permitidas.

Se você deseja no ambiente de desenvolvimento evitar esses erros, recomendo fortemente o uso de typescript para utilizar tipagem.

Se eu colocar um parseInt em result, ele diz que o retorno deve ser number, porém se tento executar qualquer uma das funções, não retorna nada, por quê disso?

Por que o seu result é um objeto e não um tipo de dado possível para transformar em número como uma string por exemplo.

0

Opa vamos lá.

É a mesma função, porém escrita de maneiras diferentes, qual situação devo usar uma função com parâmetros e outra não? Você tem 2 funções que fazem a mesma tarefa, porém a diferença está no que você passa na função. Exemplo, na sua função add(), você simplesmente está chamando ela para executar todas as ações dentro dela. Já na sua outra função add(n1, n2), você já deve informar os valores que deseja somar, exemplo:

function add(n1, n2) {
    result.value = n1 + n2;
    return result;
}

Repare que não preciso fazer toda a volta que você construiu no seu add(), pois os numeros já estão sendo informados no parâmetro da função, diferentemente da função sem parâmentro que você precisa resgatar os dados (está certo da forma que você fez).

Testei a função de parâmetros e com retorno normalmente, porém quando chamo essa função, não especifico nenhum argumento nela, porém emite o mesmo resultado, como isso é possível (é por conta dos parâmetros serem opcionais?)? Emite o mesmo resultado, pois você está realizando a mesma tratativa em ambas as funções, porém, ao tentar chamar a função com parâmetros sem passar os 2 parâmetros necessários, você terá um erro, pois não está informando os dados corretamente.

Talvez javascript não seja a melhor ferramenta para esse tipo de pergunta, mas caso queremos usar tipagem forte, teria como? Se sim, qual seria a forma? Creio que essa pergunta pode ser respondida e exemplificada no artigo a seguir, vai te dar uma boa idéia dos tipos de tipagem e exemplos: http://felipequadros.com/programa%C3%A7%C3%A3o/b%C3%A1sico/iniciante/geral/teoria/2016/06/05/tipagem-fraca-forte-est%C3%A1tica-din%C3%A2mica-e-inferencia-de-tipo/

Se eu colocar um parseInt em result, ele diz que o retorno deve ser number, porém se tento executar qualquer uma das funções, não retorna nada, por quê disso? Reparei que no teu HTML você está informando os inputs como tipo TEXT, porém se você vai somar, deveria ser NUMBER, assim você não precisa realizar a conversão da variável, podendo deixar:

function add(){
    var n1 = document.querySelector("input#n1");
    var n2 = document.querySelector("input#n2");
    result.value = n1.value + n2.value;
}

Você deve fazer log-in para responder a esta pergunta.