<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>javascript on ストックバック</title>
        <link>https://route250.github.io/categories/javascript/</link>
        <description>Recent content in javascript on ストックバック</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>ja</language>
        <lastBuildDate>Fri, 21 Apr 2023 02:12:20 +0900</lastBuildDate><atom:link href="https://route250.github.io/categories/javascript/index.xml" rel="self" type="application/rss+xml" /><item>
        <title>let と var は何が違う？</title>
        <link>https://route250.github.io/p/let-%E3%81%A8-var-%E3%81%AF%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86/</link>
        <pubDate>Fri, 21 Apr 2023 02:12:20 +0900</pubDate>
        
        <guid>https://route250.github.io/p/let-%E3%81%A8-var-%E3%81%AF%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86/</guid>
        <description>&lt;p&gt;JavaScriptで変数を宣言する方法には、letとvarがあります。これらはどちらも変数を宣言するためのキーワードですが、実は大きな違いがあります。この記事では、letとvarの違いについて解説します。&lt;/p&gt;
&lt;p&gt;まず、varは関数スコープであるのに対して、letはブロックスコープです。関数スコープとは、変数を宣言した関数内で有効であるということです。一方、ブロックスコープとは、変数を宣言したブロック（中括弧で囲まれた範囲）内でのみ有効であるということです。つまり、letで宣言した変数は、そのブロック内でしか使えないということです。&lt;/p&gt;
&lt;p&gt;以下の例を見てみましょう。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;example&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;true&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt; &lt;span class=&#34;c1&#34;&gt;// 2が出力される
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;  &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt; &lt;span class=&#34;c1&#34;&gt;// 2が出力される
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;この場合、xはvarを使って宣言されています。ifブロックの内側で再度宣言されているため、console.log(x)の出力は2となります。そして、ifブロックの外側でもconsole.log(x)が呼ばれているため、再度2が出力されます。&lt;/p&gt;
&lt;p&gt;一方、letを使った場合はどうでしょうか。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;example&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;kd&#34;&gt;let&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;true&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;kd&#34;&gt;let&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt; &lt;span class=&#34;c1&#34;&gt;// 2が出力される
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;  &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt; &lt;span class=&#34;c1&#34;&gt;// 1が出力される
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;この場合、ifブロック内で宣言されたxは別の変数として扱われます。そのため、最初のconsole.log(x)の出力は2となりますが、ifブロックの外側のxは異なる変数であり、値は1となります。&lt;/p&gt;
&lt;p&gt;以上のように、letとvarの違いはスコープの扱い方にあります。可能であればletを使い、varを使う必要がある場合は注意深くスコープを考えて使うようにしましょう。&lt;/p&gt;
</description>
        </item>
        <item>
        <title>比較演算子の == と === は何が違う？</title>
        <link>https://route250.github.io/p/%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%AE-%E3%81%A8-%E3%81%AF%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86/</link>
        <pubDate>Fri, 21 Apr 2023 02:04:28 +0900</pubDate>
        
        <guid>https://route250.github.io/p/%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%AE-%E3%81%A8-%E3%81%AF%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86/</guid>
        <description>&lt;p&gt;JavaScriptにおいて、比較演算子には== と === の2つがあります。これらの演算子は、異なる型の値を比較する際に異なる振る舞いをします。&lt;/p&gt;
&lt;p&gt;== 比較演算子は、比較する値の型が異なる場合に、自動的に型変換を行ってから値を比較します。例えば、1 == &amp;lsquo;1&amp;rsquo; のように数値と文字列を比較する場合、文字列の &amp;lsquo;1&amp;rsquo; を数値 1 に変換してから比較します。そのため、この場合 true が返されます。&lt;/p&gt;
&lt;p&gt;しかし、== 比較演算子は型変換によって予期せぬ挙動が生じる可能性があるため、使用には注意が必要です。例えば、0 == false のような比較では、false が数値 0 に変換されてから比較されるため、true が返されます。これは予期せぬ結果であるため、=== 比較演算子を使用することが推奨されます。&lt;/p&gt;
&lt;p&gt;=== 比較演算子は、比較する値の型が異なる場合でも、型変換を行いません。そのため、1 === &amp;lsquo;1&amp;rsquo; のような比較では、型が異なるために false が返されます。=== 比較演算子は、型が一致する場合に限り値を比較するため、より厳密な比較が可能です。&lt;/p&gt;
&lt;p&gt;一般的には、可能な限り === 比較演算子を使用することが推奨されます。ただし、== 比較演算子を使用する必要がある場合は、その挙動を理解してから使用するようにしましょう。&lt;/p&gt;
</description>
        </item>
        
    </channel>
</rss>
