[{"data":1,"prerenderedAt":681},["ShallowReactive",2],{"navigation_docs":3,"-essentials-variables":35,"-essentials-variables-surround":676},[4,20],{"title":5,"path":6,"stem":7,"children":8,"page":19},"Getting Started","\u002Fgetting-started","1.getting-started",[9,14],{"title":10,"path":11,"stem":12,"icon":13},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":15,"path":16,"stem":17,"icon":18},"JavaScript","\u002Fgetting-started\u002Fjavascript","1.getting-started\u002F2.javascript","i-simple-icons-javascript",false,{"title":21,"path":22,"stem":23,"children":24,"page":19},"Essentials","\u002Fessentials","2.essentials",[25,30],{"title":26,"path":27,"stem":28,"icon":29},"Variables","\u002Fessentials\u002Fvariables","2.essentials\u002F1.variables","i-lucide-variable",{"title":31,"path":32,"stem":33,"icon":34},"Data Types","\u002Fessentials\u002Fdata-types","2.essentials\u002F2.data-types","i-carbon-data-set",{"id":36,"title":26,"body":37,"description":669,"extension":670,"links":671,"meta":672,"navigation":673,"path":27,"seo":674,"stem":28,"__hash__":675},"docs\u002F2.essentials\u002F1.variables.md",{"type":38,"value":39,"toc":655},"minimark",[40,45,49,97,103,111,131,135,141,217,222,232,257,261,264,298,304,377,380,384,389,395,446,450,453,481,485,496,564,568,575,651],[41,42,44],"h2",{"id":43},"declare-assign","Declare & assign",[46,47,48],"p",{},"You can declare and assign value to a variable.",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let username;\nusername = 'DabAZ';\n","js","",[57,58,59,76],"code",{"__ignoreMap":55},[60,61,64,68,72],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"spNyl","let",[60,69,71],{"class":70},"sTEyZ"," username",[60,73,75],{"class":74},"sMK4o",";\n",[60,77,79,82,85,88,92,95],{"class":62,"line":78},2,[60,80,81],{"class":70},"username ",[60,83,84],{"class":74},"=",[60,86,87],{"class":74}," '",[60,89,91],{"class":90},"sfazB","DabAZ",[60,93,94],{"class":74},"'",[60,96,75],{"class":74},[98,99,101],"h3",{"id":100},"const",[57,102,100],{},[46,104,105,106,110],{},"Use by default for values that ",[107,108,109],"strong",{},"never change",".",[50,112,114],{"className":52,"code":113,"language":54,"meta":55,"style":55},"const taxRate = 0.1;\n",[57,115,116],{"__ignoreMap":55},[60,117,118,120,123,125,129],{"class":62,"line":63},[60,119,100],{"class":66},[60,121,122],{"class":70}," taxRate ",[60,124,84],{"class":74},[60,126,128],{"class":127},"sbssI"," 0.1",[60,130,75],{"class":74},[98,132,133],{"id":67},[57,134,67],{},[46,136,137,138,110],{},"Use only when the value needs to be ",[107,139,140],{},"updated",[142,143,146,204],"tabs",{"className":144},[145],"w-full",[147,148,151],"tabs-item",{"icon":149,"label":150},"i-lucide-code","Code",[50,152,154],{"className":52,"code":153,"language":54,"meta":55,"style":55},"let age = 20;\nage = 20 + 1;\nconsole.log(age);\n",[57,155,156,170,187],{"__ignoreMap":55},[60,157,158,160,163,165,168],{"class":62,"line":63},[60,159,67],{"class":66},[60,161,162],{"class":70}," age ",[60,164,84],{"class":74},[60,166,167],{"class":127}," 20",[60,169,75],{"class":74},[60,171,172,175,177,179,182,185],{"class":62,"line":78},[60,173,174],{"class":70},"age ",[60,176,84],{"class":74},[60,178,167],{"class":127},[60,180,181],{"class":74}," +",[60,183,184],{"class":127}," 1",[60,186,75],{"class":74},[60,188,190,193,195,199,202],{"class":62,"line":189},3,[60,191,192],{"class":70},"console",[60,194,110],{"class":74},[60,196,198],{"class":197},"s2Zo4","log",[60,200,201],{"class":70},"(age)",[60,203,75],{"class":74},[147,205,208],{"icon":206,"label":207},"i-lucide-terminal","Output",[50,209,211],{"className":52,"code":210,"language":54,"meta":55,"style":55},"21\n",[57,212,213],{"__ignoreMap":55},[60,214,215],{"class":62,"line":63},[60,216,210],{"class":127},[98,218,220],{"id":219},"var",[57,221,219],{},[46,223,224,225,227,228,231],{},"Don't use ",[57,226,219],{},". It allows variables to be ",[107,229,230],{},"redeclared",", which lead to bugs.",[50,233,235],{"className":52,"code":234,"language":54,"meta":55,"style":55},"var name = \"John\";\n",[57,236,237],{"__ignoreMap":55},[60,238,239,241,244,246,249,252,255],{"class":62,"line":63},[60,240,219],{"class":66},[60,242,243],{"class":70}," name ",[60,245,84],{"class":74},[60,247,248],{"class":74}," \"",[60,250,251],{"class":90},"John",[60,253,254],{"class":74},"\"",[60,256,75],{"class":74},[41,258,260],{"id":259},"naming-conventions","Naming conventions",[46,262,263],{},"Only use the following naming conventions:",[265,266,267,274,280,286,292],"ul",{},[268,269,270,271],"li",{},"Camel case: ",[57,272,273],{},"myFirstVariable",[268,275,276,277],{},"Pascal case: ",[57,278,279],{},"MyFirstVariable",[268,281,282,283],{},"Snake case: ",[57,284,285],{},"my_first_variable",[268,287,288,289],{},"Constant case: ",[57,290,291],{},"MY_FIRST_VARIABLE",[268,293,294,295],{},"Totally lower case: ",[57,296,297],{},"myfirstvariable",[46,299,300,301,303],{},"The camel case ",[57,302,273],{}," is the most common and recommended naming convention.",[305,306,307,310],"caution",{},[46,308,309],{},"Here are some names that you should avoid when naming your variables:",[50,311,313],{"className":52,"code":312,"language":54,"meta":55,"style":55},"const myFirst Variable = 'Hello, world!';\nconst 'myFirstVariable' = 'Hello, world!';\nconst 1FirstVariable = 'Hello, world!';\n",[57,314,315,333,360],{"__ignoreMap":55},[60,316,317,319,322,324,326,329,331],{"class":62,"line":63},[60,318,100],{"class":66},[60,320,321],{"class":70}," myFirst Variable ",[60,323,84],{"class":74},[60,325,87],{"class":74},[60,327,328],{"class":90},"Hello, world!",[60,330,94],{"class":74},[60,332,75],{"class":74},[60,334,335,337,340,342,345,347,350,353,356,358],{"class":62,"line":78},[60,336,100],{"class":66},[60,338,339],{"class":70}," 'myFirstVariable",[60,341,94],{"class":74},[60,343,344],{"class":90}," = ",[60,346,94],{"class":74},[60,348,349],{"class":70},"Hello",[60,351,352],{"class":74},",",[60,354,355],{"class":70}," world!",[60,357,94],{"class":74},[60,359,75],{"class":90},[60,361,362,364,367,369,371,373,375],{"class":62,"line":189},[60,363,100],{"class":66},[60,365,366],{"class":70}," 1FirstVariable ",[60,368,84],{"class":74},[60,370,87],{"class":74},[60,372,328],{"class":90},[60,374,94],{"class":74},[60,376,75],{"class":74},[46,378,379],{},"Make sure you're clearly specifying what does the variable represent.",[41,381,383],{"id":382},"types","Types",[98,385,387],{"id":386},"typeof",[57,388,386],{},[46,390,391,392,394],{},"Use the ",[57,393,386],{}," operator to get the type of a variable.",[142,396,398,435],{"className":397},[145],[147,399,400],{"icon":149,"label":150},[50,401,403],{"className":52,"code":402,"language":54,"meta":55,"style":55},"const age = 20;\nconsole.log(typeof age);\n",[57,404,405,417],{"__ignoreMap":55},[60,406,407,409,411,413,415],{"class":62,"line":63},[60,408,100],{"class":66},[60,410,162],{"class":70},[60,412,84],{"class":74},[60,414,167],{"class":127},[60,416,75],{"class":74},[60,418,419,421,423,425,428,430,433],{"class":62,"line":78},[60,420,192],{"class":70},[60,422,110],{"class":74},[60,424,198],{"class":197},[60,426,427],{"class":70},"(",[60,429,386],{"class":74},[60,431,432],{"class":70}," age)",[60,434,75],{"class":74},[147,436,437],{"icon":206,"label":207},[50,438,440],{"className":52,"code":439,"language":54,"meta":55,"style":55},"number\n",[57,441,442],{"__ignoreMap":55},[60,443,444],{"class":62,"line":63},[60,445,439],{"class":70},[98,447,449],{"id":448},"typescript","TypeScript",[46,451,452],{},"TypeScript is a superset of JavaScript that adds static typing.",[50,454,458],{"className":455,"code":456,"language":457,"meta":55,"style":55},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const age: number = 20;\n","ts",[57,459,460],{"__ignoreMap":55},[60,461,462,464,467,470,474,477,479],{"class":62,"line":63},[60,463,100],{"class":66},[60,465,466],{"class":70}," age",[60,468,469],{"class":74},":",[60,471,473],{"class":472},"sBMFI"," number",[60,475,476],{"class":74}," =",[60,478,167],{"class":127},[60,480,75],{"class":74},[98,482,484],{"id":483},"implicit-conversion","Implicit conversion",[46,486,487,488,491,492,495],{},"In this case, the ",[57,489,490],{},"age"," variable is converted to a string and concatenated with the ",[57,493,494],{},"name"," variable.",[142,497,499,553],{"className":498},[145],[147,500,501],{"icon":149,"label":150},[50,502,504],{"className":52,"code":503,"language":54,"meta":55,"style":55},"const age = 20;\nconst name = 'John';\nconsole.log(age + name);\n",[57,505,506,518,534],{"__ignoreMap":55},[60,507,508,510,512,514,516],{"class":62,"line":63},[60,509,100],{"class":66},[60,511,162],{"class":70},[60,513,84],{"class":74},[60,515,167],{"class":127},[60,517,75],{"class":74},[60,519,520,522,524,526,528,530,532],{"class":62,"line":78},[60,521,100],{"class":66},[60,523,243],{"class":70},[60,525,84],{"class":74},[60,527,87],{"class":74},[60,529,251],{"class":90},[60,531,94],{"class":74},[60,533,75],{"class":74},[60,535,536,538,540,542,545,548,551],{"class":62,"line":189},[60,537,192],{"class":70},[60,539,110],{"class":74},[60,541,198],{"class":197},[60,543,544],{"class":70},"(age ",[60,546,547],{"class":74},"+",[60,549,550],{"class":70}," name)",[60,552,75],{"class":74},[147,554,555],{"icon":206,"label":207},[50,556,558],{"className":52,"code":557,"language":54,"meta":55,"style":55},"20John\n",[57,559,560],{"__ignoreMap":55},[60,561,562],{"class":62,"line":63},[60,563,557],{"class":70},[98,565,567],{"id":566},"explicit-conversion","Explicit conversion",[46,569,570,571,574],{},"In this case, we specify the type that the ",[57,572,573],{},"number1"," variable should be converted to.",[142,576,578,640],{"className":577},[145],[147,579,580],{"icon":149,"label":150},[50,581,583],{"className":52,"code":582,"language":54,"meta":55,"style":55},"const number1 = '20';\nconst number2 = 30;\nconsole.log(Number(number1) + number2);\n",[57,584,585,603,617],{"__ignoreMap":55},[60,586,587,589,592,594,596,599,601],{"class":62,"line":63},[60,588,100],{"class":66},[60,590,591],{"class":70}," number1 ",[60,593,84],{"class":74},[60,595,87],{"class":74},[60,597,598],{"class":90},"20",[60,600,94],{"class":74},[60,602,75],{"class":74},[60,604,605,607,610,612,615],{"class":62,"line":78},[60,606,100],{"class":66},[60,608,609],{"class":70}," number2 ",[60,611,84],{"class":74},[60,613,614],{"class":127}," 30",[60,616,75],{"class":74},[60,618,619,621,623,625,627,630,633,635,638],{"class":62,"line":189},[60,620,192],{"class":70},[60,622,110],{"class":74},[60,624,198],{"class":197},[60,626,427],{"class":70},[60,628,629],{"class":197},"Number",[60,631,632],{"class":70},"(number1) ",[60,634,547],{"class":74},[60,636,637],{"class":70}," number2)",[60,639,75],{"class":74},[147,641,642],{"icon":206,"label":207},[50,643,645],{"className":52,"code":644,"language":54,"meta":55,"style":55},"50\n",[57,646,647],{"__ignoreMap":55},[60,648,649],{"class":62,"line":63},[60,650,644],{"class":127},[652,653,654],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":55,"searchDepth":78,"depth":78,"links":656},[657,662,663],{"id":43,"depth":78,"text":44,"children":658},[659,660,661],{"id":100,"depth":189,"text":100},{"id":67,"depth":189,"text":67},{"id":219,"depth":189,"text":219},{"id":259,"depth":78,"text":260},{"id":382,"depth":78,"text":383,"children":664},[665,666,667,668],{"id":386,"depth":189,"text":386},{"id":448,"depth":189,"text":449},{"id":483,"depth":189,"text":484},{"id":566,"depth":189,"text":567},"Learn about variables in JavaScript.","md",null,{},{"icon":29},{"title":26,"description":669},"tQISSbzPdKYMUMBPDVAHm8YgtkZUDIEwVPQBGq6uZqM",[677,679],{"title":15,"path":16,"stem":17,"description":678,"icon":18,"children":-1},"Get started with JavaScript.",{"title":31,"path":32,"stem":33,"description":680,"icon":34,"children":-1},"Learn about data types in JavaScript.",1779604242644]