(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5462],{40084:(e,s,t)=>{"use strict";t.d(s,{Z:()=>r,m:()=>a});var n=t(67841),c=t(79477);let a=c.createContext({code:"",lang:""}),r=c.memo(function(e){let{code:s,lang:t,children:c}=e;return(0,n.jsx)(a.Provider,{value:{code:s,lang:t},children:c})})},56073:(e,s,t)=>{"use strict";t.d(s,{Z:()=>n});let n=(0,t(64833).z)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});t(67787)},69102:(e,s,t)=>{"use strict";t.d(s,{Z:()=>i});var n=t(67841),c=t(79477),a=t(52574),r=t(83928);let i=function(e){let{width:s,height:t,thumbnailSrc:i,style:l={},...o}=e,d=c.useRef(null),h=(0,a.Z)(d),[u,p]=c.useState(!1),x="number"==typeof s&&"number"==typeof t?"".concat(s," / ").concat(t):void 0;return c.useEffect(()=>{h&&p(!0)},[h]),(0,n.jsx)("div",{ref:d,children:u?(0,n.jsx)(r.default,{style:{aspectRatio:x,...l},...o}):(0,n.jsx)("img",{alt:"",src:i,style:{aspectRatio:x}})})}},5462:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>Z});var n=t(67841),c=t(79477),a=t(64833),r=t(40996),i=t(56073),l=t(49722),o=t(40084),d=t(69102),h=t(45700),u=t(74631),p=t(76955);let x=(0,a.z)("svg")({name:"Svg",class:"sh7xaus",propsAsIs:!1}),m=function(e){let{choiceRefs:s,choiceIndex:t,offsetEndpointBy:a=0}=e,r=(0,p.Z)(),[i,l]=c.useState(""),o=c.useRef(null);return c.useEffect(()=>{var e;let n=null===(e=s.current)||void 0===e?void 0:e[t];if(!n||!o.current)return;let c=o.current.getBoundingClientRect(),r=n.getBoundingClientRect(),i={x:0,y:c.height/2},d={x:r.left-c.left-10-16+a,y:r.top-c.top+r.height/2},h=(0,u.Fv)(t,0,Object.keys(s.current).length-1,2,-2),p=(0,u.Fv)(t,0,Object.keys(s.current).length-1,20,-20),x=(0,u.MX)(.25*c.width,.6*c.width);l("\n      M ".concat(i.x," ").concat(i.y+h,"\n      C ").concat(i.x+x," ").concat(i.y+p,"\n        ").concat(d.x-x," ").concat(d.y,"\n        ").concat(d.x," ").concat(d.y,"\n      L ").concat(d.x-1," ").concat(d.y+8,"\n      L ").concat(d.x+10," ").concat(d.y,"\n      L ").concat(d.x-1," ").concat(d.y-8,"\n      L ").concat(d.x," ").concat(d.y,"\n    "))},[t,s,a,r.width]),(0,n.jsx)(x,{xmlns:"http://www.w3.org/2000/svg",ref:o,width:"100%",height:"100%",fill:"none",children:i&&(0,n.jsx)(h.E.path,{animate:{d:i}})})};t(29103);let f={1:[0],2:[0,0],3:[-4,0,-4],4:[-8,-4,-3,-7],5:[-8,-4,1,-4,-8]},v=(0,a.z)("div")({name:"Wrapper",class:"w3ceqed",propsAsIs:!1}),y=(0,a.z)("div")({name:"Label",class:"lgddpms",propsAsIs:!1}),j=(0,a.z)("span")({name:"Prefix",class:"p1x263ye",propsAsIs:!1}),g=(0,a.z)("div")({name:"ArrowWrapper",class:"a1db012q",propsAsIs:!1}),w=(0,a.z)("div")({name:"ChoicesWrapper",class:"c1sx6zze",propsAsIs:!1}),b=(0,a.z)("label")({name:"Choice",class:"ccv7388",propsAsIs:!1}),z=(0,a.z)("div")({name:"Shadow",class:"syq04rr",propsAsIs:!1}),A=(0,a.z)("div")({name:"ActiveBackground",class:"a1hysmw",propsAsIs:!1}),I=(0,a.z)("div")({name:"ChoiceLabel",class:"c1qt57sw",propsAsIs:!1}),q=(0,a.z)("input")({name:"Radio",class:"rtx5jaj",propsAsIs:!1}),C=(0,a.z)("div")({name:"MobileAlternative",class:"m1v9tds7",propsAsIs:!1}),k=(0,a.z)("div")({name:"SubsequentCopy",class:"siwojty",propsAsIs:!1}),Z=function(e){let{label:s,choices:t,initialChoiceIndex:a=0,codeOutput:h}=e,u=c.useId(),[p,x]=c.useState(a),[Z,S]=c.useState(null),E=c.useRef({}),L=f[t.length],R=function(e){let{choiceIndex:s,selectedChoice:t}=e,n="// We start with a labeled array:\nlet fruits = ['apple', 'banana', 'cherry'];";return 0===s?"".concat(n,"\n\n// ⚠️⚠️⚠️⚠️\n// Pick a different option from the list above\n// to see how it translates in code!"):"".concat(n,"\n\n// ...And then we point this label at a new value:\nfruits = ").concat(t,";")}({choiceIndex:p,selectedChoice:t[p]});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(v,{children:[(0,n.jsxs)(y,{children:[" ",(0,n.jsx)(j,{children:"let"}),s]}),(0,n.jsx)(g,{children:(0,n.jsx)(m,{choiceRefs:E,choiceIndex:p,offsetEndpointBy:L[p]})}),(0,n.jsx)(w,{children:t.map((e,s)=>{let t=s===p,c=s===Z;return(0,n.jsxs)(b,{ref:e=>{E.current[s]=e},htmlFor:"choice-".concat(u,"-").concat(s),children:[(0,n.jsx)(z,{"data-is-highlighted":t||c}),(0,n.jsx)(A,{style:{opacity:t?1:0}}),(0,n.jsx)(I,{children:e}),(0,n.jsx)(q,{type:"radio",name:"reassignable-variable-".concat(u),id:"choice-".concat(u,"-").concat(s),checked:t,onChange:()=>{x(s)},onMouseEnter:()=>{S(s)},onMouseLeave:()=>{S(null)}})]},s)})})]}),(0,n.jsx)(C,{children:(0,n.jsx)(d.Z,{includeBorder:!1,alt:"Diagram showing that the “fruits” variable is pointing to an array of fruits.",width:480,height:293,src:"/images/the-const-deception/reassignable-variable.mp4",thumbnailSrc:"/images/the-const-deception/reassignable-thumbnail.png"})}),(0,n.jsxs)(k,{children:[(0,n.jsxs)(r.Z,{children:["This is known as ",(0,n.jsx)(l.Z,{children:"re-assignment."})," We're saying that actually, the ",(0,n.jsx)(i.Z,{children:"fruits"})," label should refer to an ",(0,n.jsx)("i",{children:"entirely different value:"})]}),(0,n.jsx)(o.Z,{lang:"js",code:R,children:h})]})]})};t(84686)},29103:e=>{e.exports={sh7xaus:"sh7xaus"}},84686:e=>{e.exports={w3ceqed:"w3ceqed",lgddpms:"lgddpms",p1x263ye:"p1x263ye",a1db012q:"a1db012q",c1sx6zze:"c1sx6zze",ccv7388:"ccv7388",syq04rr:"syq04rr",a1hysmw:"a1hysmw",c1qt57sw:"c1qt57sw",rtx5jaj:"rtx5jaj",m1v9tds7:"m1v9tds7",siwojty:"siwojty"}}}]);
//# sourceMappingURL=5462.71fb4409800c3f0f.js.map