https://learnreact.design/_next/static/chunks/pages/course-posts/p…1-let-const-and-var-7aec2adc92cecc75d996.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[38],{CjKd:function(e,a,t){"use strict";t.d(a,"a",(function(){return p}));t("q1tI");var n=t("9ixD"),c=t("soUV"),s=t("f4y1"),b=t("9qq+"),o=t("Tgqd"),r=t("qKvR"),p=function(e){var a=e.children,t=e.meta||{},p=t.title,m=t.description,i=t.video;return Object(r.c)(c.a,null,Object(r.c)(n.b,{title:p,description:m}),Object(r.c)(s.a,null,Object(r.c)("div",{className:"w-11/12 max-w-prose mx-auto space-y-10  "},Object(r.c)("div",{className:"my-10 flex flex-col justify-center items-center space-y-8 md:my-16 lg:max-w-2xl lg:my-24 xl:max-w-3xl  xl:my-36 "},Object(r.c)("h1",{className:"font-bold leading-tight text-center text-2xl sm:text-4xl xl:text-5xl "},p),Object(r.c)("div",{className:"flex space-x-2 text-sm"})),Object(r.c)(b.e,{href:i},Object(r.c)("a",{className:"flex space-x-2 items-center hover:text-green-600"},Object(r.c)(o.f,{className:"inline-block opacity-60",size:30}),Object(r.c)("div",null,"Watch the video course"))),a)))}},E3HQ:function(e,a,t){"use strict";t.r(a),t.d(a,"meta",(function(){return o})),t.d(a,"default",(function(){return m}));var n=t("wx14"),c=t("Ff2n"),s=(t("q1tI"),t("7ljp")),b=t("CjKd"),o=(t("qKvR"),{tags:[],date:"2019-07-25",title:"2.6.1 Let, Const, and Var",video:"https://school.learnreact.design/courses/601139/lectures/11184306"}),r={meta:o},p=b.a;function m(e){var a=e.components,t=Object(c.a)(e,["components"]);return Object(s.b)(p,Object(n.a)({},r,t,{components:a,mdxType:"MDXLayout"}),Object(s.b)("h2",{id:"overview"},"Overview"),Object(s.b)("p",null,"What you'll learn:"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"Creating different types of variables"),Object(s.b)("li",{parentName:"ul"},"Why use constants"),Object(s.b)("li",{parentName:"ul"},"Differences between ",Object(s.b)("inlineCode",{parentName:"li"},"let"),", ",Object(s.b)("inlineCode",{parentName:"li"},"const"),", and ",Object(s.b)("inlineCode",{parentName:"li"},"var")),Object(s.b)("li",{parentName:"ul"},"Parameter variable")),Object(s.b)("h2",{id:"variables-and-datatypes"},"Variables and Datatypes"),Object(s.b)("h3",{id:"let"},Object(s.b)("inlineCode",{parentName:"h3"},"let")),Object(s.b)("p",null,"In the last post, we learned that we can create a variable with the ",Object(s.b)("inlineCode",{parentName:"p"},"let")," keyword and how a variable is like a labeled bucket which we can put things in."),Object(s.b)("p",null,"There are also two other keywords we can use."),Object(s.b)("h3",{id:"const"},Object(s.b)("inlineCode",{parentName:"h3"},"const")),Object(s.b)("p",null,"If you read other people\u2019s code, you might see ",Object(s.b)("inlineCode",{parentName:"p"},"const")," instead of ",Object(s.b)("inlineCode",{parentName:"p"},"let"),"."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx{2}"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token parameter"}),"meat"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n",Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),"  ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token keyword"}),"const")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token string"}),'"\ud83c\udf5e"'),"\n"),"  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),"meat\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf40"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n","")),Object(s.b)("p",null,"This defines a ",Object(s.b)("strong",{parentName:"p"},"constant")," instead of a reassignable variable."),Object(s.b)("p",null,"Similar to variables, a constant is a labeled bucket too. We can use its value b

1y the name. However, unlike a variable, once we put a value into a constant, we cannot change it. That\u2019s why it's called a constant, and why we get errors in these lines."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx{4}"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token parameter"}),"meat"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"const")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),'// Error "sandwich is read-only and cannot be reassigned'),"\n",Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),"  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"+"),"meat\n"),"  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf40"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n","")),Object(s.b)("h3",{id:"whats-so-good-about-a-constant"},"What's so good about a constant?"),Object(s.b)("p",null,"You might ask what\u2019s good about a constant if we cannot change its value. Well, just like many things in life, adding some limitations can bring benefits. This barrier can be exactly what we want. It can make the code easier to read and help us avoid mistakes because we would not need to worry about accidental changes to the values."),Object(s.b)("p",null,"For example, if you are dealing with a physics game, you might need to add some physical constants such as gravity that we don't want to accidentally change."),Object(s.b)("h3",{id:"var"},Object(s.b)("inlineCode",{parentName:"h3"},"var")),Object(s.b)("p",null,"If you have studied JavaScript before, you probably know there\u2019s another keyword to define variables. It\u2019s ",Object(s.b)("inlineCode",{parentName:"p"},"var")," instead of ",Object(s.b)("inlineCode",{parentName:"p"},"let")),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx{2}"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token parameter"}),"meat"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n",Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),"  ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token keyword"}),"var")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token string"}),'"\ud83c\udf5e"'),"\n"),"  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),"meat\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf40"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n","")),Object(s.b)("h3",{id:"var-vs-let"},Object(s.b)("inlineCode",{parentName:"h3"},"var")," vs ",Object(s.b)("inlineCode",{parentName:"h3"}

