O que faz o use strict no JavaScript

O que é e como utilizar a diretiva use strict

A diretiva “use strict” é uma funcionalidade do JavaScript que define um modo restrito de operação do código, tornando o código mais seguro e eficiente. Quando utilizada, ela impõe regras mais rígidas para a escrita do código, evitando comportamentos ambíguos ou inesperados. Por exemplo, ela impede a utilização de variáveis não declaradas, impõe restrições em relação ao uso do “this” e torna a execução do código mais rápida. O use strict deve ser colocado no início de um script ou de uma função e só é suportada por navegadores mais modernos.

Vantagens e desvantagens no uso do use strict

O use strict do JavaScript tem vantagens e desvantagens que podem influenciar na sua utilização. Alguns exemplos são:

Vantagens:

• Ajuda a evitar erros e comportamentos inesperados do código;
• Torna o código mais legível e fácil de entender;
• Impõe boas práticas de programação e segurança;
• Melhora a performance do código.

Desvantagens:

• Nem todos os navegadores suportam a diretiva “use strict”;
• Pode tornar a escrita do código um pouco mais difícil, devido às restrições impostas;
• A correção de código antigo que não utiliza o use strict pode ser trabalhosa.

Em geral, a utilização do use strict é recomendada para novos projetos, uma vez que ela pode ajudar a evitar muitos erros comuns. No entanto, ao atualizar um código antigo que não utiliza a diretiva, é preciso ter cuidado para não introduzir novos erros e testar o código cuidadosamente.

Exemplos de uso da diretiva use strict

JavaScript Vanilla

'use strict';

// Código JavaScript aqui

Nesse exemplo, a diretiva “use strict” é colocada no início do arquivo JavaScript para definir o modo restrito de operação para todo o código do arquivo.

React Hooks

import React, { useState } from 'react';

function MyComponent() {
  'use strict';

  // Código do componente aqui
}

Nesse exemplo, a diretiva “use strict” é colocada dentro do componente React para definir o modo restrito de operação apenas para o código dentro do componente. Note que o componente é escrito usando a sintaxe de função com Hooks.

No React Hooks, o use strict pode ser definida globalmente em um arquivo JavaScript que contém todos os seus componentes, seguindo a mesma sintaxe do exemplo de JavaScript vanilla que eu dei anteriormente. Veja um exemplo:

import React from 'react';

React.StrictMode = (props) => {
  'use strict';

  return props.children;
}

Neste exemplo, a diretiva “use strict” é definida dentro de um componente de alta ordem chamado StrictMode. Esse componente recebe as props e, em seguida, retorna o que foi passado para ele como children. Ao importar e usar esse arquivo em sua aplicação, o modo restrito de operação será aplicado a todos os componentes dentro dele.

Para usar esse componente de alta ordem globalmente, você pode importá-lo no arquivo que contém sua aplicação React e envolver toda a aplicação com ele, assim:

import React from 'react';
import ReactDOM from 'react-dom';
import StrictMode from './strict-mode';
import App from './App';

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root')
);

Neste exemplo, a aplicação App é envolvida pelo componente de alta ordem StrictMode, que tem a diretiva “use strict” definida globalmente.

Lembre-se de que, embora o modo restrito de operação possa ajudar a evitar erros e a melhorar a segurança do seu código, ele também pode tornar a escrita do código um pouco mais difícil. Certifique-se de entender completamente as implicações de usar o use strict antes de aplicá-lo em sua aplicação.