The latest articles on DEV Community by Arthur (@witharthur). https://dev.to/witharthur https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3619143%2Ff563204f-c4ac-45c3-b290-123da4aec8ae.jpeg https://dev.to/witharthur en Arthur Thu, 14 May 2026 13:42:12 +0000 https://dev.to/witharthur/javascript-variables-17pk https://dev.to/witharthur/javascript-variables-17pk <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpn2ofdbjla7alr0zj0na.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpn2ofdbjla7alr0zj0na.jpg" alt=" " width="784" height="1168"></a></p> <h2> var </h2> <ul> <li>Old way of declaring variables</li> <li>Scope is function-based (not limited to blocks)</li> <li>Can be changed later</li> <li>Can be redeclared in the same scope</li> <li>Less safe and can lead to unexpected behavior</li> </ul> <h2> let </h2> <ul> <li>Modern way to declare variables</li> <li>Scope is block-based</li> <li>Value can be changed (reassigned)</li> <li>Cannot be redeclared in the same scope</li> <li>Safer and more predictable than <code>var</code> </li> </ul> <h2> const </h2> <ul> <li>Modern way for fixed values</li> <li>Scope is block-based</li> <li>Value cannot be changed or reassigned</li> <li>Must be initialized when declared</li> <li>Used for values that should stay constant</li> </ul> <h2> Scope (where variables exist) </h2> <ul> <li> <code>var</code> → function scope</li> <li> <code>let</code> and <code>const</code> → block scope</li> </ul> <h2> Hoisting (simple idea) </h2> <ul> <li> <code>var</code> is available before declaration but has an empty value initially</li> <li> <code>let</code> and <code>const</code> are also known before declaration but cannot be used before they are defined</li> </ul> <h2> JavaScript Modes </h2> <h3> Sloppy Mode </h3> <ul> <li>Default mode</li> <li>Less strict rules</li> <li>Allows unsafe or accidental behaviors</li> </ul> <h3> Strict Mode </h3> <ul> <li>Activated manually</li> <li>Prevents many common mistakes</li> <li>Safer and recommended for real projects</li> </ul> javascript typescript webdev frontend Arthur Thu, 14 May 2026 13:39:29 +0000 https://dev.to/witharthur/-react-overview-490o https://dev.to/witharthur/-react-overview-490o <p>React is a JavaScript library, not a framework.</p> <ul> <li>A library is a tool you use when needed </li> <li>A framework has rules and defines how you build your project </li> </ul> <p>React is used for frontend development.<br><br> It helps build what users see in the browser.</p> <h2> Component Architecture </h2> <p>React is based on component architecture.</p> <ul> <li>Components are small parts of the interface </li> <li>They can be reused many times </li> <li>This makes code more organized and faster to develop </li> </ul> <h2> JavaScript Features in React </h2> <p>React uses core JavaScript features.</p> <ul> <li> <code>map</code> is used to render lists </li> <li> <code>filter</code> is used to work with data </li> <li> <code>this</code> was used before, but is less common now </li> </ul> <p>React works with modern JavaScript (ES6+).</p> <h2> Simpler Explanation </h2> <p>React is a tool for building interfaces.<br><br> You create small reusable blocks (components) and combine them to build a page.<br><br> You stay in control, React just helps display everything efficiently.</p> <h2> Important Correction </h2> <p>The idea that React is mainly based on <code>this</code>, <code>map</code>, and <code>filter</code> is not fully accurate.</p> <ul> <li> <code>map</code> is widely used in React </li> <li> <code>filter</code> depends on the situation </li> <li> <code>this</code> is mostly outdated in modern React (hooks are used instead) </li> </ul> react javascript typescript web Arthur Thu, 14 May 2026 13:38:21 +0000 https://dev.to/witharthur/javascript-versions-5haj https://dev.to/witharthur/javascript-versions-5haj <p>ES5 is an older version of JavaScript.</p> <p>It is a standard that defines how JavaScript works.</p> <h2> ES2015 </h2> <p>ES2015 is a newer version that improved ES5.</p> <p>It added new features and made code easier to write and read.</p> <h2> TypeScript </h2> <p>TypeScript is a version of JavaScript with extra features.</p> <p>It adds type checking to help avoid mistakes.</p> <p>TypeScript code is converted into normal JavaScript so browsers can understand it.</p> <h2> Transpiler </h2> <p>A transpiler is a tool that converts new code into older JavaScript.</p> <p>This is needed because not all browsers support the newest features.</p> <p>Examples:</p> <ul> <li>Babel is a popular transpiler</li> <li>TypeScript also works as a transpiler</li> </ul> <h2> Simple Idea </h2> <ul> <li>ES5 is old JavaScript </li> <li>ES2015 is improved JavaScript </li> <li>TypeScript is safer JavaScript </li> <li>Transpiler converts modern code into browser-compatible code </li> </ul> javascript es5 es2015 typescript Arthur Wed, 19 Nov 2025 13:13:10 +0000 https://dev.to/witharthur/all-world-is-down-time-to-get-out-and-speak-with-family-members-4f6d https://dev.to/witharthur/all-world-is-down-time-to-get-out-and-speak-with-family-members-4f6d <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fva0hjy4yb5qzf3ukmgwk.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fva0hjy4yb5qzf3ukmgwk.jpg" alt=" " width="800" height="565"></a></p>