1,"let")),Object(s.b)("p",null,"Similar to ",Object(s.b)("inlineCode",{parentName:"p"},"let"),", this defines a variable ",Object(s.b)("inlineCode",{parentName:"p"},"sandwich"),". We can use its value by the same name. We can also change the value of the variable with an equal sign. However, there are some subtle differences between the variables defined by ",Object(s.b)("inlineCode",{parentName:"p"},"let")," and the ones by ",Object(s.b)("inlineCode",{parentName:"p"},"var"),". But ",Object(s.b)("strong",{parentName:"p"},"let\u2019s")," not worry about it at the moment."),Object(s.b)("p",null,"You can consider ",Object(s.b)("inlineCode",{parentName:"p"},"let")," as a better way to define variables than ",Object(s.b)("inlineCode",{parentName:"p"},"var"),". ",Object(s.b)("strong",{parentName:"p"},"We\u2019ll always use ",Object(s.b)("inlineCode",{parentName:"strong"},"let")," instead of ",Object(s.b)("inlineCode",{parentName:"strong"},"var"),".")),Object(s.b)("h3",{id:"parameter"},"Parameter"),Object(s.b)("p",null,"In this function, the parameter ",Object(s.b)("inlineCode",{parentName:"p"},"meat")," is, in fact, a variable too."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx{1}"}),Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token parameter"}),"meat"),Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token punctuation"}),")"),Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token punctuation"}),"{"),"\n"),"  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"let")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),"meat\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf40"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n","")),Object(s.b)("p",null,"You can think of it as if there\u2019s a hidden ",Object(s.b)("inlineCode",{parentName:"p"},"let")," statement at the beginning of the function. It initializes the variable with the value we pass in when calling the function."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx{2-3}"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n",Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),"  ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token keyword"}),"let")," meat ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token string"}),'"\ud83e\udd53"'),"\n"),Object(s.b)("div",Object(n.a)({parentName:"code"},{className:"mdx-marker"}),"  ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token keyword"}),"let")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"div"},{className:"token string"}),'"\ud83c\udf5e"'),"\n"),"  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),"meat\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf40"'),"\n","  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),'"\ud83c\udf5e"'),"\n","  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n","\n","",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"let")," someVariable ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),"\n","")),Object(s.b)("p",null,"This would essentially be equivalent to"),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"function")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token parameter"}),"meat"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"let")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),"'\ud83c\udf5e'"),"\n  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+")," meat\n  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),"'\ud83c\udf40'"),"\n  sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," sandwich ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"+")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),"'\ud83c\udf5e'"),"\n  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"return")," sandwich\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token keyword"}),"let")," someVariable ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token operator"}),"=")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token function"}),"sandwichMaker"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"("),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token string"}),"'\ud83e\udd53'"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),")"),"\n")),Object(s.b)("p",null,"However, the first method can't change because it doesn't have any input anymore!"),Object(s.b)("h2",{id:"conclusion"},"Conclusion"),Object(s.b)("p",null,"That is ",Object(s.b)("inlineCode",{parentName:"p"},"let"),", ",Object(s.b)("inlineCode",{parentName:"p"},"const"),", and ",Object(s.b)("inlineCode",{parentName:"p"},"var"),"! Remember we'll be using ",Object(s.b)("inlineCode",{parentName:"p"},"let")," instead of ",Object(s.b)("inlineCode",{parentName:"p"},"var"),"! We'll learn about a special function called ",Object(s.b)("inlineCode",{parentName:"p"}

1,"onTap")," next!"))}m.isMDXComponent=!0},NKw7:function(e,a,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/course-posts/prototyping-react-framer/module2-toggle/2.6.1-let-const-and-var",function(){return t("E3HQ")}])},soUV:function(e,a,t){"use strict";t.d(a,"a",(function(){return p}));t("q1tI");var n=t("qKvR");function c(){return Object(n.c)("footer",{className:"bg-gray-900 text-white w-full py-12 mt-8"},Object(n.c)("div",{className:"max-w-max mx-auto md:ml-16"},"(c) LearnReact.design 2021"))}var s=t("jrVH"),b=t("9ixD"),o=t("29X9"),r=t("20a2");function p(e){var a=e.children,t=Object(r.useRouter)(),p=o.siteUrl+t.pathname;return Object(n.c)("div",{className:"min-h-screen flex flex-col"},Object(n.c)(b.b,{canonical:p,openGraph:{url:p}}),Object(n.c)(s.a,null),Object(n.c)("div",{className:"flex-1"},a),Object(n.c)(c,null))}}},[["NKw7",1,2,0,3,4,5]]]);