From 3b3ec19e68d13828294632be7f5f884d000da540 Mon Sep 17 00:00:00 2001 From: Mathieu Date: Wed, 9 Oct 2024 01:05:33 +0200 Subject: [PATCH] corners --- articles.css | 1395 ++++++ articles.html | 11330 +----------------------------------------------- articles.js | 661 +++ index.html | 3 + main.css | 10 +- 5 files changed, 2072 insertions(+), 11327 deletions(-) create mode 100644 articles.css create mode 100644 articles.js diff --git a/articles.css b/articles.css new file mode 100644 index 0000000..9377909 --- /dev/null +++ b/articles.css @@ -0,0 +1,1395 @@ +:root { + --background-color-one: #f2f2f2; + --color-one: #070707; + --background-color-two: #323232; + --color-two: #f7f7f7; + --color-three: #222222; + --color-four: #f7f7f7; + --color-five: #cbcbcb; + --color-six: #232323; + --color-seven: #d5d5d5; + --color-eight: #ffffff; + --color-nine: #070707; + --color-ten: rgba(0, 0, 0, 0.85); + --color-eleven: rgba(7, 7, 7, 0.98); + --color-twelve: #4169e1; + --color-thirteen: #000000; + --color-fourteen: #1c1c1c; + --color-fifteen: rgb(255, 255, 255); + --color-sixteen: rgba(242, 242, 242, 0.75); + overscroll-behavior: contain; +} + +body.dark-mode { + --background-color-one: #000000; + --color-one: #f0f0f0; + --background-color-two: #000000; + --color-two: #000000; + --color-three: #d6d6d6; + --color-four: #070707; + --color-five: #707070; + --color-six: #dddddd; + --color-seven: #171717; + --color-eight: black; + --color-nine: #eaeaea; + --color-ten: rgba(255, 255, 255, 0.85); + --color-eleven: rgba(240, 240, 240, 0.98); + --color-twelve: #4169e1; + --color-thirteen: #ffffff; + --color-fourteen: #e3e3e3; + --color-fifteen: rgb(0, 0, 0); + --color-sixteen: rgba(0, 0, 0, 0.75); +} + +@media (min-width: 601px) { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + border: 0; + } + + html { + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; + font-family: monospace, "Times New Roman", Times, serif; + overscroll-behavior: contain; + } + + body { + touch-action: manipulation; + margin: 0; + background-color: var(--color-thirteen); + overscroll-behavior: contain; + min-height: 100%; + overflow: hidden; + z-index: -2; + } + + body.no-scroll { + overflow: hidden; + } + + header, + main { + padding-left: 3vw; + padding-right: 3vw; + } + + .main-container { + display: flex; + flex-direction: row; + align-items: top; + height: 100%; + width: 100%; + } + + .left-section { + display: flex; + width: 29.33vw; + height: 86vh; + flex-direction: column; + justify-content: space-between; + position: fixed; + } + + .left-title { + height: 36.5px; + font-size: 12.5px; + color: var(--background-color-one); + display: flex; + align-items: flex-start; + justify-content: space-between; + padding-left: 0; + font-weight: bold; + } + + .left-image { + height: 200px; + } + + #cubeCanvas { + width: 100%; + height: 100%; + margin-top: 14px; + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; + } + + .left-index { + height: 400px; + } + + .navigation-title { + font-size: 12.5px; + color: var(--background-color-one); + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; + } + + .navigation-container { + display: flex; + color: var(--background-color-one); + font-size: 12.5px; + align-items: center; + justify-content: space-between; + margin-bottom: 3px; + } + + .navigation-container:hover { + background-color: var(--background-color-one); + color: var(--color-one); + .titleindex { + color: var(--color-one); + } + } + + [id] { + scroll-margin-top: 76px; + } + + .right-section { + width: 62.66vw; + margin-left: 31.33vw; + } + + h2 { + display: none; + } + + .update { + display: none; + } + + .noise { + z-index: -1; + position: fixed; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + pointer-events: none; + opacity: 0.05; + } + + .overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2000; + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + } + + .bar { + width: 10vw; + height: 105vh; + background: var(--background-color-one); + margin: 0; + padding: 0; + } + + .menu-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; /* Adjust as needed */ + overflow: hidden; + pointer-events: none; /* Disable interaction when menu is closed */ + background-color: transparent; + backdrop-filter: blur(0px); + transition: background-color 0.5s, backdrop-filter 0.5s; + } + + /* Menu Bar Styles */ + .menu-bar { + position: absolute; + top: 0; + right: 0; /* Align to the right edge */ + width: 100%; /* Adjust as needed */ + height: 100%; /* Full height */ + transform: translateX(100%); /* Start off-screen to the right */ + z-index: 1; /* Below the menu content */ + overflow: hidden; /* Clip overflowing content */ + } + + /* Menu Content Styles */ + .menu-content { + position: relative; /* Relative to .menu-bar */ + z-index: 2; /* Above .menu-bar */ + display: flex; + flex-direction: column; + margin-top: 70px; /* Start 50px from the top */ + margin-left: 3vw; + margin-right: 3vw; + } + + /* Menu Line Styles */ + .menu-line { + display: flex; + align-items: flex-end; + justify-content: space-between; + padding: 0 8px; + height: 110px; + width: 94vw; + border: 1px solid var(--background-color-one); + transform: translateX(100%); + margin-bottom: 15px; + background-color: var(--color-thirteen); + } + + /* Menu Title Styles */ + .menu-title { + color: var(--background-color-one); /* Text color */ + font-size: 20px; /* Font size */ + margin: 10px 0; /* Spacing around titles */ + font-weight: bold; + } + + .menu-title.one { + font-size: 40px; /* Font size */ + } + + .fixed-box { + position: fixed; + border: 1px solid #f2f2f2; + top: 20px; + left: 3vw; + right: 3vw; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1000; + padding-left: 6px; + padding-right: 6px; + height: 35px; + mix-blend-mode: difference; + } + + .fixed-box button { + height: 25px; + width: 25px; + background-color: transparent; + border: 1px solid #f2f2f2; + touch-action: manipulation; + } + + .fixed-box a.center-text { + text-decoration: none; + color: #f2f2f2; + font-size: 14px; + } + + #darkModeButton { + color: var(--color-fifteen); + background-color: transparent; + touch-action: manipulation; + border: solid 1px #f2f2f2; + display: flex; + align-items: center; + justify-content: center; + } + + .circle { + position: relative; + width: 15px; + height: 15px; + border-radius: 50%; + border: 1px solid #f2f2f2; + } + + .half { + position: absolute; + width: 50%; + height: 100%; + top: 0; + transition: background-color 0.2s ease; + } + + .left { + left: 0; + border-right: none; + border-left-width: 1px; + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + } + + .right { + right: 0; + border-left: none; + border-right-width: 1px; + border-top-right-radius: 100px; + border-bottom-right-radius: 100px; + } + + .center-text { + display: inline-block; + cursor: pointer; + } + + .burger { + display: flex; + justify-content: center; + align-items: center; + background-color: transparent; + } + + .square-container { + display: flex; + gap: 5px; /* Space between the squares */ + transition: flex-direction 0.3s ease; /* Smooth transition */ + } + + .square-one, + .square-two { + width: 4px; + height: 4px; + background-color: #f2f2f2; /* You can choose any color */ + } + + /* When the button has the rotate class, change the flex direction */ + .burger.rotate .square-container { + flex-direction: column; + } + + h2 { + font-size: 16px; + padding-top: 85px; + padding-bottom: 25px; + text-align: left; + overflow: hidden; + color: var(--color-seven); + } + + .tooltip { + position: relative; + cursor: pointer; + } + + .tooltip::after { + content: "Hey there!\A I write code that occasionally agrees to compile."; + position: absolute; + top: 180%; + left: 25%; + transform: translateX(-75%); + background-color: var(--background-color-one); + color: var(--color-six); + padding: 10px; + border-radius: 2px; + white-space: pre-wrap; + width: 150px; + max-width: 250px; + text-align: left; + opacity: 70%; + visibility: hidden; + transition: opacity 0.3s; + z-index: 1; + line-height: 1.5; + } + + .tooltip::before { + content: ""; + position: absolute; + top: 125%; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: var(--background-color-one) transparent transparent + transparent; + opacity: 70%; + visibility: hidden; + transition: opacity 0.3s; + } + + .tooltip:hover::after, + .tooltip:hover::before { + opacity: 1; + visibility: visible; + } + + h3 { + color: var(--color-seven); + padding-top: 7.5px; + padding-bottom: 20px; + font-size: 14px; + } + + h4 { + color: var(--color-seven); + padding-top: 20px; + padding-bottom: 0; + font-size: 14px; + } + + a { + color: var(--color-seven); + text-decoration: none; + font-size: 12.5px; + } + + .custom-hr { + display: none; + justify-content: space-between; + align-items: center; + } + + .symbol { + position: relative; + height: 8px; /* Adjust height as needed */ + display: none; + } + + /* Set specific widths for symbols */ + .symbol.plus { + width: 8px; /* Full plus symbol */ + } + + .symbol.half-plus { + width: 4px; /* Half-plus symbols */ + } + + /* Vertical lines */ + .symbol::before { + content: ""; + position: absolute; + width: 1px; /* Thickness of the vertical line */ + height: 100%; + background-color: var(--background-color-one); /* Adjust color as needed */ + } + + /* Position vertical lines */ + .symbol.plus::before { + left: 50%; + top: 0; + transform: translateX(-50%); + } + + .symbol.half-plus.l::before { + left: 0; + top: 0; + } + + .symbol.half-plus.r::before { + right: 0; + top: 0; + } + + /* Horizontal lines */ + .symbol::after { + content: ""; + position: absolute; + height: 1px; /* Thickness of the horizontal line */ + background-color: var(--background-color-one); /* Adjust color as needed */ + top: 50%; + transform: translateY(-50%); + } + + /* Position horizontal lines */ + .symbol.plus::after { + width: 100%; + left: 0; + } + + .symbol.half-plus.l::after { + width: calc(100% - 1px); /* Subtract vertical line width */ + left: 1px; /* Start after vertical line */ + } + + .symbol.half-plus.r::after { + width: calc(100% - 1px); /* Subtract vertical line width */ + left: 0; /* Start from left edge */ + } + + .alphsort { + background-color: transparent; + padding-left: 0; + display: none; + } + + .scroller { + overflow-x: auto; + background-color: transparent; + } + + .scroller::-webkit-scrollbar { + height: 2px; + } + + .scroller::-webkit-scrollbar-thumb { + background-color: var(--background-color-one); + border-radius: 4px; + } + + .scroller-content { + display: flex; + } + + .scroller-content li { + list-style: none; + margin-top: 15px; + margin-bottom: 15px; + } + + .scroller-content li:first-child { + list-style: none; + margin-left: 0; + } + + .scroller-content a { + display: flex; + align-items: center; + justify-content: center; + height: 35px; + padding: 0 10px; + border: 1px solid var(--background-color-one); + background-color: transparent; + color: var(--background-color-one); + text-decoration: none; + border-radius: 2px; + white-space: nowrap; + transition: background-color 0.1s; + } + + .scroller-content a:hover { + background-color: var(--background-color-one); + color: var(--color-one); + } + + .hljs { + border-radius: 2px; + font-family: JetBrains Mono, monospace; + font-size: 13px; + line-height: 1.5; + } + + p, + ol { + color: var(--color-seven); + font-size: 13px; + line-height: 1.5; + } + + ol, + li { + margin: 8px; + } + + table { + width: 100%; + table-layout: fixed; + } + + table, + th, + td { + border-collapse: collapse; + font-size: 12.5px; + height: 35px; + border: 1; + } + + .tableletters { + background-color: transparent; + font-weight: bold; + text-transform: uppercase; + padding: 0; + height: 12.5px; + border-top: 1px solid var(--background-color-one); + } + + td.tableletters[data-number] { + font-size: 0; + } + + .expandable-row-content { + display: none; + } + .clickable { + cursor: pointer; + color: var(--color-seven); + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--background-color-one); + } + + .clickable:hover { + text-decoration: none; + } + + .clickable::after { + content: "[+]"; /* Plus sign, indicating expandable */ + font-size: 12px; + color: var(--color-twelve); + } + + .expanded::after { + content: "[-]"; /* Minus sign, indicating collapsible */ + color: var(--color-twelve); + } + + .clickable.expanded { + color: var(--color-twelve); + } + + .ascii-art { + display: flex; + justify-content: center; + margin-top: 30px; + margin-bottom: 30px; + color: var(--color-seven); /* Use the defined color variable */ + margin-left: 35%; + } + + .mobile-ascii-art { + display: none; + } + + .endspace { + margin-left: 3vw; + margin-right: 3vw; + } + + #mouse-square { + position: absolute; + width: 12px; + height: 12px; + background-color: var(--color-eight); + opacity: 0.85; /* Makes the square semi-transparent */ + pointer-events: none; + transform: translate(-50%, -50%) rotate(0deg); + transition: left 0.1s ease-out, top 0.1s ease-out, transform 0.1s ease-out; + mix-blend-mode: difference; + z-index: 12000; + } + + /* Standard syntax */ + ::selection { + background-color: var(--background-color-one); + color: var(--color-twelve); + } + + /* Mozilla Firefox */ + ::-moz-selection { + background-color: var(--background-color-one); + color: var(--color-twelve); + } + + /* WebKit browsers (Chrome, Safari) */ + ::-webkit-selection { + background-color: var(--background-color-one); + color: var(--color-twelve); + } +} + +@media screen and (max-width: 600px) { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + border: 0; + } + + html { + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; + font-family: monospace, "Times New Roman", Times, serif; + overscroll-behavior: contain; + } + + body { + touch-action: manipulation; + margin: 0; + background-color: var(--color-thirteen); + overscroll-behavior: contain; + min-height: 100%; + overflow: hidden; + z-index: -2; + } + + body.no-scroll { + overflow: hidden; + } + + header, + main { + padding-left: 3vw; + padding-right: 3vw; + } + + [id] { + scroll-margin-top: 90px; + } + + .left-title { + display: none; + } + + .navigation-title { + display: none; + } + + .navigation-container { + display: none; + } + + .left-image { + height: 175px; + margin-top: 25px; + margin-bottom: 25px; + display: flex; + align-items: center; + justify-content: center; + overflow-x: hidden; + } + + #cubeCanvas { + width: 100%; + height: 100%; + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; + } + + .brone { + display: none; + } + + .brtwo { + display: none; + } + + .noise { + z-index: -1; + position: fixed; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + pointer-events: none; + opacity: 0.05; + } + + .overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2000; + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + } + + .bar { + width: 10vw; + height: 105vh; + background: var(--background-color-one); + margin: 0; + padding: 0; + } + + /* Menu Overlay Styles */ + .menu-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; /* Adjust as needed */ + overflow: hidden; + pointer-events: none; /* Disable interaction when menu is closed */ + background-color: transparent; + transition: background-color 0.5s; + } + + /* Menu Bar Styles */ + .menu-bar { + position: absolute; + top: 0; + right: 0; /* Align to the right edge */ + width: 100%; /* Adjust as needed */ + height: 100%; /* Full height */ + transform: translateX(100%); /* Start off-screen to the right */ + z-index: 1; /* Below the menu content */ + overflow: hidden; /* Clip overflowing content */ + } + + /* Menu Content Styles */ + .menu-content { + position: relative; /* Relative to .menu-bar */ + z-index: 2; /* Above .menu-bar */ + display: flex; + flex-direction: column; + margin-top: 70px; /* Start 50px from the top */ + margin-left: 3vw; + margin-right: 3vw; + } + + /* Menu Line Styles */ + .menu-line { + display: flex; + align-items: flex-end; + justify-content: space-between; + padding: 0 8px; + height: 110px; + width: 94vw; + border: 1px solid var(--background-color-one); + transform: translateX(100%); + margin-bottom: 15px; + background-color: var(--color-thirteen); + } + + /* Menu Title Styles */ + .menu-title { + color: var(--background-color-one); /* Text color */ + font-size: 20px; /* Font size */ + margin: 10px 0; /* Spacing around titles */ + font-weight: bold; + } + + .menu-title.one { + font-size: 40px; /* Font size */ + } + + .fixed-box { + position: fixed; + border: 1px solid #f2f2f2; + top: 20px; + left: 3vw; + right: 3vw; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1000; + padding-left: 6px; + padding-right: 6px; + height: 35px; + mix-blend-mode: difference; + } + + .fixed-box button { + height: 25px; + width: 25px; + background-color: transparent; + border: 1px solid #f2f2f2; + touch-action: manipulation; + } + + .fixed-box a.center-text { + text-decoration: none; + color: #f2f2f2; + font-size: 14px; + } + + #darkModeButton { + color: var(--color-fifteen); + background-color: transparent; + touch-action: manipulation; + border: solid 1px #f2f2f2; + display: flex; + align-items: center; + justify-content: center; + } + + .circle { + position: relative; + width: 15px; + height: 15px; + border-radius: 50%; + border: 1px solid #f2f2f2; + } + + .half { + position: absolute; + width: 50%; + height: 100%; + top: 0; + transition: background-color 0.2s ease; + } + + .left { + left: 0; + border-right: none; + border-left-width: 1px; + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + } + + .right { + right: 0; + border-left: none; + border-right-width: 1px; + border-top-right-radius: 100px; + border-bottom-right-radius: 100px; + } + + .center-text { + display: inline-block; + cursor: pointer; + } + + .burger { + display: flex; + justify-content: center; + align-items: center; + background-color: transparent; + } + + .square-container { + display: flex; + gap: 5px; /* Space between the squares */ + transition: flex-direction 0.3s ease; /* Smooth transition */ + } + + .square-one, + .square-two { + width: 4px; + height: 4px; + background-color: #f2f2f2; /* You can choose any color */ + } + + /* When the button has the rotate class, change the flex direction */ + .burger.rotate .square-container { + flex-direction: column; + } + + h2 { + font-size: 16px; + padding-top: 80px; + padding-bottom: 20px; + text-align: left; + overflow: hidden; + color: var(--color-seven); + } + + .tooltip { + position: relative; + cursor: pointer; + } + + .tooltip::after { + content: "Hey there!\A I write code that occasionally agrees to compile."; + position: absolute; + top: 180%; + left: 25%; + transform: translateX(-75%); + background-color: var(--background-color-one); + color: var(--color-six); + padding: 10px; + border-radius: 2px; + white-space: pre-wrap; + width: 150px; + max-width: 250px; + text-align: left; + opacity: 70%; + visibility: hidden; + transition: opacity 0.3s; + z-index: 1; + line-height: 1.5; + } + + .tooltip::before { + content: ""; + position: absolute; + top: 125%; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: var(--background-color-one) transparent transparent + transparent; + opacity: 70%; + visibility: hidden; + transition: opacity 0.3s; + } + + .tooltip:hover::after, + .tooltip:hover::before { + opacity: 1; + visibility: visible; + } + + h3 { + color: var(--color-seven); + padding-top: 7.5px; + padding-bottom: 20px; + font-size: 14px; + } + + h4 { + color: var(--color-seven); + padding-top: 20px; + padding-bottom: 0; + font-size: 14px; + } + + a { + color: var(--color-seven); + text-decoration: none; + font-size: 12.5px; + } + + .custom-hr { + display: flex; + justify-content: space-between; + align-items: center; + } + + .symbol { + position: relative; + height: 8px; /* Adjust height as needed */ + } + + /* Set specific widths for symbols */ + .symbol.plus { + width: 8px; /* Full plus symbol */ + } + + .symbol.half-plus { + width: 4px; /* Half-plus symbols */ + } + + /* Vertical lines */ + .symbol::before { + content: ""; + position: absolute; + width: 1px; /* Thickness of the vertical line */ + height: 100%; + background-color: var(--background-color-one); /* Adjust color as needed */ + } + + /* Position vertical lines */ + .symbol.plus::before { + left: 50%; + top: 0; + transform: translateX(-50%); + } + + .symbol.half-plus.l::before { + left: 0; + top: 0; + } + + .symbol.half-plus.r::before { + right: 0; + top: 0; + } + + /* Horizontal lines */ + .symbol::after { + content: ""; + position: absolute; + height: 1px; /* Thickness of the horizontal line */ + background-color: var(--background-color-one); /* Adjust color as needed */ + top: 50%; + transform: translateY(-50%); + } + + /* Position horizontal lines */ + .symbol.plus::after { + width: 100%; + left: 0; + } + + .symbol.half-plus.l::after { + width: calc(100% - 1px); /* Subtract vertical line width */ + left: 1px; /* Start after vertical line */ + } + + .symbol.half-plus.r::after { + width: calc(100% - 1px); /* Subtract vertical line width */ + left: 0; /* Start from left edge */ + } + + .alphsort { + background-color: transparent; + padding-left: 0; + } + + .scroller { + overflow-x: auto; + background-color: transparent; + } + + .scroller::-webkit-scrollbar { + display: none; + height: 2px; + } + + .scroller::-webkit-scrollbar-thumb { + display: none; + background-color: var(--background-color-one); + border-radius: 4px; + } + + .scroller-content { + display: flex; + } + + .scroller-content li { + list-style: none; + margin-top: 5px; + margin-bottom: 5px; + } + + .scroller-content li:first-child { + list-style: none; + margin-left: 0; + } + + .scroller-content a { + display: flex; + align-items: center; + justify-content: center; + height: 35px; + padding: 0 10px; + border: 1px solid var(--background-color-one); + background-color: transparent; + color: var(--background-color-one); + text-decoration: none; + border-radius: 2px; + white-space: nowrap; + transition: background-color 0.1s; + } + + .scroller-content a:hover { + background-color: var(--background-color-one); + color: var(--color-one); + } + + .hljs { + border-radius: 2px; + font-family: JetBrains Mono, monospace; + font-size: 13px; + line-height: 1.5; + } + + p, + ol { + color: var(--color-seven); + font-size: 13px; + line-height: 1.5; + } + + ol, + li { + margin: 8px; + } + + .marquee-container { + overflow: hidden; + position: relative; + width: 100%; + height: 50px; /* Adjust the height as needed */ + } + + .marquee { + display: flex; + width: max-content; + animation: marquee 60s linear infinite; + filter: blur(2px); + cursor: pointer; + user-select: none; /* Prevents text selection */ + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* Internet Explorer and Edge */ + touch-action: none; /* Prevents default touch behaviors */ + } + + .update { + white-space: nowrap; + margin-right: 10px; /* Space between repeated texts */ + } + + @keyframes marquee { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-50%); + } + } + + table { + width: 100%; + table-layout: fixed; + } + + table, + th, + td { + border-collapse: collapse; + padding: 6px; + font-size: 12.5px; + height: 35px; + } + + .tableletters { + color: var(--background-color-one); + background-color: transparent; + border-top: 1px solid var(--background-color-one); + font-weight: bold; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: space-between; + } + + .tablenr { + } + + .expandable-row-content { + display: none; + } + .clickable { + cursor: pointer; + color: var(--color-seven); + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--background-color-one); + } + + .clickable:hover { + text-decoration: none; + } + + .clickable::after { + content: "[+]"; /* Plus sign, indicating expandable */ + font-size: 12px; + color: var(--color-twelve); + } + + .expanded::after { + content: "[-]"; /* Minus sign, indicating collapsible */ + color: var(--color-twelve); + } + + .clickable.expanded { + color: var(--color-twelve); + } + + .ascii-art { + display: flex; + justify-content: center; + margin-top: 30px; + margin-bottom: 30px; + color: var(--color-seven); /* Use the defined color variable */ + } + + .endspace { + margin-left: 3vw; + margin-right: 3vw; + } + header, + main { + padding-left: 3vw; + padding-right: 3vw; + } + + .fixed-box { + top: 20px; + left: 3vw; + right: 3vw; + padding-left: 8px; + padding-right: 8px; + height: 40px; + } + + .container { + width: 94%; + } + + .grid-container { + grid-template-columns: repeat(10, 1fr); + width: 94%; + } + + table, + th, + td { + padding: 8px; + } + + .menu-bar { + height: 100%; + } + + /* Menu Content Styles */ + .menu-content { + margin-top: 70px; /* Start 50px from the top */ + margin-left: 3vw; + margin-right: 3vw; + } + + .menu-line { + padding: 0 8px; + height: 125px; + width: 94vw; + border: 1px solid var(--background-color-one); + transform: translateX(100%); + margin-bottom: 10px; + background-color: var(--color-one); + } + + /* Menu Title Styles */ + .menu-title { + color: var(--background-color-one); /* Text color */ + font-size: 20px; /* Font size */ + margin: 10px 0; /* Spacing around titles */ + } + + .menu-title.one { + font-size: 40px; /* Font size */ + } + + .fixed-box button { + height: 25px; + width: 25px; + } + + .fixed-box a.center-text { + text-decoration: none; + } + + h2 { + padding-top: 85px; + padding-bottom: 20px; + } + + .hljs { + font-size: 12.5px; + } + + .mobile-ascii-art { + display: block; + color: var(--background-color-one); + display: flex; + align-items: center; + justify-content: center; + } + + .ascii-art { + display: none; + } + + .endspace { + margin-left: 3vw; + margin-right: 3vw; + } +} diff --git a/articles.html b/articles.html index 877d526..bb0fb89 100644 --- a/articles.html +++ b/articles.html @@ -24,10 +24,10 @@ /> Mathieu - + - + @@ -75,11329 +75,9 @@ -
-
-

Index [141]

-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
- -
-
-
-
[01]
-
VARIABLES
-
-
- -
-
-
-

- // METADATA -

-

- // [LAST UPDATED] 08/10/2024 -

-

- // [AUTHOR] MATHIEU -

-

- // [LAST UPDATED] 08/10/2024 -

-

- // [AUTHOR] MATHIEU -

-

- // METADATA -

-

- // [LAST UPDATED] 08/10/2024 -

-

- // [AUTHOR] MATHIEU -

-

- // [LAST UPDATED] 08/10/2024 -

-

- // [AUTHOR] MATHIEU -

-
-
-
-
Index [141]
-
-
-
[01]
- -
-
-
[02]
- -
-
-
[02]
- -
-
-
[04]
- -
-
-
[05]
- -
-
-
[06]
- -
-
-
[07]
- -
-
-
[08]
- -
-
-
[09]
- -
-
-
[10]
- -
-
-
[11]
- -
-
-
[12]
- -
-
-
[13]
- -
-
-
[14]
- -
-
-
[15]
- -
-
-
[16]
- -
-
-
[17]
- -
-
-
[18]
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VARIABLES -
[02]
-
- let -
-

let

-

A variable in programming is a storage location identified by a name, which can hold data that may be modified during the execution of a program. Variables are used to store values so that these values can be used and manipulated throughout the program. They can hold different types of data, such as numbers, strings, objects, and more. Variables enable developers to write flexible and dynamic code by providing a way to reference and operate on data without hard-coding values directly into the program. - -

In JavaScript, the let keyword is used to declare a variable that is block-scoped, which means it is limited to the block, statement, or expression where it is declared. This contrasts with the older var keyword, which declares a variable globally or locally to an entire function regardless of block scope. The let keyword was introduced in ECMAScript 6 (ES6) to provide better control over variable scope and to avoid issues related to variable hoisting that are associated with var. - -

When you declare a variable using let, it is not hoisted to the top of its enclosing block. Instead, it is hoisted to the top of the block but not initialized, which means it cannot be accessed until the execution reaches the line of code where it is declared. This behavior is known as the "temporal dead zone" and helps prevent errors that can occur when variables are used before they are defined. - -

For example, in a block, trying to access a variable declared with let before its declaration line results in a ReferenceError. Once the declaration line is reached, the variable can be accessed and used. The let keyword also prevents the redeclaration of the same variable within the same scope, providing an additional layer of error checking. Attempting to redeclare a variable with let in the same scope results in a SyntaxError, which helps to catch mistakes and enforce cleaner code practices. - -

Overall, the let keyword in JavaScript provides a way to declare variables that are confined to their block scope, reducing the likelihood of errors related to variable hoisting and redeclaration, and promoting better coding practices by encouraging the use of variables only within their intended context.

-

Specifications

- 
-             
-  // Example 1: Redeclaration in the same block
-  let x = 10;
-  // let x = 20; // SyntaxError: Identifier 'x' has already been declared
-  x = 20; // Allowed: updating the value
-  console.log(x); // 20
-  
-  // Example 2: Redeclaration in nested blocks
-  let y = 30;
-  {
-    // let y = 40; // SyntaxError: Identifier 'y' has already been declared
-    let z = 50;
-    console.log(z); // 50
-  }
-  {
-    let y = 40; // Allowed: different block scope
-    console.log(y); // 40
-  }
-  console.log(y); // 30 (original y)
-  
-  // Example 3: Redeclaration in a function
-  function redeclareLet() {
-    let a = 60;
-    // let a = 70; // SyntaxError: Identifier 'a' has already been declared
-    a = 70; // Allowed: updating the value
-    console.log(a); // 70
-  }
-  redeclareLet();
-  
-  // Example 4: Redeclaration in an if block
-  let condition = true;
-  if (condition) {
-    let status = 'active';
-    // let status = 'inactive'; // SyntaxError: Identifier 'status' has already been declared
-    status = 'inactive'; // Allowed: updating the value
-    console.log(status); // 'inactive'
-  }
-  
-  // Example 5: Block scope
-  {
-    let x = 10;
-    console.log(x); // 10
-  }
-  console.log(typeof x); // undefined (x is not accessible here)
-  
-  // Example 6: Temporal Dead Zone
-  {
-    // console.log(y); // ReferenceError: Cannot access 'y' before initialization
-    let y = 20;
-    console.log(y); // 20
-  }
-  
-  // Example 7: let in a loop block
-  for (let i = 0; i < 3; i++) {
-    console.log(i); // 0, 1, 2
-  }
-  // console.log(i); // ReferenceError: i is not defined (i is not accessible here)
-  
-  // Example 8: Nested blocks
-  {
-    let outer = 'outer';
-    {
-      let inner = 'inner';
-      console.log(outer); // outer
-      console.log(inner); // inner
-    }
-    // console.log(inner); // ReferenceError: inner is not defined
-  }
-  
-  // Example 9: let in functions
-  function testLet() {
-    let z = 50;
-    console.log(z); // 50
-  }
-  // console.log(z); // ReferenceError: z is not defined
-  testLet();
-  
-  // Example 10: Updating let variables
-  let score = 10;
-  score += 5;
-  console.log(score); // 15
-
-
-
- const -
-

const

-

The `const` keyword in JavaScript is used to declare variables that are intended to be constant, meaning their values are not supposed to change after they are initialized. Similar to the `let` keyword, `const` creates block-scoped variables. This means that the variable declared with `const` is limited to the block, statement, or expression where it is defined, and cannot be accessed outside of that scope. - -

When you declare a variable with `const`, it must be initialized with a value at the time of declaration. This is because `const` variables are read-only after they are assigned a value. Trying to declare a `const` variable without initializing it will result in a syntax error. Once assigned, the variable cannot be reassigned a new value, which helps enforce immutability at the variable level. - -

It's important to note that while the `const` keyword prevents reassignment of the variable itself, it does not make the value immutable. For example, if the value assigned to a `const` variable is an object or an array, the contents of that object or array can still be modified. This means you can change the properties of an object or elements of an array, but you cannot reassign the variable to a different object or array. - -

Using `const` for variables that should remain unchanged helps improve code reliability and readability by signaling the intent that the variable's value should not be altered. It also reduces the risk of unintended side effects caused by variable reassignment. However, because `const` is block-scoped like `let`, it can only be accessed within the block it is declared in, and it cannot be redeclared within that same block. - -

In summary, the `const` keyword in JavaScript is used to declare variables with a constant value that should not be reassigned. It provides block scope similar to `let` and enforces immutability for the variable binding itself, though not necessarily for the value it holds if that value is an object or array.

-

Specifications

- 
-             
-  // Example 1: Redeclaration in the same block
-  const a = 10;
-  // const a = 20; // SyntaxError: Identifier 'a' has already been declared
-  // a = 20; // TypeError: Assignment to constant variable
-  console.log(a); // 10
-  
-  // Example 2: Redeclaration in nested blocks
-  const b = 30;
-  {
-    // const b = 40; // SyntaxError: Identifier 'b' has already been declared
-    const c = 50;
-    console.log(c); // 50
-  }
-  {
-    const b = 40; // Allowed: different block scope
-    console.log(b); // 40
-  }
-  console.log(b); // 30 (original b)
-  
-  // Example 3: Redeclaration in functions
-  function exampleFunction() {
-    const d = 60;
-    // const d = 70; // SyntaxError: Identifier 'd' has already been declared
-    console.log(d); // 60
-  }
-  exampleFunction();
-  
-  // Example 4: Redeclaration in if block
-  const condition = true;
-  if (condition) {
-    const status = 'active';
-    // const status = 'inactive'; // SyntaxError: Identifier 'status' has already been declared
-    console.log(status); // 'active'
-  }
-  
-  // Example 5: Initializing const without assignment
-  // const e; // SyntaxError: Missing initializer in const declaration
-  
-  // Example 6: Modifying properties of a const object
-  const obj = { key: 'value' };
-  obj.key = 'newValue'; // Allowed: modifying object properties
-  console.log(obj.key); // 'newValue'
-  
-  // Example 7: Modifying array elements of a const array
-  const arr = [1, 2, 3];
-  arr[0] = 10; // Allowed: modifying array elements
-  console.log(arr[0]); // 10
-  
-  // Example 8: Block scope with const
-  {
-    const f = 70;
-    console.log(f); // 70
-  }
-  // console.log(f); // ReferenceError: f is not defined
-  
-  // Example 9: const in loops
-  for (const g of [1, 2, 3]) {
-    console.log(g); // 1, 2, 3
-  }
-  // console.log(g); // ReferenceError: g is not defined
-  
-  // Example 10: const in a switch case
-  const h = 'A';
-  switch (h) {
-    case 'A':
-      const grade = 'Excellent';
-      console.log(grade); // 'Excellent'
-      break;
-    case 'B':
-      // const grade = 'Good'; // SyntaxError: Identifier 'grade' has already been declared
-      break;
-    default:
-      const grade = 'Unknown'; // Allowed: different block scope
-      console.log(grade); // 'Unknown'
-  }
-
-
-
Conditionals -
[09]
-
- if statement -
-

if statement

-

In JavaScript, an if statement is a fundamental control structure used to execute a block of code only if a specified condition is true. The syntax starts with the keyword if, followed by a condition enclosed in parentheses. This condition is an expression that the JavaScript engine evaluates to either true or false. If the condition evaluates to true, the code block enclosed in curly braces {} immediately following the if statement is executed. For instance, consider the example if (temperature > 30) { console.log("It's hot outside!"); }. In this case, if the value of the variable temperature is greater than 30, the message "It's hot outside!" will be logged to the console. However, if the condition evaluates to false, the code block within the curly braces is skipped and not executed. This allows developers to control the flow of their programs by specifying actions that should only occur when certain conditions are met, making the code more dynamic and responsive to different scenarios.

-

Specifications

- 
-             
-  let age = 18;
-  if (age >= 18) {
-    console.log("You are an adult.");
-  }
-  
-  let temperature = 25;
-  if (temperature < 0) {
-    console.log("It is freezing outside.");
-  }
-  
-  let score = 85;
-  if (score >= 80) {
-    console.log("You passed the exam.");
-  }
-  
-  let isMember = true;
-  if (isMember) {
-    console.log("Welcome, member!");
-  }
-  
-  let name = "Alice";
-  if (name === "Alice") {
-    console.log("Hello, Alice!");
-  }
-  
-  let balance = 1000;
-  if (balance >= 500) {
-    console.log("You have sufficient funds.");
-  }
-  
-  let light = "green";
-  if (light === "green") {
-    console.log("You can go.");
-  }
-  
-  let password = "securePassword123";
-  if (password.length >= 8) {
-    console.log("Password is long enough.");
-  }
-  
-  let itemsInCart = 3;
-  if (itemsInCart > 0) {
-    console.log("Your cart is not empty.");
-  }
-  
-  let hasAccess = false;
-  if (!hasAccess) {
-    console.log("Access denied.");
-  }
-
-
-
- else statement -
-

else statement

-

In JavaScript, the `else` statement is used to define a block of code that will be executed if the condition in the preceding `if` statement evaluates to false. It acts as a fallback or default action when the specified condition is not met. When an `if` statement evaluates its condition and finds it to be false, the code inside the `else` block runs instead. This ensures that one of the two blocks of code (either the `if` block or the `else` block) will always execute, making it useful for handling alternative outcomes. For instance, in the code snippet `if (condition) { /* code if condition is true */ } else { /* code if condition is false */ }`, if `condition` evaluates to false, the program will skip the first block and execute the code within the `else` block.

-

Specifications

- 
-             
-  // Example 1: Checking if a number is positive
-  let number = 5;
-  if (number > 0) {
-      console.log("The number is positive");
-  } else {
-      console.log("The number is not positive");
-  }
-  
-  // Example 2: Checking if a user is logged in
-  let isLoggedIn = false;
-  if (isLoggedIn) {
-      console.log("Welcome, user!");
-  } else {
-      console.log("Please log in");
-  }
-  
-  // Example 3: Checking if an array is empty
-  let array = [];
-  if (array.length > 0) {
-      console.log("The array is not empty");
-  } else {
-      console.log("The array is empty");
-  }
-  
-  // Example 4: Checking if a string is not empty
-  let str = "";
-  if (str !== "") {
-      console.log("The string is not empty");
-  } else {
-      console.log("The string is empty");
-  }
-  
-  // Example 5: Checking if a number is even
-  let num = 7;
-  if (num % 2 === 0) {
-      console.log("The number is even");
-  } else {
-      console.log("The number is odd");
-  }
-  
-  // Example 6: Checking if a temperature is above freezing
-  let temperature = -5;
-  if (temperature > 0) {
-      console.log("The temperature is above freezing");
-  } else {
-      console.log("The temperature is below freezing");
-  }
-  
-  // Example 7: Checking if a year is a leap year
-  let year = 2023;
-  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
-      console.log("The year is a leap year");
-  } else {
-      console.log("The year is not a leap year");
-  }
-  
-  // Example 8: Checking if a password is valid (simplified)
-  let password = "pass123";
-  if (password.length >= 8) {
-      console.log("The password is valid");
-  } else {
-      console.log("The password is invalid");
-  }
-  
-  // Example 9: Checking if a light is on
-  let lightOn = true;
-  if (lightOn) {
-      console.log("The light is on");
-  } else {
-      console.log("The light is off");
-  }
-  
-  // Example 10: Checking if a value is greater than a threshold
-  let value = 15;
-  let threshold = 10;
-  if (value > threshold) {
-      console.log("The value is above the threshold");
-  } else {
-      console.log("The value is below the threshold");
-  }
-
-
-
- else if statement -
-

else if statement

-

In JavaScript, the `else if` statement is used to specify a new condition to test if the previous `if` condition evaluates to false. This allows for multiple conditions to be checked sequentially, enabling more complex decision-making within the code. When an `if` statement's condition is false, the program moves to the `else if` statement to check its condition. If this condition is true, the corresponding block of code executes. If it is also false, the program can continue to additional `else if` statements, if any are present. This chaining of conditions with `else if` statements enables the program to handle various scenarios in a structured manner. If all `if` and `else if` conditions are false, an optional `else` statement can be used as a final fallback. For instance, in the code snippet `if (condition1) { /* code if condition1 is true */ } else if (condition2) { /* code if condition2 is true */ } else { /* code if none of the conditions are true */ }`, the program evaluates each condition in sequence until one is true, executing the corresponding block of code and skipping the rest.

-

Specifications

- 
-             
-  // Example 1: Checking user role
-  let userRole = "editor";
-  if (userRole === "admin") {
-      console.log("Access level: Full");
-  } else if (userRole === "editor") {
-      console.log("Access level: Edit");
-  } else if (userRole === "viewer") {
-      console.log("Access level: View");
-  } else {
-      console.log("Access level: None");
-  }
-  
-  // Example 2: Determining shipping cost
-  let orderValue = 75;
-  if (orderValue >= 100) {
-      console.log("Shipping cost: Free");
-  } else if (orderValue >= 50) {
-      console.log("Shipping cost: $5");
-  } else if (orderValue >= 20) {
-      console.log("Shipping cost: $10");
-  } else {
-      console.log("Shipping cost: $15");
-  }
-  
-  // Example 3: Movie rating classification
-  let movieRating = "R";
-  if (movieRating === "G") {
-      console.log("Suitable for all ages");
-  } else if (movieRating === "PG") {
-      console.log("Parental guidance suggested");
-  } else if (movieRating === "PG-13") {
-      console.log("Parents strongly cautioned");
-  } else if (movieRating === "R") {
-      console.log("Restricted to 17 and older");
-  } else {
-      console.log("Rating not recognized");
-  }
-  
-  // Example 4: Network connection status
-  let connectionStatus = "connected";
-  if (connectionStatus === "connected") {
-      console.log("Network status: Connected");
-  } else if (connectionStatus === "connecting") {
-      console.log("Network status: Connecting");
-  } else if (connectionStatus === "disconnected") {
-      console.log("Network status: Disconnected");
-  } else {
-      console.log("Network status: Unknown");
-  }
-  
-  // Example 5: Battery level indicator
-  let batteryLevel = 45;
-  if (batteryLevel > 80) {
-      console.log("Battery status: High");
-  } else if (batteryLevel > 40) {
-      console.log("Battery status: Medium");
-  } else if (batteryLevel > 20) {
-      console.log("Battery status: Low");
-  } else {
-      console.log("Battery status: Critical");
-  }
-  
-  // Example 6: Air quality index (AQI) categorization
-  let aqi = 120;
-  if (aqi <= 50) {
-      console.log("Air quality: Good");
-  } else if (aqi <= 100) {
-      console.log("Air quality: Moderate");
-  } else if (aqi <= 150) {
-      console.log("Air quality: Unhealthy for sensitive groups");
-  } else if (aqi <= 200) {
-      console.log("Air quality: Unhealthy");
-  } else if (aqi <= 300) {
-      console.log("Air quality: Very Unhealthy");
-  } else {
-      console.log("Air quality: Hazardous");
-  }
-
-
-
- comparison operators -
-

comparison operators

-

In JavaScript, comparison operators are used in conditionals to compare two values and determine the relationship between them, returning a boolean value (true or false) as the result. The equality operator (`==`) checks if two values are equal, while the strict equality operator (`===`) checks for both value and type equality. The inequality operator (`!=`) checks if two values are not equal, and the strict inequality operator (`!==`) checks for both value and type inequality. The greater than (`>`), greater than or equal to (`>=`), less than (`<`), and less than or equal to (`<=`) operators are used to compare the relative magnitude of two values. These operators are essential in conditional statements like `if`, `else if`, and `while`, allowing the code to execute different blocks based on whether specific conditions are met. For example, `if (a > b) { /* code */ }` will execute the contained code if `a` is greater than `b`. Comparison operators provide the fundamental logic needed for decision-making processes in programming.

-

Specifications

- 
-             
-  // Equality and Inequality Operators
-  
-  // Example 1: Check if two strings are equal
-  let string1 = "hello";
-  let string2 = "hello";
-  if (string1 == string2) {
-      console.log("The strings are equal"); // Logs: "The strings are equal"
-  } else {
-      console.log("The strings are not equal");
-  }
-  
-  // Example 2: Check if two numbers are not equal
-  let a = 10;
-  let b = 20;
-  if (a != b) {
-      console.log("a is not equal to b"); // Logs: "a is not equal to b"
-  } else {
-      console.log("a is equal to b");
-  }
-  
-  // Example 3: Check if a value is strictly equal to another
-  let value1 = 100;
-  let value2 = "100";
-  if (value1 === value2) {
-      console.log("value1 is strictly equal to value2");
-  } else {
-      console.log("value1 is not strictly equal to value2"); // Logs: "value1 is not strictly equal to value2"
-  }
-  
-  // Example 4: Check if a value is not strictly equal to another
-  let x = 15;
-  let y = "15";
-  if (x !== y) {
-      console.log("x is not strictly equal to y"); // Logs: "x is not strictly equal to y"
-  } else {
-      console.log("x is strictly equal to y");
-  }
-  
-  // Example 5: Check if a string is not equal to another
-  let str1 = "apple";
-  let str2 = "orange";
-  if (str1 != str2) {
-      console.log("The strings are not equal"); // Logs: "The strings are not equal"
-  } else {
-      console.log("The strings are equal");
-  }
-  
-  // Example 6: Check if a boolean value is true
-  let isTrue = true;
-  if (isTrue === true) {
-      console.log("The value is true"); // Logs: "The value is true"
-  } else {
-      console.log("The value is false");
-  }
-  
-  // Example 7: Check if a boolean value is false
-  let isFalse = false;
-  if (isFalse === false) {
-      console.log("The value is false"); // Logs: "The value is false"
-  } else {
-      console.log("The value is true");
-  }
-  
-  // Example 8: Check if a number is equal to a specific value
-  let num = 42;
-  if (num === 42) {
-      console.log("The number is 42"); // Logs: "The number is 42"
-  } else {
-      console.log("The number is not 42");
-  }
-  
-  // Greater Than and Less Than Operators
-  
-  // Example 9: Check if a number is greater than another number
-  let num1 = 5;
-  let num2 = 3;
-  if (num1 > num2) {
-      console.log("num1 is greater than num2"); // Logs: "num1 is greater than num2"
-  } else {
-      console.log("num1 is not greater than num2");
-  }
-  
-  // Example 10: Check if a number is less than another number
-  let num3 = 5;
-  let num4 = 10;
-  if (num3 < num4) {
-      console.log("num3 is less than num4"); // Logs: "num3 is less than num4"
-  } else {
-      console.log("num3 is not less than num4");
-  }
-  
-  // Example 11: Check if a number is greater than or equal to another number
-  let num5 = 10;
-  let num6 = 10;
-  if (num5 >= num6) {
-      console.log("num5 is greater than or equal to num6"); // Logs: "num5 is greater than or equal to num6"
-  } else {
-      console.log("num5 is less than num6");
-  }
-  
-  // Example 12: Check if a number is less than or equal to another number
-  let num7 = 5;
-  let num8 = 8;
-  if (num7 <= num8) {
-      console.log("num7 is less than or equal to num8"); // Logs: "num7 is less than or equal to num8"
-  } else {
-      console.log("num7 is greater than num8");
-  }
-  
-  // Example 13: Check if a value is greater than zero
-  let value = -1;
-  if (value > 0) {
-      console.log("The value is greater than zero");
-  } else {
-      console.log("The value is not greater than zero"); // Logs: "The value is not greater than zero"
-  }
-  
-  // Example 14: Check if a value is less than zero
-  let value3 = -5;
-  if (value3 < 0) {
-      console.log("The value is less than zero"); // Logs: "The value is less than zero"
-  } else {
-      console.log("The value is not less than zero");
-  }
-  
-  // Example 15: Check if a temperature is above freezing
-  let temperature = -5;
-  if (temperature > 0) {
-      console.log("The temperature is above freezing");
-  } else {
-      console.log("The temperature is below freezing"); // Logs: "The temperature is below freezing"
-  }
-  
-  // Example 16: Check if a year is in the future
-  let currentYear = 2024;
-  let futureYear = 2030;
-  if (futureYear > currentYear) {
-      console.log("The year is in the future"); // Logs: "The year is in the future"
-  } else {
-      console.log("The year is not in the future");
-  }
-  
-  // Example 17: Check if a person's age is over 18
-  let personAge = 20;
-  if (personAge > 18) {
-      console.log("The person is over 18"); // Logs: "The person is over 18"
-  } else {
-      console.log("The person is not over 18");
-  }
-  
-  // Example 18: Check if a price is within a budget
-  let price = 50;
-  let budget = 100;
-  if (price <= budget) {
-      console.log("The price is within the budget"); // Logs: "The price is within the budget"
-  } else {
-      console.log("The price is not within the budget");
-  }
-  
-  // Example 19: Check if a value is less than a threshold
-  let threshold = 10;
-  let testValue = 8;
-  if (testValue < threshold) {
-      console.log("The value is less than the threshold"); // Logs: "The value is less than the threshold"
-  } else {
-      console.log("The value is not less than the threshold");
-  }
-  
-  // Example 20: Check if a password length is sufficient
-  let password = "12345";
-  if (password.length >= 8) {
-      console.log("The password length is sufficient");
-  } else {
-      console.log("The password length is insufficient"); // Logs: "The password length is insufficient"
-  }
-
-
-
- logical operators -
-

logical operators

-

In JavaScript, logical operators are used in conditionals to combine or invert Boolean values, allowing for more complex decision-making. The three main logical operators are `&&` (logical AND), `||` (logical OR), and `!` (logical NOT). The `&&` operator evaluates to true only if both operands are true, making it useful for checking multiple conditions that must all be satisfied. The `||` operator evaluates to true if at least one of the operands is true, allowing for flexibility when only one of several conditions needs to be met. The `!` operator inverts the truthiness of its operand, turning true to false and vice versa, which is helpful for checking the opposite condition. These operators enable more nuanced control flow in programs, such as executing a block of code only if multiple criteria are met, or if at least one of several conditions is true, or even when a specific condition is not true.

-

Specifications

- 
-             
-  // Logical AND Operator
-  
-  // Example 1: Check if both conditions are true
-  let temperature = 25;
-  let humidity = 50;
-  if (temperature > 20 && humidity < 60) {
-      console.log("The weather is pleasant"); // Logs: "The weather is pleasant"
-  } else {
-      console.log("The weather is not pleasant");
-  }
-  
-  // Example 2: Check if a person is eligible for a senior discount
-  let personAge = 65;
-  let isMember = true;
-  if (personAge >= 65 && isMember) {
-      console.log("Eligible for senior discount"); // Logs: "Eligible for senior discount"
-  } else {
-      console.log("Not eligible for senior discount");
-  }
-  
-  // Example 3: Check if a number is within a range
-  let age = 25;
-  if (age >= 18 && age <= 30) {
-      console.log("The age is within the range"); // Logs: "The age is within the range"
-  } else {
-      console.log("The age is outside the range");
-  }
-  
-  // Example 4: Check if a string has a specific length and starts with a specific letter
-  let name = "Alice";
-  if (name.length > 3 && name.charAt(0) === "A") {
-      console.log("The name is valid"); // Logs: "The name is valid"
-  } else {
-      console.log("The name is not valid");
-  }
-  
-  // Logical OR Operator
-  
-  // Example 5: Check if a number is outside a range
-  let score = 45;
-  if (score < 50 || score > 90) {
-      console.log("The score is outside the range"); // Logs: "The score is outside the range"
-  } else {
-      console.log("The score is within the range");
-  }
-  
-  // Example 6: Check if a user is an admin or a moderator
-  let role = "admin";
-  if (role === "admin" || role === "moderator") {
-      console.log("User has elevated privileges"); // Logs: "User has elevated privileges"
-  } else {
-      console.log("User does not have elevated privileges");
-  }
-  
-  // Example 7: Check if it's a weekend or a holiday
-  let day = "Saturday";
-  let isHoliday = false;
-  if (day === "Saturday" || day === "Sunday" || isHoliday) {
-      console.log("It's a day off"); // Logs: "It's a day off"
-  } else {
-      console.log("It's a working day");
-  }
-  
-  // Example 8: Check if an item is available in stock or on backorder
-  let inStock = false;
-  let onBackorder = true;
-  if (inStock || onBackorder) {
-      console.log("The item can be ordered"); // Logs: "The item can be ordered"
-  } else {
-      console.log("The item is not available");
-  }
-  
-  // Logical NOT Operator
-  
-  // Example 9: Check if a user is not logged in
-  let isLoggedIn = false;
-  if (!isLoggedIn) {
-      console.log("User is not logged in"); // Logs: "User is not logged in"
-  } else {
-      console.log("User is logged in");
-  }
-  
-  // Example 10: Check if a value is not null or undefined
-  let data = null;
-  if (data !== null && data !== undefined) {
-      console.log("Data is available");
-  } else {
-      console.log("Data is not available"); // Logs: "Data is not available"
-  }
-  
-  // Example 11: Check if an array is not empty
-  let array = [1, 2, 3];
-  if (array.length !== 0) {
-      console.log("The array is not empty"); // Logs: "The array is not empty"
-  } else {
-      console.log("The array is empty");
-  }
-  
-  // Example 12: Check if a form field is not blank
-  let formField = "username";
-  if (formField !== "") {
-      console.log("The form field is filled out"); // Logs: "The form field is filled out"
-  } else {
-      console.log("The form field is blank");
-  }
-
-
-
- ternary operator -
-

ternary operator

-

In JavaScript, the ternary operator is a concise way to perform conditional evaluations. It is the only operator that takes three operands: a condition, an expression to execute if the condition is true, and an expression to execute if the condition is false. The syntax is `condition ? expressionIfTrue : expressionIfFalse`. This operator is particularly useful for assigning values based on a condition or for inline conditional expressions, making the code more succinct. For example, `let result = (age >= 18) ? "Adult" : "Minor";` assigns the string "Adult" to the variable `result` if the `age` is 18 or older, otherwise it assigns "Minor". The ternary operator improves readability for simple conditional assignments, but for more complex logic, traditional `if...else` statements are often more appropriate.

-

Specifications

- 
-             
-  // Example 1: Check if a number is positive, negative, or zero
-  let number = 5;
-  let numberCheck = (number > 0) ? "Positive" : (number < 0) ? "Negative" : "Zero";
-  console.log(numberCheck); // Logs: "Positive"
-  
-  // Example 2: Determine if a user is an adult or a minor based on age
-  let age = 17;
-  let ageGroup = (age >= 18) ? "Adult" : "Minor";
-  console.log(ageGroup); // Logs: "Minor"
-  
-  // Example 3: Check if a string is empty or not
-  let str = "";
-  let stringCheck = (str !== "") ? "Not empty" : "Empty";
-  console.log(stringCheck); // Logs: "Empty"
-  
-  // Example 4: Assign a discount based on membership status
-  let isMember = true;
-  let discount = (isMember) ? "10% discount" : "No discount";
-  console.log(discount); // Logs: "10% discount"
-  
-  // Example 5: Determine the maximum of two numbers
-  let a = 10;
-  let b = 20;
-  let max = (a > b) ? a : b;
-  console.log(max); // Logs: 20
-
-
-
- switch statement -
-

switch statement

-

In JavaScript, the switch statement is used to perform different actions based on different conditions, serving as an alternative to multiple `if...else if` statements. It evaluates an expression and matches its value against a series of case labels, executing the corresponding block of code when a match is found. The switch statement starts with the keyword `switch`, followed by the expression in parentheses and a block of cases enclosed in curly braces. Each case block starts with the keyword `case`, followed by a value and a colon, and contains the code to execute if the expression matches that value. The `break` statement is typically used at the end of each case to exit the switch block, preventing the execution from falling through to the subsequent cases. If none of the cases match, an optional `default` case can be defined to execute a block of code as a fallback. This structure allows for cleaner and more readable code when handling multiple possible values for a single variable, compared to using numerous `if...else if` statements.

-

Specifications

- 
-             
-  // Example 1: Determine the day of the week
-  let day = 3;
-  let dayName;
-  switch (day) {
-      case 0:
-          dayName = "Sunday";
-          break;
-      case 1:
-          dayName = "Monday";
-          break;
-      case 2:
-          dayName = "Tuesday";
-          break;
-      case 3:
-          dayName = "Wednesday";
-          break;
-      case 4:
-          dayName = "Thursday";
-          break;
-      case 5:
-          dayName = "Friday";
-          break;
-      case 6:
-          dayName = "Saturday";
-          break;
-      default:
-          dayName = "Invalid day";
-  }
-  console.log(dayName); // Logs: "Wednesday"
-  
-  // Example 2: Evaluate a grade and provide feedback
-  let grade = 'B';
-  let feedback;
-  switch (grade) {
-      case 'A':
-          feedback = "Excellent";
-          break;
-      case 'B':
-          feedback = "Good";
-          break;
-      case 'C':
-          feedback = "Fair";
-          break;
-      case 'D':
-          feedback = "Poor";
-          break;
-      case 'F':
-          feedback = "Fail";
-          break;
-      default:
-          feedback = "Invalid grade";
-  }
-  console.log(feedback); // Logs: "Good"
-  
-  // Example 3: Determine the browser type based on user agent
-  let browser = 'Chrome';
-  let browserType;
-  switch (browser) {
-      case 'Edge':
-          browserType = "Microsoft Edge";
-          break;
-      case 'Chrome':
-          browserType = "Google Chrome";
-          break;
-      case 'Firefox':
-          browserType = "Mozilla Firefox";
-          break;
-      case 'Safari':
-          browserType = "Apple Safari";
-          break;
-      default:
-          browserType = "Unknown browser";
-  }
-  console.log(browserType); // Logs: "Google Chrome"
-  
-  // Example 4: Identify the traffic light color action
-  let trafficLight = 'Yellow';
-  let action;
-  switch (trafficLight) {
-      case 'Red':
-          action = "Stop";
-          break;
-      case 'Yellow':
-          action = "Caution";
-          break;
-      case 'Green':
-          action = "Go";
-          break;
-      default:
-          action = "Invalid color";
-  }
-  console.log(action); // Logs: "Caution"
-  
-  // Example 5: Determine the season based on the month
-  let month = 8;
-  let season;
-  switch (month) {
-      case 12:
-      case 1:
-      case 2:
-          season = "Winter";
-          break;
-      case 3:
-      case 4:
-      case 5:
-          season = "Spring";
-          break;
-      case 6:
-      case 7:
-      case 8:
-          season = "Summer";
-          break;
-      case 9:
-      case 10:
-      case 11:
-          season = "Fall";
-          break;
-      default:
-          season = "Invalid month";
-  }
-  console.log(season); // Logs: "Summer"
-
-
-
- truthy and falsy values -
-

truthy and falsy values

-

In JavaScript, truthy and falsy values determine how expressions are evaluated in conditional statements. A value is considered truthy if it evaluates to true in a boolean context, and falsy if it evaluates to false. JavaScript treats the following values as falsy: `false`, `0`, `-0`, `0n` (BigInt zero), `""` (empty string), `null`, `undefined`, and `NaN` (Not-a-Number). All other values, including non-empty strings, non-zero numbers, objects, arrays, and functions, are considered truthy. Understanding truthy and falsy values is essential for writing concise and effective conditionals, as it allows developers to leverage implicit type coercion. For example, the expression `if (value)` will execute the block of code if `value` is truthy, and skip it if `value` is falsy. This implicit evaluation can simplify checks for empty strings, null values, or zeroes, making the code more readable and succinct.

-

Specifications

- 
-             
-  // Example 1: Check if a variable is truthy
-  let value1 = "hello";
-  if (value1) {
-      console.log("The value is truthy"); // Logs: "The value is truthy"
-  } else {
-      console.log("The value is falsy");
-  }
-  
-  // Example 2: Check if a variable is falsy
-  let value2 = 0;
-  if (value2) {
-      console.log("The value is truthy");
-  } else {
-      console.log("The value is falsy"); // Logs: "The value is falsy"
-  }
-  
-  // Example 3: Check if a variable is undefined
-  let value3;
-  if (value3) {
-      console.log("The value is truthy");
-  } else {
-      console.log("The value is falsy"); // Logs: "The value is falsy"
-  }
-  
-  // Example 4: Check if an empty string is falsy
-  let value4 = "";
-  if (value4) {
-      console.log("The value is truthy");
-  } else {
-      console.log("The value is falsy"); // Logs: "The value is falsy"
-  }
-  
-  // Example 5: Check if a non-zero number is truthy
-  let value5 = 42;
-  if (value5) {
-      console.log("The value is truthy"); // Logs: "The value is truthy"
-  } else {
-      console.log("The value is falsy");
-  }
-  
-  // Example 6: Check if null is falsy
-  let value6 = null;
-  if (value6) {
-      console.log("The value is truthy");
-  } else {
-      console.log("The value is falsy"); // Logs: "The value is falsy"
-  }
-
-
-
- best practices -
-

best practices

-

Best practices for conditionals in JavaScript focus on writing clear, readable, and efficient code. First, always use strict equality (`===`) and strict inequality (`!==`) to avoid unexpected type coercion, ensuring that both the value and type are compared. Second, keep conditionals simple and avoid deeply nested structures; if a function becomes too complex, consider breaking it into smaller, more manageable pieces. Third, leverage short-circuit evaluation to provide default values or to avoid unnecessary computations. For example, use `||` to set default values and `&&` to execute code only if certain conditions are met. Fourth, use descriptive variable names and comments to make the purpose of the condition clear. Additionally, handle edge cases explicitly and use the `default` case in `switch` statements to cover unexpected values. Finally, when multiple conditions need to be checked, consider using `switch` statements for better readability over multiple `if...else if` statements. Following these practices will result in more maintainable and less error-prone code.

-
-
Arithmetic Operators -
[08]
-
- addition (+) -
-

addition (+)

-

In JavaScript, the + operator is used for two primary purposes: numeric addition and string concatenation. When used with numbers, + performs arithmetic addition to calculate their sum. For example, 5 + 3 results in 8 and 10 + 15 results in 25, while 7 + -2 adds a negative number to get 5. When used with strings, the + operator concatenates them into a single string. For instance, "Hello, " + "world!" produces "Hello, world!", and concatenating "Alice" and "Johnson" with a space results in "Alice Johnson". If you add a number to a string, the number is converted to a string and concatenated. For example, 10 + " apples" yields "10 apples", and "The result is " + (2 + 3) first evaluates the addition inside the parentheses to get 5, then concatenates it with the string to produce "The result is 5". A special case of addition is adding null to a number, where null is treated as 0, so 5 + null results in 5. Similarly, adding undefined to a string results in "undefined" as a string, so "Value is " + undefined produces "Value is undefined".

- -

Specifications

- 
-             
-  // Numeric Addition
-  let sum1 = 5 + 3;       // 8
-  let sum2 = 10 + 15;     // 25
-  let sum3 = 7 + -2;      // 5 (adding a negative number)
-  
-  // String Concatenation
-  let greeting = "Hello, " + "world!";  // "Hello, world!"
-  let firstName = "Alice";
-  let lastName = "Johnson";
-  let fullName = firstName + " " + lastName;  // "Alice Johnson"
-  
-  // Number and String Concatenation
-  let number = 10;
-  let text = "The number is " + number;  // "The number is 10"
-  
-  // Adding a String and a Number (Implicit Conversion)
-  let addition = 5 + " apples";  // "5 apples" (number converted to string)
-  let result = "The result is " + (2 + 3);  // "The result is 5"
-  
-  // Adding null to a number
-  let resultNull = 5 + null;  // 5 (null is converted to 0)
-  
-  // Adding undefined to a string
-  let resultUndefined = "Value is " + undefined;  // "Value is undefined"
-  
-
-
-
- subtraction (-) -
-

subtraction (-)

-

In JavaScript, the - operator is used primarily for numeric subtraction. It subtracts the right operand from the left operand to yield a numerical result. If used with two numbers, such as 8 - 3, it calculates the difference, which is 5. Subtraction can also be applied to negative numbers, for instance, 10 - (-4) results in 14 as it effectively adds the absolute value of the negative number. When - is used with non-numeric types, JavaScript first tries to convert the operands to numbers. If one operand is a string and the other is a number, JavaScript attempts to convert the string to a number; for example, "10" - 5 results in 5 because "10" is converted to the number 10. If the string cannot be converted to a number, such as in "hello" - 5, the result is NaN (Not-a-Number). Additionally, subtracting null from a number results in the number itself, as null is converted to 0; for instance, 15 - null equals 15. However, subtracting undefined from a number results in NaN, as undefined cannot be converted to a number, so 10 - undefined yields NaN.

- -

Specifications

- 
-             
-  // Numeric Subtraction
-  let difference1 = 8 - 3;         // 5
-  let difference2 = 10 - 4;        // 6
-  let difference3 = 10 - (-4);     // 14 (subtracting a negative number)
-  
-  // Subtracting a String from a Number (Implicit Conversion)
-  let result1 = "10" - 5;         // 5 (string "10" is converted to number 10)
-  let result2 = "20" - "5";       // 15 (both strings are converted to numbers)
-  
-  // Subtracting Non-Numeric Strings
-  let result3 = "hello" - 5;      // NaN (non-numeric string cannot be converted to a number)
-  
-  // Subtracting null from a Number
-  let result4 = 15 - null;       // 15 (null is converted to 0)
-  
-  // Subtracting undefined from a Number
-  let result5 = 10 - undefined;  // NaN (undefined cannot be converted to a number)
-  
-
-
-
- multiplication (*) -
-

multiplication (*)

-

In JavaScript, the * operator is used for numeric multiplication. It multiplies the two operands and returns the product. For example, using 5 * 3 results in 15, as it multiplies 5 by 3. The * operator also supports multiplication with floating-point numbers, where 2.5 * 4 results in 10.0. JavaScript handles cases where one or both operands are non-numeric values by attempting to convert them into numbers before performing the multiplication. If one operand is a string that represents a number, like "7", multiplying it by a number results in 7, as the string "7" is converted to the number 7. However, if the string cannot be converted to a number, such as "hello" * 3, the result is NaN (Not-a-Number). Additionally, multiplying null by a number treats null as 0, so null * 4 yields 0. When undefined is involved in multiplication with a number, the result is also NaN, as undefined cannot be converted to a number, so 5 * undefined results in NaN.

-

Specifications

- 
-             
-  // Numeric Multiplication
-  let product1 = 5 * 3;         // 15
-  let product2 = 2.5 * 4;       // 10.0
-  let product3 = -7 * 6;        // -42 (multiplying a negative number)
-  
-  // Multiplying a String that Represents a Number
-  let result1 = "7" * 2;        // 14 (string "7" is converted to number 7)
-  let result2 = "5.5" * 2;      // 11.0 (string "5.5" is converted to number 5.5)
-  let result3 = "10" * 3;       // 30 (string "10" is converted to number 10)
-  
-  // Multiplying Non-Numeric Strings
-  let result4 = "hello" * 3;    // NaN (non-numeric string cannot be converted to a number)
-  
-  // Multiplying null by a Number
-  let result5 = null * 4;      // 0 (null is converted to 0)
-  
-  // Multiplying undefined by a Number
-  let result6 = 5 * undefined; // NaN (undefined cannot be converted to a number)
-  
-
-
-
- division (/) -
-

division (/)

-

In JavaScript, the / operator is used for numeric division. It divides the left operand by the right operand and returns the quotient. For example, 10 / 2 results in 5, as it divides 10 by 2. The / operator supports division with both integers and floating-point numbers, such as 7.5 / 2 which results in 3.75. When one or both of the operands are non-numeric types, JavaScript attempts to convert them to numbers before performing the division. For instance, if one operand is a string that represents a number, like "8", dividing it by a number yields 4, since the string "8" is converted to the number 8. However, if the string cannot be converted to a number, such as "hello" / 2, the result is NaN (Not-a-Number). Additionally, dividing a number by null treats null as 0, so dividing by null results in Infinity or -Infinity depending on the sign of the dividend. For example, 10 / null yields Infinity, while -10 / null results in -Infinity. When undefined is used in division with a number, the result is NaN, as undefined cannot be converted to a number, so 5 / undefined results in NaN.

-

Specifications

- 
-             
-  // Numeric Division
-  let quotient1 = 10 / 2;         // 5
-  let quotient2 = 7.5 / 2;       // 3.75
-  let quotient3 = -10 / 2;       // -5 (dividing a negative number)
-  
-  // Dividing a String that Represents a Number
-  let result1 = "8" / 2;        // 4 (string "8" is converted to number 8)
-  let result2 = "5.5" / 2;      // 2.75 (string "5.5" is converted to number 5.5)
-  let result3 = "12" / 4;       // 3 (string "12" is converted to number 12)
-  
-  // Dividing Non-Numeric Strings
-  let result4 = "hello" / 2;    // NaN (non-numeric string cannot be converted to a number)
-  
-  // Dividing by null
-  let result5 = 10 / null;     // Infinity (null is converted to 0)
-  let result6 = -10 / null;    // -Infinity (null is converted to 0)
-  
-  // Dividing by undefined
-  let result7 = 5 / undefined; // NaN (undefined cannot be converted to a number)
-  
-  // Special Cases
-  let zeroDiv = 5 / 0;      // Infinity (dividing by zero yields Infinity)
-  let negativeZeroDiv = -5 / 0;  // -Infinity (dividing by zero yields -Infinity)
-  
-
-
-
- remainder (%) -
-

remainder (%)

-

In JavaScript, the % operator is used to calculate the remainder of the division between two numbers. It performs a division operation and returns the remainder after the division. For example, 10 % 3 results in 1, as 10 divided by 3 is 3 with a remainder of 1. The % operator works with both positive and negative numbers, where -10 % 3 results in -1, as it computes the remainder considering the sign of the dividend. When used with non-numeric values, JavaScript attempts to convert the operands to numbers before calculating the remainder. For instance, if one operand is a string that represents a number, like "9", the operation "9" % 4 yields 1, as "9" is converted to 9 and then the remainder of 9 divided by 4 is 1. If the string cannot be converted to a number, such as "hello" % 2, the result is NaN (Not-a-Number). Additionally, when null is used as an operand, null is treated as 0, so 10 % null yields NaN because division by 0 is undefined. When undefined is involved, the result of the operation is also NaN, as undefined cannot be converted to a number, so 5 % undefined results in NaN.

-

Specifications

- 
-             
-  // Numeric Remainder
-  let remainder1 = 10 % 3;        // 1 (10 divided by 3 has a remainder of 1)
-  let remainder2 = 20 % 4;        // 0 (20 divided by 4 has no remainder)
-  let remainder3 = -10 % 3;       // -1 (negative dividend with positive divisor)
-  
-  // Remainder with a String that Represents a Number
-  let result1 = "9" % 4;         // 1 (string "9" is converted to number 9)
-  let result2 = "15" % 6;        // 3 (string "15" is converted to number 15)
-  let result3 = "8" % 2;         // 0 (string "8" is converted to number 8)
-  
-  // Remainder with Non-Numeric Strings
-  let result4 = "hello" % 2;     // NaN (non-numeric string cannot be converted to a number)
-  
-  // Remainder with null
-  let result5 = 10 % null;      // NaN (null is converted to 0, division by 0 is undefined)
-  
-  // Remainder with undefined
-  let result6 = 5 % undefined;  // NaN (undefined cannot be converted to a number)
-  
-  // Special Cases
-  let zeroDiv = 0 % 5;          // 0 (0 divided by any number has a remainder of 0)
-  let negZeroDiv = -5 % 2;      // -1 (negative dividend with positive divisor)
-  
-
-
-
- exponentiation (**) -
-

exponentiation (**)

-

In JavaScript, the / operator is used for numeric division. It divides the left operand by the right operand and returns the quotient. For example, 10 / 2 results in 5, as it divides 10 by 2. The / operator supports division with both integers and floating-point numbers, such as 7.5 / 2 which results in 3.75. When one or both of the operands are non-numeric types, JavaScript attempts to convert them to numbers before performing the division. For instance, if one operand is a string that represents a number, like "8", dividing it by a number yields 4, since the string "8" is converted to the number 8. However, if the string cannot be converted to a number, such as "hello" / 2, the result is NaN (Not-a-Number). Additionally, dividing a number by null treats null as 0, so dividing by null results in Infinity or -Infinity depending on the sign of the dividend. For example, 10 / null yields Infinity, while -10 / null results in -Infinity. When undefined is used in division with a number, the result is NaN, as undefined cannot be converted to a number, so 5 / undefined results in NaN.

-

Specifications

- 
-             
-  // Numeric Exponentiation
-  let power1 = 2 ** 3;          // 8 (2 raised to the power of 3 is 8)
-  let power2 = 4 ** -2;         // 0.0625 (4 raised to the power of -2 is 1/16)
-  let power3 = 2.5 ** 2;       // 6.25 (2.5 raised to the power of 2 is 6.25)
-  
-  // Exponentiation with a String that Represents a Number
-  let result1 = "3" ** 2;      // 9 (string "3" is converted to number 3)
-  let result2 = "5.5" ** 2;    // 30.25 (string "5.5" is converted to number 5.5)
-  let result3 = "7" ** 0;      // 1 (any number to the power of 0 is 1)
-  
-  // Exponentiation with Non-Numeric Strings
-  let result4 = "hello" ** 2; // NaN (non-numeric string cannot be converted to a number)
-  
-  // Exponentiation with null
-  let result5 = null ** 2;    // 0 (null is treated as 0 for exponentiation)
-  
-  // Exponentiation with undefined
-  let result6 = 5 ** undefined; // NaN (undefined cannot be converted to a number)
-  
-  // Special Cases
-  let zeroBase = 0 ** 3;          // 0 (0 raised to any power other than 0 yields 0)
-  let negativeExponent = 2 ** -3; // 0.125 (2 raised to the power of -3 is 1/8)
-  
-
-
-
- increment (++) -
-

increment (++)

-

In JavaScript, the ++ operator is used to increment a number by one. This operator can be applied in two ways: as a prefix (before the operand) or as a postfix (after the operand). When used as a prefix, such as ++x, the value of x is incremented before it is used in an expression. Conversely, when used as a postfix, such as x++, the value of x is incremented after its current value has been used in the expression. The ++ operator only affects numbers; when applied to non-numeric values, JavaScript attempts to convert them to numbers. For example, "5"++ converts "5" to 5 and increments it to 6. If the string cannot be converted to a number, such as "hello"++, it results in NaN (Not-a-Number). Applying the ++ operator to null treats null as 0, so null++ increments null to 1. However, applying the ++ operator to undefined results in NaN because undefined cannot be converted to a number, so undefined++ yields NaN.

- -

Specifications

- 
-             
-  // Prefix Increment
-  let x = 5;
-  let y = ++x;       // 6 (x is incremented to 6 before assigning to y)
-  
-  // Postfix Increment
-  let a = 3;
-  let b = a++;       // 3 (a is assigned to b first, then a is incremented to 4)
-  
-  // Increment with a String that Represents a Number
-  let result1 = "7"++;  // Results in an error (Postfix ++ does not work with strings)
-  
-  // Increment with Non-Numeric Strings
-  let result2 = "hello"++; // NaN (non-numeric string cannot be incremented)
-  
-  // Increment with null
-  let result3 = null++;  // 1 (null is treated as 0, then incremented to 1)
-  
-  // Increment with undefined
-  let result4 = undefined++; // NaN (undefined cannot be incremented)
-  
-  // Special Cases
-  let object = { count: 1 };
-  object.count++;       // 2 (increments the `count` property of the object)
-  
-  // Prefix and Postfix Increment with Arrays
-  let array = [1, 2, 3];
-  ++array[0];           // 2 (prefix increment on the first element of the array)
-  array[1]++;           // 3 (postfix increment on the second element of the array)
-  
-
-
-
- decrement (--) -
-

decrement (--)

-

In JavaScript, the -- operator is used to decrement a number by one. This operator can be utilized in two distinct ways: as a prefix (before the operand) or as a postfix (after the operand). When used as a prefix, such as --x, the value of x is decremented before it is used in any expression. Conversely, when used as a postfix, such as x--, the value of x is decremented after its current value has been used. The -- operator operates exclusively on numbers; if applied to non-numeric values, JavaScript attempts to convert the operands to numbers before performing the decrement operation. For example, "5"-- converts the string "5" to 5 and decrements it to 4. If the string cannot be converted to a number, such as "hello"--, it results in NaN (Not-a-Number). When null is decremented, null is treated as 0, so null-- decrements null to -1. However, decrementing undefined results in NaN because undefined cannot be converted to a number, so undefined-- yields NaN.

- -

Specifications

- 
-             
-  // Prefix Decrement
-  let x = 5;
-  let y = --x;       // 4 (x is decremented to 4 before assigning to y)
-  
-  // Postfix Decrement
-  let a = 3;
-  let b = a--;       // 3 (a is assigned to b first, then a is decremented to 2)
-  
-  // Decrement with a String that Represents a Number
-  let result1 = "7"--;  // 6 (string "7" is converted to number 7 and decremented to 6)
-  let result2 = "3"--;  // 2 (string "3" is converted to number 3 and decremented to 2)
-  
-  // Decrement with Non-Numeric Strings
-  let result3 = "hello"--; // NaN (non-numeric string cannot be decremented)
-  
-  // Decrement with null
-  let result4 = null--;  // -1 (null is treated as 0, then decremented to -1)
-  
-  // Decrement with undefined
-  let result5 = undefined--; // NaN (undefined cannot be decremented)
-  
-  // Special Cases
-  let object = { count: 5 };
-  object.count--;       // 5 (decrements the `count` property of the object to 4)
-  
-  // Prefix and Postfix Decrement with Arrays
-  let array = [3, 4, 5];
-  --array[0];           // 2 (prefix decrement on the first element of the array)
-  array[1]--;           // 3 (postfix decrement on the second element of the array)
-  
-
-
-
Functions -
[13]
-
- overview -
-

overview

-

JavaScript functions are essential components of the language, providing a way to encapsulate code into reusable and maintainable blocks. Defined using the `function` keyword, followed by a function name, a set of parentheses, and a code block enclosed in curly braces, functions can take parameters and perform operations based on the provided arguments. They are invoked by calling the function name with parentheses, optionally passing arguments. Functions can return values using the `return` statement, allowing them to output results that can be used in other parts of the program. JavaScript also supports anonymous functions, which are functions without names, often utilized in event handling or as immediately invoked function expressions (IIFE). With the introduction of ES6, arrow functions offer a more concise syntax and lexically bind the `this` keyword, making them particularly useful for callbacks and functional programming techniques. Functions in JavaScript can be assigned to variables, passed as arguments to other functions, and even returned from other functions, enabling the creation of higher-order functions. They can also be nested, meaning a function can be defined within another function, providing a way to create private scopes. This encapsulation helps in avoiding global namespace pollution. Functions enhance code readability and organization by breaking down complex operations into smaller, manageable tasks. They support recursion, allowing a function to call itself, which is useful for tasks like traversing data structures or solving problems with repetitive patterns. Additionally, JavaScript functions can be defined using function expressions or function declarations, each with its scope and hoisting behaviors. Functions are fundamental in implementing modular, maintainable code structures, promoting reuse and reducing redundancy. Asynchronous operations, such as those involving callbacks, promises, and async/await syntax, rely heavily on functions. They are also the foundation for many JavaScript design patterns and libraries, making a deep understanding of functions crucial for effective JavaScript programming. Overall, JavaScript functions are versatile and powerful, enabling developers to write efficient, readable, and maintainable code.

-
-
- function declaration -
-

function declaration

-

In JavaScript, function declarations are one of the primary ways to define functions, offering a straightforward syntax and certain benefits, such as hoisting. A function declaration consists of the `function` keyword followed by a name, a set of parentheses for parameters, and a block of code enclosed in curly braces. For example, `function greet() { console.log("Hello, world!"); }` defines a function named `greet` that logs a message to the console. One significant feature of function declarations is hoisting, which allows the function to be called before its definition in the code. This means that the JavaScript engine processes the function declarations at the compile phase, making them available throughout their scope. Function declarations are typically used when the function needs to be reused multiple times, enhancing code readability and maintainability. They create a function object and bind it to the function's name within the current scope, enabling easy invocation. Function declarations are integral to structuring code in a modular and organized manner, facilitating the breakdown of complex operations into manageable and reusable pieces.

-

Specifications

- 
-             
-  // Example 1: Function to greet a user
-  function greet() {
-      console.log("Hello, world!");
-  }
-  greet(); // Logs: "Hello, world!"
-  
-  // Example 2: Function to add two numbers
-  function add(a, b) {
-      return a + b;
-  }
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 3: Function to check if a number is even
-  function isEven(number) {
-      return number % 2 === 0;
-  }
-  console.log(isEven(4)); // Logs: true
-  
-  // Example 4: Function to calculate the square of a number
-  function square(x) {
-      return x * x;
-  }
-  console.log(square(5)); // Logs: 25
-  
-  // Example 5: Function to find the maximum of two numbers
-  function max(a, b) {
-      return a > b ? a : b;
-  }
-  console.log(max(10, 15)); // Logs: 15
-  
-  // Example 6: Function to print a message multiple times
-  function repeatMessage(message, times) {
-      for (let i = 0; i < times; i++) {
-          console.log(message);
-      }
-  }
-  repeatMessage("Hello!", 3); // Logs: "Hello!" three times
-  
-  // Example 7: Function to convert Celsius to Fahrenheit
-  function toFahrenheit(celsius) {
-      return celsius * 9 / 5 + 32;
-  }
-  console.log(toFahrenheit(0)); // Logs: 32
-  
-  // Example 8: Function to find the factorial of a number
-  function factorial(n) {
-      if (n === 0) {
-          return 1;
-      }
-      return n * factorial(n - 1);
-  }
-  console.log(factorial(5)); // Logs: 120
-  
-  // Example 9: Function to reverse a string
-  function reverseString(str) {
-      return str.split('').reverse().join('');
-  }
-  console.log(reverseString("hello")); // Logs: "olleh"
-  
-  // Example 10: Function to check if a string is a palindrome
-  function isPalindrome(str) {
-      let reversed = str.split('').reverse().join('');
-      return str === reversed;
-  }
-  console.log(isPalindrome("racecar")); // Logs: true
-  
-
-
-
- calling a function -
-

calling a function

-

Calling a function in JavaScript involves executing the code within the function's block by invoking the function's name followed by parentheses, optionally including arguments inside the parentheses if the function requires parameters. When a function is called, the JavaScript engine creates a new execution context for it, assigns the provided arguments to the corresponding parameters, and runs the function's code. If the function has a return statement, the value specified by that statement is returned to the caller; otherwise, the function returns `undefined` by default. Function calls can be made from anywhere in the code, including from within other functions, allowing for modular and reusable code. Calling a function is essential for utilizing its defined behavior and achieving the desired operations within a program. Properly invoking functions enables developers to build complex applications by breaking down tasks into manageable, reusable units of code.

-

Specifications

- 
-             
-  // Example 1: Calling a function to print a greeting message
-  function greet() {
-      console.log("Hello, world!");
-  }
-  greet(); // Logs: "Hello, world!"
-  
-  // Example 2: Calling a function to add two numbers and print the result
-  function add(a, b) {
-      return a + b;
-  }
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 3: Calling a function to check if a number is even and print the result
-  function isEven(number) {
-      return number % 2 === 0;
-  }
-  console.log(isEven(4)); // Logs: true
-  
-  // Example 4: Calling a function to convert Celsius to Fahrenheit and print the result
-  function toFahrenheit(celsius) {
-      return celsius * 9 / 5 + 32;
-  }
-  console.log(toFahrenheit(0)); // Logs: 32
-  
-  // Example 5: Calling a function to reverse a string and print the result
-  function reverseString(str) {
-      return str.split('').reverse().join('');
-  }
-  console.log(reverseString("hello")); // Logs: "olleh"
-  
-
-
-
- parameters and arguments -
-

parameters and arguments

-

In JavaScript, parameters and arguments are key concepts in functions that enable the passing of data into functions for processing. Parameters are the names listed in the function definition and act as placeholders for the values that will be passed to the function when it is called. For instance, in the function `function add(a, b)`, `a` and `b` are parameters. Arguments, on the other hand, are the actual values that are passed to the function when it is invoked. For example, in the call `add(5, 3)`, the values `5` and `3` are arguments. Parameters define what type of input a function can accept, while arguments provide the actual input data. When a function is called, the arguments are assigned to the corresponding parameters, and the function uses these values to execute its code. This mechanism allows functions to be flexible and reusable, as the same function can be called with different arguments to perform a variety of tasks. Understanding how to use parameters and arguments effectively is crucial for writing dynamic and adaptable JavaScript code.

-

Specifications

- 
-             
-  // Example 1: Function with parameters to add two numbers
-  function add(a, b) {
-      return a + b;
-  }
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 2: Function with parameters to greet a user by name
-  function greet(name) {
-      console.log("Hello, " + name + "!");
-  }
-  greet("Alice"); // Logs: "Hello, Alice!"
-  
-  // Example 3: Function with parameters to calculate the area of a rectangle
-  function calculateArea(width, height) {
-      return width * height;
-  }
-  console.log(calculateArea(5, 10)); // Logs: 50
-  
-  // Example 4: Function with parameters to determine if a number is greater than another
-  function isGreater(a, b) {
-      return a > b;
-  }
-  console.log(isGreater(10, 5)); // Logs: true
-  
-  // Example 5: Function with parameters to concatenate two strings
-  function concatenate(str1, str2) {
-      return str1 + " " + str2;
-  }
-  console.log(concatenate("Hello", "world")); // Logs: "Hello world"
-
-
-
- default parameters -
-

default parameters

-

Default parameters in JavaScript functions allow you to specify default values for parameters in case no arguments are provided or if `undefined` is passed as an argument when the function is called. This feature, introduced in ES6, simplifies the function definitions by eliminating the need for manual checks and assignments within the function body. To set a default parameter, you simply assign a value to the parameter in the function definition, like `function greet(name = "Guest")`. If the caller does not provide a value for `name`, it will default to "Guest". This mechanism enhances the flexibility and robustness of functions, ensuring they have meaningful default behavior even when some arguments are omitted. Default parameters can also be expressions or even other function calls, providing a powerful tool for managing function inputs and improving code readability.

-

Specifications

- 
-             
-  // Example 1: Function with a default parameter for greeting
-  function greet(name = "Guest") {
-      console.log("Hello, " + name + "!");
-  }
-  greet(); // Logs: "Hello, Guest!"
-  greet("Alice"); // Logs: "Hello, Alice!"
-  
-  // Example 2: Function with a default parameter for addition
-  function add(a = 0, b = 0) {
-      return a + b;
-  }
-  console.log(add()); // Logs: 0
-  console.log(add(5)); // Logs: 5
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 3: Function with a default parameter for multiplication
-  function multiply(a, b = 1) {
-      return a * b;
-  }
-  console.log(multiply(5)); // Logs: 5
-  console.log(multiply(5, 2)); // Logs: 10
-  
-  // Example 4: Function with a default parameter for calculating power
-  function power(base, exponent = 2) {
-      return Math.pow(base, exponent);
-  }
-  console.log(power(3)); // Logs: 9
-  console.log(power(3, 3)); // Logs: 27
-  
-  // Example 5: Function with a default parameter for formatting a date
-  function formatDate(date = new Date()) {
-      return date.toDateString();
-  }
-  console.log(formatDate()); // Logs: Current date in string format
-  console.log(formatDate(new Date('2022-01-01'))); // Logs: "Sat Jan 01 2022"
-
-
-
- return keyword -
-

return keyword

-

The `return` keyword in JavaScript functions is used to specify the value that a function should output when it is called. When a function reaches a `return` statement, it immediately stops execution and returns the specified value to the caller. This allows functions to produce results that can be used elsewhere in the code. For example, a function that performs a calculation can return the result so it can be assigned to a variable or used in another computation. If a function does not explicitly return a value, it implicitly returns `undefined`. The `return` keyword is essential for creating reusable and modular code, as it enables functions to provide outputs based on their input parameters and internal logic. Using `return` effectively can make functions more versatile and the overall codebase more maintainable and efficient.

-

Specifications

- 
-             
-  // Example 1: Function with no return statement, implicitly returns undefined
-  function noReturn() {
-      let a = 5 + 3;
-  }
-  console.log(noReturn()); // Logs: undefined
-  
-  // Example 2: Function to add two numbers and return the result
-  function add(a, b) {
-      return a + b;
-  }
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 3: Function to find the square of a number and return the result
-  function square(x) {
-      return x * x;
-  }
-  console.log(square(4)); // Logs: 16
-  
-  // Example 4: Function to concatenate two strings and return the result
-  function concatenate(str1, str2) {
-      return str1 + " " + str2;
-  }
-  console.log(concatenate("Hello", "world")); // Logs: "Hello world"
-  
-  // Example 5: Function to determine if a number is even and return the result
-  function isEven(number) {
-      return number % 2 === 0;
-  }
-  console.log(isEven(10)); // Logs: true
-
-
-
- helper functions -
-

helper functions

-

Helper functions in JavaScript are small, reusable functions designed to perform specific tasks that support the main operations of a program. These functions typically handle common or repetitive tasks, such as data formatting, calculations, or other utility operations, thereby promoting code reusability and modularity. By breaking down complex problems into smaller, manageable functions, helper functions make the main codebase cleaner, more readable, and easier to maintain. They encapsulate functionality that can be tested independently, improving code reliability and facilitating debugging. For instance, a helper function might be used to validate user input, format dates, or manipulate arrays. Using helper functions allows developers to avoid redundancy, as the same piece of logic can be called multiple times from different parts of the application, ensuring consistency and reducing the likelihood of errors. Overall, helper functions are a fundamental practice in writing efficient and maintainable JavaScript code.

-

Specifications

- 
-             
-  // Example 1: Helper function to format a date
-  function formatDate(date) {
-      const options = { year: 'numeric', month: 'long', day: 'numeric' };
-      return date.toLocaleDateString(undefined, options);
-  }
-  const date = new Date('2024-07-24');
-  console.log(formatDate(date)); // Logs: "July 24, 2024"
-  
-  // Example 2: Helper function to validate an email address
-  function isValidEmail(email) {
-      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      return re.test(email);
-  }
-  console.log(isValidEmail("test@example.com")); // Logs: true
-  console.log(isValidEmail("invalid-email")); // Logs: false
-  
-  // Example 3: Helper function to capitalize the first letter of a string
-  function capitalizeFirstLetter(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-  console.log(capitalizeFirstLetter("hello")); // Logs: "Hello"
-  
-  // Example 4: Helper function to generate a random integer between two values
-  function getRandomInt(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-  }
-  console.log(getRandomInt(1, 10)); // Logs: a random number between 1 and 10
-  
-  // Example 5: Helper function to remove duplicates from an array
-  function removeDuplicates(arr) {
-      return [...new Set(arr)];
-  }
-  const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
-  console.log(removeDuplicates(arrayWithDuplicates)); // Logs: [1, 2, 3, 4, 5]
-  
-
-
-
- function expressions -
-

function expressions

-

Function expressions in JavaScript are a way to define functions as part of a larger expression, typically assigned to a variable. Unlike function declarations, which are hoisted and available throughout their scope, function expressions are not hoisted and are only available after their assignment is evaluated. A function expression can be anonymous, meaning it does not have a name, or named, where the function is assigned a name for reference within its own scope. For example, `const add = function(a, b) { return a + b; };` defines a function expression assigned to the variable `add`. This form of function definition is particularly useful for creating closures, passing functions as arguments to other functions, or defining functions within conditional blocks. Function expressions provide more flexibility and control over when and how functions are defined and executed, contributing to more modular and maintainable code. They are fundamental in many JavaScript programming patterns, including immediately invoked function expressions (IIFEs) and callbacks, enhancing the language's functional programming capabilities.

-

Specifications

- 
-             
-  // Example 1: Anonymous function expression assigned to a variable
-  const greet = function() {
-      console.log("Hello, world!");
-  };
-  greet(); // Logs: "Hello, world!"
-  
-  // Example 2: Named function expression assigned to a variable
-  const factorial = function fact(n) {
-      if (n <= 1) return 1;
-      return n * fact(n - 1);
-  };
-  console.log(factorial(5)); // Logs: 120
-  
-  // Example 3: Function expression used as a callback
-  const numbers = [1, 2, 3, 4, 5];
-  const doubled = numbers.map(function(num) {
-      return num * 2;
-  });
-  console.log(doubled); // Logs: [2, 4, 6, 8, 10]
-  
-  // Example 4: Immediately Invoked Function Expression (IIFE)
-  (function() {
-      console.log("This function runs immediately!");
-  })(); // Logs: "This function runs immediately!"
-  
-  // Example 5: Function expression used in an object method
-  const mathOperations = {
-      add: function(a, b) {
-          return a + b;
-      },
-      subtract: function(a, b) {
-          return a - b;
-      }
-  };
-  console.log(mathOperations.add(10, 5)); // Logs: 15
-  console.log(mathOperations.subtract(10, 5)); // Logs: 5
-  
-  // Example 6: Function expression used as an event handler
-  document.getElementById("myButton").addEventListener("click", function() {
-      console.log("Button clicked!");
-  }); // Logs: "Button clicked!" when the button is clicked
-  
-  // Example 7: Function expression to filter an array
-  const isEven = function(num) {
-      return num % 2 === 0;
-  };
-  const evens = numbers.filter(isEven);
-  console.log(evens); // Logs: [2, 4]
-  
-  // Example 8: Function expression to find the maximum in an array
-  const max = function(arr) {
-      return Math.max.apply(null, arr);
-  };
-  console.log(max([1, 2, 3, 4, 5])); // Logs: 5
-  
-  // Example 9: Function expression to sort an array
-  const sorted = numbers.sort(function(a, b) {
-      return b - a;
-  });
-  console.log(sorted); // Logs: [5, 4, 3, 2, 1]
-  
-  // Example 10: Function expression to convert an array of strings to uppercase
-  const upperCaseStrings = ["hello", "world"].map(function(str) {
-      return str.toUpperCase();
-  });
-  console.log(upperCaseStrings); // Logs: ["HELLO", "WORLD"]
-  
-
-
-
- arrow functions -
-

arrow functions

-

Arrow functions in JavaScript, introduced in ES6, provide a concise syntax for writing functions. Unlike traditional function expressions, arrow functions do not have their own `this`, `arguments`, `super`, or `new.target` bindings. Instead, they lexically inherit `this` from the surrounding function or scope, which makes them particularly useful for maintaining the correct `this` context inside callbacks and other nested functions. The syntax of arrow functions is shorter: parameters are enclosed in parentheses (which can be omitted if there's only one parameter), followed by the `=>` symbol, and the function body. For single expression functions, curly braces and the `return` keyword can be omitted, resulting in even more compact code. For example, `const add = (a, b) => a + b;` defines a simple arrow function that adds two numbers. Arrow functions enhance code readability and are often used in array methods like `map`, `filter`, and `reduce` due to their brevity and automatic binding of `this`. However, they are not suitable for all situations, such as methods in an object, where traditional function expressions are more appropriate.

-

Specifications

- 
-             
-  // Example 1: Simple arrow function to add two numbers
-  const add = (a, b) => a + b;
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 2: Arrow function with a single parameter
-  const square = x => x * x;
-  console.log(square(4)); // Logs: 16
-  
-  // Example 3: Arrow function returning an object
-  const createUser = (name, age) => ({ name, age });
-  console.log(createUser("Alice", 30)); // Logs: { name: 'Alice', age: 30 }
-  
-  // Example 4: Arrow function with no parameters
-  const greet = () => "Hello, world!";
-  console.log(greet()); // Logs: "Hello, world!"
-  
-  // Example 5: Arrow function used as a callback in array map method
-  const numbers = [1, 2, 3, 4, 5];
-  const doubled = numbers.map(num => num * 2);
-  console.log(doubled); // Logs: [2, 4, 6, 8, 10]
-  
-  // Example 6: Arrow function used in array filter method
-  const evens = numbers.filter(num => num % 2 === 0);
-  console.log(evens); // Logs: [2, 4]
-  
-  // Example 7: Arrow function used in array reduce method
-  const sum = numbers.reduce((total, num) => total + num, 0);
-  console.log(sum); // Logs: 15
-  
-  // Example 8: Arrow function with implicit return
-  const multiply = (a, b) => a * b;
-  console.log(multiply(6, 7)); // Logs: 42
-  
-  // Example 9: Arrow function with explicit return
-  const isEven = num => {
-      return num % 2 === 0;
-  };
-  console.log(isEven(10)); // Logs: true
-  
-  // Example 10: Arrow function used inside a setTimeout
-  setTimeout(() => {
-      console.log("This runs after 1 second");
-  }, 1000); // Logs: "This runs after 1 second" (after 1 second)
-  
-
-
-
- concise body arrow functions -
-

concise body arrow functions

-

Concise body arrow functions in JavaScript are a streamlined way to write functions, allowing for more readable and compact code. These functions omit the curly braces and the `return` keyword when the function body contains a single expression. The value of this expression is implicitly returned, making the syntax much shorter and more convenient for simple operations. For instance, `const add = (a, b) => a + b;` is a concise body arrow function that adds two numbers and returns the result. This format is particularly useful for inline functions, such as those passed to array methods like `map`, `filter`, and `reduce`. Concise body arrow functions improve code clarity and reduce boilerplate, enabling developers to write succinct and expressive functions, especially for straightforward computations and transformations. However, for more complex logic that requires multiple statements, curly braces and an explicit `return` statement must be used.

-

Specifications

- 
-             
-  // Example 1: Concise body arrow function to add two numbers
-  const add = (a, b) => a + b;
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 2: Concise body arrow function to square a number
-  const square = x => x * x;
-  console.log(square(4)); // Logs: 16
-  
-  // Example 3: Concise body arrow function to return a greeting message
-  const greet = () => "Hello, world!";
-  console.log(greet()); // Logs: "Hello, world!"
-  
-  // Example 4: Concise body arrow function to check if a number is even
-  const isEven = num => num % 2 === 0;
-  console.log(isEven(10)); // Logs: true
-  
-  // Example 5: Concise body arrow function to get the length of a string
-  const getLength = str => str.length;
-  console.log(getLength("Hello")); // Logs: 5
-  
-  // Example 6: Concise body arrow function to convert an array of numbers to their squares
-  const squares = numbers => numbers.map(num => num * num);
-  console.log(squares([1, 2, 3, 4])); // Logs: [1, 4, 9, 16]
-  
-  // Example 7: Concise body arrow function to filter out odd numbers from an array
-  const filterOdds = numbers => numbers.filter(num => num % 2 === 0);
-  console.log(filterOdds([1, 2, 3, 4, 5])); // Logs: [2, 4]
-            
-
-
-
- best practices -
-

best practices

-

When writing functions in JavaScript, adhering to best practices is crucial for creating clean, maintainable, and efficient code. One key practice is to keep functions small and focused, adhering to the single responsibility principle, which states that a function should accomplish only one task. This approach enhances readability and makes the function easier to test and debug. Naming functions descriptively is also important; a function's name should clearly describe what it does, making the code self-documenting and understandable at a glance. Using default parameters can help handle edge cases gracefully, ensuring functions behave predictably even when called with missing arguments. Additionally, leveraging function expressions and arrow functions can improve code conciseness and maintain the correct this context, especially in callbacks. Properly using return statements is essential to avoid unintended side effects and to clearly define what a function outputs. When dealing with asynchronous operations, utilizing promises and async/await syntax helps manage code flow more effectively and avoid callback hell. It is also a good practice to avoid using global variables within functions to prevent side effects and potential conflicts in larger codebases. Instead, functions should rely on parameters and return values to pass data in and out. Documenting functions with comments or JSDoc annotations can be beneficial, especially for complex logic, providing clear explanations of the function's purpose, parameters, and return values. Testing functions thoroughly, including edge cases, ensures robustness and reliability.

-

Specifications

- 
-             
-  // Example 1: Single Responsibility Principle - Function to add two numbers
-  function add(a, b) {
-      return a + b;
-  }
-  console.log(add(5, 3)); // Logs: 8
-  
-  // Example 2: Descriptive Function Name - Function to greet a user by name
-  function greetUser(name) {
-      return `Hello, ${name}!`;
-  }
-  console.log(greetUser("Alice")); // Logs: "Hello, Alice!"
-  
-  // Example 3: Using Default Parameters - Function to multiply two numbers with a default value
-  function multiply(a, b = 1) {
-      return a * b;
-  }
-  console.log(multiply(5)); // Logs: 5
-  console.log(multiply(5, 3)); // Logs: 15
-  
-  // Example 4: Using Arrow Functions - Function to check if a number is even
-  const isEven = num => num % 2 === 0;
-  console.log(isEven(4)); // Logs: true
-  
-  // Example 5: Properly Using Return Statements - Function to find the maximum of two numbers
-  function max(a, b) {
-      return a > b ? a : b;
-  }
-  console.log(max(10, 15)); // Logs: 15
-  
-  // Example 6: Avoiding Global Variables - Function to calculate area of a rectangle
-  function calculateArea(width, height) {
-      return width * height;
-  }
-  console.log(calculateArea(5, 10)); // Logs: 50
-  
-  // Example 7: Using Async/Await - Function to fetch data from an API
-  async function fetchData(url) {
-      try {
-          let response = await fetch(url);
-          let data = await response.json();
-          return data;
-      } catch (error) {
-          console.error("Error fetching data:", error);
-      }
-  }
-  fetchData('https://api.example.com/data').then(data => console.log(data));
-  
-  // Example 8: Thorough Testing - Function to calculate factorial
-  function factorial(n) {
-      if (n < 0) return undefined;
-      if (n <= 1) return 1;
-      return n * factorial(n - 1);
-  }
-  console.log(factorial(5)); // Logs: 120
-  console.log(factorial(-1)); // Logs: undefined
-  
-  // Example 9: Using Function Expressions - Function to filter odd numbers from an array
-  const filterOdds = function(numbers) {
-      return numbers.filter(num => num % 2 === 0);
-  };
-  console.log(filterOdds([1, 2, 3, 4, 5])); // Logs: [2, 4]
-  
-  // Example 10: Documenting Functions - Function to reverse a string
-  /**
-   * Reverses a given string.
-   * @param {string} str - The string to be reversed.
-   * @returns {string} - The reversed string.
-   */
-  function reverseString(str) {
-      return str.split('').reverse().join('');
-  }
-  console.log(reverseString("hello")); // Logs: "olleh"
-
-
-
- higher-order functions -
-

higher-order functions

-

A higher-order function is a function that either takes one or more functions as arguments or returns a function as its result. This capability allows for more abstract and flexible code, enabling functions to be passed around and manipulated just like other data types. Higher-order functions are commonly used in programming languages that support first-class functions, such as JavaScript, Python, and Haskell, to create reusable and modular code. For example, functions like `map`, `filter`, and `reduce` in JavaScript are higher-order functions because they take other functions as parameters to perform operations on arrays. By using higher-order functions, developers can write more concise and expressive code, enhancing readability and maintainability.

-

Specifications

- 
-             
-  // Example 1: A simple function that takes another function as an argument and applies it
-  function applyFunction(func, value) {
-      return func(value);
-  }
-  
-  function addOne(x) {
-      return x + 1;
-  }
-  
-  const result1 = applyFunction(addOne, 5);
-  console.log(result1); // Logs: 6
-  
-  // Example 2: A function that returns another function
-  function createMultiplier(multiplier) {
-      return function(value) {
-          return value * multiplier;
-      };
-  }
-  
-  const double = createMultiplier(2);
-  const result2 = double(4);
-  console.log(result2); // Logs: 8
-  
-  // Example 3: A function that takes a function as an argument to determine whether to log a message
-  function conditionalLogger(condition, message) {
-      if (condition()) {
-          console.log(message);
-      }
-  }
-  
-  function isEven(num) {
-      return num % 2 === 0;
-  }
-  
-  conditionalLogger(() => isEven(4), 'Number is even!');
-  // Logs: 'Number is even!'
-  
-  // Example 4: map - multiplies each element by 2
-  const numbers = [1, 2, 3];
-  const doubled = numbers.map(num => num * 2);
-  console.log(doubled); // Logs: [2, 4, 6]
-  
-  // Example 5: filter - filters out odd numbers
-  const evenNumbers = numbers.filter(num => num % 2 === 0);
-  console.log(evenNumbers); // Logs: [2]
-  
-  // Example 6: reduce - multiplies all elements together
-  const product = numbers.reduce((acc, num) => acc * num, 1);
-  console.log(product); // Logs: 6
-  
-  // Example 7: find - finds the first number greater than 2
-  const greaterThanTwo = numbers.find(num => num > 2);
-  console.log(greaterThanTwo); // Logs: 3
-  
-  // Example 8: forEach - logs each element squared
-  numbers.forEach(num => console.log(num * num));
-  // Logs: 1, 4, 9 (Each on a new line)
-  
-  // Example 9: some - checks if there is any number greater than 2
-  const hasGreaterThanTwo = numbers.some(num => num > 2);
-  console.log(hasGreaterThanTwo); // Logs: true
-  
-  // Example 10: setInterval - logs a message every 1 second and stops after 3 times
-  let count = 0;
-  const intervalId = setInterval(() => {
-    console.log(`Interval count: ${count}`);
-    count += 1;
-    if (count > 2) clearInterval(intervalId);
-  }, 1000);
-  // Logs: 'Interval count: 0', 'Interval count: 1', 'Interval count: 2' (Each after 1 second)
-
-
-
callback functions
-

callback functions

-

A callback function is a function that is passed as an argument to another function and is executed after the completion of that function. Callbacks are commonly used in asynchronous programming, where operations like network requests, file reading, or timers need to be handled without blocking the execution of the rest of the code. By passing a function as a callback, you allow the main function to perform its task and then execute the callback function once the task is done. This pattern helps in managing tasks that take an uncertain amount of time to complete, such as retrieving data from a server, where the callback is triggered only when the data is ready. Callbacks are a fundamental concept in JavaScript and are widely used in event handling, asynchronous operations, and handling user interactions, enabling developers to write more efficient and non-blocking code.

-

Specifications

- 
-             
-  // Example 1: Simple callback that logs a message
-  function greet(callback) {
-      console.log("Hello!");
-      callback();
-  }
-  
-  function sayGoodbye() {
-      console.log("Goodbye!");
-  }
-  
-  greet(sayGoodbye);
-  // Logs: "Hello!" then "Goodbye!"
-  
-  // Example 2: Callback that adds two numbers
-  function add(a, b, callback) {
-      const result = a + b;
-      callback(result);
-  }
-  
-  function logResult(result) {
-      console.log("Result:", result);
-  }
-  
-  add(3, 4, logResult);
-  // Logs: "Result: 7"
-  
-  // Example 3: Using a callback to filter an array
-  function filterArray(arr, callback) {
-      const filteredArr = arr.filter(callback);
-      console.log("Filtered Array:", filteredArr);
-  }
-  
-  function isOdd(num) {
-      return num % 2 !== 0;
-  }
-  
-  filterArray([1, 2, 3, 4, 5], isOdd);
-  // Logs: "Filtered Array: [1, 3, 5]"
-  
-  // Example 4: Callback with setTimeout to simulate a delay
-  function delayedLog(message, callback) {
-      setTimeout(() => {
-          console.log(message);
-          callback();
-      }, 1000);
-  }
-  
-  delayedLog("This message is delayed by 1 second", () => {
-      console.log("This is the callback after the delay");
-  });
-  // Logs: "This message is delayed by 1 second" after 1 second, then "This is the callback after the delay"
-  
-  // Example 5: Callback with an event listener
-  function onButtonClick(callback) {
-      // Simulating a button click event
-      console.log("Button clicked!");
-      callback();
-  }
-  
-  function handleClick() {
-      console.log("Button was handled!");
-  }
-  
-  onButtonClick(handleClick);
-  // Logs: "Button clicked!" then "Button was handled!"
-  
-  // Example 6: Callback that checks a condition
-  function checkCondition(value, callback) {
-      if (value > 10) {
-          callback("Value is greater than 10");
-      } else {
-          callback("Value is 10 or less");
-      }
-  }
-  
-  function logCondition(message) {
-      console.log(message);
-  }
-  
-  checkCondition(15, logCondition);
-  // Logs: "Value is greater than 10"
-  
-  // Example 7: Callback with array iteration (forEach)
-  const numbers = [1, 2, 3];
-  numbers.forEach(function(num) {
-      console.log("Number:", num);
-  });
-  // Logs: "Number: 1", "Number: 2", "Number: 3" (each on a new line)
-  
-  // Example 8: Using callbacks with mathematical operations
-  function multiply(a, b, callback) {
-      const result = a * b;
-      callback(result);
-  }
-  
-  multiply(5, 6, logResult);
-  // Logs: "Result: 30"
-  
-  // Example 9: Callback in asynchronous function (setTimeout)
-  function fetchData(callback) {
-      setTimeout(() => {
-          const data = "Fetched Data";
-          callback(data);
-      }, 2000);
-  }
-  
-  fetchData(function(data) {
-      console.log(data);
-  });
-  // Logs: "Fetched Data" after 2 seconds
-  
-  // Example 10: Callback with user-defined function
-  function customOperation(value, callback) {
-      const modifiedValue = value * 2;
-      callback(modifiedValue);
-  }
-  
-  customOperation(10, function(result) {
-      console.log("Modified Value:", result);
-  });
-  // Logs: "Modified Value: 20"
-
-
-
Scope -
[05]
-
- blocks -
-

blocks

-

Blocks in JavaScript are fundamental structures used to group statements together, enclosed within curly braces `{}`. They are typically used in control flow statements such as `if`, `for`, `while`, and `switch`, as well as in defining the bodies of functions. Blocks create a new scope for variables declared with `let` and `const`, meaning these variables are confined to the block and cannot be accessed outside of it, thus preventing potential conflicts and unintended behavior in the broader program. This scoping behavior, known as block-level scoping, is a key feature introduced in ES6 that enhances the management and predictability of variables within code. Blocks also play a crucial role in the organization and readability of code, allowing developers to structure and nest operations logically and hierarchically. They ensure that related statements are executed together, maintaining the integrity of the logic and control flow within the program. Understanding and utilizing blocks effectively is essential for writing clean, efficient, and maintainable JavaScript code.

-

Specifications

- 
-             
-  // Example 1: Block in an if statement
-  if (true) {
-      let message = "This is inside the block";
-      console.log(message); // Logs: "This is inside the block"
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-  
-  // Example 2: Block in a for loop
-  for (let i = 0; i < 3; i++) {
-      let message = `Iteration ${i}`;
-      console.log(message); // Logs: "Iteration 0", "Iteration 1", "Iteration 2"
-  }
-  // console.log(i); // Uncaught ReferenceError: i is not defined
-  
-  // Example 3: Block in a while loop
-  let count = 0;
-  while (count < 3) {
-      let message = `Count is ${count}`;
-      console.log(message); // Logs: "Count is 0", "Count is 1", "Count is 2"
-      count++;
-  }
-  
-  // Example 4: Block in a function
-  function greet(name) {
-      {
-          let message = `Hello, ${name}!`;
-          console.log(message); // Logs: "Hello, [name]!"
-      }
-      // console.log(message); // Uncaught ReferenceError: message is not defined
-  }
-  greet("Alice"); // Logs: "Hello, Alice!"
-  
-  // Example 5: Block in a switch statement
-  let fruit = "apple";
-  switch (fruit) {
-      case "apple": {
-          let message = "This is an apple";
-          console.log(message); // Logs: "This is an apple"
-          break;
-      }
-      case "banana": {
-          let message = "This is a banana";
-          console.log(message);
-          break;
-      }
-      default: {
-          let message = "Unknown fruit";
-          console.log(message);
-      }
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-            
-
-
-
- global scope and global variables -
-

global scope and global variables

-

In JavaScript, the global scope is the outermost scope in the execution context, where global variables reside. Global variables are those declared outside of any function or block, making them accessible from any part of the code. When a variable is defined in the global scope, it becomes a property of the global object, which is `window` in browsers and `global` in Node.js. While global variables can be convenient for sharing data across different parts of a program, they come with significant risks, such as potential naming conflicts and unintended side effects. Because global variables can be modified from anywhere in the code, they can lead to bugs that are difficult to trace and debug. Furthermore, excessive use of global variables can reduce the modularity and maintainability of the code. Best practices suggest minimizing the use of global variables and, instead, encapsulating variables within functions or blocks to limit their scope and improve the reliability of the code. Understanding and managing the global scope is crucial for writing efficient and error-free JavaScript applications.

-

Specifications

- 
-             
-  // Example 1: Declaring a global variable
-  let globalVar = "I am a global variable";
-  function showGlobalVar() {
-      console.log(globalVar); // Logs: "I am a global variable"
-  }
-  showGlobalVar();
-  
-  // Example 2: Modifying a global variable within a function
-  let globalCounter = 0;
-  function incrementCounter() {
-      globalCounter++;
-  }
-  incrementCounter();
-  console.log(globalCounter); // Logs: 1
-  
-  // Example 3: Accessing a global variable inside a block
-  const globalMessage = "Hello, world!";
-  {
-      console.log(globalMessage); // Logs: "Hello, world!"
-  }
-  
-  // Example 4: Declaring a global variable with let
-  let globalLetVar = "I am a global let variable";
-  function showGlobalLetVar() {
-      console.log(globalLetVar); // Logs: "I am a global let variable"
-  }
-  showGlobalLetVar();
-  
-  // Example 5: Creating a global variable without let or const (not recommended)
-  function createGlobalVar() {
-      window.accidentalGlobalVar = "I am an accidental global variable";
-  }
-  createGlobalVar();
-  console.log(window.accidentalGlobalVar); // Logs: "I am an accidental global variable"
-  
-  // Example 6: Using a global variable in multiple functions
-  let sharedVar = "Shared variable";
-  function firstFunction() {
-      console.log(sharedVar); // Logs: "Shared variable"
-  }
-  function secondFunction() {
-      sharedVar = "Modified shared variable";
-      console.log(sharedVar); // Logs: "Modified shared variable"
-  }
-  firstFunction();
-  secondFunction();
-  console.log(sharedVar); // Logs: "Modified shared variable"
-  
-  // Example 7: Potential conflict with global variables
-  let name = "Alice";
-  function setName() {
-      name = "Bob"; // Modifies the global variable
-  }
-  setName();
-  console.log(name); // Logs: "Bob"
-            
-
-
-
- block scope and local variables -
-

block scope and local variables

-

Block scope in JavaScript refers to the visibility and accessibility of variables declared within a specific block of code, which is defined by curly braces `{}`. Variables declared with `let` and `const` inside a block are confined to that block and cannot be accessed outside of it. This scoping behavior contrasts with variables declared using `var`, which are function-scoped and can be accessed outside the block they are defined in, provided they are within the same function. Block scope enhances code maintainability and readability by preventing variables from leaking into the outer scope, reducing the likelihood of naming conflicts and unintended interactions. This feature is particularly useful in control flow statements like `if`, `for`, and `while`, as well as in function definitions, where you want to limit the variable's lifespan and accessibility to a specific section of code. By using block-scoped variables, developers can write more predictable and error-free code, as it is clear where each variable is accessible and where it is not.

-

Specifications

- 
-             
-  // Example 1: Block scope with let in an if statement
-  if (true) {
-      let message = "This is inside the block";
-      console.log(message); // Logs: "This is inside the block"
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-  
-  // Example 2: Block scope with const in a for loop
-  for (let i = 0; i < 3; i++) {
-      const message = `Iteration ${i}`;
-      console.log(message); // Logs: "Iteration 0", "Iteration 1", "Iteration 2"
-  }
-  // console.log(i); // Uncaught ReferenceError: i is not defined
-  
-  // Example 3: Block scope with let in a while loop
-  let count = 0;
-  while (count < 3) {
-      let message = `Count is ${count}`;
-      console.log(message); // Logs: "Count is 0", "Count is 1", "Count is 2"
-      count++;
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-  
-  // Example 4: Block scope with const in a function
-  function greet(name) {
-      {
-          const message = `Hello, ${name}!`;
-          console.log(message); // Logs: "Hello, Alice!"
-      }
-      // console.log(message); // Uncaught ReferenceError: message is not defined
-  }
-  greet("Alice");
-  
-  // Example 5: Block scope with let in a switch statement
-  let fruit = "apple";
-  switch (fruit) {
-      case "apple": {
-          let message = "This is an apple";
-          console.log(message); // Logs: "This is an apple"
-          break;
-      }
-      case "banana": {
-          let message = "This is a banana";
-          console.log(message);
-          break;
-      }
-      default: {
-          let message = "Unknown fruit";
-          console.log(message);
-      }
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-  
-  // Example 6: Block scope with const in nested blocks
-  {
-      const outerMessage = "Outer block";
-      {
-          const innerMessage = "Inner block";
-          console.log(outerMessage); // Logs: "Outer block"
-          console.log(innerMessage); // Logs: "Inner block"
-      }
-      // console.log(innerMessage); // Uncaught ReferenceError: innerMessage is not defined
-  }
-  // console.log(outerMessage); // Uncaught ReferenceError: outerMessage is not defined
-  
-  // Example 7: Block scope with let in a try-catch block
-  try {
-      let message = "Trying something";
-      console.log(message); // Logs: "Trying something"
-  } catch (error) {
-      let errorMessage = "An error occurred";
-      console.log(errorMessage); // Only logs if an error occurs
-  }
-  // console.log(message); // Uncaught ReferenceError: message is not defined
-  // console.log(errorMessage); // Uncaught ReferenceError: errorMessage is not defined
-            
-
-
-
- scope pollution -
-

scope pollution

-

Scope pollution, often referred to as namespace pollution, in JavaScript occurs when too many variables, functions, or objects are declared in the global scope, leading to potential conflicts and maintainability issues. This happens when variables are unnecessarily declared globally rather than locally within functions or blocks, making them accessible from any part of the program. Such global declarations can cause name collisions, where multiple variables with the same name overwrite each other's values, resulting in unpredictable behavior and hard-to-debug errors. Namespace pollution makes the codebase more difficult to read and maintain because it becomes challenging to track the origin and usage of each variable. Additionally, it increases the risk of inadvertently affecting other parts of the code, leading to unintended side effects. To mitigate scope pollution, it is essential to declare variables within the narrowest possible scope, such as inside functions or blocks, and use `let` and `const` instead of `var` to leverage block scoping. Encapsulating code within functions, modules, or immediately invoked function expressions (IIFEs) can further help manage variable scope effectively, ensuring that variables do not leak into the global scope and reducing the risk of scope pollution.

-

Specifications

- 
-             
-  // Example 1: Global variable affecting functions
-  let globalVar = "I am global";
-  
-  function showGlobalVar() {
-      console.log(globalVar); // Logs: "I am global"
-  }
-  
-  function changeGlobalVar() {
-      globalVar = "I am changed globally";
-  }
-  
-  showGlobalVar(); // Logs: "I am global"
-  changeGlobalVar();
-  showGlobalVar(); // Logs: "I am changed globally"
-  
-  // Example 2: Overwriting global variable
-  let counter = 1;
-  
-  function incrementCounter() {
-      counter++;
-  }
-  
-  function resetCounter() {
-      counter = 0; // This affects the global counter
-  }
-  
-  console.log(counter); // Logs: 1
-  incrementCounter();
-  console.log(counter); // Logs: 2
-  resetCounter();
-  console.log(counter); // Logs: 0
-  
-  // Example 3: Function variable leaking to global scope
-  function createGlobalVariable() {
-      leakedVar = "I am leaked"; // No let or const, becomes global
-  }
-  
-  createGlobalVariable();
-  console.log(leakedVar); // Logs: "I am leaked"
-  
-  // Example 4: Global variable name collision
-  let name = "Alice";
-  
-  function setName() {
-      name = "Bob"; // Overwrites the global variable
-  }
-  
-  console.log(name); // Logs: "Alice"
-  setName();
-  console.log(name); // Logs: "Bob"
-  
-  // Example 5: Using var in loops causing scope pollution
-  for (var i = 0; i < 5; i++) {
-      // i is declared globally due to var
-      console.log(i); // Logs: 0, 1, 2, 3, 4
-  }
-  console.log(i); // Logs: 5, i is accessible outside the loop
-            
-
-
-
- best practices -
-

best practices

-

Best practices regarding scope in JavaScript emphasize the importance of minimizing the use of global variables to prevent scope pollution and potential conflicts. Variables should be declared within the narrowest possible scope, such as inside functions or blocks, to limit their visibility and impact. Using `let` and `const` instead of `var` is recommended, as they provide block-level scoping, reducing the likelihood of unintended variable leakage and overwriting. Encapsulating code within functions, modules, or immediately invoked function expressions (IIFEs) can further isolate variables and functions, ensuring they do not interfere with other parts of the program. Consistently using descriptive and unique variable names helps avoid naming collisions and makes the code more readable and maintainable. Additionally, understanding and leveraging closures can help manage scope effectively, allowing functions to access variables from their containing scope in a controlled manner. By adhering to these practices, developers can write more robust, maintainable, and error-free JavaScript code.

-
-
Arrays -
[09]
-
- syntax & purpose -
-

syntax & purpose

-

In JavaScript, arrays are a powerful data structure used to store multiple values in a single variable, allowing developers to manage collections of data efficiently. The syntax for creating an array involves using square brackets `[]`, with elements separated by commas. For instance, an array of numbers can be created with the syntax `let numbers = [1, 2, 3, 4, 5];`. Arrays in JavaScript can contain elements of various data types, such as numbers, strings, objects, or even other arrays, which makes them extremely flexible. To create an array, you can use the array literal notation, as shown above, or the `Array` constructor, like `let fruits = new Array('apple', 'banana', 'cherry');`. However, using the array literal notation is generally preferred for its simplicity and readability. Elements within an array are accessed via their index, starting from 0, meaning `numbers[0]` would access the first element of the `numbers` array. JavaScript arrays come with numerous built-in methods to facilitate manipulation, such as `push()` to add elements, `pop()` to remove the last element, and `shift()` and `unshift()` to add or remove elements from the beginning. Arrays are essential for tasks involving data organization, iteration, and implementing complex data structures like stacks and queues. This makes arrays a fundamental part of JavaScript programming, allowing developers to handle data collections effectively.

-

Specifications

- 
-             
-  // Example 1: Creating an array using array literal notation
-  let fruits = ['apple', 'banana', 'cherry'];
-  
-  // Example 2: Creating an array using the Array constructor
-  let numbers = new Array(1, 2, 3, 4, 5);
-  
-  // Example 3: Accessing elements in an array by index
-  console.log(fruits[0]); // Output: 'apple'
-  
-  // Example 4: Modifying an element in an array
-  fruits[1] = 'blueberry';
-  console.log(fruits); // Output: ['apple', 'blueberry', 'cherry']
-  
-  // Example 5: Adding elements to the end of an array using push()
-  fruits.push('orange');
-  console.log(fruits); // Output: ['apple', 'blueberry', 'cherry', 'orange']
-  
-  // Example 6: Removing the last element of an array using pop()
-  let lastFruit = fruits.pop();
-  console.log(lastFruit); // Output: 'orange'
-  console.log(fruits); // Output: ['apple', 'blueberry', 'cherry']
-  
-  // Example 7: Adding elements to the beginning of an array using unshift()
-  fruits.unshift('kiwi');
-  console.log(fruits); // Output: ['kiwi', 'apple', 'blueberry', 'cherry']  
-
-
-
- literal notation -
-

literal notation

-

The literal notation of JavaScript arrays is a straightforward and efficient way to create arrays by directly specifying the elements within square brackets, separated by commas. This method is concise and widely used due to its simplicity and readability, allowing developers to initialize arrays without needing to invoke a constructor. For example, an array of fruits can be created with the syntax `let fruits = ['apple', 'banana', 'cherry'];`, where each string represents an element within the array. This notation supports elements of various data types, including numbers, strings, objects, and even nested arrays, which can all be mixed within a single array. The flexibility of array literal notation makes it a popular choice for defining arrays quickly, especially when the initial content is known. Accessing elements is done using zero-based indexing, allowing developers to easily retrieve, modify, or iterate over the data. Literal notation also supports empty arrays, represented by simply using empty brackets `[]`, which can be filled with elements dynamically as needed. This approach not only enhances code readability but also improves maintainability by presenting a clear structure of the array's contents at a glance. Overall, array literal notation is an essential feature in JavaScript that simplifies the process of working with collections of data.

-

Specifications

- 
-             
-  // Example 1: Creating an array of numbers
-  let numbers = [1, 2, 3, 4, 5];
-  console.log(numbers); // Output: [1, 2, 3, 4, 5]
-  
-  // Example 2: Creating an array of strings
-  let fruits = ['apple', 'banana', 'cherry'];
-  console.log(fruits); // Output: ['apple', 'banana', 'cherry']
-  
-  // Example 3: Creating an array with mixed data types
-  let mixedArray = [42, 'hello', true, null];
-  console.log(mixedArray); // Output: [42, 'hello', true, null]
-  
-  // Example 4: Creating an array with nested arrays
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  console.log(nestedArray); // Output: [[1, 2], [3, 4], [5, 6]]
-  
-  // Example 5: Creating an array of objects
-  let users = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}];
-  console.log(users); // Output: [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]
-  
-  // Example 6: Creating an empty array
-  let emptyArray = [];
-  console.log(emptyArray); // Output: []
-  
-  // Example 7: Using literal notation to create a sparse array
-  let sparseArray = [1, , 3]; // The second element is missing, creating a hole
-  console.log(sparseArray);
-
-
-
- constructor notation -
-

constructor notation

-

The constructor notation of JavaScript arrays involves using the `Array` constructor to create a new array instance, providing more explicit control over the array's creation process. This method uses the `new Array()` syntax, where you can optionally pass arguments to specify the elements or the length of the array. For example, `let numbers = new Array(5);` creates an array with a length of five, filled with empty slots, while `let fruits = new Array('apple', 'banana', 'cherry');` initializes an array with the specified elements. The constructor notation is particularly useful when creating arrays with a predetermined size or when you need to create an array without initializing it with specific elements immediately. However, this method can sometimes lead to confusion, especially when a single numerical argument is passed to the constructor, as it is interpreted as the array's length rather than a single element. Despite this potential pitfall, using the `Array` constructor provides a more explicit way to define arrays, allowing for flexibility in certain programming scenarios, especially when handling array-like objects or creating arrays dynamically. Overall, while the literal notation is often preferred for its simplicity, the constructor notation remains a valuable tool in a JavaScript developer's arsenal, offering an alternative method for creating and managing arrays.

-

Specifications

- 
-             
-  // Example 1: Creating an empty array with a specific length
-  let emptyArray = new Array(5);
-  console.log(emptyArray); // Output: [undefined, undefined, undefined, undefined, undefined]
-  
-  // Example 2: Creating an array with initial elements
-  let fruits = new Array('apple', 'banana', 'cherry');
-  console.log(fruits); // Output: ['apple', 'banana', 'cherry']
-  
-  // Example 3: Creating an array with a single numeric element
-  let singleNumber = new Array(7);
-  console.log(singleNumber); // Output: [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
-  
-  // Example 4: Creating an array with a single string element
-  let singleString = new Array('hello');
-  console.log(singleString); // Output: ['hello']
-  
-  // Example 5: Creating an array with mixed data types
-  let mixedArray = new Array(42, 'hello', true, null);
-  console.log(mixedArray); // Output: [42, 'hello', true, null]
-  
-  // Example 6: Creating a two-dimensional array
-  let matrix = new Array(
-    new Array(1, 2, 3),
-    new Array(4, 5, 6),
-    new Array(7, 8, 9)
-  );
-  console.log(matrix); // Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
-  
-  // Example 7: Creating an array using the Array.of method (alternative to constructor)
-  let arrayOf = Array.of(10, 20, 30);
-  console.log(arrayOf); // Output: [10, 20, 30]
-
-
-
- zero-based indexing -
-

zero-based indexing

-

In JavaScript, arrays are indexed collections of elements, where each element is accessed by a numerical index that starts at zero. This means the first element in an array is at index 0, the second element at index 1, and so on, which is known as zero-based indexing. This indexing system allows developers to iterate over arrays efficiently and perform operations on specific elements by referencing their positions. The index serves as a key to access the corresponding value within the array, enabling quick data retrieval and manipulation. For example, given an array `let colors = ['red', 'green', 'blue'];`, accessing the first element is done using `colors[0]`, which would return `'red'`. JavaScript also allows negative indexing using methods like `Array.prototype.at()`, where `colors.at(-1)` returns the last element of the array. Additionally, arrays in JavaScript can be sparse, meaning they can have empty slots without defined values if elements are omitted during initialization or removed later. This feature can lead to indices that do not have associated values, which can be handled carefully during iterations and data manipulations. Overall, understanding and utilizing array indexing in JavaScript is crucial for effectively managing and manipulating collections of data in various programming scenarios.

-

Specifications

- 
-             
-  // Example 1: Accessing the first element using zero-based index
-  let colors = ['red', 'green', 'blue'];
-  console.log(colors[0]); // Output: 'red'
-  
-  // Example 2: Accessing the last element using length property
-  console.log(colors[colors.length - 1]); // Output: 'blue'
-  
-  // Example 3: Accessing an element in a nested array
-  let matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
-  console.log(matrix[1][1]); // Output: 5 (second row, second column)
-  
-  // Example 4: Modifying an element at a specific index
-  colors[1] = 'yellow';
-  console.log(colors); // Output: ['red', 'yellow', 'blue']
-  
-  // Example 5: Adding a new element at a specific index
-  colors[3] = 'purple';
-  console.log(colors); // Output: ['red', 'yellow', 'blue', 'purple']
-  
-  // Example 6: Accessing an index that doesn't exist (returns undefined)
-  console.log(colors[10]); // Output: undefined
-  
-  // Example 7: Iterating over an array using index
-  for (let i = 0; i < colors.length; i++) {
-    console.log(colors[i]); // Output: 'red', 'yellow', 'blue', 'purple'
-  }
-  
-  // Example 8: Using negative indexing with Array.prototype.at()
-  console.log(colors.at(-1)); // Output: 'purple'
-  
-  // Example 9: Finding the index of an element using indexOf
-  let index = colors.indexOf('blue');
-  console.log(index); // Output: 2
-  
-  // Example 10: Using the index to remove an element
-  let removedElement = colors.splice(1, 1); // Removes 'yellow'
-  console.log(colors); // Output: ['red', 'blue', 'purple']
-  console.log(removedElement); // Output: ['yellow']
-
-
-
- accessing & updating elements -
-

accessing & updating elements

-

In JavaScript, accessing and updating arrays is a fundamental operation that allows developers to manipulate data collections effectively. Arrays use zero-based indexing, which means each element can be accessed by its numerical index, starting from 0 for the first element. For example, given an array `let fruits = ['apple', 'banana', 'cherry'];`, you can access the second element by using `fruits[1]`, which would return `'banana'`. To update an element at a specific index, you simply assign a new value to that index, such as `fruits[1] = 'orange';`, which changes the second element to `'orange'`. This direct access and modification capability make arrays very versatile for a wide range of tasks, including data processing and manipulation. In addition to numeric indices, JavaScript provides various methods for accessing and updating arrays, such as `push()` to add elements to the end, `pop()` to remove the last element, and `splice()` to insert or remove elements at specific positions. By leveraging these array methods, developers can efficiently perform complex operations, such as sorting, filtering, and transforming data, making arrays an essential part of JavaScript programming.

-

Specifications

- 
-             
-  // Example 1: Accessing the first element of an array
-  let numbers = [10, 20, 30, 40, 50];
-  console.log(numbers[0]); // Output: 10
-  
-  // Example 2: Accessing the last element of an array using the length property
-  console.log(numbers[numbers.length - 1]); // Output: 50
-  
-  // Example 3: Updating the first element of an array
-  numbers[0] = 100;
-  console.log(numbers); // Output: [100, 20, 30, 40, 50]
-  
-  // Example 4: Updating the last element of an array
-  numbers[numbers.length - 1] = 500;
-  console.log(numbers); // Output: [100, 20, 30, 40, 500]
-  
-  // Example 5: Accessing a middle element of an array
-  console.log(numbers[2]); // Output: 30
-  
-  // Example 6: Updating a middle element of an array
-  numbers[2] = 300;
-  console.log(numbers); // Output: [100, 20, 300, 40, 500]
-  
-  // Example 7: Adding a new element at the end of an array
-  numbers[numbers.length] = 60;
-  console.log(numbers); // Output: [100, 20, 300, 40, 500, 60]
-  
-  // Example 8: Adding a new element at a specific index
-  numbers[6] = 70;
-  console.log(numbers); // Output: [100, 20, 300, 40, 500, 60, 70]
-  
-  // Example 9: Accessing an element using a negative index (manually calculated)
-  console.log(numbers[numbers.length - 2]); // Output: 60
-  
-  // Example 10: Accessing elements in a loop (read-only)
-  for (let i = 0; i < numbers.length; i++) {
-    console.log(numbers[i]); // Output: 100, 20, 300, 40, 500, 60, 70
-  }
-  
-  // Example 11: Updating all elements in a loop
-  for (let i = 0; i < numbers.length; i++) {
-    numbers[i] *= 2; // Doubling each element
-  }
-  console.log(numbers); // Output: [200, 40, 600, 80, 1000, 120, 140]
-  
-  // Example 12: Resetting an entire array
-  numbers = [1, 2, 3, 4, 5];
-  console.log(numbers); // Output: [1, 2, 3, 4, 5]
-
-
-
- let & const for arrays -
-

let & const for arrays

-

In JavaScript, the use of `let` and `const` for arrays involves specific considerations related to variable scope and mutability. Both `let` and `const` are block-scoped, meaning they are accessible only within the block where they are declared, unlike `var`, which is function-scoped. When using `let` to declare an array, you can reassign the entire array to a new array later, allowing for flexibility in scenarios where the reference to the array itself may need to change. In contrast, `const` is used to declare arrays when you want to ensure that the reference to the array remains constant and cannot be reassigned. However, it is important to note that `const` does not make the array immutable; the contents of the array can still be modified, meaning you can add, remove, or change elements within the array. This distinction is crucial because it highlights that `const` only prevents reassignment of the variable itself, not the modification of the array's content. This behavior makes `const` ideal for situations where the array structure is intended to remain consistent throughout the code's execution, thereby reducing the risk of accidental reassignment and enhancing code reliability and clarity.

-

Specifications

- 
-             
-  // Example 1: Declaring an array with let and modifying an element
-  let numbers = [1, 2, 3];
-  numbers[0] = 10; // Modifying the first element
-  console.log(numbers); // Output: [10, 2, 3]
-  
-  // Example 2: Reassigning an array declared with let
-  numbers = [4, 5, 6]; // Reassigning to a new array
-  console.log(numbers); // Output: [4, 5, 6]
-  
-  // Example 3: Declaring an array with const and modifying an element
-  const fruits = ['apple', 'banana', 'cherry'];
-  fruits[1] = 'orange'; // Modifying the second element
-  console.log(fruits); // Output: ['apple', 'orange', 'cherry']
-  
-  // Example 4: Attempting to reassign a const array (will throw an error)
-  try {
-      fruits = ['kiwi', 'mango']; // Attempting to reassign the entire array
-  } catch (error) {
-      console.log(error.message); // Output: Assignment to constant variable.
-  }
-  
-  // Example 5: Adding an element to a let array
-  let animals = ['dog', 'cat'];
-  animals[2] = 'rabbit'; // Adding a new element at index 2
-  console.log(animals); // Output: ['dog', 'cat', 'rabbit']
-  
-  // Example 6: Adding an element to a const array
-  const cities = ['New York', 'Los Angeles'];
-  cities[2] = 'Chicago'; // Adding a new element at index 2
-  console.log(cities); // Output: ['New York', 'Los Angeles', 'Chicago']
-  
-  // Example 7: Removing an element from a let array
-  let colors = ['red', 'green', 'blue'];
-  colors[2] = undefined; // Removing the element at index 2
-  console.log(colors); // Output: ['red', 'green', undefined]
-  
-  // Example 8: Removing an element from a const array
-  const shapes = ['circle', 'square', 'triangle'];
-  shapes[2] = null; // Removing the element at index 2 (set to null for clarity)
-  console.log(shapes); // Output: ['circle', 'square', null]
-  
-  // Example 9: Let allows for reassignment, replacing the array entirely
-  let scores = [10, 20, 30];
-  scores = [100, 200]; // Replacing with a new array
-  console.log(scores); // Output: [100, 200]
-  
-  // Example 10: Const does not allow for reassignment of the entire array
-  const points = [5, 10, 15];
-  try {
-      points = [50, 100]; // Attempting to reassign will throw an error
-  } catch (error) {
-      console.log(error.message); // Output: Assignment to constant variable.
-  }
-
-
-
- .length property -
-

.length property

-

The `.length` property in JavaScript arrays is a built-in property that returns or sets the number of elements in an array. It provides a simple way to determine the size of an array, which is particularly useful for iterating over elements, performing operations based on the array's size, or dynamically managing data collections. The value of `.length` is always one greater than the highest index in the array because arrays in JavaScript are zero-based. Interestingly, the `.length` property is mutable, meaning it can be set explicitly to change the size of the array. For example, setting `.length` to a smaller value than the current length truncates the array, removing elements from the end, while setting it to a larger value than the current length adds undefined elements to the array, effectively expanding it. This ability to adjust the length makes the `.length` property a powerful tool for managing arrays efficiently. However, it's important to note that while `.length` provides a count of elements, it does not account for any undefined or empty slots in sparse arrays, which can lead to situations where the reported length doesn't correspond to the number of initialized elements. Overall, the `.length` property is a fundamental feature in JavaScript that plays a critical role in array manipulation and management.

-

Specifications

- 
-             
-  // Example 1: Accessing the length of an array
-  let fruits = ['apple', 'banana', 'cherry'];
-  console.log(fruits.length); // Output: 3
-  
-  // Example 2: Using length to iterate over an array
-  let colors = ['red', 'green', 'blue', 'yellow'];
-  for (let i = 0; i < colors.length; i++) {
-    console.log(colors[i]); // Output: 'red', 'green', 'blue', 'yellow'
-  }
-  
-  // Example 3: Truncating an array by setting a smaller length
-  let animals = ['dog', 'cat', 'rabbit', 'elephant'];
-  animals.length = 2; // Truncate to the first two elements
-  console.log(animals); // Output: ['dog', 'cat']
-  
-  // Example 4: Extending an array by setting a larger length
-  let numbers = [1, 2, 3];
-  numbers.length = 5; // Extend with undefined elements
-  console.log(numbers);
-  
-  // Example 5: Adding an element at the end using length
-  let cities = ['New York', 'Los Angeles'];
-  cities[cities.length] = 'Chicago'; // Add element at the next available index
-  console.log(cities); // Output: ['New York', 'Los Angeles', 'Chicago']
-  
-  // Example 6: Removing the last element using length
-  let sports = ['soccer', 'basketball', 'tennis'];
-  sports.length = sports.length - 1; // Remove the last element
-  console.log(sports); // Output: ['soccer', 'basketball']
-  
-  // Example 7: Creating an empty array by setting length to zero
-  let flowers = ['rose', 'tulip', 'daisy'];
-  flowers.length = 0; // Clear the entire array
-  console.log(flowers); // Output: []
-  
-  // Example 8: Using length to find the index of the last element
-  let cars = ['Toyota', 'Honda', 'Ford', 'BMW'];
-  let lastIndex = cars.length - 1; // Calculate the index of the last element
-  console.log(cars[lastIndex]); // Output: 'BMW'
-
-
-
- scope of arrays in functions -
-

scope of arrays in functions

-

In JavaScript, the scope of arrays within functions is governed by the principles of variable scope and how they are declared. Arrays declared inside a function using `var` are function-scoped, meaning they are accessible only within that function and are not available outside of it. If arrays are declared with `let` or `const` inside a function, they are block-scoped, which means they are confined to the block they are declared in, but within the same function, they act similarly to `var` regarding overall function scope. This encapsulation ensures that the array cannot be accessed or modified outside of its intended context, preventing potential conflicts and unintended side effects in larger codebases. When arrays are declared outside of functions and then accessed within, they fall under the category of global scope, unless a function redefines them with a local declaration. Passing arrays as arguments into functions does not alter their scope; the function simply receives a reference to the original array. This reference allows the function to modify the array's content, reflecting changes in the global or parent scope unless reassigned locally within the function. Thus, understanding how arrays interact with function scope is crucial for effective data manipulation and avoiding common pitfalls related to variable scope, such as accidental overwrites or unintended global state mutations.

-

Specifications

- 
-             
-  // Example 1: Function-scoped array with var
-  function arrayWithVar() {
-      var fruits = ['apple', 'banana', 'cherry'];
-      console.log(fruits); // Output: ['apple', 'banana', 'cherry']
-  }
-  arrayWithVar();
-  // console.log(fruits); // ReferenceError: fruits is not defined
-  
-  // Example 2: Block-scoped array with let
-  function arrayWithLet() {
-      if (true) {
-          let vegetables = ['carrot', 'broccoli', 'lettuce'];
-          console.log(vegetables); // Output: ['carrot', 'broccoli', 'lettuce']
-      }
-      // console.log(vegetables); // ReferenceError: vegetables is not defined
-  }
-  arrayWithLet();
-  
-  // Example 3: Block-scoped array with const
-  function arrayWithConst() {
-      const animals = ['dog', 'cat', 'rabbit'];
-      console.log(animals); // Output: ['dog', 'cat', 'rabbit']
-      if (true) {
-          const birds = ['sparrow', 'eagle'];
-          console.log(birds); // Output: ['sparrow', 'eagle']
-      }
-      // console.log(birds); // ReferenceError: birds is not defined
-  }
-  arrayWithConst();
-  
-  // Example 4: Global array accessed in a function
-  let colors = ['red', 'green', 'blue'];
-  function modifyColors() {
-      colors.push('yellow');
-      console.log(colors); // Output: ['red', 'green', 'blue', 'yellow']
-  }
-  modifyColors();
-  console.log(colors); // Output: ['red', 'green', 'blue', 'yellow']
-  
-  // Example 5: Local array shadows global array
-  let numbers = [1, 2, 3];
-  function shadowGlobalArray() {
-      let numbers = [4, 5, 6];
-      console.log(numbers); // Output: [4, 5, 6]
-  }
-  shadowGlobalArray();
-  console.log(numbers); // Output: [1, 2, 3]
-  
-  // Example 6: Modifying a global array inside a function
-  let scores = [10, 20, 30];
-  function updateScores() {
-      for (let i = 0; i < scores.length; i++) {
-          scores[i] += 10;
-      }
-      console.log(scores); // Output: [20, 30, 40]
-  }
-  updateScores();
-  console.log(scores); // Output: [20, 30, 40]
-  
-  // Example 7: Passing an array as a function argument
-  function addElement(arr) {
-      arr.push('newElement');
-      console.log(arr); // Output will depend on the passed array
-  }
-  let items = ['item1', 'item2'];
-  addElement(items); // Output: ['item1', 'item2', 'newElement']
-  console.log(items); // Output: ['item1', 'item2', 'newElement']
-  
-  // Example 8: Returning an array from a function
-  function createArray() {
-      let newArray = ['a', 'b', 'c'];
-      return newArray;
-  }
-  let returnedArray = createArray();
-  console.log(returnedArray); // Output: ['a', 'b', 'c']
-
-
-
- nested arrays -
-

nested arrays

-

Nested arrays in JavaScript, often referred to as multidimensional arrays, are arrays that contain other arrays as their elements. This structure allows developers to create complex data models, such as matrices, grids, or any hierarchical data that require multiple levels of grouping. Each element in a nested array can be accessed using a pair of indices: the first index specifies the outer array, and the second index specifies the element within the nested array. For example, in a two-dimensional array `let matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];`, `matrix[1][2]` would access the element `6`. Nested arrays provide a flexible way to handle data that is naturally organized in layers, such as a table with rows and columns. However, working with nested arrays can become complex as the number of dimensions increases, requiring careful index management to navigate through the levels. JavaScript offers various methods to manipulate nested arrays, such as `.map()`, `.reduce()`, and `.forEach()`, allowing developers to iterate and transform data effectively. Despite the complexity, nested arrays are invaluable for representing and processing structured data, making them an essential concept in JavaScript programming for handling multi-level data scenarios.

-

Specifications

- 
-             
-  // Example 1: Creating a simple nested array
-  let matrix = [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9]
-  ];
-  console.log(matrix); // Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
-  
-  // Example 2: Accessing elements in a nested array
-  let element = matrix[1][2];
-  console.log(element); // Output: 6 (second row, third column)
-  
-  // Example 3: Modifying an element in a nested array
-  matrix[2][1] = 10;
-  console.log(matrix); // Output: [[1, 2, 3], [4, 5, 6], [7, 10, 9]]
-  
-  // Example 4: Iterating over a nested array with nested loops
-  for (let i = 0; i < matrix.length; i++) {
-      for (let j = 0; j < matrix[i].length; j++) {
-          console.log(matrix[i][j]); // Output: 1, 2, 3, 4, 5, 6, 7, 10, 9
-      }
-  }
-  
-  // Example 5: Creating a 3D array
-  let cube = [
-      [
-          [1, 2], [3, 4]
-      ],
-      [
-          [5, 6], [7, 8]
-      ]
-  ];
-  console.log(cube[1][0][1]); // Output: 6 (second block, first row, second column)
-  
-  // Example 6: Using nested arrays to represent a tic-tac-toe board
-  let ticTacToeBoard = [
-      ['X', 'O', 'X'],
-      ['O', 'X', 'O'],
-      ['X', 'O', 'X']
-  ];
-  console.log(ticTacToeBoard[0][1]); // Output: 'O' (first row, second column)
-  
-  // Example 7: Flattening a nested array
-  let nested = [[1, 2], [3, 4], [5, 6]];
-  let flat = nested.reduce((acc, curr) => acc.concat(curr), []);
-  console.log(flat); // Output: [1, 2, 3, 4, 5, 6]
-  
-  // Example 8: Nesting arrays with mixed data types
-  let mixedNested = [
-      [1, 'a', true],
-      [2, 'b', false],
-      [3, 'c', true]
-  ];
-  console.log(mixedNested[1][2]); // Output: false (second row, third column)
-  
-  // Example 9: Adding a new row to a nested array
-  let newRow = [10, 11, 12];
-  matrix.push(newRow);
-  console.log(matrix); // Output: [[1, 2, 3], [4, 5, 6], [7, 10, 9], [10, 11, 12]]
-  
-  // Example 10: Removing a specific element from a nested array
-  let removedElement = matrix[0].pop(); // Removes the last element of the first row
-  console.log(removedElement); // Output: 3
-  console.log(matrix); // Output: [[1, 2], [4, 5, 6], [7, 10, 9], [10, 11, 12]]
-
-
-
Array Access Methods -
[11]
-
.at() method
-

.at() method

-

The `at()` method in JavaScript provides a way to access elements of an array using a specific index, including negative indices, which count from the end of the array. Unlike traditional bracket notation, where negative numbers are treated as non-existent, `at()` allows you to easily retrieve elements from the end of an array. For instance, `array.at(-1)` would return the last element. This method enhances code readability and reduces errors in accessing elements near the ends of arrays, especially in contexts where the array length might not be known beforehand.

-

Specifications

- 
-             
-  // 1. Accessing the first element
-  const array1 = [10, 20, 30];
-  console.log(array1.at(0)); // Output: 10
-  
-  // 2. Accessing the last element using a negative index
-  console.log(array1.at(-1)); // Output: 30
-  
-  // 3. Accessing the second-to-last element
-  console.log(array1.at(-2)); // Output: 20
-  
-  // 4. Using .at() on an empty array
-  const emptyArray = [];
-  console.log(emptyArray.at(0)); // Output: undefined
-  
-  // 5. Accessing an element beyond the array length
-  console.log(array1.at(5)); // Output: undefined
-  
-  // 6. Accessing an element using a negative index greater than array length
-  console.log(array1.at(-4)); // Output: undefined
-  
-  // 7. Accessing the first element in a string array
-  const fruits = ["apple", "banana", "cherry"];
-  console.log(fruits.at(0)); // Output: "apple"
-  
-  // 8. Accessing the last character of a string using .at()
-  const str = "hello";
-  console.log(str.at(-1)); // Output: "o"
-  
-  // 9. Using .at() on a TypedArray
-  const intArray = new Int8Array([1, 2, 3]);
-  console.log(intArray.at(1)); // Output: 2
-  
-  // 10. Accessing the first element in an array-like object
-  const arrayLike = { 0: 'a', 1: 'b', length: 2 };
-  console.log(Array.prototype.at.call(arrayLike, 0)); // Output: "a"
-
-
-
.indexOf() method
-

.indexOf() method

-

The `.indexOf()` method in JavaScript is used to determine the first occurrence of a specified value within a string or an array, returning the index of that value. If the value is found, the method returns the index (a zero-based integer) where the specified value first appears. If the value is not found, `.indexOf()` returns `-1`. This method is case-sensitive when used on strings, meaning that it distinguishes between uppercase and lowercase characters. Additionally, an optional second parameter can be provided to specify the position in the string or array from which the search should begin. This method is particularly useful for checking the existence and position of elements or substrings, facilitating tasks like validation, search operations, or conditional logic in JavaScript programs.

-

Specifications

- 
-             
-  // 1. Find the index of a string in an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  let indexBanana = fruits.indexOf("banana"); // returns 1
-  
-  // 2. Find the index of a number in an array of numbers
-  let numbers = [10, 20, 30, 40];
-  let indexThirty = numbers.indexOf(30); // returns 2
-  
-  // 3. Case-sensitive search in a string
-  let phrase = "Hello World";
-  let indexHello = phrase.indexOf("Hello"); // returns 0
-  
-  // 4. Search for a substring that is not present
-  let sentence = "The quick brown fox";
-  let indexCat = sentence.indexOf("cat"); // returns -1
-  
-  // 5. Using indexOf to find the first occurrence of a character in a string
-  let text = "banana";
-  let indexFirstA = text.indexOf("a"); // returns 1
-  
-  // 6. Search for an element in an array of objects by string property
-  let users = [{name: "Alice"}, {name: "Bob"}, {name: "Charlie"}];
-  let indexBob = users.map(user => user.name).indexOf("Bob"); // returns 1
-  
-  // 7. Using indexOf to find the index of the first whitespace in a string
-  let sentenceWithSpaces = "Find the space";
-  let indexSpace = sentenceWithSpaces.indexOf(" "); // returns 4
-  
-  // 8. Using indexOf with the second parameter to start search at a specific position
-  let repeatedText = "ababcabc";
-  let indexSecondB = repeatedText.indexOf("b", 3); // returns 4
-  
-  // 9. Find the index of an element in a sparse array
-  let sparseArray = [1, , , 4, 5];
-  let indexFour = sparseArray.indexOf(4); // returns 3
-  
-  // 10. Search for the first occurrence of an array element that exists more than once
-  let animals = ["dog", "cat", "dog", "bird"];
-  let indexDog = animals.indexOf("dog"); // returns 0    
-
-
-
.lastIndexOf() method
-

.lastIndexOf() method

-

The `.lastIndexOf()` method in JavaScript is used to find the last occurrence of a specified value within a string or an array, returning the index of that value. Unlike the `.indexOf()` method, which searches from the beginning, `.lastIndexOf()` searches from the end of the string or array towards the beginning. If the specified value is found, the method returns the index (a zero-based integer) where the value last appears; if the value is not found, it returns `-1`. This method is case-sensitive when dealing with strings, meaning it distinguishes between uppercase and lowercase characters. An optional second parameter can be provided, which indicates the position within the string or array at which to start the search backwards. This method is particularly useful when you need to find the last occurrence of an element or substring, allowing for more flexible search and manipulation operations in JavaScript.

-

Specifications

- 
-             
-  // 1. Find the last occurrence of a string in an array of strings
-  let fruits = ["apple", "banana", "cherry", "banana"];
-  let lastIndexBanana = fruits.lastIndexOf("banana"); // returns 3
-  
-  // 2. Find the last occurrence of a number in an array of numbers
-  let numbers = [10, 20, 30, 20, 40];
-  let lastIndexTwenty = numbers.lastIndexOf(20); // returns 3
-  
-  // 3. Find the last occurrence of a character in a string
-  let text = "hello world";
-  let lastIndexL = text.lastIndexOf("l"); // returns 9
-  
-  // 4. Search for the last occurrence of a substring that is not present
-  let sentence = "The quick brown fox";
-  let lastIndexCat = sentence.lastIndexOf("cat"); // returns -1
-  
-  // 5. Using lastIndexOf to find the last occurrence of a whitespace in a string
-  let sentenceWithSpaces = "Find the space";
-  let lastIndexSpace = sentenceWithSpaces.lastIndexOf(" "); // returns 9
-  
-  // 6. Using lastIndexOf with a specific starting position
-  let phrase = "ababcabc";
-  let lastIndexBBefore3 = phrase.lastIndexOf("b", 3); // returns 1
-  
-  // 7. Find the last occurrence of an element in a sparse array
-  let sparseArray = [1, , , 4, 5, 4];
-  let lastIndexFour = sparseArray.lastIndexOf(4); // returns 5
-  
-  // 8. Search for the last occurrence of an array element that exists more than once
-  let animals = ["dog", "cat", "dog", "bird"];
-  let lastIndexDog = animals.lastIndexOf("dog"); // returns 2
-  
-  // 9. Using lastIndexOf with an array of mixed data types
-  let mixedArray = [10, "10", 10, "ten"];
-  let lastIndexOf10 = mixedArray.lastIndexOf(10); // returns 2
-  
-  // 10. Find the last occurrence of a substring within a larger string
-  let longText = "The rain in Spain stays mainly in the plain";
-  let lastIndexIn = longText.lastIndexOf("in"); // returns 36        
-
-
-
.includes() method
-

.includes() method

-

The `.includes()` method in JavaScript is used to determine whether a specific value exists within a string or an array, returning a boolean value (`true` or `false`). When used on a string, it checks if a particular substring is present within that string, while in an array, it checks if a particular element is included among the array's elements. The method is case-sensitive for strings, meaning it differentiates between uppercase and lowercase characters. Additionally, an optional second parameter can be provided to specify the index at which the search should start. If the value is found anywhere within the specified portion of the string or array, the method returns `true`; otherwise, it returns `false`. This method is especially useful for quickly checking the presence of a value without needing to know its exact position, making it a convenient tool for validation and conditional logic in JavaScript programming.

-

Specifications

- 
-             
-  // 1. Check if an array includes a specific string
-  let fruits = ["apple", "banana", "cherry"];
-  let includesBanana = fruits.includes("banana"); // returns true
-  
-  // 2. Check if an array includes a specific number
-  let numbers = [10, 20, 30, 40];
-  let includesTwenty = numbers.includes(20); // returns true
-  
-  // 3. Case-sensitive check for a substring in a string
-  let phrase = "Hello World";
-  let includesHello = phrase.includes("Hello"); // returns true
-  
-  // 4. Check if a string does not include a specific substring
-  let sentence = "The quick brown fox";
-  let includesCat = sentence.includes("cat"); // returns false
-  
-  // 5. Check if an array includes an element, starting the search at a specific index
-  let colors = ["red", "green", "blue", "green"];
-  let includesGreenAfter2 = colors.includes("green", 2); // returns true
-  
-  // 6. Check if an array includes a value in a sparse array
-  let sparseArray = [1, , , 4, 5];
-  let includesFour = sparseArray.includes(4); // returns true
-  
-  // 7. Using includes to check for a boolean value in an array
-  let boolArray = [true, false, false, true];
-  let includesTrue = boolArray.includes(true); // returns true
-  
-  // 8. Check if a string includes a character at a specific position
-  let word = "javascript";
-  let includesJAfter3 = word.includes("j", 3); // returns false
-  
-  // 9. Check if an array includes a NaN value
-  let mixedArray = [10, "10", NaN, "ten"];
-  let includesNaN = mixedArray.includes(NaN); // returns true
-  
-  // 10. Check if an array includes an object reference
-  let obj1 = {name: "Alice"};
-  let obj2 = {name: "Bob"};
-  let objArray = [obj1, obj2];
-  let includesObj1 = objArray.includes(obj1); // returns true    
-
-
-
.find() method
-

.find() method

-

The `.find()` method in JavaScript is used to locate the first element in an array that satisfies a provided testing function, returning the value of that element. If no elements meet the condition specified by the function, the method returns `undefined`. The testing function is executed for each element in the array in index order until a match is found, at which point the search stops. The function itself takes three arguments: the current element being processed, the index of that element, and the array being traversed. The `.find()` method is particularly useful when you need to retrieve a specific item from an array based on a dynamic condition, such as finding an object with a certain property or a number that meets a particular criterion. Unlike methods that return indices, `.find()` returns the actual element, making it a powerful tool for filtering and searching through arrays in JavaScript.

-

Specifications

- 
-             
-  // 1. Find the first number greater than 20 in an array
-  let numbers = [10, 20, 30, 40];
-  let firstGreaterThanTwenty = numbers.find(num => num > 20); // returns 30
-  
-  // 2. Find the first even number in an array
-  let mixedNumbers = [1, 3, 7, 8, 10];
-  let firstEvenNumber = mixedNumbers.find(num => num % 2 === 0); // returns 8
-  
-  // 3. Find the first string with length greater than 5
-  let words = ["apple", "banana", "cherry", "date"];
-  let longWord = words.find(word => word.length > 5); // returns "banana"
-  
-  // 4. Find the first object with a specific property value
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let userBob = users.find(user => user.name === "Bob"); // returns {name: "Bob", age: 30}
-  
-  // 5. Find the first number less than 10 in a descending sorted array
-  let descendingNumbers = [50, 40, 30, 20, 10, 5];
-  let firstLessThanTen = descendingNumbers.find(num => num < 10); // returns 5
-  
-  // 6. Find the first string that includes a specific substring
-  let phrases = ["The quick brown fox", "jumps over", "the lazy dog"];
-  let phraseWithFox = phrases.find(phrase => phrase.includes("fox")); // returns "The quick brown fox"
-  
-  // 7. Find the first negative number in an array
-  let mixedValues = [10, -20, 30, -40];
-  let firstNegative = mixedValues.find(num => num < 0); // returns -20
-  
-  // 8. Find the first element in an array that is an instance of a specific class
-  class Car {
-      constructor(make, model) {
-          this.make = make;
-          this.model = model;
-      }
-  }
-  let vehicles = [
-      new Car("Toyota", "Camry"),
-      {make: "Ford", model: "F-150"},
-      new Car("Honda", "Civic")
-  ];
-  let firstCar = vehicles.find(vehicle => vehicle instanceof Car); // returns Car {make: "Toyota", model: "Camry"}
-  
-  // 9. Find the first array element that is greater than 100 in a multi-dimensional array
-  let multiArray = [[10, 20], [100, 150], [200, 250]];
-  let firstGreaterThan100 = multiArray.flat().find(num => num > 100); // returns 150
-  
-  // 10. Find the first element in a string array that starts with a specific letter
-  let names = ["Alice", "Bob", "Charlie", "David"];
-  let nameStartingWithC = names.find(name => name.startsWith("C")); // returns "Charlie"     
-
-
-
.findIndex() method
-

.findIndex() method

-

The `.findIndex()` method in JavaScript is used to identify the index of the first element in an array that satisfies a given testing function. It returns the index of this element as a zero-based integer. If no element passes the test, the method returns `-1`. The testing function is applied to each element in the array, starting from the first, and continues until it finds an element that meets the specified condition. The function provided to `.findIndex()` receives three arguments: the current element, its index, and the array itself. This method is particularly useful when you need to know the position of an element that meets certain criteria within an array, such as finding the index of an object with a specific property or identifying the location of a value that matches a particular condition. Unlike `.find()`, which returns the element itself, `.findIndex()` is focused on retrieving the index, making it essential for tasks that require knowledge of an element's position in an array.

-

Specifications

- 
-             
-  // 1. Find the index of the first number greater than 20 in an array
-  let numbers = [10, 20, 30, 40];
-  let indexGreaterThanTwenty = numbers.findIndex(num => num > 20); // returns 2
-  
-  // 2. Find the index of the first even number in an array
-  let mixedNumbers = [1, 3, 7, 8, 10];
-  let indexFirstEven = mixedNumbers.findIndex(num => num % 2 === 0); // returns 3
-  
-  // 3. Find the index of the first string with length greater than 5
-  let words = ["apple", "banana", "cherry", "date"];
-  let indexLongWord = words.findIndex(word => word.length > 5); // returns 1
-  
-  // 4. Find the index of the first object with a specific property value
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let indexBob = users.findIndex(user => user.name === "Bob"); // returns 1
-  
-  // 5. Find the index of the first number less than 10 in a descending sorted array
-  let descendingNumbers = [50, 40, 30, 20, 10, 5];
-  let indexFirstLessThanTen = descendingNumbers.findIndex(num => num < 10); // returns 5
-  
-  // 6. Find the index of the first string that includes a specific substring
-  let phrases = ["The quick brown fox", "jumps over", "the lazy dog"];
-  let indexPhraseWithFox = phrases.findIndex(phrase => phrase.includes("fox")); // returns 0
-  
-  // 7. Find the index of the first negative number in an array
-  let mixedValues = [10, -20, 30, -40];
-  let indexFirstNegative = mixedValues.findIndex(num => num < 0); // returns 1
-  
-  // 8. Find the index of the first element that is an instance of a specific class
-  class Car {
-      constructor(make, model) {
-          this.make = make;
-          this.model = model;
-      }
-  }
-  let vehicles = [
-      new Car("Toyota", "Camry"),
-      {make: "Ford", model: "F-150"},
-      new Car("Honda", "Civic")
-  ];
-  let indexFirstCar = vehicles.findIndex(vehicle => vehicle instanceof Car); // returns 0
-  
-  // 9. Find the index of the first array element that is greater than 100 in a multi-dimensional array
-  let multiArray = [[10, 20], [100, 150], [200, 250]];
-  let indexFirstGreaterThan100 = multiArray.flat().findIndex(num => num > 100); // returns 3
-  
-  // 10. Find the index of the first element in a string array that starts with a specific letter
-  let names = ["Alice", "Bob", "Charlie", "David"];
-  let indexNameStartingWithC = names.findIndex(name => name.startsWith("C")); // returns 2      
-
-
-
.findLast() method
-

.findLast() method

-

The `.findLast()` method in JavaScript is a relatively newer addition that allows you to locate the last element in an array that satisfies a specified testing function, returning the value of that element. If no elements in the array match the condition set by the testing function, the method returns `undefined`. Unlike the `.find()` method, which searches from the beginning of the array, `.findLast()` searches from the end towards the beginning, making it useful when you need the most recent element that meets a particular criterion. The testing function provided to `.findLast()` is called with three arguments: the current element, its index, and the array itself. This method is particularly useful in scenarios where the most recent or last occurrence of an element matching a condition is more relevant than the first, such as when searching through historical data or logs.

-

Specifications

- 
-             
-  // 1. Find the last number greater than 20 in an array
-  let numbers = [10, 20, 30, 40];
-  let lastGreaterThanTwenty = numbers.findLast(num => num > 20); // returns 40
-  
-  // 2. Find the last even number in an array
-  let mixedNumbers = [1, 3, 7, 8, 10];
-  let lastEvenNumber = mixedNumbers.findLast(num => num % 2 === 0); // returns 10
-  
-  // 3. Find the last string with length greater than 5
-  let words = ["apple", "banana", "cherry", "date"];
-  let lastLongWord = words.findLast(word => word.length > 5); // returns "banana"
-  
-  // 4. Find the last object with a specific property value
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35},
-      {name: "Bob", age: 40}
-  ];
-  let lastUserBob = users.findLast(user => user.name === "Bob"); // returns {name: "Bob", age: 40}
-  
-  // 5. Find the last number less than 10 in an array
-  let mixedNumbers2 = [50, 5, 40, 10, 3];
-  let lastLessThanTen = mixedNumbers2.findLast(num => num < 10); // returns 3
-  
-  // 6. Find the last string that includes a specific substring
-  let phrases = ["The quick brown fox", "jumps over", "the lazy dog", "over the moon"];
-  let lastPhraseWithOver = phrases.findLast(phrase => phrase.includes("over")); // returns "over the moon"
-  
-  // 7. Find the last negative number in an array
-  let mixedValues = [10, -20, 30, -40, 50];
-  let lastNegative = mixedValues.findLast(num => num < 0); // returns -40
-  
-  // 8. Find the last element in an array that is an instance of a specific class
-  class Animal {
-      constructor(type) {
-          this.type = type;
-      }
-  }
-  let creatures = [
-      new Animal("Dog"),
-      {type: "Cat"},
-      new Animal("Bird"),
-      {type: "Fish"}
-  ];
-  let lastAnimal = creatures.findLast(creature => creature instanceof Animal); // returns Animal {type: "Bird"}
-  
-  // 9. Find the last array element that is greater than 100 in a multi-dimensional array
-  let multiArray = [[10, 20], [100, 150], [200, 250]];
-  let lastGreaterThan100 = multiArray.flat().findLast(num => num > 100); // returns 250
-  
-  // 10. Find the last element in a string array that starts with a specific letter
-  let names = ["Alice", "Bob", "Charlie", "David", "Charles"];
-  let lastNameStartingWithC = names.findLast(name => name.startsWith("C")); // returns "Charles"   
-
-
-
.findLastIndex() method
-

.findLastIndex() method

-

The `.findLastIndex()` method in JavaScript is designed to return the index of the last element in an array that satisfies a given testing function. It searches the array from the end towards the beginning, returning the index of the first (in reverse order) element that meets the specified condition. If no such element is found, the method returns `-1`. The testing function passed to `.findLastIndex()` is invoked with three arguments: the current element, its index, and the array itself. This method is particularly useful when the position of the last matching element in an array is needed, such as when dealing with data that is ordered by time or priority, where the latest or most significant occurrence is more relevant. By providing the index of this element, `.findLastIndex()` allows for efficient access and manipulation based on the location of elements that meet specific criteria.

-

Specifications

- 
-             
-  // 1. Find the last index of a number greater than 20 in an array
-  let numbers = [10, 20, 30, 40];
-  let lastIndexGreaterThanTwenty = numbers.findLastIndex(num => num > 20); // returns 3
-  
-  // 2. Find the last index of an even number in an array
-  let mixedNumbers = [1, 3, 7, 8, 10];
-  let lastIndexEvenNumber = mixedNumbers.findLastIndex(num => num % 2 === 0); // returns 4
-  
-  // 3. Find the last index of a string with length greater than 5
-  let words = ["apple", "banana", "cherry", "date"];
-  let lastIndexLongWord = words.findLastIndex(word => word.length > 5); // returns 1
-  
-  // 4. Find the last index of an object with a specific property value
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35},
-      {name: "Bob", age: 40}
-  ];
-  let lastIndexUserBob = users.findLastIndex(user => user.name === "Bob"); // returns 3
-  
-  // 5. Find the last index of a number less than 10 in an array
-  let mixedNumbers2 = [50, 5, 40, 10, 3];
-  let lastIndexLessThanTen = mixedNumbers2.findLastIndex(num => num < 10); // returns 4
-  
-  // 6. Find the last index of a string that includes a specific substring
-  let phrases = ["The quick brown fox", "jumps over", "the lazy dog", "over the moon"];
-  let lastIndexPhraseWithOver = phrases.findLastIndex(phrase => phrase.includes("over")); // returns 3
-  
-  // 7. Find the last index of a negative number in an array
-  let mixedValues = [10, -20, 30, -40, 50];
-  let lastIndexNegative = mixedValues.findLastIndex(num => num < 0); // returns 3
-  
-  // 8. Find the last index of an element in an array that is an instance of a specific class
-  class Animal {
-      constructor(type) {
-          this.type = type;
-      }
-  }
-  let creatures = [
-      new Animal("Dog"),
-      {type: "Cat"},
-      new Animal("Bird"),
-      {type: "Fish"}
-  ];
-  let lastIndexAnimal = creatures.findLastIndex(creature => creature instanceof Animal); // returns 2
-  
-  // 9. Find the last index of an array element that is greater than 100 in a multi-dimensional array
-  let multiArray = [[10, 20], [100, 150], [200, 250]];
-  let lastIndexGreaterThan100 = multiArray.flat().findLastIndex(num => num > 100); // returns 5
-  
-  // 10. Find the last index of an element in a string array that starts with a specific letter
-  let names = ["Alice", "Bob", "Charlie", "David", "Charles"];
-  let lastIndexNameStartingWithC = names.findLastIndex(name => name.startsWith("C")); // returns 4 
-
-
-
.entries() method
-

.entries() method

-

The `.entries()` method in JavaScript is used to create an iterator object that contains key/value pairs for each index in an array. Each key/value pair is represented as an array, where the first element is the index (the key) and the second element is the value at that index. When called on an array, the `.entries()` method returns a new Array Iterator object that can be used in loops or with iteration methods like `for...of` to access both the index and the value simultaneously. This method is particularly useful when you need to process or manipulate both the indices and the values of an array, such as when performing operations that require knowledge of an element's position within the array. By providing a structured way to access both parts, `.entries()` enhances the flexibility and functionality of array iteration in JavaScript.

-

Specifications

- 
-             
-  // 1. Get entries of an array of numbers and iterate through them
-  let numbers = [10, 20, 30];
-  let entriesNumbers = numbers.entries();
-  for (let [index, value] of entriesNumbers) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: 10
-  // Index: 1, Value: 20
-  // Index: 2, Value: 30
-  
-  // 2. Get entries of a string array
-  let fruits = ["apple", "banana", "cherry"];
-  let entriesFruits = fruits.entries();
-  for (let [index, value] of entriesFruits) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: apple
-  // Index: 1, Value: banana
-  // Index: 2, Value: cherry
-  
-  // 3. Get entries of a mixed array (numbers and strings)
-  let mixedArray = [1, "two", 3];
-  let entriesMixedArray = mixedArray.entries();
-  for (let [index, value] of entriesMixedArray) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: 1
-  // Index: 1, Value: two
-  // Index: 2, Value: 3
-  
-  // 4. Use entries to iterate over an array of objects
-  let users = [
-    {name: "Alice", age: 25},
-    {name: "Bob", age: 30},
-    {name: "Charlie", age: 35}
-  ];
-  let entriesUsers = users.entries();
-  for (let [index, user] of entriesUsers) {
-    console.log(`Index: ${index}, Name: ${user.name}, Age: ${user.age}`);
-  }
-  // Output:
-  // Index: 0, Name: Alice, Age: 25
-  // Index: 1, Name: Bob, Age: 30
-  // Index: 2, Name: Charlie, Age: 35
-  
-  // 5. Use entries to iterate over an array and modify values
-  let letters = ["a", "b", "c"];
-  let entriesLetters = letters.entries();
-  for (let [index, value] of entriesLetters) {
-    letters[index] = value.toUpperCase();
-  }
-  console.log(letters); // Output: ["A", "B", "C"]
-  
-  // 6. Get entries of an array with sparse elements
-  let sparseArray = [10, , 30];
-  let entriesSparse = sparseArray.entries();
-  for (let [index, value] of entriesSparse) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: 10
-  // Index: 1, Value: undefined
-  // Index: 2, Value: 30
-  
-  // 7. Convert an entries iterator into an array
-  let colors = ["red", "green", "blue"];
-  let entriesColors = colors.entries();
-  let entriesArray = Array.from(entriesColors);
-  console.log(entriesArray);
-  // Output: [[0, "red"], [1, "green"], [2, "blue"]]
-  
-  // 8. Iterate over a nested array using entries
-  let nestedArray = [["a", "b"], ["c", "d"]];
-  let entriesNested = nestedArray.entries();
-  for (let [index, value] of entriesNested) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: a,b
-  // Index: 1, Value: c,d
-  
-  // 9. Use entries with a for...of loop to iterate through an array of booleans
-  let boolArray = [true, false, true];
-  let entriesBoolArray = boolArray.entries();
-  for (let [index, value] of entriesBoolArray) {
-    console.log(`Index: ${index}, Value: ${value}`);
-  }
-  // Output:
-  // Index: 0, Value: true
-  // Index: 1, Value: false
-  // Index: 2, Value: true
-  
-  // 10. Get entries of an array and map them to a new array with modified values
-  let scores = [100, 200, 300];
-  let entriesScores = scores.entries();
-  let modifiedScores = Array.from(entriesScores, ([index, value]) => [index, value + 10]);
-  console.log(modifiedScores);
-  // Output: [[0, 110], [1, 210], [2, 310]]  
-
-
-
.keys() method
-

.keys() method

-

The `.keys()` method in JavaScript is used to create an iterator object that contains the keys (or indices) for each element in an array. When invoked on an array, the method returns a new Array Iterator object that allows you to iterate over the array's indices. This can be particularly useful when you are only interested in the positions of elements within the array, rather than the values themselves. The `.keys()` method is often used in conjunction with looping constructs like `for...of` or in other scenarios where you need to access or manipulate the indices directly, such as when tracking element positions or performing operations that depend on the order of elements. By focusing on the indices alone, `.keys()` provides a streamlined way to work with the structure of an array without involving the array's values.

-

Specifications

- 
-             
-  // 1. Get the keys (indices) of an array of numbers and iterate through them
-  let numbers = [10, 20, 30];
-  let keysNumbers = numbers.keys();
-  for (let key of keysNumbers) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 2. Get the keys of an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  let keysFruits = fruits.keys();
-  for (let key of keysFruits) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 3. Get the keys of a mixed array (numbers and strings)
-  let mixedArray = [1, "two", 3];
-  let keysMixedArray = mixedArray.keys();
-  for (let key of keysMixedArray) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 4. Use keys to iterate over the indices of an array of objects
-  let users = [
-    {name: "Alice", age: 25},
-    {name: "Bob", age: 30},
-    {name: "Charlie", age: 35}
-  ];
-  let keysUsers = users.keys();
-  for (let key of keysUsers) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 5. Use keys to iterate over the indices of a sparse array
-  let sparseArray = [10, , 30];
-  let keysSparse = sparseArray.keys();
-  for (let key of keysSparse) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 6. Get the keys of an array and convert them to an array using Array.from()
-  let colors = ["red", "green", "blue"];
-  let keysColors = colors.keys();
-  let keysArray = Array.from(keysColors);
-  console.log(keysArray);
-  // Output: [0, 1, 2]
-  
-  // 7. Iterate over the keys of a nested array
-  let nestedArray = [["a", "b"], ["c", "d"]];
-  let keysNested = nestedArray.keys();
-  for (let key of keysNested) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  
-  // 8. Use keys with a for...of loop to iterate through the indices of an array of booleans
-  let boolArray = [true, false, true];
-  let keysBoolArray = boolArray.keys();
-  for (let key of keysBoolArray) {
-    console.log(`Key: ${key}`);
-  }
-  // Output:
-  // Key: 0
-  // Key: 1
-  // Key: 2
-  
-  // 9. Get the keys of an array and map them to a new array of doubled indices
-  let scores = [100, 200, 300];
-  let keysScores = scores.keys();
-  let doubledKeys = Array.from(keysScores, key => key * 2);
-  console.log(doubledKeys);
-  // Output: [0, 2, 4]
-  
-  // 10. Get the keys of an empty array
-  let emptyArray = [];
-  let keysEmpty = emptyArray.keys();
-  for (let key of keysEmpty) {
-    console.log(`Key: ${key}`);
-  }
-  // Output: (No output as the array is empty)
-
-
-
.values() method
-

.values() method

-

The `.values()` method in JavaScript is used to create an iterator object that contains the values for each element in an array. When called on an array, this method returns a new Array Iterator object that can be used to iterate through the array's values in the order they appear. This method is particularly useful when you need to process or examine the values of an array without concern for their corresponding indices. By using `.values()` in conjunction with a `for...of` loop or other iteration constructs, you can efficiently access and manipulate each element's value. This method provides a clear and straightforward way to work with the contents of an array, making it a handy tool for scenarios where the focus is solely on the data within the array, rather than its structure or order.

-

Specifications

- 
-             
-  // 1. Get the values of an array of numbers and iterate through them
-  let numbers = [10, 20, 30];
-  let valuesNumbers = numbers.values();
-  for (let value of valuesNumbers) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: 10
-  // Value: 20
-  // Value: 30
-  
-  // 2. Get the values of an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  let valuesFruits = fruits.values();
-  for (let value of valuesFruits) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: apple
-  // Value: banana
-  // Value: cherry
-  
-  // 3. Get the values of a mixed array (numbers and strings)
-  let mixedArray = [1, "two", 3];
-  let valuesMixedArray = mixedArray.values();
-  for (let value of valuesMixedArray) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: 1
-  // Value: two
-  // Value: 3
-  
-  // 4. Use values to iterate over an array of objects
-  let users = [
-    {name: "Alice", age: 25},
-    {name: "Bob", age: 30},
-    {name: "Charlie", age: 35}
-  ];
-  let valuesUsers = users.values();
-  for (let value of valuesUsers) {
-    console.log(`Name: ${value.name}, Age: ${value.age}`);
-  }
-  // Output:
-  // Name: Alice, Age: 25
-  // Name: Bob, Age: 30
-  // Name: Charlie, Age: 35
-  
-  // 5. Use values to iterate over a sparse array
-  let sparseArray = [10, , 30];
-  let valuesSparse = sparseArray.values();
-  for (let value of valuesSparse) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: 10
-  // Value: undefined
-  // Value: 30
-  
-  // 6. Get the values of an array and convert them to an array using Array.from()
-  let colors = ["red", "green", "blue"];
-  let valuesColors = colors.values();
-  let valuesArray = Array.from(valuesColors);
-  console.log(valuesArray);
-  // Output: ["red", "green", "blue"]
-  
-  // 7. Iterate over the values of a nested array
-  let nestedArray = [["a", "b"], ["c", "d"]];
-  let valuesNested = nestedArray.values();
-  for (let value of valuesNested) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: a,b
-  // Value: c,d
-  
-  // 8. Use values with a for...of loop to iterate through the values of an array of booleans
-  let boolArray = [true, false, true];
-  let valuesBoolArray = boolArray.values();
-  for (let value of valuesBoolArray) {
-    console.log(`Value: ${value}`);
-  }
-  // Output:
-  // Value: true
-  // Value: false
-  // Value: true
-  
-  // 9. Get the values of an array and map them to a new array of doubled values
-  let scores = [100, 200, 300];
-  let valuesScores = scores.values();
-  let doubledValues = Array.from(valuesScores, value => value * 2);
-  console.log(doubledValues);
-  // Output: [200, 400, 600]
-  
-  // 10. Get the values of an empty array
-  let emptyArray = [];
-  let valuesEmpty = emptyArray.values();
-  for (let value of valuesEmpty) {
-    console.log(`Value: ${value}`);
-  }
-  // Output: (No output as the array is empty)   
-
-
-
Array Transformation Methods -
[09]
-
.concat() method
-

.concat() method

-

The `.concat()` method in JavaScript is used to merge two or more arrays into a single new array. When called on an array, the method takes one or more arrays or values as arguments and appends them to the end of the original array, creating a new array that contains all the elements from the original and the provided arrays or values in the order they were passed. Importantly, `.concat()` does not alter the original array but instead returns a new array with the combined elements, ensuring that the original data remains unchanged. This method is particularly useful for combining datasets, adding elements to an array without mutating the original, or creating a composite array from multiple sources. Because `.concat()` can accept both arrays and individual values as arguments, it provides a flexible and powerful way to build and manipulate arrays in JavaScript.

-

Specifications

- 
-             
-  // 1. Concatenate two arrays of numbers
-  let array1 = [1, 2, 3];
-  let array2 = [4, 5, 6];
-  let concatenatedArray = array1.concat(array2);
-  console.log(concatenatedArray); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  
-  // 2. Concatenate multiple arrays of strings
-  let fruits1 = ["apple", "banana"];
-  let fruits2 = ["cherry", "date"];
-  let fruits3 = ["elderberry", "fig"];
-  let allFruits = fruits1.concat(fruits2, fruits3);
-  console.log(allFruits); 
-  // Output: ["apple", "banana", "cherry", "date", "elderberry", "fig"]
-  
-  // 3. Concatenate an array with additional elements
-  let numbers = [10, 20, 30];
-  let moreNumbers = numbers.concat(40, 50);
-  console.log(moreNumbers); 
-  // Output: [10, 20, 30, 40, 50]
-  
-  // 4. Concatenate nested arrays
-  let nestedArray1 = [[1], [2]];
-  let nestedArray2 = [[3], [4]];
-  let concatenatedNestedArray = nestedArray1.concat(nestedArray2);
-  console.log(concatenatedNestedArray); 
-  // Output: [[1], [2], [3], [4]]
-  
-  // 5. Concatenate arrays with different types of elements
-  let mixedArray1 = [1, "two"];
-  let mixedArray2 = [true, {name: "Alice"}];
-  let concatenatedMixedArray = mixedArray1.concat(mixedArray2);
-  console.log(concatenatedMixedArray); 
-  // Output: [1, "two", true, {name: "Alice"}]
-  
-  // 6. Concatenate arrays with empty arrays
-  let arrayWithEmpty = [1, 2, 3];
-  let emptyArray = [];
-  let resultArray = arrayWithEmpty.concat(emptyArray);
-  console.log(resultArray); 
-  // Output: [1, 2, 3]
-  
-  // 7. Concatenate an array with itself
-  let letters = ["a", "b", "c"];
-  let repeatedLetters = letters.concat(letters);
-  console.log(repeatedLetters); 
-  // Output: ["a", "b", "c", "a", "b", "c"]
-  
-  // 8. Concatenate arrays and non-array values
-  let values = [100, 200];
-  let moreValues = values.concat(300, [400, 500]);
-  console.log(moreValues); 
-  // Output: [100, 200, 300, 400, 500]
-  
-  // 9. Concatenate arrays with undefined values
-  let numbersWithUndefined = [1, 2, undefined];
-  let moreNumbersWithUndefined = [undefined, 3, 4];
-  let concatenatedWithUndefined = numbersWithUndefined.concat(moreNumbersWithUndefined);
-  console.log(concatenatedWithUndefined); 
-  // Output: [1, 2, undefined, undefined, 3, 4]
-  
-  // 10. Concatenate arrays of objects
-  let objects1 = [{name: "Alice"}, {name: "Bob"}];
-  let objects2 = [{name: "Charlie"}, {name: "David"}];
-  let concatenatedObjects = objects1.concat(objects2);
-  console.log(concatenatedObjects); 
-  // Output: [{name: "Alice"}, {name: "Bob"}, {name: "Charlie"}, {name: "David"}]  
-
-
-
.copyWithin() method
-

.copyWithin() method

-

The `.copyWithin()` method in JavaScript is used to shallowly copy a portion of an array to another location within the same array, modifying the array in place. This method takes three arguments: the target index where the copy will begin, the start index of the source data to be copied, and an optional end index which specifies the end of the source data (the end index is non-inclusive). If the end index is not provided, it defaults to the length of the array. The method does not add any new elements but rather overwrites existing ones with the copied values. Since `.copyWithin()` modifies the array directly, it can be useful for rearranging elements within an array quickly without the need for additional memory or new arrays. However, because it mutates the original array, it should be used with care when the preservation of the original array structure is important.

-

Specifications

- 
-             
-  // 1. Copy elements within the same array (starting from index 0 to index 2) to index 3
-  let array1 = [1, 2, 3, 4, 5];
-  array1.copyWithin(3, 0, 2);
-  console.log(array1); 
-  // Output: [1, 2, 3, 1, 2]
-  
-  // 2. Copy elements to the beginning of the array
-  let array2 = [10, 20, 30, 40, 50];
-  array2.copyWithin(0, 3);
-  console.log(array2); 
-  // Output: [40, 50, 30, 40, 50]
-  
-  // 3. Copy elements to a specific index in the array
-  let array3 = ["a", "b", "c", "d", "e"];
-  array3.copyWithin(1, 3, 4);
-  console.log(array3); 
-  // Output: ["a", "d", "c", "d", "e"]
-  
-  // 4. Copy elements within the array using negative indices
-  let array4 = [1, 2, 3, 4, 5];
-  array4.copyWithin(-2, 0, 2);
-  console.log(array4); 
-  // Output: [1, 2, 3, 1, 2]
-  
-  // 5. Copy the entire array starting from index 2 to the start of the array
-  let array5 = ["x", "y", "z"];
-  array5.copyWithin(0, 2);
-  console.log(array5); 
-  // Output: ["z", "y", "z"]
-  
-  // 6. Copy a part of the array to overwrite itself
-  let array6 = [1, 2, 3, 4, 5];
-  array6.copyWithin(2, 1, 4);
-  console.log(array6); 
-  // Output: [1, 2, 2, 3, 4]
-  
-  // 7. Copy elements to the same position (no changes to the array)
-  let array7 = [10, 20, 30, 40];
-  array7.copyWithin(1, 1);
-  console.log(array7); 
-  // Output: [10, 20, 30, 40]
-  
-  // 8. Use copyWithin with no end parameter (copies from index 2 to end)
-  let array8 = ["a", "b", "c", "d"];
-  array8.copyWithin(1, 2);
-  console.log(array8); 
-  // Output: ["a", "c", "d", "d"]
-  
-  // 9. Copy the first two elements to the end of the array
-  let array9 = [5, 10, 15, 20];
-  array9.copyWithin(-2, 0, 2);
-  console.log(array9); 
-  // Output: [5, 10, 5, 10]
-  
-  // 10. Copy elements within an array of objects
-  let array10 = [{a: 1}, {b: 2}, {c: 3}, {d: 4}];
-  array10.copyWithin(2, 0, 2);
-  console.log(array10); 
-  // Output: [{a: 1}, {b: 2}, {a: 1}, {b: 2}]
-
-
-
.fill() method
-

.fill() method

-

The `.fill()` method in JavaScript is used to replace all or part of the elements in an array with a static value, modifying the array in place. This method allows you to specify a value that will be used to fill the array and can target specific portions of the array by providing optional start and end indices. The start index determines where the filling begins, and the end index (non-inclusive) determines where it stops. If no start and end indices are provided, the entire array is filled with the specified value. The `.fill()` method is particularly useful for quickly populating an array with a single value, resetting array elements, or initializing arrays with a default value. Since `.fill()` changes the original array, it’s important to use it in contexts where mutating the array is desired, as it does not create a new array but directly alters the existing one.

-

Specifications

- 
-             
-  // 1. Fill the entire array with a single value
-  let array1 = [1, 2, 3, 4, 5];
-  array1.fill(0);
-  console.log(array1); 
-  // Output: [0, 0, 0, 0, 0]
-  
-  // 2. Fill the array with a value starting from a specific index
-  let array2 = [1, 2, 3, 4, 5];
-  array2.fill(9, 2);
-  console.log(array2); 
-  // Output: [1, 2, 9, 9, 9]
-  
-  // 3. Fill the array with a value between two specific indices
-  let array3 = [1, 2, 3, 4, 5];
-  array3.fill(7, 1, 3);
-  console.log(array3); 
-  // Output: [1, 7, 7, 4, 5]
-  
-  // 4. Fill the array with a string value
-  let array4 = [1, 2, 3, 4, 5];
-  array4.fill("x");
-  console.log(array4); 
-  // Output: ["x", "x", "x", "x", "x"]
-  
-  // 5. Fill the array with an object reference
-  let array5 = [1, 2, 3];
-  array5.fill({a: 1});
-  console.log(array5); 
-  // Output: [{a: 1}, {a: 1}, {a: 1}]
-  
-  // 6. Fill only the last two elements of the array
-  let array6 = [1, 2, 3, 4, 5];
-  array6.fill(8, -2);
-  console.log(array6); 
-  // Output: [1, 2, 3, 8, 8]
-  
-  // 7. Fill the array using a negative start index and end index
-  let array7 = [1, 2, 3, 4, 5];
-  array7.fill(6, -3, -1);
-  console.log(array7); 
-  // Output: [1, 2, 6, 6, 5]
-  
-  // 8. Fill a sparse array
-  let array8 = new Array(5);
-  array8.fill(4);
-  console.log(array8); 
-  // Output: [4, 4, 4, 4, 4]
-  
-  // 9. Fill the array with boolean values
-  let array9 = [0, 1, 2, 3];
-  array9.fill(true, 1, 3);
-  console.log(array9); 
-  // Output: [0, true, true, 3]
-  
-  // 10. Fill an array with null values
-  let array10 = [5, 10, 15, 20];
-  array10.fill(null);
-  console.log(array10); 
-  // Output: [null, null, null, null]   
-
-
-
.filter() method
-

.filter() method

-

The `.filter()` method in JavaScript is used to create a new array containing all the elements of an existing array that meet a specified condition, leaving the original array unchanged. This method takes a callback function as an argument, which is applied to each element of the array. The callback function returns a boolean value—`true` for elements that should be included in the new array and `false` for those that should be excluded. The `.filter()` method is particularly powerful for extracting a subset of data from an array based on specific criteria, such as filtering out unwanted items, selecting elements that match a certain property, or processing arrays in a way that removes irrelevant data. Since `.filter()` does not modify the original array but instead returns a new array with only the elements that pass the test, it is a safe and effective tool for refining and manipulating data sets in JavaScript.

-

Specifications

- 
-             
-  // 1. Filter out numbers greater than 10
-  let numbers = [5, 10, 15, 20];
-  let filteredNumbers = numbers.filter(num => num > 10);
-  console.log(filteredNumbers); 
-  // Output: [15, 20]
-  
-  // 2. Filter out odd numbers
-  let mixedNumbers = [1, 2, 3, 4, 5];
-  let evenNumbers = mixedNumbers.filter(num => num % 2 === 0);
-  console.log(evenNumbers); 
-  // Output: [2, 4]
-  
-  // 3. Filter strings with length greater than 3
-  let strings = ["a", "abc", "abcd", "abcde"];
-  let longStrings = strings.filter(str => str.length > 3);
-  console.log(longStrings); 
-  // Output: ["abcd", "abcde"]
-  
-  // 4. Filter out falsy values from an array
-  let values = [0, "hello", false, 42, "", null];
-  let truthyValues = values.filter(Boolean);
-  console.log(truthyValues); 
-  // Output: ["hello", 42]
-  
-  // 5. Filter an array of objects by a property value
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 20},
-      {name: "Charlie", age: 30}
-  ];
-  let adults = users.filter(user => user.age >= 21);
-  console.log(adults); 
-  // Output: [{name: "Alice", age: 25}, {name: "Charlie", age: 30}]
-  
-  // 6. Filter elements in an array that are strings
-  let mixedArray = [1, "two", 3, "four", 5];
-  let stringsOnly = mixedArray.filter(item => typeof item === "string");
-  console.log(stringsOnly); 
-  // Output: ["two", "four"]
-  
-  // 7. Filter array elements that contain a specific substring
-  let phrases = ["apple pie", "banana split", "cherry tart"];
-  let withApple = phrases.filter(phrase => phrase.includes("apple"));
-  console.log(withApple); 
-  // Output: ["apple pie"]
-  
-  // 8. Filter elements that are instances of a specific class
-  class Animal {
-      constructor(name) {
-          this.name = name;
-      }
-  }
-  let animals = [new Animal("Dog"), {type: "Cat"}, new Animal("Bird")];
-  let onlyAnimals = animals.filter(item => item instanceof Animal);
-  console.log(onlyAnimals); 
-  // Output: [Animal {name: "Dog"}, Animal {name: "Bird"}]
-  
-  // 9. Filter numbers in an array that are prime
-  let primes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(num => {
-      for (let i = 2; i < num; i++) {
-          if (num % i === 0) return false;
-      }
-      return num > 1;
-  });
-  console.log(primes); 
-  // Output: [2, 3, 5, 7]
-  
-  // 10. Filter an array of nested arrays to only include arrays with a specific length
-  let nestedArrays = [[1, 2], [3, 4, 5], [6]];
-  let lengthTwo = nestedArrays.filter(arr => arr.length === 2);
-  console.log(lengthTwo); 
-  // Output: [[1, 2]]
-
-
-
.map() method
-

.map() method

-

The `.map()` method in JavaScript is used to create a new array by applying a specified function to each element of an existing array. This method takes a callback function as an argument, which is executed on every element in the array, producing a new value for each element. The result is a new array of the same length, with each element transformed according to the logic defined in the callback function. The original array remains unchanged, as `.map()` does not alter the source array but rather generates a new one based on the transformations. This method is particularly useful for scenarios where you need to perform consistent operations on every element of an array, such as converting data formats, computing new values, or extracting specific properties from objects. By providing a flexible and efficient way to transform arrays, `.map()` is a fundamental tool in functional programming within JavaScript.

-

Specifications

- 
-             
-  // 1. Double each number in an array
-  let numbers = [1, 2, 3, 4];
-  let doubled = numbers.map(num => num * 2);
-  console.log(doubled); 
-  // Output: [2, 4, 6, 8]
-  
-  // 2. Convert an array of strings to uppercase
-  let strings = ["hello", "world"];
-  let uppercased = strings.map(str => str.toUpperCase());
-  console.log(uppercased); 
-  // Output: ["HELLO", "WORLD"]
-  
-  // 3. Extract a specific property from an array of objects
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let names = users.map(user => user.name);
-  console.log(names); 
-  // Output: ["Alice", "Bob", "Charlie"]
-  
-  // 4. Add a suffix to each string in an array
-  let fruits = ["apple", "banana", "cherry"];
-  let suffixedFruits = fruits.map(fruit => fruit + " pie");
-  console.log(suffixedFruits); 
-  // Output: ["apple pie", "banana pie", "cherry pie"]
-  
-  // 5. Create an array of object keys as an array of arrays
-  let objArray = [{a: 1}, {b: 2}, {c: 3}];
-  let keysArray = objArray.map(obj => Object.keys(obj));
-  console.log(keysArray); 
-  // Output: [["a"], ["b"], ["c"]]
-  
-  // 6. Calculate the square of each number in an array
-  let nums = [1, 2, 3, 4];
-  let squares = nums.map(num => num ** 2);
-  console.log(squares); 
-  // Output: [1, 4, 9, 16]
-  
-  // 7. Format an array of numbers as currency strings
-  let amounts = [100, 200, 300];
-  let formattedAmounts = amounts.map(amount => `$${amount.toFixed(2)}`);
-  console.log(formattedAmounts); 
-  // Output: ["$100.00", "$200.00", "$300.00"]
-  
-  // 8. Convert an array of boolean values to their opposite
-  let booleans = [true, false, true, false];
-  let opposites = booleans.map(bool => !bool);
-  console.log(opposites); 
-  // Output: [false, true, false, true]
-  
-  // 9. Create an array of lengths of strings
-  let words = ["cat", "elephant", "giraffe"];
-  let lengths = words.map(word => word.length);
-  console.log(lengths); 
-  // Output: [3, 8, 7]
-  
-  // 10. Generate an array of HTML list items from an array of strings
-  let items = ["item1", "item2", "item3"];
-  let htmlListItems = items.map(item => `
  • ${item}
    • `);
-  console.log(htmlListItems); 
-  // Output: ["
  • item1
    • ", "
  • item2
    • ", "
  • item3
    • "]       
-
    -
    -
    .flat() method
    -

    .flat() method

    -

    The `.flat()` method in JavaScript is used to create a new array by flattening nested arrays up to a specified depth, effectively reducing the dimensionality of the array structure. When called on an array, `.flat()` returns a new array where sub-arrays are concatenated into the main array, based on the depth level provided as an argument. If no depth is specified, `.flat()` defaults to a depth of 1, meaning it will only flatten one level of nested arrays. For example, it will turn `[1, [2, [3]]]` into `[1, 2, [3]]`. If you provide a greater depth, it will continue flattening deeper levels of nested arrays. This method is particularly useful for simplifying complex, multi-dimensional arrays into more manageable, single-level arrays, especially when dealing with data that has been nested multiple times. By creating a new, flattened array without altering the original, `.flat()` provides a straightforward way to handle and manipulate deeply nested data structures in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Flatten a simple nested array by one level
-  let array1 = [1, [2, 3], [4, 5]];
-  let flatArray1 = array1.flat();
-  console.log(flatArray1); 
-  // Output: [1, 2, 3, 4, 5]
-  
-  // 2. Flatten a deeply nested array by one level
-  let array2 = [1, [2, [3, 4]], 5];
-  let flatArray2 = array2.flat();
-  console.log(flatArray2); 
-  // Output: [1, 2, [3, 4], 5]
-  
-  // 3. Flatten a deeply nested array completely (using Infinity)
-  let array3 = [1, [2, [3, [4, 5]]]];
-  let flatArray3 = array3.flat(Infinity);
-  console.log(flatArray3); 
-  // Output: [1, 2, 3, 4, 5]
-  
-  // 4. Flatten an array with empty slots (sparse array)
-  let array4 = [1, , 3, [4, 5]];
-  let flatArray4 = array4.flat();
-  console.log(flatArray4); 
-  // Output: [1, 3, 4, 5]
-  
-  // 5. Flatten an array of arrays and filter out `null` values
-  let array5 = [[1, 2], [3, null], [4, 5]];
-  let flatArray5 = array5.flat().filter(x => x !== null);
-  console.log(flatArray5); 
-  // Output: [1, 2, 3, 4, 5]
-  
-  // 6. Flatten a 3-level nested array by two levels
-  let array6 = [1, [2, [3, 4]], 5];
-  let flatArray6 = array6.flat(2);
-  console.log(flatArray6); 
-  // Output: [1, 2, 3, 4, 5]
-  
-  // 7. Flatten an array of objects with arrays as properties
-  let array7 = [{a: [1, 2]}, {b: [3, 4]}, {c: [5]}];
-  let flatArray7 = array7.map(obj => Object.values(obj).flat());
-  console.log(flatArray7); 
-  // Output: [[1, 2], [3, 4], [5]]
-  
-  // 8. Flatten an array with a mix of strings and nested arrays
-  let array8 = ["a", ["b", "c"], ["d", ["e", "f"]]];
-  let flatArray8 = array8.flat(2);
-  console.log(flatArray8); 
-  // Output: ["a", "b", "c", "d", "e", "f"]
-  
-  // 9. Flatten an array containing boolean values and nested arrays
-  let array9 = [true, [false, [true, false]]];
-  let flatArray9 = array9.flat(Infinity);
-  console.log(flatArray9); 
-  // Output: [true, false, true, false]
-  
-  // 10. Flatten an array of arrays where each sub-array has different depths
-  let array10 = [[1, 2, [3]], [[4, 5]], 6];
-  let flatArray10 = array10.flat(2);
-  console.log(flatArray10); 
-  // Output: [1, 2, 3, 4, 5, 6]  
-
    -
    -
    .flatMap() method
    -

    .flatMap() method

    -

    The `.flatMap()` method in JavaScript is a versatile and powerful array method that combines the operations of `.map()` and `.flat()` into a single step. It first applies a mapping function to each element of the array, which can return an array itself, and then flattens the result by one level. This means that for each element, the mapping function can produce multiple elements that will be included in the final flattened array. The `.flatMap()` method is particularly useful when you need to transform and flatten an array in one go, such as when you want to process an array of strings into an array of words or when dealing with arrays that require both transformation and reduction in nesting. Like `.map()`, it does not modify the original array but instead returns a new array. By combining these two operations efficiently, `.flatMap()` simplifies scenarios where mapping and flattening are commonly needed together, making code cleaner and more concise.

    -

    Specifications

    - 
    -             
-  // 1. Map each element to an array and flatten the result by one level
-  let numbers = [1, 2, 3];
-  let doubledAndFlattened = numbers.flatMap(num => [num, num * 2]);
-  console.log(doubledAndFlattened);
-  // Output: [1, 2, 2, 4, 3, 6]
-  
-  // 2. Split each string in an array into characters and flatten the result
-  let words = ["hello", "world"];
-  let chars = words.flatMap(word => word.split(''));
-  console.log(chars);
-  // Output: ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]
-  
-  // 3. Map and remove `null` values in a single step
-  let numbersWithNull = [1, null, 2, null, 3];
-  let noNulls = numbersWithNull.flatMap(num => num !== null ? [num] : []);
-  console.log(noNulls);
-  // Output: [1, 2, 3]
-  
-  // 4. Map and add extra elements
-  let nums = [1, 2, 3];
-  let withExtraZeros = nums.flatMap(num => [num, 0]);
-  console.log(withExtraZeros);
-  // Output: [1, 0, 2, 0, 3, 0]
-  
-  // 5. Flatten an array of arrays and double each number
-  let arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
-  let doubledNumbers = arrayOfArrays.flatMap(arr => arr.map(num => num * 2));
-  console.log(doubledNumbers);
-  // Output: [2, 4, 6, 8, 10, 12]
-  
-  // 6. Extract and flatten values from objects within an array
-  let people = [{name: "Alice", skills: ["JS", "React"]}, {name: "Bob", skills: ["Python", "Django"]}];
-  let allSkills = people.flatMap(person => person.skills);
-  console.log(allSkills);
-  // Output: ["JS", "React", "Python", "Django"]
-  
-  // 7. Flatten arrays and add indices as extra elements
-  let items = ["a", "b", "c"];
-  let itemsWithIndex = items.flatMap((item, index) => [item, index]);
-  console.log(itemsWithIndex);
-  // Output: ["a", 0, "b", 1, "c", 2]
-  
-  // 8. Map and flatten nested objects
-  let nestedObjects = [{a: {x: 1}}, {b: {y: 2}}, {c: {z: 3}}];
-  let flattenedObjects = nestedObjects.flatMap(obj => Object.values(obj));
-  console.log(flattenedObjects);
-  // Output: [{x: 1}, {y: 2}, {z: 3}]
-  
-  // 9. Create pairs of elements from two arrays
-  let arr1 = [1, 2];
-  let arr2 = ["a", "b"];
-  let pairs = arr1.flatMap(num => arr2.map(letter => [num, letter]));
-  console.log(pairs);
-  // Output: [[1, "a"], [1, "b"], [2, "a"], [2, "b"]]
-  
-  // 10. Map and flatten numbers by converting them to ranges
-  let ranges = [1, 4, 7];
-  let expandedRanges = ranges.flatMap(num => [num, num + 1, num + 2]);
-  console.log(expandedRanges);
-  // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]
-
    -
    -
    .slice() method
    -

    .slice() method

    -

    The `.slice()` method in JavaScript is used to create a shallow copy of a portion of an array or string, without modifying the original array or string. When called on an array or string, it takes two arguments: the start index, which is the beginning of the section to be copied, and the optional end index, which is non-inclusive and defines where the section ends. If the end index is not provided, `.slice()` will include all elements from the start index to the end of the array or string. This method is particularly useful for extracting specific segments, creating sub-arrays or substrings, or duplicating parts of data while leaving the original intact. Since `.slice()` returns a new array or string, it is a non-destructive operation that allows for flexible data manipulation and extraction in JavaScript, making it a valuable tool for working with sequences of elements.

    -

    Specifications

    - 
    -             
-  // 1. Extract a portion of an array
-  let numbers = [1, 2, 3, 4, 5];
-  let slicedNumbers = numbers.slice(1, 4);
-  console.log(slicedNumbers); 
-  // Output: [2, 3, 4]
-  
-  // 2. Slice the first two elements of an array
-  let fruits = ["apple", "banana", "cherry", "date"];
-  let firstTwoFruits = fruits.slice(0, 2);
-  console.log(firstTwoFruits); 
-  // Output: ["apple", "banana"]
-  
-  // 3. Slice from a specific index to the end of the array
-  let letters = ["a", "b", "c", "d", "e"];
-  let slicedFromC = letters.slice(2);
-  console.log(slicedFromC); 
-  // Output: ["c", "d", "e"]
-  
-  // 4. Slice the last two elements of an array using negative indices
-  let colors = ["red", "green", "blue", "yellow"];
-  let lastTwoColors = colors.slice(-2);
-  console.log(lastTwoColors); 
-  // Output: ["blue", "yellow"]
-  
-  // 5. Create a shallow copy of an array using slice
-  let originalArray = [1, 2, 3];
-  let copiedArray = originalArray.slice();
-  console.log(copiedArray); 
-  // Output: [1, 2, 3]
-  
-  // 6. Slice an array without the first and last elements
-  let arrayWithBounds = [10, 20, 30, 40, 50];
-  let middleElements = arrayWithBounds.slice(1, -1);
-  console.log(middleElements); 
-  // Output: [20, 30, 40]
-  
-  // 7. Slice a string into an array of characters
-  let str = "JavaScript";
-  let slicedStr = str.split("").slice(4);
-  console.log(slicedStr); 
-  // Output: ["S", "c", "r", "i", "p", "t"]
-  
-  // 8. Slice a portion of a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6], [7, 8]];
-  let slicedNested = nestedArray.slice(1, 3);
-  console.log(slicedNested); 
-  // Output: [[3, 4], [5, 6]]
-  
-  // 9. Slice an array of objects based on indices
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35},
-      {name: "David", age: 40}
-  ];
-  let slicedUsers = users.slice(1, 3);
-  console.log(slicedUsers); 
-  // Output: [{name: "Bob", age: 30}, {name: "Charlie", age: 35}]
-  
-  // 10. Use slice to reverse a portion of an array
-  let numArray = [10, 20, 30, 40, 50];
-  let reversedSlice = numArray.slice(1, 4).reverse();
-  console.log(reversedSlice); 
-  // Output: [40, 30, 20]
-
    -
    -
    .splice() method
    -

    .splice() method

    -

    The `.splice()` method in JavaScript is a powerful tool used to modify the contents of an array by adding, removing, or replacing elements. Unlike `.slice()`, which creates a new array without altering the original, `.splice()` directly mutates the original array. The method takes at least two arguments: the start index, where the changes will begin, and the number of elements to be removed. Additional arguments can be provided to specify the elements to be added at the start index. For example, `.splice(2, 1, 'newItem')` would remove one element at index 2 and insert `'newItem'` in its place. The method returns an array containing the removed elements, if any. This versatility makes `.splice()` particularly useful for tasks like inserting elements at specific positions, deleting parts of an array, or replacing elements, allowing for dynamic and flexible array manipulation. However, because it alters the original array, it's important to use `.splice()` carefully when array preservation is necessary.

    -

    Specifications

    - 
    -             
-  // 1. Remove elements from an array
-  let numbers = [1, 2, 3, 4, 5];
-  let removedElements = numbers.splice(2, 2);
-  console.log(numbers); 
-  // Output: [1, 2, 5]
-  console.log(removedElements); 
-  // Output: [3, 4]
-  
-  // 2. Add elements to an array
-  let fruits = ["apple", "banana", "cherry"];
-  fruits.splice(1, 0, "blueberry", "kiwi");
-  console.log(fruits); 
-  // Output: ["apple", "blueberry", "kiwi", "banana", "cherry"]
-  
-  // 3. Replace elements in an array
-  let letters = ["a", "b", "c", "d"];
-  letters.splice(1, 2, "x", "y");
-  console.log(letters); 
-  // Output: ["a", "x", "y", "d"]
-  
-  // 4. Remove all elements from a specific index onwards
-  let colors = ["red", "green", "blue", "yellow"];
-  colors.splice(2);
-  console.log(colors); 
-  // Output: ["red", "green"]
-  
-  // 5. Insert elements at the beginning of an array
-  let numbers2 = [4, 5, 6];
-  numbers2.splice(0, 0, 1, 2, 3);
-  console.log(numbers2); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  
-  // 6. Remove the first element from an array
-  let animals = ["cat", "dog", "rabbit"];
-  animals.splice(0, 1);
-  console.log(animals); 
-  // Output: ["dog", "rabbit"]
-  
-  // 7. Remove and replace all elements in an array
-  let items = ["item1", "item2", "item3"];
-  items.splice(0, items.length, "newItem1", "newItem2");
-  console.log(items); 
-  // Output: ["newItem1", "newItem2"]
-  
-  // 8. Remove the last element from an array
-  let numbers3 = [10, 20, 30, 40];
-  numbers3.splice(-1);
-  console.log(numbers3); 
-  // Output: [10, 20, 30]
-  
-  // 9. Insert elements into an empty array
-  let emptyArray = [];
-  emptyArray.splice(0, 0, "first", "second");
-  console.log(emptyArray); 
-  // Output: ["first", "second"]
-  
-  // 10. Replace elements in the middle of an array
-  let months = ["January", "February", "April", "May"];
-  months.splice(2, 1, "March");
-  console.log(months); 
-  // Output: ["January", "February", "March", "May"]  
-
    -
    -
    Array Iteration Methods -
    [05]
    -
    .forEach() method
    -

    .forEach() method

    -

    The `.forEach()` method in JavaScript is used to execute a provided function once for each element in an array. Unlike some other iteration methods, such as `.map()` or `.filter()`, `.forEach()` does not return a new array or any other value; instead, it simply performs the specified operation on each element of the array in the order they appear. The method takes a callback function as its argument, and this function can access the current element, its index, and the array itself. `.forEach()` is particularly useful for tasks that involve side effects, such as logging, modifying external variables, or interacting with DOM elements, where you need to perform an action for each array item but do not need to transform or filter the array. Because it does not alter the array or produce a new one, `.forEach()` is best suited for scenarios where you are interested in performing an operation on each element without needing a resulting value or array.

    -

    Specifications

    - 
    -             
-  // 1. Log each element of an array to the console
-  let numbers = [1, 2, 3, 4, 5];
-  numbers.forEach(num => console.log(num));
-  // Output: 1, 2, 3, 4, 5 (each on a new line)
-  
-  // 2. Calculate the sum of an array
-  let sum = 0;
-  numbers.forEach(num => sum += num);
-  console.log(sum); 
-  // Output: 15
-  
-  // 3. Modify each element in an array of objects
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  users.forEach(user => user.age += 1);
-  console.log(users); 
-  // Output: [{name: "Alice", age: 26}, {name: "Bob", age: 31}, {name: "Charlie", age: 36}]
-  
-  // 4. Convert each string in an array to uppercase
-  let fruits = ["apple", "banana", "cherry"];
-  fruits.forEach((fruit, index, arr) => arr[index] = fruit.toUpperCase());
-  console.log(fruits); 
-  // Output: ["APPLE", "BANANA", "CHERRY"]
-  
-  // 5. Log the index of each element in an array
-  let letters = ["a", "b", "c", "d"];
-  letters.forEach((letter, index) => console.log(`Index: ${index}, Letter: ${letter}`));
-  // Output: "Index: 0, Letter: a", "Index: 1, Letter: b", "Index: 2, Letter: c", "Index: 3, Letter: d" (each on a new line)
-  
-  // 6. Append elements to another array
-  let numbers2 = [10, 20, 30];
-  let results = [];
-  numbers2.forEach(num => results.push(num * 2));
-  console.log(results); 
-  // Output: [20, 40, 60]
-  
-  // 7. Count occurrences of a specific value in an array
-  let items = ["apple", "banana", "apple", "orange", "banana", "apple"];
-  let count = 0;
-  items.forEach(item => {
-      if (item === "apple") count++;
-  });
-  console.log(count); 
-  // Output: 3
-  
-  // 8. Add properties to an array of objects
-  let products = [{name: "Shirt"}, {name: "Pants"}, {name: "Shoes"}];
-  products.forEach(product => product.price = 20);
-  console.log(products); 
-  // Output: [{name: "Shirt", price: 20}, {name: "Pants", price: 20}, {name: "Shoes", price: 20}]
-  
-  // 9. Chain with other array methods
-  let numbers3 = [1, 2, 3, 4, 5];
-  numbers3.filter(num => num > 2).forEach(num => console.log(num));
-  // Output: 3, 4, 5 (each on a new line)
-  
-  // 10. Print a message for each item in an array
-  let animals = ["cat", "dog", "bird"];
-  animals.forEach(animal => console.log(`I love my ${animal}!`));
-  // Output: "I love my cat!", "I love my dog!", "I love my bird!" (each on a new line)      
-
    -
    -
    .every() method
    -

    .every() method

    -

    The `.every()` method in JavaScript is used to test whether all elements in an array pass a specified test implemented by a provided function. This method takes a callback function as an argument, which is executed for each element of the array. If the callback function returns `true` for every element, `.every()` returns `true`; if the function returns `false` for any element, the method immediately returns `false` and stops further iteration. This makes `.every()` particularly useful for validating that all items in an array meet a certain condition, such as checking if all numbers in an array are positive, or if all objects in a list have a required property. Since `.every()` stops evaluating as soon as it encounters a `false` result, it can be efficient for large arrays where a failure condition might occur early. It does not modify the original array and is a valuable tool when a boolean assessment across an entire dataset is needed.

    -

    Specifications

    - 
    -             
-  // 1. Check if all numbers in an array are greater than 10
-  let numbers = [12, 15, 20, 25];
-  let allGreaterThanTen = numbers.every(num => num > 10);
-  console.log(allGreaterThanTen); 
-  // Output: true
-  
-  // 2. Check if all elements in an array are strings
-  let mixedArray = ["apple", "banana", "cherry"];
-  let allStrings = mixedArray.every(item => typeof item === "string");
-  console.log(allStrings); 
-  // Output: true
-  
-  // 3. Check if all elements in an array are even numbers
-  let nums = [2, 4, 6, 8];
-  let allEven = nums.every(num => num % 2 === 0);
-  console.log(allEven); 
-  // Output: true
-  
-  // 4. Check if all elements in an array are positive
-  let values = [1, 2, 3, 4, 5];
-  let allPositive = values.every(num => num > 0);
-  console.log(allPositive); 
-  // Output: true
-  
-  // 5. Check if all elements in an array are objects
-  let objectsArray = [{}, {}, {}];
-  let allObjects = objectsArray.every(item => typeof item === "object");
-  console.log(allObjects); 
-  // Output: true
-  
-  // 6. Check if all users in an array are adults (age 18 or older)
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let allAdults = users.every(user => user.age >= 18);
-  console.log(allAdults); 
-  // Output: true
-  
-  // 7. Check if all elements in an array are less than 100
-  let numbers2 = [50, 60, 70, 80];
-  let allLessThanHundred = numbers2.every(num => num < 100);
-  console.log(allLessThanHundred); 
-  // Output: true
-  
-  // 8. Check if all strings in an array have a length greater than 3
-  let strings = ["hello", "world", "JavaScript"];
-  let allLongerThanThree = strings.every(str => str.length > 3);
-  console.log(allLongerThanThree); 
-  // Output: true
-  
-  // 9. Check if all elements in an array are truthy
-  let bools = [true, true, true];
-  let allTruthy = bools.every(bool => Boolean(bool));
-  console.log(allTruthy); 
-  // Output: true
-  
-  // 10. Check if all elements in an array of arrays have length greater than 2
-  let nestedArrays = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
-  let allLengthGreaterThanTwo = nestedArrays.every(arr => arr.length > 2);
-  console.log(allLengthGreaterThanTwo); 
-  // Output: true    
-
    -
    -
    .some() method
    -

    .some() method

    -

    The `.some()` method in JavaScript is used to test whether at least one element in an array passes a specified test implemented by a provided function. This method takes a callback function as an argument, which is executed for each element in the array. If the callback function returns `true` for any one of the elements, `.some()` immediately returns `true` and stops further iteration. If the function returns `false` for all elements, the method returns `false`. This makes `.some()` particularly useful for scenarios where you need to check if any element in an array meets a certain condition, such as determining if any numbers in an array are negative, or if any objects in a list contain a specific property. Since `.some()` stops processing as soon as it finds a matching element, it can be more efficient than methods that need to evaluate every element. Like other array methods, `.some()` does not modify the original array, making it a convenient tool for quick, conditional checks across arrays in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Check if some numbers in an array are greater than 10
-  let numbers = [5, 8, 12, 3];
-  let someGreaterThanTen = numbers.some(num => num > 10);
-  console.log(someGreaterThanTen); 
-  // Output: true
-  
-  // 2. Check if some elements in an array are strings
-  let mixedArray = [1, "banana", 3, 4];
-  let someStrings = mixedArray.some(item => typeof item === "string");
-  console.log(someStrings); 
-  // Output: true
-  
-  // 3. Check if some elements in an array are odd numbers
-  let nums = [2, 4, 6, 7];
-  let someOdd = nums.some(num => num % 2 !== 0);
-  console.log(someOdd); 
-  // Output: true
-  
-  // 4. Check if some elements in an array are negative
-  let values = [1, -2, 3, -4, 5];
-  let someNegative = values.some(num => num < 0);
-  console.log(someNegative); 
-  // Output: true
-  
-  // 5. Check if some elements in an array are objects
-  let objectsArray = [1, "string", {}, 3];
-  let someObjects = objectsArray.some(item => typeof item === "object");
-  console.log(someObjects); 
-  // Output: true
-  
-  // 6. Check if some users in an array are minors (under 18)
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 17},
-      {name: "Charlie", age: 35}
-  ];
-  let someMinors = users.some(user => user.age < 18);
-  console.log(someMinors); 
-  // Output: true
-  
-  // 7. Check if some elements in an array are greater than 100
-  let numbers2 = [50, 60, 120, 80];
-  let someGreaterThanHundred = numbers2.some(num => num > 100);
-  console.log(someGreaterThanHundred); 
-  // Output: true
-  
-  // 8. Check if some strings in an array have a length greater than 5
-  let strings = ["hello", "world", "JavaScript"];
-  let someLongerThanFive = strings.some(str => str.length > 5);
-  console.log(someLongerThanFive); 
-  // Output: true
-  
-  // 9. Check if some elements in an array are falsy
-  let bools = [true, false, true];
-  let someFalsy = bools.some(bool => !Boolean(bool));
-  console.log(someFalsy); 
-  // Output: true
-  
-  // 10. Check if some elements in a nested array are arrays themselves
-  let nestedArrays = [1, [2, 3], 4, [5, 6]];
-  let someArrays = nestedArrays.some(arr => Array.isArray(arr));
-  console.log(someArrays); 
-  // Output: true    
-
    -
    -
    .reduce() method
    -

    .reduce() method

    -

    The `.reduce()` method in JavaScript is a powerful array method used to accumulate a single value from an array by applying a reducer function to each element, moving through the array from left to right. The method takes two arguments: a callback function (the reducer) and an optional initial value. The reducer function itself takes four arguments: the accumulator (which holds the accumulated result), the current element, the current index, and the array being processed. On each iteration, the reducer function processes the current element and updates the accumulator, which eventually holds the final result after all elements have been processed. If no initial value is provided, `.reduce()` uses the first element of the array as the initial accumulator value and starts the iteration from the second element. The `.reduce()` method is particularly useful for tasks such as summing numbers, concatenating strings, or flattening arrays, where a single output value is derived from the entire array. It is a versatile tool for transforming and combining array data into a single result, making it essential for more complex data processing in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Sum all numbers in an array
-  let numbers = [1, 2, 3, 4, 5];
-  let sum = numbers.reduce((acc, num) => acc + num, 0);
-  console.log(sum); 
-  // Output: 15
-  
-  // 2. Multiply all numbers in an array
-  let product = numbers.reduce((acc, num) => acc * num, 1);
-  console.log(product); 
-  // Output: 120
-  
-  // 3. Find the maximum value in an array
-  let max = numbers.reduce((acc, num) => (num > acc ? num : acc), numbers[0]);
-  console.log(max); 
-  // Output: 5
-  
-  // 4. Flatten a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let flatArray = nestedArray.reduce((acc, arr) => acc.concat(arr), []);
-  console.log(flatArray); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  
-  // 5. Count the occurrences of each element in an array
-  let fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
-  let fruitCount = fruits.reduce((acc, fruit) => {
-    acc[fruit] = (acc[fruit] || 0) + 1;
-    return acc;
-  }, {});
-  console.log(fruitCount); 
-  // Output: {apple: 3, banana: 2, orange: 1}
-  
-  // 6. Create an object from an array of key-value pairs
-  let keyValuePairs = [["name", "Alice"], ["age", 25], ["city", "Wonderland"]];
-  let obj = keyValuePairs.reduce((acc, [key, value]) => {
-    acc[key] = value;
-    return acc;
-  }, {});
-  console.log(obj); 
-  // Output: {name: "Alice", age: 25, city: "Wonderland"}
-  
-  // 7. Calculate the total price of items in a shopping cart
-  let cart = [
-    {name: "Shirt", price: 20},
-    {name: "Pants", price: 30},
-    {name: "Shoes", price: 50}
-  ];
-  let totalPrice = cart.reduce((acc, item) => acc + item.price, 0);
-  console.log(totalPrice); 
-  // Output: 100
-  
-  // 8. Group objects by a property
-  let people = [
-    {name: "Alice", age: 25},
-    {name: "Bob", age: 30},
-    {name: "Charlie", age: 25}
-  ];
-  let groupedByAge = people.reduce((acc, person) => {
-    if (!acc[person.age]) {
-      acc[person.age] = [];
-    }
-    acc[person.age].push(person);
-    return acc;
-  }, {});
-  console.log(groupedByAge); 
-  // Output: {25: [{name: "Alice", age: 25}, {name: "Charlie", age: 25}], 30: [{name: "Bob", age: 30}]}
-  
-  // 9. Reverse a string
-  let str = "JavaScript";
-  let reversedStr = str.split("").reduce((acc, char) => char + acc, "");
-  console.log(reversedStr); 
-  // Output: "tpircSavaJ"
-  
-  // 10. Calculate the factorial of a number
-  let factorial = [1, 2, 3, 4, 5].reduce((acc, num) => acc * num, 1);
-  console.log(factorial); 
-  // Output: 120
-
    -
    -
    .reduceRight() method
    -

    .reduceRight() method

    -

    The `.reduceRight()` method in JavaScript is similar to the `.reduce()` method, but it processes the elements of an array from right to left, rather than from left to right. This means that the accumulation of the array’s elements starts from the last element and moves towards the first. Like `.reduce()`, it takes a reducer function as its primary argument, along with an optional initial value. The reducer function receives four arguments: the accumulator, the current element, the current index, and the array itself. If no initial value is provided, `.reduceRight()` uses the last element of the array as the initial accumulator value and starts the iteration from the second-to-last element. This method is particularly useful in situations where the order of operations matters, such as when dealing with right-associative operations or when you need to reverse the direction of processing, like when constructing or evaluating expressions in reverse order. By processing elements from the end of the array to the beginning, `.reduceRight()` offers a flexible approach to complex data transformations where the direction of accumulation is significant.

    -

    Specifications

    - 
    -             
-  // 1. Reverse a string using reduceRight
-  let str = "JavaScript";
-  let reversedStr = str.split("").reduceRight((acc, char) => acc + char, "");
-  console.log(reversedStr); 
-  // Output: "tpircSavaJ"
-  
-  // 2. Flatten a nested array in reverse order
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let flatArray = nestedArray.reduceRight((acc, arr) => acc.concat(arr), []);
-  console.log(flatArray); 
-  // Output: [5, 6, 3, 4, 1, 2]
-  
-  // 3. Concatenate an array of strings in reverse order
-  let words = ["world", "hello"];
-  let sentence = words.reduceRight((acc, word) => acc + " " + word);
-  console.log(sentence); 
-  // Output: "hello world"
-  
-  // 4. Subtract numbers in reverse order
-  let numbers = [1, 2, 3, 4];
-  let reverseSubtraction = numbers.reduceRight((acc, num) => acc - num);
-  console.log(reverseSubtraction); 
-  // Output: -2  (1 - (2 - (3 - 4)) = -2)
-  
-  // 5. Create a nested object structure from an array of keys
-  let keys = ["level1", "level2", "level3"];
-  let nestedObject = keys.reduceRight((acc, key) => ({ [key]: acc }), {});
-  console.log(nestedObject); 
-  // Output: { level1: { level2: { level3: {} } } }
-  
-  // 6. Calculate the product of numbers in reverse order
-  let numbers2 = [2, 3, 4];
-  let reverseProduct = numbers2.reduceRight((acc, num) => acc * num, 1);
-  console.log(reverseProduct); 
-  // Output: 24  (4 * 3 * 2)
-  
-  // 7. Build an HTML string in reverse order
-  let elements = ["div", "span", "a"];
-  let htmlString = elements.reduceRight((acc, el) => `<${el}>${acc}</${el}>`, "content");
-  console.log(htmlString); 
-  
-  // 8. Combine objects from right to left
-  let objectsArray = [{ a: 1 }, { b: 2 }, { c: 3 }];
-  let combinedObject = objectsArray.reduceRight((acc, obj) => Object.assign(acc, obj), {});
-  console.log(combinedObject); 
-  // Output: { c: 3, b: 2, a: 1 }
-  
-  // 9. Calculate cumulative sum in reverse order
-  let nums = [10, 20, 30, 40];
-  let reverseCumulativeSum = nums.reduceRight((acc, num, i) => {
-    acc[i] = (acc[i + 1] || 0) + num;
-    return acc;
-  }, []);
-  console.log(reverseCumulativeSum); 
-  // Output: [100, 90, 70, 40]
-  
-  // 10. Decode a base64 string by reversing the operations
-  let encoded = ["W", "X", "Y", "Z"];
-  let decoded = encoded.reduceRight((acc, char) => acc + atob(char), "");
-  console.log(decoded);
-  // Output: Decoded string in reverse order (assuming `atob` was encoding in reverse)       
-
    -
    -
    Array Mutation Methods -
    [06]
    -
    .pop() method
    -

    .pop() method

    -

    The `.pop()` method in JavaScript is used to remove the last element from an array, reducing its length by one, and returns the removed element. This method directly modifies the original array, making it shorter by one element each time it is called. If the array is empty, `.pop()` returns `undefined` and does not alter the array. The `.pop()` method is particularly useful when you need to manage data structures like stacks, where the last-in, first-out (LIFO) principle is important. It allows for efficient removal and retrieval of the most recently added elements. Since `.pop()` is a mutative method, it should be used with care when preserving the original array is necessary, as it permanently alters the array's content and length.

    -

    Specifications

    - 
    -             
-  // 1. Remove the last element from an array of numbers
-  let numbers = [1, 2, 3, 4, 5];
-  let lastNumber = numbers.pop();
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4]
-  console.log(lastNumber); 
-  // Output: 5
-  
-  // 2. Remove the last element from an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  let lastFruit = fruits.pop();
-  console.log(fruits); 
-  // Output: ["apple", "banana"]
-  console.log(lastFruit); 
-  // Output: "cherry"
-  
-  // 3. Use pop in a loop to empty an array
-  let letters = ["a", "b", "c", "d"];
-  while (letters.length > 0) {
-      letters.pop();
-  }
-  console.log(letters); 
-  // Output: []
-  
-  // 4. Pop elements from an array until a condition is met
-  let values = [10, 20, 30, 40, 50];
-  while (values.length && values[values.length - 1] > 30) {
-      values.pop();
-  }
-  console.log(values); 
-  // Output: [10, 20, 30]
-  
-  // 5. Track removed elements from an array
-  let items = ["item1", "item2", "item3"];
-  let removedItems = [];
-  while (items.length > 0) {
-      removedItems.push(items.pop());
-  }
-  console.log(removedItems); 
-  // Output: ["item3", "item2", "item1"]
-  
-  // 6. Pop from an array of objects
-  let users = [{name: "Alice"}, {name: "Bob"}, {name: "Charlie"}];
-  let lastUser = users.pop();
-  console.log(users); 
-  // Output: [{name: "Alice"}, {name: "Bob"}]
-  console.log(lastUser); 
-  // Output: {name: "Charlie"}
-  
-  // 7. Pop an element from an array and use it immediately
-  let tasks = ["task1", "task2", "task3"];
-  let taskToDo = tasks.pop();
-  console.log(`Doing ${taskToDo}`); 
-  // Output: "Doing task3"
-  
-  // 8. Remove and log elements until an array is empty
-  let logs = ["log1", "log2", "log3"];
-  while (logs.length > 0) {
-      console.log(logs.pop());
-  }
-  // Output: "log3", "log2", "log1" (each on a new line)
-  
-  // 9. Pop elements from a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let lastSubArray = nestedArray.pop();
-  console.log(nestedArray); 
-  // Output: [[1, 2], [3, 4]]
-  console.log(lastSubArray); 
-  // Output: [5, 6]
-  
-  // 10. Use pop on an empty array (returns undefined)
-  let emptyArray = [];
-  let result = emptyArray.pop();
-  console.log(result); 
-  // Output: undefined
-  console.log(emptyArray); 
-  // Output: []   
-
    -
    -
    .push() method
    -

    .push() method

    -

    The `.push()` method in JavaScript is used to add one or more elements to the end of an array, expanding its length accordingly. This method directly modifies the original array by appending the new elements and returns the new length of the array after the elements have been added. The `.push()` method is particularly useful for managing data in arrays where you need to dynamically add items, such as building lists or stacking elements in a last-in, first-out (LIFO) manner. Because it alters the array in place, `.push()` is a mutative method, which means the original array is changed, and no new array is created. This makes `.push()` efficient for adding elements but requires caution if the original array needs to remain unchanged.

    -

    Specifications

    - 
    -             
-  // 1. Add a single element to the end of an array
-  let numbers = [1, 2, 3];
-  numbers.push(4);
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4]
-  
-  // 2. Add multiple elements to the end of an array
-  let fruits = ["apple", "banana"];
-  fruits.push("cherry", "date");
-  console.log(fruits); 
-  // Output: ["apple", "banana", "cherry", "date"]
-  
-  // 3. Push elements to an empty array
-  let emptyArray = [];
-  emptyArray.push(1, 2, 3);
-  console.log(emptyArray); 
-  // Output: [1, 2, 3]
-  
-  // 4. Use push in a loop to add elements dynamically
-  let letters = [];
-  for (let i = 0; i < 5; i++) {
-      letters.push(String.fromCharCode(97 + i)); // adds "a", "b", "c", "d", "e"
-  }
-  console.log(letters); 
-  // Output: ["a", "b", "c", "d", "e"]
-  
-  // 5. Push objects into an array
-  let users = [];
-  users.push({name: "Alice"});
-  users.push({name: "Bob"});
-  console.log(users); 
-  // Output: [{name: "Alice"}, {name: "Bob"}]
-  
-  // 6. Combine two arrays using push and spread operator
-  let array1 = [1, 2, 3];
-  let array2 = [4, 5, 6];
-  array1.push(...array2);
-  console.log(array1); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  
-  // 7. Push a nested array into an array
-  let nestedArray = [];
-  nestedArray.push([1, 2]);
-  nestedArray.push([3, 4]);
-  console.log(nestedArray); 
-  // Output: [[1, 2], [3, 4]]
-  
-  // 8. Push elements and get the new length of the array
-  let items = ["item1", "item2"];
-  let newLength = items.push("item3");
-  console.log(items); 
-  // Output: ["item1", "item2", "item3"]
-  console.log(newLength); 
-  // Output: 3
-  
-  // 9. Push elements conditionally based on a check
-  let values = [10, 20, 30];
-  if (values[values.length - 1] < 50) {
-      values.push(40);
-  }
-  console.log(values); 
-  // Output: [10, 20, 30, 40]
-  
-  // 10. Use push to add elements to an array stored in an object property
-  let obj = { numbers: [1, 2, 3] };
-  obj.numbers.push(4);
-  console.log(obj.numbers); 
-  // Output: [1, 2, 3, 4]  
-
    -
    -
    .shift() method
    -

    .shift() method

    -

    The `.shift()` method in JavaScript is used to remove the first element from an array and returns that removed element. This method directly modifies the original array by reducing its length by one and shifting all remaining elements one position forward, effectively decreasing their indices by one. If the array is empty, `.shift()` returns `undefined` and does not alter the array. The `.shift()` method is particularly useful in scenarios where you need to process or dequeue elements in a first-in, first-out (FIFO) manner, such as when handling tasks in a queue. Since `.shift()` alters the original array, it is considered a mutative method, meaning that it changes the array in place without creating a new one. This makes it efficient for removing the first element but requires caution if the original order of elements needs to be preserved elsewhere in your program.

    -

    Specifications

    - 
    -             
-  // 1. Remove the first element from an array of numbers
-  let numbers = [10, 20, 30, 40];
-  let firstNumber = numbers.shift();
-  console.log(numbers); 
-  // Output: [20, 30, 40]
-  console.log(firstNumber); 
-  // Output: 10
-  
-  // 2. Remove the first element from an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  let firstFruit = fruits.shift();
-  console.log(fruits); 
-  // Output: ["banana", "cherry"]
-  console.log(firstFruit); 
-  // Output: "apple"
-  
-  // 3. Use shift in a loop to empty an array
-  let letters = ["a", "b", "c", "d"];
-  while (letters.length > 0) {
-      letters.shift();
-  }
-  console.log(letters); 
-  // Output: []
-  
-  // 4. Remove and log each element until the array is empty
-  let items = ["item1", "item2", "item3"];
-  while (items.length > 0) {
-      console.log(items.shift());
-  }
-  // Output: "item1", "item2", "item3" (each on a new line)
-  
-  // 5. Use shift to remove the first object from an array of objects
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let firstUser = users.shift();
-  console.log(users); 
-  // Output: [{name: "Bob", age: 30}, {name: "Charlie", age: 35}]
-  console.log(firstUser); 
-  // Output: {name: "Alice", age: 25}
-  
-  // 6. Remove elements from an array of arrays
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let firstSubArray = nestedArray.shift();
-  console.log(nestedArray); 
-  // Output: [[3, 4], [5, 6]]
-  console.log(firstSubArray); 
-  // Output: [1, 2]
-  
-  // 7. Use shift to process a queue of tasks
-  let tasks = ["task1", "task2", "task3"];
-  let currentTask = tasks.shift();
-  console.log(`Processing ${currentTask}`); 
-  // Output: "Processing task1"
-  console.log(tasks); 
-  // Output: ["task2", "task3"]
-  
-  // 8. Use shift on an array of mixed data types
-  let mixedArray = [1, "two", true, null];
-  let firstElement = mixedArray.shift();
-  console.log(mixedArray); 
-  // Output: ["two", true, null]
-  console.log(firstElement); 
-  // Output: 1
-  
-  // 9. Remove and use elements conditionally
-  let values = [5, 10, 15];
-  let removedValue;
-  if (values[0] < 10) {
-      removedValue = values.shift();
-  }
-  console.log(values); 
-  // Output: [10, 15]
-  console.log(removedValue); 
-  // Output: 5
-  
-  // 10. Use shift on an empty array (returns undefined)
-  let emptyArray = [];
-  let result = emptyArray.shift();
-  console.log(result); 
-  // Output: undefined
-  console.log(emptyArray); 
-  // Output: []    
-
    -
    -
    .unshift() method
    -

    .unshift() method

    -

    The `.unshift()` method in JavaScript is used to add one or more elements to the beginning of an array, increasing its length and shifting all existing elements to higher indices to make room for the new elements. This method modifies the original array in place and returns the new length of the array after the elements have been added. The `.unshift()` method is particularly useful when you need to prepend items to an array, such as adding new data at the start of a list or managing a queue where elements are added in a first-in, first-out (FIFO) order. Since `.unshift()` directly alters the array by shifting all elements and extending its length, it is a mutative operation. This means that the original array is changed, and no new array is created, so it should be used when you want to modify the array directly while keeping the original sequence of elements intact but expanded at the beginning.

    -

    Specifications

    - 
    -             
-  // 1. Add a single element to the beginning of an array
-  let numbers = [2, 3, 4];
-  numbers.unshift(1);
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4]
-  
-  // 2. Add multiple elements to the beginning of an array
-  let fruits = ["banana", "cherry"];
-  fruits.unshift("apple", "orange");
-  console.log(fruits); 
-  // Output: ["apple", "orange", "banana", "cherry"]
-  
-  // 3. Unshift elements into an empty array
-  let emptyArray = [];
-  emptyArray.unshift(5, 10, 15);
-  console.log(emptyArray); 
-  // Output: [5, 10, 15]
-  
-  // 4. Use unshift to add elements in reverse order
-  let letters = ["c", "d"];
-  letters.unshift("a", "b");
-  console.log(letters); 
-  // Output: ["a", "b", "c", "d"]
-  
-  // 5. Add objects to the beginning of an array
-  let users = [{name: "Charlie"}];
-  users.unshift({name: "Alice"}, {name: "Bob"});
-  console.log(users); 
-  // Output: [{name: "Alice"}, {name: "Bob"}, {name: "Charlie"}]
-  
-  // 6. Combine two arrays using unshift and spread operator
-  let array1 = [3, 4];
-  let array2 = [1, 2];
-  array1.unshift(...array2);
-  console.log(array1); 
-  // Output: [1, 2, 3, 4]
-  
-  // 7. Add nested arrays to the beginning of an array
-  let nestedArray = [[3, 4]];
-  nestedArray.unshift([1, 2]);
-  console.log(nestedArray); 
-  // Output: [[1, 2], [3, 4]]
-  
-  // 8. Add elements and get the new length of the array
-  let items = ["item2", "item3"];
-  let newLength = items.unshift("item1");
-  console.log(items); 
-  // Output: ["item1", "item2", "item3"]
-  console.log(newLength); 
-  // Output: 3
-  
-  // 9. Use unshift to add elements conditionally
-  let values = [20, 30];
-  if (values[0] > 10) {
-      values.unshift(10);
-  }
-  console.log(values); 
-  // Output: [10, 20, 30]
-  
-  // 10. Add elements to an array stored in an object property
-  let obj = { numbers: [2, 3, 4] };
-  obj.numbers.unshift(1);
-  console.log(obj.numbers); 
-  // Output: [1, 2, 3, 4] 
-
    -
    -
    .reverse() method
    -

    .reverse() method

    -

    The `.reverse()` method in JavaScript is used to reverse the order of the elements in an array, effectively flipping the array so that the last element becomes the first and the first element becomes the last. This method modifies the original array in place, meaning it changes the array itself rather than creating a new one. The `.reverse()` method is particularly useful when you need to invert the order of elements for tasks like displaying data in a different sequence or when implementing algorithms that require a reversed array order. Because it is a mutative method, using `.reverse()` should be done with care if you need to preserve the original order of the array for other operations, as the original array is permanently altered. The method returns the array itself after reversing, allowing for further chaining of methods if needed.

    -

    Specifications

    - 
    -             
-  // 1. Reverse an array of numbers
-  let numbers = [1, 2, 3, 4, 5];
-  numbers.reverse();
-  console.log(numbers); 
-  // Output: [5, 4, 3, 2, 1]
-  
-  // 2. Reverse an array of strings
-  let fruits = ["apple", "banana", "cherry"];
-  fruits.reverse();
-  console.log(fruits); 
-  // Output: ["cherry", "banana", "apple"]
-  
-  // 3. Reverse an array of mixed data types
-  let mixedArray = [1, "two", true, null];
-  mixedArray.reverse();
-  console.log(mixedArray); 
-  // Output: [null, true, "two", 1]
-  
-  // 4. Reverse an array of objects
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  users.reverse();
-  console.log(users); 
-  // Output: [{name: "Charlie", age: 35}, {name: "Bob", age: 30}, {name: "Alice", age: 25}]
-  
-  // 5. Reverse a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  nestedArray.reverse();
-  console.log(nestedArray); 
-  // Output: [[5, 6], [3, 4], [1, 2]]
-  
-  // 6. Reverse an array and join it into a string
-  let letters = ["a", "b", "c", "d"];
-  let reversedString = letters.reverse().join("");
-  console.log(reversedString); 
-  // Output: "dcba"
-  
-  // 7. Reverse an array of booleans
-  let booleans = [true, false, false, true];
-  booleans.reverse();
-  console.log(booleans); 
-  // Output: [true, false, false, true]
-  
-  // 8. Reverse a sparse array
-  let sparseArray = [1, , 3, , 5];
-  sparseArray.reverse();
-  console.log(sparseArray); 
-  // Output: [5, empty, 3, empty, 1]
-  
-  // 9. Reverse an array of numbers and calculate the sum of the reversed array
-  let nums = [1, 2, 3, 4, 5];
-  let sum = nums.reverse().reduce((acc, num) => acc + num, 0);
-  console.log(nums); 
-  // Output: [5, 4, 3, 2, 1]
-  console.log(sum); 
-  // Output: 15
-  
-  // 10. Reverse an array of strings and convert to uppercase
-  let words = ["one", "two", "three"];
-  let reversedUppercase = words.reverse().map(word => word.toUpperCase());
-  console.log(reversedUppercase); 
-  // Output: ["THREE", "TWO", "ONE"]
-
    -
    -
    .sort() method
    -

    .sort() method

    -

    The `.sort()` method in JavaScript is used to arrange the elements of an array in place, modifying the original array based on a specific order. By default, `.sort()` converts the elements to strings and sorts them in ascending lexicographical order, which means that numbers, letters, and symbols are sorted according to Unicode values. This can lead to unexpected results when sorting numbers unless a custom comparator function is provided. The comparator function allows you to define your own sorting logic, such as sorting numbers in numerical order or arranging objects based on a specific property. Since `.sort()` directly alters the original array, it is considered a mutative method, meaning the array is changed permanently, and no new array is created. The method returns the sorted array, enabling method chaining if further operations are needed. The `.sort()` method is highly useful for organizing data in a specific sequence, whether alphabetically, numerically, or according to custom criteria, but it should be used carefully when preserving the original array order is important.

    -

    Specifications

    - 
    -             
-  // 1. Sort an array of numbers in ascending order
-  let numbers = [5, 3, 8, 1, 2];
-  numbers.sort((a, b) => a - b);
-  console.log(numbers); 
-  // Output: [1, 2, 3, 5, 8]
-  
-  // 2. Sort an array of numbers in descending order
-  numbers.sort((a, b) => b - a);
-  console.log(numbers); 
-  // Output: [8, 5, 3, 2, 1]
-  
-  // 3. Sort an array of strings in alphabetical order
-  let fruits = ["banana", "apple", "cherry"];
-  fruits.sort();
-  console.log(fruits); 
-  // Output: ["apple", "banana", "cherry"]
-  
-  // 4. Sort an array of strings in reverse alphabetical order
-  fruits.sort((a, b) => b.localeCompare(a));
-  console.log(fruits); 
-  // Output: ["cherry", "banana", "apple"]
-  
-  // 5. Sort an array of objects by a numeric property
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 20}
-  ];
-  users.sort((a, b) => a.age - b.age);
-  console.log(users); 
-  // Output: [{name: "Charlie", age: 20}, {name: "Alice", age: 25}, {name: "Bob", age: 30}]
-  
-  // 6. Sort an array of objects by a string property
-  users.sort((a, b) => a.name.localeCompare(b.name));
-  console.log(users); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 20}]
-  
-  // 7. Sort an array of mixed case strings, case-insensitive
-  let mixedCaseStrings = ["Banana", "apple", "Cherry"];
-  mixedCaseStrings.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-  console.log(mixedCaseStrings); 
-  // Output: ["apple", "Banana", "Cherry"]
-  
-  // 8. Sort an array of numbers as strings
-  let numberStrings = ["10", "2", "30", "1"];
-  numberStrings.sort();
-  console.log(numberStrings); 
-  // Output: ["1", "10", "2", "30"] // String comparison sorts "10" before "2"
-  
-  // 9. Sort an array of dates in ascending order
-  let dates = [
-      new Date(2023, 11, 24),
-      new Date(2022, 5, 12),
-      new Date(2023, 0, 1)
-  ];
-  dates.sort((a, b) => a - b);
-  console.log(dates); 
-  // Output: [Date 2022-06-12, Date 2023-01-01, Date 2023-12-24]
-  
-  // 10. Sort an array of arrays based on the first element of each sub-array
-  let arrayOfArrays = [[3, "c"], [1, "a"], [2, "b"]];
-  arrayOfArrays.sort((a, b) => a[0] - b[0]);
-  console.log(arrayOfArrays); 
-  // Output: [[1, "a"], [2, "b"], [3, "c"]]  
-
    -
    -
    Array Utility Methods -
    [07]
    -
    .join() method
    -

    .join() method

    -

    The `.join()` method in JavaScript is used to concatenate all the elements of an array into a single string, with each element separated by a specified separator. When you call `.join()` on an array, you can provide an optional string argument that serves as the separator between the array elements in the resulting string. If no separator is specified, the method defaults to using a comma. This method is particularly useful for creating strings from arrays, such as converting a list of words into a sentence or formatting data for display or storage. Since `.join()` returns a new string and does not alter the original array, it is a non-mutative method, allowing the array to remain unchanged. The `.join()` method is a convenient and efficient way to combine array elements into a cohesive string, especially when you need to represent the contents of an array in a readable or specific format.

    -

    Specifications

    - 
    -             
-  // 1. Join an array of strings into a single string with commas
-  let fruits = ["apple", "banana", "cherry"];
-  let fruitString = fruits.join(", ");
-  console.log(fruitString); 
-  // Output: "apple, banana, cherry"
-  
-  // 2. Join an array of numbers into a single string
-  let numbers = [1, 2, 3, 4];
-  let numberString = numbers.join("-");
-  console.log(numberString); 
-  // Output: "1-2-3-4"
-  
-  // 3. Join an array of words into a sentence
-  let words = ["Hello", "world", "this", "is", "JavaScript"];
-  let sentence = words.join(" ");
-  console.log(sentence); 
-  // Output: "Hello world this is JavaScript"
-  
-  // 4. Join an array of letters with no separator
-  let letters = ["a", "b", "c", "d"];
-  let joinedLetters = letters.join("");
-  console.log(joinedLetters); 
-  // Output: "abcd"
-  
-  // 5. Join an array with a custom separator (e.g., "|")
-  let items = ["item1", "item2", "item3"];
-  let joinedItems = items.join(" | ");
-  console.log(joinedItems); 
-  // Output: "item1 | item2 | item3"
-  
-  // 6. Join an array of objects' properties into a string
-  let users = [{name: "Alice"}, {name: "Bob"}, {name: "Charlie"}];
-  let userNames = users.map(user => user.name).join(", ");
-  console.log(userNames); 
-  // Output: "Alice, Bob, Charlie"
-  
-  // 7. Join an array of booleans into a string
-  let booleans = [true, false, true];
-  let booleanString = booleans.join(" and ");
-  console.log(booleanString); 
-  // Output: "true and false and true"
-  
-  // 8. Join an array of mixed data types into a string
-  let mixedArray = [1, "two", 3, "four"];
-  let mixedString = mixedArray.join(" + ");
-  console.log(mixedString); 
-  // Output: "1 + two + 3 + four"
-  
-  // 9. Join an array of nested arrays into a string
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let nestedString = nestedArray.join(" | ");
-  console.log(nestedString); 
-  // Output: "1,2 | 3,4 | 5,6"
-  
-  // 10. Join an array of numbers into a string with a fixed format
-  let prices = [10, 20, 30];
-  let priceString = prices.join("$, $");
-  console.log("$" + priceString + "$"); 
-  // Output: "$10$, $20$, $30$"
-
    -
    -
    .toString() method
    -

    .toString() method

    -

    The `.toString()` method in JavaScript is used to convert an array or other objects into a string representation. When called on an array, the `.toString()` method joins all the elements of the array into a single string, separated by commas, similar to using the `.join()` method without specifying a separator. This method is particularly useful when you need to quickly convert an array into a string for display, logging, or other purposes where a textual representation of the array is required. The `.toString()` method does not alter the original array, making it a non-mutative operation. Additionally, `.toString()` can be invoked on other types of objects, like numbers and dates, to convert them into strings based on their specific format rules. Overall, `.toString()` provides a simple and effective way to obtain a string version of various data types, especially arrays, in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Convert an array of numbers to a string
-  let numbers = [1, 2, 3, 4];
-  let numberString = numbers.toString();
-  console.log(numberString); 
-  // Output: "1,2,3,4"
-  
-  // 2. Convert an array of strings to a single string
-  let fruits = ["apple", "banana", "cherry"];
-  let fruitString = fruits.toString();
-  console.log(fruitString); 
-  // Output: "apple,banana,cherry"
-  
-  // 3. Convert an array of mixed data types to a string
-  let mixedArray = [1, "two", true, null];
-  let mixedString = mixedArray.toString();
-  console.log(mixedString); 
-  // Output: "1,two,true,"
-  
-  // 4. Convert a nested array to a string
-  let nestedArray = [[1, 2], [3, 4]];
-  let nestedString = nestedArray.toString();
-  console.log(nestedString); 
-  // Output: "1,2,3,4"
-  
-  // 5. Convert an object to a string (using Object's toString method)
-  let obj = {name: "Alice", age: 25};
-  let objString = obj.toString();
-  console.log(objString); 
-  // Output: "[object Object]"
-  
-  // 6. Convert a date object to a string
-  let date = new Date(2023, 11, 24);
-  let dateString = date.toString();
-  console.log(dateString); 
-  // Output: "Sun Dec 24 2023 00:00:00 GMT+0000 (Coordinated Universal Time)"
-  
-  // 7. Convert a function to a string
-  function greet() {
-    return "Hello, world!";
-  }
-  let functionString = greet.toString();
-  console.log(functionString); 
-  // Output: "function greet() {\n  return \"Hello, world!\";\n}"
-  
-  // 8. Convert a boolean value to a string
-  let boolValue = true;
-  let boolString = boolValue.toString();
-  console.log(boolString); 
-  // Output: "true"
-  
-  // 9. Convert a number to a string
-  let num = 123;
-  let numString = num.toString();
-  console.log(numString); 
-  // Output: "123"
-  
-  // 10. Convert an array with undefined and null values to a string
-  let arrayWithUndefined = [undefined, null, 1];
-  let undefinedString = arrayWithUndefined.toString();
-  console.log(undefinedString); 
-  // Output: ",,1"   
-
    -
    -
    .toLocalString() method
    -

    .tolocalstring() method

    -

    The `.toLocaleString()` method in JavaScript is used to convert an array or other objects, such as numbers and dates, into a string that represents the elements or values in a locale-sensitive format. When called on an array, each element is converted to a string using its own `.toLocaleString()` method, and then the array elements are joined together with a locale-specific separator, usually a comma. This method is particularly useful when you need to display data in a format that is tailored to the conventions of a particular locale, such as formatting dates, times, currencies, or numbers according to regional standards. For instance, a date might be formatted differently depending on whether the locale is set to the United States, Europe, or Japan. The `.toLocaleString()` method is non-mutative, meaning it does not alter the original array or object but instead returns a new string with the localized formatting. This makes it a valuable tool for creating user interfaces and applications that need to be adaptable to different cultural and regional settings.

    -

    Specifications

    - 
    -             
-  // 1. Convert a number to a string with localized formatting
-  let number = 1234567.89;
-  let localizedNumber = number.toLocaleString();
-  console.log(localizedNumber); 
-  // Output: "1,234,567.89" (depending on the locale)
-  
-  // 2. Convert a number to a string with a specific locale (German)
-  let germanNumber = number.toLocaleString('de-DE');
-  console.log(germanNumber); 
-  // Output: "1.234.567,89" (German locale)
-  
-  // 3. Format a date object using the default locale
-  let date = new Date(2023, 11, 24);
-  let localizedDate = date.toLocaleString();
-  console.log(localizedDate); 
-  // Output: "12/24/2023, 12:00:00 AM" (depending on the locale)
-  
-  // 4. Format a date object with a specific locale and options
-  let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-  let formattedDate = date.toLocaleString('en-US', options);
-  console.log(formattedDate); 
-  // Output: "Sunday, December 24, 2023" (English, US locale)
-  
-  // 5. Format a currency value in US dollars
-  let currencyValue = 123456.789;
-  let formattedCurrency = currencyValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-  console.log(formattedCurrency); 
-  // Output: "$123,456.79"
-  
-  // 6. Format a currency value in Japanese Yen
-  let yenCurrency = currencyValue.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
-  console.log(yenCurrency); 
-  // Output: "￥123,457"
-  
-  // 7. Format a percentage value
-  let percentage = 0.5678;
-  let formattedPercentage = percentage.toLocaleString('en-US', { style: 'percent' });
-  console.log(formattedPercentage); 
-  // Output: "56.78%"
-  
-  // 8. Format a number with specific digit options
-  let preciseNumber = 1234.56789;
-  let formattedPreciseNumber = preciseNumber.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
-  console.log(formattedPreciseNumber); 
-  // Output: "1,234.5679"
-  
-  // 9. Format a large number in Indian numbering system
-  let indianNumber = 123456789;
-  let formattedIndianNumber = indianNumber.toLocaleString('en-IN');
-  console.log(formattedIndianNumber); 
-  // Output: "12,34,56,789" (Indian locale)
-  
-  // 10. Format a date and time with a specific timezone
-  let timezoneDate = date.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' });
-  console.log(timezoneDate); 
-  // Output: "12/24/2023, 2:00:00 PM" (Tokyo time)
-
    -
    -
    .toReversed() method
    -

    .toReversed() method

    -

    The `.toReversed()` method in JavaScript is a relatively new addition that allows you to create a reversed copy of an array without modifying the original array. When you call `.toReversed()` on an array, it returns a new array with the elements in the opposite order, starting from the last element and ending with the first. This method is non-mutative, meaning the original array remains unchanged, which is particularly useful when you need to preserve the original data while working with a reversed version of it. The introduction of `.toReversed()` provides a more convenient and expressive way to reverse an array compared to using `.slice().reverse()`, which was a common practice before this method was available. It enhances code readability and reduces the risk of unintended side effects, making it a valuable tool for handling arrays in situations where both the original and reversed versions of the data are needed.

    -

    Specifications

    - 
    -             
-  // 1. Reverse an array of numbers without mutating the original array
-  let numbers = [1, 2, 3, 4, 5];
-  let reversedNumbers = numbers.toReversed();
-  console.log(reversedNumbers); 
-  // Output: [5, 4, 3, 2, 1]
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4, 5] (original array remains unchanged)
-  
-  // 2. Reverse an array of strings without mutating the original array
-  let fruits = ["apple", "banana", "cherry"];
-  let reversedFruits = fruits.toReversed();
-  console.log(reversedFruits); 
-  // Output: ["cherry", "banana", "apple"]
-  console.log(fruits); 
-  // Output: ["apple", "banana", "cherry"] (original array remains unchanged)
-  
-  // 3. Reverse an array of mixed data types
-  let mixedArray = [1, "two", true, null];
-  let reversedMixedArray = mixedArray.toReversed();
-  console.log(reversedMixedArray); 
-  // Output: [null, true, "two", 1]
-  
-  // 4. Reverse a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let reversedNestedArray = nestedArray.toReversed();
-  console.log(reversedNestedArray); 
-  // Output: [[5, 6], [3, 4], [1, 2]]
-  
-  // 5. Reverse an array and join it into a string
-  let letters = ["a", "b", "c", "d"];
-  let reversedString = letters.toReversed().join("");
-  console.log(reversedString); 
-  // Output: "dcba"
-  
-  // 6. Reverse an array of booleans
-  let booleans = [true, false, false, true];
-  let reversedBooleans = booleans.toReversed();
-  console.log(reversedBooleans); 
-  // Output: [true, false, false, true]
-  
-  // 7. Reverse a sparse array (array with empty slots)
-  let sparseArray = [1, , 3, , 5];
-  let reversedSparseArray = sparseArray.toReversed();
-  console.log(reversedSparseArray); 
-  // Output: [5, empty, 3, empty, 1]
-  
-  // 8. Reverse an array of numbers and calculate the sum of the reversed array
-  let nums = [1, 2, 3, 4, 5];
-  let reversedSum = nums.toReversed().reduce((acc, num) => acc + num, 0);
-  console.log(reversedSum); 
-  // Output: 15
-  
-  // 9. Reverse an array of strings and convert them to uppercase
-  let words = ["one", "two", "three"];
-  let reversedUppercaseWords = words.toReversed().map(word => word.toUpperCase());
-  console.log(reversedUppercaseWords); 
-  // Output: ["THREE", "TWO", "ONE"]
-  
-  // 10. Reverse an array of objects by a specific property without mutating the original
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let reversedUsers = users.toReversed();
-  console.log(reversedUsers); 
-  // Output: [{name: "Charlie", age: 35}, {name: "Bob", age: 30}, {name: "Alice", age: 25}]
-  console.log(users); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 35}] (original array remains unchanged)
-
    -
    -
    .toSorted() method
    -

    .toSorted() method

    -

    The `.toSorted()` method in JavaScript is a modern array method that returns a new array with the elements sorted in a specified order, without altering the original array. When you call `.toSorted()` on an array, you can optionally pass a comparator function that defines how the elements should be compared and ordered. If no comparator is provided, the method sorts the elements in ascending order based on their string Unicode values, similar to the behavior of the `.sort()` method. The key difference between `.toSorted()` and `.sort()` is that `.toSorted()` is non-mutative—it does not modify the original array, instead creating and returning a sorted copy. This makes `.toSorted()` particularly useful when you need to sort data without affecting the original dataset, preserving its integrity for other operations. The introduction of `.toSorted()` enhances code clarity and safety, reducing the chances of accidental data mutation while providing a straightforward way to work with sorted data.

    -

    Specifications

    - 
    -             
-  // 1. Sort an array of numbers in ascending order without mutating the original array
-  let numbers = [5, 3, 8, 1, 2];
-  let sortedNumbers = numbers.toSorted((a, b) => a - b);
-  console.log(sortedNumbers); 
-  // Output: [1, 2, 3, 5, 8]
-  console.log(numbers); 
-  // Output: [5, 3, 8, 1, 2] (original array remains unchanged)
-  
-  // 2. Sort an array of numbers in descending order
-  let sortedNumbersDesc = numbers.toSorted((a, b) => b - a);
-  console.log(sortedNumbersDesc); 
-  // Output: [8, 5, 3, 2, 1]
-  
-  // 3. Sort an array of strings alphabetically
-  let fruits = ["banana", "apple", "cherry"];
-  let sortedFruits = fruits.toSorted();
-  console.log(sortedFruits); 
-  // Output: ["apple", "banana", "cherry"]
-  console.log(fruits); 
-  // Output: ["banana", "apple", "cherry"] (original array remains unchanged)
-  
-  // 4. Sort an array of strings in reverse alphabetical order
-  let sortedFruitsDesc = fruits.toSorted((a, b) => b.localeCompare(a));
-  console.log(sortedFruitsDesc); 
-  // Output: ["cherry", "banana", "apple"]
-  
-  // 5. Sort an array of objects by a numeric property
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 20}
-  ];
-  let sortedByAge = users.toSorted((a, b) => a.age - b.age);
-  console.log(sortedByAge); 
-  // Output: [{name: "Charlie", age: 20}, {name: "Alice", age: 25}, {name: "Bob", age: 30}]
-  console.log(users); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 20}] (original array remains unchanged)
-  
-  // 6. Sort an array of objects by a string property
-  let sortedByName = users.toSorted((a, b) => a.name.localeCompare(b.name));
-  console.log(sortedByName); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 20}]
-  
-  // 7. Sort an array of mixed-case strings, case-insensitive
-  let mixedCaseStrings = ["Banana", "apple", "Cherry"];
-  let sortedMixedCaseStrings = mixedCaseStrings.toSorted((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-  console.log(sortedMixedCaseStrings); 
-  // Output: ["apple", "Banana", "Cherry"]
-  
-  // 8. Sort an array of numbers represented as strings
-  let numberStrings = ["10", "2", "30", "1"];
-  let sortedNumberStrings = numberStrings.toSorted((a, b) => parseInt(a) - parseInt(b));
-  console.log(sortedNumberStrings); 
-  // Output: ["1", "2", "10", "30"]
-  
-  // 9. Sort an array of dates in ascending order
-  let dates = [
-      new Date(2023, 11, 24),
-      new Date(2022, 5, 12),
-      new Date(2023, 0, 1)
-  ];
-  let sortedDates = dates.toSorted((a, b) => a - b);
-  console.log(sortedDates); 
-  // Output: [Date 2022-06-12, Date 2023-01-01, Date 2023-12-24]
-  
-  // 10. Sort an array of arrays based on the first element of each sub-array
-  let arrayOfArrays = [[3, "c"], [1, "a"], [2, "b"]];
-  let sortedArrayOfArrays = arrayOfArrays.toSorted((a, b) => a[0] - b[0]);
-  console.log(sortedArrayOfArrays); 
-  // Output: [[1, "a"], [2, "b"], [3, "c"]]
-  console.log(arrayOfArrays); 
-  // Output: [[3, "c"], [1, "a"], [2, "b"]] (original array remains unchanged)
-
    -
    -
    .toSpliced() method
    -

    .toSpliced() method

    -

    The `.toSpliced()` method in JavaScript is a recent addition that allows you to create a modified copy of an array by inserting, removing, or replacing elements, without altering the original array. When you call `.toSpliced()`, you specify a start index where the changes should begin, the number of elements to remove, and optionally, the elements to add at that position. Unlike the traditional `.splice()` method, which mutates the original array, `.toSpliced()` returns a new array with the modifications applied, leaving the original array untouched. This non-mutative approach is particularly useful when you need to perform complex modifications on an array while preserving the original data for other operations or references. The introduction of `.toSpliced()` provides a safer and more predictable way to work with array modifications, especially in functional programming contexts where immutability is often preferred.

    -

    Specifications

    - 
    -             
-  // 1. Remove elements from an array without mutating the original array
-  let numbers = [1, 2, 3, 4, 5];
-  let splicedNumbers = numbers.toSpliced(2, 2); // Removes 2 elements starting at index 2
-  console.log(splicedNumbers); 
-  // Output: [1, 2, 5]
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4, 5] (original array remains unchanged)
-  
-  // 2. Add elements to an array without mutating the original array
-  let fruits = ["apple", "banana", "cherry"];
-  let newFruits = fruits.toSpliced(1, 0, "orange", "grape");
-  console.log(newFruits); 
-  // Output: ["apple", "orange", "grape", "banana", "cherry"]
-  console.log(fruits); 
-  // Output: ["apple", "banana", "cherry"] (original array remains unchanged)
-  
-  // 3. Replace elements in an array without mutating the original array
-  let letters = ["a", "b", "c", "d"];
-  let replacedLetters = letters.toSpliced(1, 2, "x", "y");
-  console.log(replacedLetters); 
-  // Output: ["a", "x", "y", "d"]
-  console.log(letters); 
-  // Output: ["a", "b", "c", "d"] (original array remains unchanged)
-  
-  // 4. Remove all elements after a certain index
-  let colors = ["red", "green", "blue", "yellow"];
-  let shortenedColors = colors.toSpliced(2);
-  console.log(shortenedColors); 
-  // Output: ["red", "green"]
-  console.log(colors); 
-  // Output: ["red", "green", "blue", "yellow"] (original array remains unchanged)
-  
-  // 5. Insert elements at the beginning of an array
-  let nums = [4, 5, 6];
-  let newNums = nums.toSpliced(0, 0, 1, 2, 3);
-  console.log(newNums); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  console.log(nums); 
-  // Output: [4, 5, 6] (original array remains unchanged)
-  
-  // 6. Replace all elements in an array
-  let items = ["item1", "item2", "item3"];
-  let replacedItems = items.toSpliced(0, items.length, "newItem1", "newItem2");
-  console.log(replacedItems); 
-  // Output: ["newItem1", "newItem2"]
-  console.log(items); 
-  // Output: ["item1", "item2", "item3"] (original array remains unchanged)
-  
-  // 7. Remove the first element from an array
-  let animals = ["cat", "dog", "rabbit"];
-  let withoutFirstAnimal = animals.toSpliced(0, 1);
-  console.log(withoutFirstAnimal); 
-  // Output: ["dog", "rabbit"]
-  console.log(animals); 
-  // Output: ["cat", "dog", "rabbit"] (original array remains unchanged)
-  
-  // 8. Insert elements in the middle of an array
-  let sequence = [1, 2, 5, 6];
-  let correctedSequence = sequence.toSpliced(2, 0, 3, 4);
-  console.log(correctedSequence); 
-  // Output: [1, 2, 3, 4, 5, 6]
-  console.log(sequence); 
-  // Output: [1, 2, 5, 6] (original array remains unchanged)
-  
-  // 9. Replace a single element in an array
-  let weekdays = ["Monday", "Tuesday", "Wednesday"];
-  let updatedWeekdays = weekdays.toSpliced(1, 1, "Thursday");
-  console.log(updatedWeekdays); 
-  // Output: ["Monday", "Thursday", "Wednesday"]
-  console.log(weekdays); 
-  // Output: ["Monday", "Tuesday", "Wednesday"] (original array remains unchanged)
-  
-  // 10. Remove and add elements in an array simultaneously
-  let letters2 = ["a", "b", "c", "d"];
-  let modifiedLetters = letters2.toSpliced(1, 2, "x", "y", "z");
-  console.log(modifiedLetters); 
-  // Output: ["a", "x", "y", "z", "d"]
-  console.log(letters2); 
-  // Output: ["a", "b", "c", "d"] (original array remains unchanged)
-
    -
    -
    .with() method
    -

    .with() method

    -

    The `.with()` method in JavaScript is a modern array method that allows you to create a copy of an array with one element replaced at a specified index, without altering the original array. When you call `.with()`, you provide the index of the element you want to replace and the new value that should take its place. The method then returns a new array with the specified change, while the rest of the array remains unchanged. This method is particularly useful when you need to update a specific element in an array while ensuring the original array remains intact, which is important in scenarios where immutability is desired, such as in functional programming or when working with state in React. The `.with()` method simplifies the process of making targeted updates to arrays, offering a clear and concise way to handle array modifications without the risk of mutating the original data.

    -

    Specifications

    - 
    -             
-  // 1. Replace an element in an array without mutating the original array
-  let numbers = [1, 2, 3, 4, 5];
-  let newNumbers = numbers.with(2, 10); // Replaces the element at index 2 with 10
-  console.log(newNumbers); 
-  // Output: [1, 2, 10, 4, 5]
-  console.log(numbers); 
-  // Output: [1, 2, 3, 4, 5] (original array remains unchanged)
-  
-  // 2. Replace the first element in an array
-  let fruits = ["apple", "banana", "cherry"];
-  let newFruits = fruits.with(0, "orange");
-  console.log(newFruits); 
-  // Output: ["orange", "banana", "cherry"]
-  console.log(fruits); 
-  // Output: ["apple", "banana", "cherry"] (original array remains unchanged)
-  
-  // 3. Replace the last element in an array
-  let colors = ["red", "green", "blue"];
-  let newColors = colors.with(colors.length - 1, "yellow");
-  console.log(newColors); 
-  // Output: ["red", "green", "yellow"]
-  console.log(colors); 
-  // Output: ["red", "green", "blue"] (original array remains unchanged)
-  
-  // 4. Replace an element in a sparse array
-  let sparseArray = [1, , 3];
-  let newSparseArray = sparseArray.with(1, 2);
-  console.log(newSparseArray); 
-  // Output: [1, 2, 3]
-  console.log(sparseArray); 
-  // Output: [1, empty, 3] (original array remains unchanged)
-  
-  // 5. Replace an element in an array of objects
-  let users = [
-      {name: "Alice", age: 25},
-      {name: "Bob", age: 30},
-      {name: "Charlie", age: 35}
-  ];
-  let newUsers = users.with(1, {name: "Bob", age: 31});
-  console.log(newUsers); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 31}, {name: "Charlie", age: 35}]
-  console.log(users); 
-  // Output: [{name: "Alice", age: 25}, {name: "Bob", age: 30}, {name: "Charlie", age: 35}] (original array remains unchanged)
-  
-  // 6. Replace an element in an array of strings
-  let letters = ["a", "b", "c", "d"];
-  let newLetters = letters.with(3, "z");
-  console.log(newLetters); 
-  // Output: ["a", "b", "c", "z"]
-  console.log(letters); 
-  // Output: ["a", "b", "c", "d"] (original array remains unchanged)
-  
-  // 7. Replace an element in a nested array
-  let nestedArray = [[1, 2], [3, 4], [5, 6]];
-  let newNestedArray = nestedArray.with(1, [7, 8]);
-  console.log(newNestedArray); 
-  // Output: [[1, 2], [7, 8], [5, 6]]
-  console.log(nestedArray); 
-  // Output: [[1, 2], [3, 4], [5, 6]] (original array remains unchanged)
-  
-  // 8. Replace an element with `null`
-  let items = ["item1", "item2", "item3"];
-  let newItems = items.with(2, null);
-  console.log(newItems); 
-  // Output: ["item1", "item2", null]
-  console.log(items); 
-  // Output: ["item1", "item2", "item3"] (original array remains unchanged)
-  
-  // 9. Replace an element in an array of booleans
-  let booleans = [true, false, true];
-  let newBooleans = booleans.with(1, true);
-  console.log(newBooleans); 
-  // Output: [true, true, true]
-  console.log(booleans); 
-  // Output: [true, false, true] (original array remains unchanged)
-  
-  // 10. Replace an element in an array of mixed data types
-  let mixedArray = [1, "two", true];
-  let newMixedArray = mixedArray.with(1, "three");
-  console.log(newMixedArray); 
-  // Output: [1, "three", true]
-  console.log(mixedArray); 
-  // Output: [1, "two", true] (original array remains unchanged)    
-
    -
    -
    Loops -
    [12]
    -
    overview
    -

    overview

    -

    Loops in JavaScript are a powerful and essential programming construct that enable developers to automate repetitive tasks, handle large datasets, and implement complex algorithms efficiently. At their core, loops allow a block of code to be executed repeatedly based on a specified condition. This condition is evaluated before or after each iteration, depending on the type of loop, and as long as it holds true, the loop continues to execute. For instance, if you need to perform an operation on each element of an array, a loop can iterate through each item, applying the desired action without the need for manual, repetitive coding. JavaScript provides several types of loops, such as the `for` loop, which is ideal for situations where the number of iterations is known; the `while` loop, which is useful when the condition for continuation is more dynamic; and the `do...while` loop, which guarantees that the loop body is executed at least once. Additionally, there are specialized loops like `for...in` and `for...of` for iterating over object properties and iterable objects, respectively. By using loops, developers can write more efficient, readable, and maintainable code, particularly when dealing with tasks that require multiple iterations, such as data processing, automation, and traversal of collections. Loops not only save time but also reduce the likelihood of errors, making them a cornerstone of effective programming in JavaScript.

    -
    for loop
    -

    for loop

    -

    The `for` loop in JavaScript is one of the most commonly used looping structures, designed to execute a block of code a specific number of times. It consists of three main parts: an initialization statement, a condition, and an increment or decrement operation. The initialization is typically used to set up a loop counter, the condition is evaluated before each iteration to determine whether the loop should continue, and the increment or decrement adjusts the loop counter at the end of each iteration. For example, in a basic `for` loop, you might initialize a counter variable to zero, set a condition to keep looping as long as the counter is less than a certain value, and then increment the counter by one after each iteration. This structure is particularly useful when the number of iterations is known in advance, such as when you need to iterate over the elements of an array or perform a repetitive task a fixed number of times. The `for` loop provides a concise and flexible way to handle repeated actions, making it a fundamental tool for controlling flow in JavaScript programs.

    -

    Specifications

    - 
    -             
-  // 1. Basic for loop counting up
-  // Logs: 0 1 2 3 4
-  for (let i = 0; i < 5; i++) {
-      console.log(i);
-  }
-  
-  // 2. For loop iterating through an array
-  // Logs: Apple Banana Orange
-  const fruits = ["Apple", "Banana", "Orange"];
-  for (let i = 0; i < fruits.length; i++) {
-      console.log(fruits[i]);
-  }
-  
-  // 3. For loop counting down
-  // Logs: 4 3 2 1 0
-  for (let i = 4; i >= 0; i--) {
-      console.log(i);
-  }
-  
-  // 4. For loop with a step of 2
-  // Logs: 0 2 4 6 8
-  for (let i = 0; i < 10; i += 2) {
-      console.log(i);
-  }
-  
-  // 5. For loop through an object's keys
-  // Logs: name age occupation
-  const person = { name: "John", age: 30, occupation: "Engineer" };
-  for (let key in person) {
-      console.log(key);
-  }
-  
-  // 6. For loop through an object's values
-  // Logs: John 30 Engineer
-  for (let key in person) {
-      console.log(person[key]);
-  }
-  
-  // 7. For loop with nested loops (multiplication table)
-  // Logs: Multiplication table from 1 to 3
-  for (let i = 1; i <= 3; i++) {
-      for (let j = 1; j <= 3; j++) {
-          console.log(`${i} * ${j} = ${i * j}`);
-      }
-  }
-  
-  // 8. For loop with continue statement
-  // Logs: 0 1 3 4 (skips 2)
-  for (let i = 0; i < 5; i++) {
-      if (i === 2) continue;
-      console.log(i);
-  }
-  
-  // 9. For loop with break statement
-  // Logs: 0 1 2 (stops at 2)
-  for (let i = 0; i < 5; i++) {
-      if (i === 3) break;
-      console.log(i);
-  }
-  
-  // 10. For loop using for...of with an array
-  // Logs: Car Bus Train
-  const vehicles = ["Car", "Bus", "Train"];
-  for (const vehicle of vehicles) {
-      console.log(vehicle);
-  }
-  
-  // 11. For loop using for...in with an array (indexes)
-  // Logs: 0 1 2
-  for (let index in vehicles) {
-      console.log(index);
-  }
-  
-  // 12. For loop summing array elements
-  // Logs: 6
-  const numbers = [1, 2, 3];
-  let sum = 0;
-  for (let i = 0; i < numbers.length; i++) {
-      sum += numbers[i];
-  }
-  console.log(sum);
-  
-  // 13. For loop over a string
-  // Logs: H e l l o
-  const greeting = "Hello";
-  for (let i = 0; i < greeting.length; i++) {
-      console.log(greeting[i]);
-  }
-  
-  // 14. For loop generating a pattern (triangle)
-  // Logs: *
-  //       **
-  //       ***
-  //       ****
-  //       *****
-  for (let i = 1; i <= 5; i++) {
-      let pattern = '';
-      for (let j = 0; j < i; j++) {
-          pattern += '*';
-      }
-      console.log(pattern);
-  }
-  
-  // 15. For loop filtering even numbers from an array
-  // Logs: 2 4
-  const numbersArray = [1, 2, 3, 4, 5];
-  for (let i = 0; i < numbersArray.length; i++) {
-      if (numbersArray[i] % 2 === 0) {
-          console.log(numbersArray[i]);
-      }
-  }
-
    -
    -
    nested for loop
    -

    nested for loop

    -

    Nested for loops in JavaScript are loops placed inside another loop, and they are often used when dealing with nested arrays, which are arrays within arrays. This type of structure allows you to iterate through multi-dimensional data efficiently. For example, if you have a 2D array, where each element in the main array is itself an array (like a grid or matrix), the outer loop can iterate through each array (row), and the inner loop can iterate through each element within that row (column). This approach is powerful for tasks like processing or accessing data in a grid-like format, such as creating tables or performing operations across rows and columns simultaneously. However, it's crucial to understand that nested loops, especially with nested arrays, can lead to increased computational complexity, making the code slower as the size of the data grows. Careful consideration should be given to ensure that nested loops are necessary and optimized for performance, especially when working with large or complex datasets.

    -

    Specifications

    - 
    -             
-  // 1. Basic nested for loop (multiplication table)
-  // Logs: Multiplication table from 1 to 3
-  for (let i = 1; i <= 3; i++) {
-      for (let j = 1; j <= 3; j++) {
-          console.log(`${i} * ${j} = ${i * j}`);
-      }
-  }
-  
-  // 2. Iterating through a 2D array (grid)
-  // Logs: Elements of the 2D array row by row
-  const grid = [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9]
-  ];
-  for (let i = 0; i < grid.length; i++) {
-      for (let j = 0; j < grid[i].length; j++) {
-          console.log(grid[i][j]);
-      }
-  }
-  
-  // 3. Finding mutual followers between two users
-  // Logs: List of mutual followers between two users
-  const userA_followers = ['John', 'Alice', 'Bob', 'Eve'];
-  const userB_followers = ['Bob', 'Eve', 'Charlie'];
-  let mutualFollowers = [];
-  for (let i = 0; i < userA_followers.length; i++) {
-      for (let j = 0; j < userB_followers.length; j++) {
-          if (userA_followers[i] === userB_followers[j]) {
-              mutualFollowers.push(userA_followers[i]);
-          }
-      }
-  }
-  console.log('Mutual Followers:', mutualFollowers);
-  
-  // 4. Calculating the intersection of two arrays
-  // Logs: Intersection of two arrays [2, 4]
-  const array1 = [1, 2, 3, 4];
-  const array2 = [2, 4, 6, 8];
-  let intersection = [];
-  for (let i = 0; i < array1.length; i++) {
-      for (let j = 0; j < array2.length; j++) {
-          if (array1[i] === array2[j]) {
-              intersection.push(array1[i]);
-          }
-      }
-  }
-  console.log('Intersection:', intersection);
-  
-  // 5. Creating a follow suggestion list (users not followed by User A)
-  // Logs: List of users not followed by User A from User B's followers
-  let followSuggestions = [];
-  for (let i = 0; i < userB_followers.length; i++) {
-      let isFollowed = false;
-      for (let j = 0; j < userA_followers.length; j++) {
-          if (userB_followers[i] === userA_followers[j]) {
-              isFollowed = true;
-              break;
-          }
-      }
-      if (!isFollowed) {
-          followSuggestions.push(userB_followers[i]);
-      }
-  }
-  console.log('Follow Suggestions:', followSuggestions);
-  
-  // 6. Counting duplicate elements in an array
-  // Logs: Number of duplicate elements [3]
-  const arr = [1, 2, 3, 2, 4, 1, 1];
-  let duplicates = [];
-  for (let i = 0; i < arr.length; i++) {
-      for (let j = i + 1; j < arr.length; j++) {
-          if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
-              duplicates.push(arr[i]);
-          }
-      }
-  }
-  console.log('Duplicates:', duplicates);
-  
-  // 7. Checking if a 2D array (grid) contains a specific value
-  // Logs: Whether the grid contains the value (true or false)
-  const valueToFind = 5;
-  let found = false;
-  for (let i = 0; i < grid.length; i++) {
-      for (let j = 0; j < grid[i].length; j++) {
-          if (grid[i][j] === valueToFind) {
-              found = true;
-              break;
-          }
-      }
-      if (found) break;
-  }
-  console.log(`Value ${valueToFind} found:`, found);
-  
-  // 8. Comparing products in an e-commerce app (comparing features)
-  // Logs: Features present in both products
-  const productA_features = ['WiFi', 'Bluetooth', 'GPS'];
-  const productB_features = ['Bluetooth', '4G', 'GPS'];
-  let commonFeatures = [];
-  for (let i = 0; i < productA_features.length; i++) {
-      for (let j = 0; j < productB_features.length; j++) {
-          if (productA_features[i] === productB_features[j]) {
-              commonFeatures.push(productA_features[i]);
-          }
-      }
-  }
-  console.log('Common Features:', commonFeatures);
-  
-  // 9. Checking for symmetrical matrices (common in games or grids)
-  // Logs: Whether the matrix is symmetrical
-  let isSymmetric = true;
-  for (let i = 0; i < grid.length; i++) {
-      for (let j = 0; j < grid[i].length; j++) {
-          if (grid[i][j] !== grid[j][i]) {
-              isSymmetric = false;
-              break;
-          }
-      }
-      if (!isSymmetric) break;
-  }
-  console.log('Is grid symmetric:', isSymmetric);
-  
-  // 10. Finding common tags between two blog posts
-  // Logs: List of common tags between two blog posts
-  const post1_tags = ['JavaScript', 'Web', 'Programming'];
-  const post2_tags = ['Programming', 'Tutorial', 'JavaScript'];
-  let commonTags = [];
-  for (let i = 0; i < post1_tags.length; i++) {
-      for (let j = 0; j < post2_tags.length; j++) {
-          if (post1_tags[i] === post2_tags[j]) {
-              commonTags.push(post1_tags[i]);
-          }
-      }
-  }
-  console.log('Common Tags:', commonTags);
-
    -
    -
    looping through arrays
    -

    looping through arrays

    -

    Looping through arrays in JavaScript is a fundamental operation that allows you to access and manipulate each element within an array. One common approach is using a `for` loop, which iterates over the array by starting from the first index (0) and continues until the last element is reached. The `.length` property of an array plays a crucial role in this process, as it returns the total number of elements in the array. By using this property, the loop can dynamically adjust to the size of the array, ensuring that it iterates through every element, regardless of the array's length. For example, in a `for` loop, you might use `i < array.length` as the condition, where `i` is the loop's counter variable. This condition ensures the loop continues running until it has processed every element. This method is highly efficient for accessing, modifying, or performing operations on each item in the array, making it a versatile tool for developers working with arrays in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Looping through an array of usernames to greet each user
-  // Logs: Hello, Alice! Hello, Bob! Hello, Charlie!
-  const usernames = ['Alice', 'Bob', 'Charlie'];
-  for (let i = 0; i < usernames.length; i++) {
-      console.log(`Hello, ${usernames[i]}!`);
-  }
-  
-  // 2. Looping through a list of product prices to calculate the total cost
-  // Logs: Total cost is: $60
-  const prices = [10, 20, 30];
-  let totalCost = 0;
-  for (let i = 0; i < prices.length; i++) {
-      totalCost += prices[i];
-  }
-  console.log(`Total cost is: $${totalCost}`);
-  
-  // 4. Looping through an array of likes to count how many likes are above 100
-  // Logs: 2 posts have more than 100 likes
-  const likes = [50, 150, 200, 80];
-  let count = 0;
-  for (let i = 0; i < likes.length; i++) {
-      if (likes[i] > 100) {
-          count++;
-      }
-  }
-  console.log(`${count} posts have more than 100 likes`);
-  
-  // 5. Looping through a list of comments to find the longest comment
-  // Logs: The longest comment is: "This is the longest comment!"
-  const comments = ['Nice post!', 'Great!', 'This is the longest comment!', 'Good job!'];
-  let longestComment = comments[0];
-  for (let i = 1; i < comments.length; i++) {
-      if (comments[i].length > longestComment.length) {
-          longestComment = comments[i];
-      }
-  }
-  console.log(`The longest comment is: "${longestComment}"`);
-  
-  // 6. Looping through a list of email addresses to check for invalid emails
-  // Logs: Invalid email found: "invalidemail.com"
-  const emails = ['user@example.com', 'admin@website.org', 'invalidemail.com'];
-  for (let i = 0; i < emails.length; i++) {
-      if (!emails[i].includes('@')) {
-          console.log(`Invalid email found: "${emails[i]}"`);
-      }
-  }
-  
-  // 7. Looping through a list of tasks to mark all as completed
-  // Logs: Task 1: completed, Task 2: completed, Task 3: completed
-  const tasks = ['Task 1', 'Task 2', 'Task 3'];
-  for (let i = 0; i < tasks.length; i++) {
-      console.log(`${tasks[i]}: completed`);
-  }
-  
-  // 8. Looping through an array of followers to display follower count
-  // Logs: You have 3 followers
-  const followers = ['Follower1', 'Follower2', 'Follower3'];
-  console.log(`You have ${followers.length} followers`);
-  
-  // 9. Looping through an array of messages to find the first unread message
-  // Logs: First unread message is: "You have a new friend request"
-  const messages = ['Read: Welcome!', 'Unread: You have a new friend request', 'Unread: Don’t miss out on our sale!'];
-  let unreadMessage = null;
-  for (let i = 0; i < messages.length; i++) {
-      if (messages[i].startsWith('Unread')) {
-          unreadMessage = messages[i];
-          break;
-      }
-  }
-  console.log(`First unread message is: "${unreadMessage}"`);
-  
-  // 10. Looping through a list of product ratings to calculate the average rating
-  // Logs: The average rating is: 4.2
-  const ratings = [5, 4, 3, 5, 4];
-  let sumRatings = 0;
-  for (let i = 0; i < ratings.length; i++) {
-      sumRatings += ratings[i];
-  }
-  const averageRating = sumRatings / ratings.length;
-  console.log(`The average rating is: ${averageRating.toFixed(1)}`);
-
    -
    -
    reverse loop
    -

    reverse loop

    -

    Reverse for loops in JavaScript are a variation of the traditional for loop, where the loop starts from the last element of an array and iterates backward to the first element. This type of loop is useful when you need to process or manipulate elements in reverse order, such as when you want to iterate over an array from the end to the beginning. The structure of a reverse for loop typically involves initializing the loop counter to the last index of the array (which is the array's length minus one), setting the condition to continue the loop as long as the counter is greater than or equal to zero, and decrementing the counter in each iteration. This approach ensures that every element of the array is accessed in reverse order. Reverse loops are particularly helpful in situations where modifying the array during iteration might affect the remaining elements, as processing from the end can prevent unintended side effects.

    -

    Specifications

    - 
    -             
-  // 1. Reverse loop to print numbers from 5 to 1
-  // Logs: 5 4 3 2 1
-  for (let i = 5; i >= 1; i--) {
-      console.log(i);
-  }
-  
-  // 2. Reverse loop to iterate through an array of names
-  // Logs: Charlie Bob Alice
-  const names = ['Alice', 'Bob', 'Charlie'];
-  for (let i = names.length - 1; i >= 0; i--) {
-      console.log(names[i]);
-  }
-  
-  // 3. Reverse loop to remove elements from an array while iterating
-  // Logs: [2] [2, 1] [2, 1, 0]
-  let numbers = [0, 1, 2, 3];
-  for (let i = numbers.length - 1; i >= 0; i--) {
-      numbers.pop();
-      console.log(numbers);
-  }
-  
-  // 4. Reverse loop to build a string in reverse order
-  // Logs: "!dlroW olleH"
-  const str = "Hello World!";
-  let reversedStr = '';
-  for (let i = str.length - 1; i >= 0; i--) {
-      reversedStr += str[i];
-  }
-  console.log(reversedStr);
-  
-  // 5. Reverse loop to count down even numbers
-  // Logs: 10 8 6 4 2 0
-  for (let i = 10; i >= 0; i -= 2) {
-      console.log(i);
-  }
-  
-  // 6. Reverse loop to log only the last three elements of an array
-  // Logs: 3 4 5
-  const arr = [1, 2, 3, 4, 5];
-  for (let i = arr.length - 1; i >= arr.length - 3; i--) {
-      console.log(arr[i]);
-  }
-  
-  // 7. Reverse loop to filter out negative numbers
-  // Logs: [3, 0, 2]
-  let nums = [3, -1, 0, -4, 2];
-  let positiveNums = [];
-  for (let i = nums.length - 1; i >= 0; i--) {
-      if (nums[i] >= 0) {
-          positiveNums.push(nums[i]);
-      }
-  }
-  console.log(positiveNums);
-  
-  // 8. Reverse loop to find the first even number
-  // Logs: 4
-  const numbersArray = [1, 3, 5, 4, 7];
-  let firstEven = null;
-  for (let i = numbersArray.length - 1; i >= 0; i--) {
-      if (numbersArray[i] % 2 === 0) {
-          firstEven = numbersArray[i];
-          break;
-      }
-  }
-  console.log(firstEven);
-  
-  // 9. Reverse loop to display array elements in reverse order
-  // Logs: 3 2 1
-  let smallArr = [1, 2, 3];
-  for (let i = smallArr.length - 1; i >= 0; i--) {
-      console.log(smallArr[i]);
-  }
-  
-  // 10. Reverse loop to check for palindromes
-  // Logs: true (since the word "madam" is a palindrome)
-  const word = "madam";
-  let isPalindrome = true;
-  for (let i = 0; i < word.length / 2; i++) {
-      if (word[i] !== word[word.length - 1 - i]) {
-          isPalindrome = false;
-          break;
-      }
-  }
-  console.log(isPalindrome);
-
    -
    -
    for...of loop
    -

    for...op loop

    -

    The `for...of` loop in JavaScript is a modern and concise way to iterate over iterable objects such as arrays, strings, maps, sets, and more. Unlike traditional `for` loops that require managing an index or counter, `for...of` automatically retrieves each element of the iterable in sequence, making the code cleaner and easier to read. This loop is particularly useful when you don't need the index or key of the items, just the values themselves. For example, when iterating over an array with `for...of`, each loop iteration directly accesses the array's elements, allowing you to perform operations on them without worrying about managing the loop's iteration index. This makes `for...of` ideal for simple iterations where only the values matter, contributing to more readable and maintainable code in JavaScript. However, it's important to note that `for...of` cannot be used to iterate over objects directly, as objects are not inherently iterable in JavaScript; instead, `for...in` or `Object.keys()` can be used for object iteration.

    -

    Specifications

    - 
    -             
-  // 1. Loop through an array of numbers and log each number
-  // Logs: 1 2 3 4 5
-  const numbers = [1, 2, 3, 4, 5];
-  for (const num of numbers) {
-      console.log(num);
-  }
-  
-  // 2. Loop through an array of strings and log each string
-  // Logs: Apple Banana Cherry
-  const fruits = ['Apple', 'Banana', 'Cherry'];
-  for (const fruit of fruits) {
-      console.log(fruit);
-  }
-  
-  // 3. Loop through a string and log each character
-  // Logs: H e l l o
-  const str = "Hello";
-  for (const char of str) {
-      console.log(char);
-  }
-  
-  // 4. Loop through an array of objects and log a specific property
-  // Logs: Alice Bob Charlie
-  const users = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }];
-  for (const user of users) {
-      console.log(user.name);
-  }
-  
-  // 5. Loop through a Set and log each value
-  // Logs: a b c
-  const mySet = new Set(['a', 'b', 'c']);
-  for (const value of mySet) {
-      console.log(value);
-  }
-  
-  // 6. Loop through a Map and log each key-value pair
-  // Logs: a: 1, b: 2, c: 3
-  const myMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
-  for (const [key, value] of myMap) {
-      console.log(`${key}: ${value}`);
-  }
-  
-  // 7. Loop through an array and log the square of each number
-  // Logs: 1 4 9 16 25
-  for (const num of numbers) {
-      console.log(num * num);
-  }
-  
-  // 8. Loop through a list of boolean values and log whether each is true or false
-  // Logs: true false true false
-  const bools = [true, false, true, false];
-  for (const bool of bools) {
-      console.log(bool);
-  }
-  
-  // 9. Loop through an array and log the length of each string
-  // Logs: 5 6 6
-  const words = ['apple', 'banana', 'cherry'];
-  for (const word of words) {
-      console.log(word.length);
-  }
-  
-  // 10. Loop through an array of grades and log if they are passing
-  // Logs: Passed! Failed! Passed!
-  const grades = [80, 50, 90];
-  for (const grade of grades) {
-      if (grade >= 60) {
-          console.log("Passed!");
-      } else {
-          console.log("Failed!");
-      }
-  }
-
    -
    -
    break & continue keyword
    -

    break & continue keyword

    -

    The `break` and `continue` keywords in JavaScript are powerful tools used to control the flow of loops. The `break` keyword is used to immediately exit a loop, terminating the loop's execution entirely and moving the control to the code that follows the loop. This is particularly useful in situations where a specific condition is met, and further iterations of the loop are unnecessary or could lead to undesirable outcomes. The `continue` keyword, on the other hand, is used to skip the current iteration of the loop and jump directly to the next iteration, effectively ignoring any code that follows it within the loop's current cycle. This is useful when certain conditions require bypassing part of the loop's body without exiting the loop altogether. Both `break` and `continue` can be used in various types of loops in JavaScript, including `for`, `while`, and `do...while` loops. They provide fine-grained control over loop execution, allowing developers to manage loop behavior based on specific conditions or logic within the loop.

    -

    Specifications

    - 
    -             
-  // 1. Using break to exit a loop when a number is found
-  // Logs: 1 2 3
-  for (let i = 1; i <= 5; i++) {
-      if (i === 4) {
-          break;
-      }
-      console.log(i);
-  }
-  
-  // 2. Using continue to skip even numbers
-  // Logs: 1 3 5
-  for (let i = 1; i <= 5; i++) {
-      if (i % 2 === 0) {
-          continue;
-      }
-      console.log(i);
-  }
-  
-  // 3. Using break in a while loop to stop when a condition is met
-  // Logs: 0 1 2
-  let count = 0;
-  while (count < 5) {
-      if (count === 3) {
-          break;
-      }
-      console.log(count);
-      count++;
-  }
-  
-  // 4. Using continue in a while loop to skip a specific iteration
-  // Logs: 0 1 3 4
-  count = 0;
-  while (count < 5) {
-      count++;
-      if (count === 2) {
-          continue;
-      }
-      console.log(count);
-  }
-  
-  // 5. Using break in a for loop to exit when a specific string is found
-  // Logs: Alice Bob
-  const names = ['Alice', 'Bob', 'Charlie', 'Dave'];
-  for (let i = 0; i < names.length; i++) {
-      if (names[i] === 'Charlie') {
-          break;
-      }
-      console.log(names[i]);
-  }
-  
-  // 6. Using continue in a for loop to skip a specific string
-  // Logs: Alice Bob Dave
-  for (let i = 0; i < names.length; i++) {
-      if (names[i] === 'Charlie') {
-          continue;
-      }
-      console.log(names[i]);
-  }
-  
-  // 7. Using break in a for loop to stop checking after finding the first match
-  // Logs: 1st found: 5
-  const numbers = [1, 3, 5, 7, 9];
-  for (const num of numbers) {
-      if (num % 5 === 0) {
-          console.log('1st found:', num);
-          break;
-      }
-  }
-  
-  // 8. Using continue to skip non-positive numbers
-  // Logs: 1 5 9
-  const moreNumbers = [1, -3, 5, 0, 9];
-  for (const num of moreNumbers) {
-      if (num <= 0) {
-          continue;
-      }
-      console.log(num);
-  }
-  
-  // 9. Using break to exit nested loops when a condition is met
-  // Logs: 1 1, 1 2, 1 3
-  outerLoop: for (let i = 1; i <= 3; i++) {
-      for (let j = 1; j <= 3; j++) {
-          if (j === 4) {
-              break outerLoop;
-          }
-          console.log(i, j);
-      }
-  }
-  
-  // 10. Using continue to skip a specific iteration in a nested loop
-  // Logs: 1 1, 1 2, 2 1, 2 2
-  for (let i = 1; i <= 2; i++) {
-      for (let j = 1; j <= 2; j++) {
-          if (i === 2 && j === 3) {
-              continue;
-          }
-          console.log(i, j);
-      }
-  }
-
    -
    -
    while loop
    -

    while loop

    -

    The `while` loop in JavaScript is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The loop continues to execute as long as the specified condition remains true. The `while` loop is particularly useful when the number of iterations is not known beforehand, as the loop will run until the condition evaluates to false. Inside the loop, any code block can be placed, and it's crucial to ensure that the loop includes logic that will eventually make the condition false, otherwise, the loop will run indefinitely, leading to an infinite loop. This loop is often used for scenarios like waiting for a certain state to be reached, repeatedly processing items until none are left, or iterating over user input until a valid response is provided. The simplicity of the `while` loop makes it a fundamental tool in JavaScript for managing repetitive tasks where the exact number of iterations cannot be determined before entering the loop.

    -

    Specifications

    - 
    -             
-  // 1. Simple countdown using while loop
-  // Logs: 5 4 3 2 1
-  let count = 5;
-  while (count > 0) {
-      console.log(count);
-      count--;
-  }
-  
-  // 2. Reading input until a valid number is provided
-  // Logs: "Please enter a valid number." until a valid number is entered
-  let input;
-  while (isNaN(input)) {
-      input = prompt("Enter a number:");
-      if (isNaN(input)) {
-          console.log("Please enter a valid number.");
-      }
-  }
-  // Logs: "Valid number entered!"
-  console.log("Valid number entered!");
-  
-  // 3. Loop until a random number greater than 0.8 is generated
-  // Logs random numbers until one greater than 0.8 is found
-  let num;
-  while (num <= 0.8) {
-      num = Math.random();
-      console.log(num);
-  }
-  // Logs: "Number greater than 0.8 found!"
-  console.log("Number greater than 0.8 found!");
-  
-  // 4. Accumulating sum until it exceeds 100
-  // Logs: the sum at each step until it exceeds 100
-  let sum = 0;
-  while (sum <= 100) {
-      sum += Math.floor(Math.random() * 20);
-      console.log(`Current sum: ${sum}`);
-  }
-  // Logs: "Sum exceeded 100!"
-  console.log("Sum exceeded 100!");
-  
-  // 5. Removing elements from an array until empty
-  // Logs each removed element until the array is empty
-  let numbers = [1, 2, 3, 4, 5];
-  while (numbers.length > 0) {
-      const removed = numbers.pop();
-      console.log(`Removed: ${removed}`);
-  }
-  // Logs: "Array is now empty"
-  console.log("Array is now empty");
-  
-  // 6. Looping until a specific value is found in an array
-  // Logs each value until the specific value (e.g., 7) is found
-  let values = [2, 4, 6, 7, 9, 12];
-  let i = 0;
-  while (values[i] !== 7) {
-      console.log(`Checked: ${values[i]}`);
-      i++;
-  }
-  // Logs: "Value 7 found!"
-  console.log("Value 7 found!");
-  
-  // 7. Repeatedly prompt until user clicks "OK"
-  // Logs: "Do you want to continue?" until user clicks "OK"
-  let proceed = false;
-  while (!proceed) {
-      proceed = confirm("Do you want to continue?");
-  }
-  // Logs: "Continuing..."
-  console.log("Continuing...");
-  
-  // 8. Loop until a number divisible by 5 is found
-  // Logs random numbers until one divisible by 5 is found
-  let number;
-  while (number % 5 !== 0) {
-      number = Math.floor(Math.random() * 100);
-      console.log(number);
-  }
-  // Logs: "Found a number divisible by 5!"
-  console.log("Found a number divisible by 5!");
-  
-  // 9. Emptying a string by removing its last character
-  // Logs the string until it's empty
-  let text = "JavaScript";
-  while (text.length > 0) {
-      text = text.slice(0, -1);
-      console.log(text);
-  }
-  // Logs: "String is now empty"
-  console.log("String is now empty");
-  
-  // 10. Counting down in an array until a specific value is found
-  // Logs each number until a specific value (e.g., 3) is found, then stops
-  let countdown = [5, 4, 3, 2, 1];
-  while (countdown.length > 0) {
-      const current = countdown.shift();
-      console.log(current);
-      if (current === 3) {
-          break;
-      }
-  }
-  // Logs: "Stopped at value 3"
-  console.log("Stopped at value 3");
-
    -
    -
    do...while loop
    -

    do...while loop

    -

    The `do...while` loop in JavaScript is a control flow statement that allows code to be executed repeatedly based on a given condition, but with a key difference compared to a `while` loop: the `do...while` loop guarantees that the code inside the loop will run at least once, regardless of whether the condition is initially true or false. This is because the condition is evaluated after the code block is executed. The structure of the `do...while` loop starts with the `do` keyword, followed by a block of code enclosed in curly braces, and then the `while` keyword with the condition in parentheses. After the code block is executed, the condition is checked, and if it evaluates to true, the loop runs again. This loop is particularly useful in situations where the loop's code must run at least once, such as when you need to prompt a user for input and you want to ensure the prompt appears at least once before any validation occurs. The `do...while` loop provides a straightforward way to handle scenarios where the loop's logic requires an initial execution before condition checking.

    -

    Specifications

    - 
    -             
-  // 1. Basic example: Simple countdown using do...while loop
-  // Logs: 5 4 3 2 1
-  let count = 5;
-  do {
-      console.log(count);
-      count--;
-  } while (count > 0);
-  
-  // 2. Basic example: Logging numbers from 1 to 5
-  // Logs: 1 2 3 4 5
-  let num = 1;
-  do {
-      console.log(num);
-      num++;
-  } while (num <= 5);
-  
-  // 3. Basic example: Executing a loop once even if the condition is false
-  // Logs: "This runs at least once!"
-  let flag = false;
-  do {
-      console.log("This runs at least once!");
-  } while (flag);
-  
-  // 4. Basic example: Looping until a specific condition is met
-  // Logs: 2 4 6
-  let number = 2;
-  do {
-      console.log(number);
-      number += 2;
-  } while (number <= 6);
-  
-  // 5. Basic example: Looping through an array until it's empty
-  // Logs: Removed: 3 Removed: 2 Removed: 1
-  let numbers = [3, 2, 1];
-  do {
-      console.log(`Removed: ${numbers.pop()}`);
-  } while (numbers.length > 0);
-  
-  // 6. Intermediate example: Accumulating random numbers until a threshold is met
-  // Logs: random numbers until sum exceeds 20, e.g., "Sum: 3", "Sum: 10", "Sum: 22"
-  let sum = 0;
-  do {
-      const randomNumber = Math.floor(Math.random() * 10) + 1;
-      sum += randomNumber;
-      console.log(`Sum: ${sum}`);
-  } while (sum <= 20);
-  // Logs: "Threshold of 20 exceeded!"
-  
-  // 7. Intermediate example: Prompting user until a valid age is entered
-  // Logs: "Please enter a valid age." until a number between 1 and 120 is entered
-  let age;
-  do {
-      age = prompt("Enter your age (1-120):");
-      if (isNaN(age) || age < 1 || age > 120) {
-          console.log("Please enter a valid age.");
-      }
-  } while (isNaN(age) || age < 1 || age > 120);
-  // Logs: "Valid age entered!"
-  
-  // 8. Intermediate example: Emptying a string by removing characters one by one
-  // Logs: "JavaScript" "JavaScrip" "JavaScri" ... "J"
-  let text = "JavaScript";
-  do {
-      text = text.slice(0, -1);
-      console.log(text);
-  } while (text.length > 0);
-  // Logs: "String is now empty"
-  
-  // 9. Intermediate example: Random number generation until a specific number is found
-  // Logs: random numbers until a number divisible by 5 is generated, e.g., "7", "14", "5"
-  let randomNum;
-  do {
-      randomNum = Math.floor(Math.random() * 20) + 1;
-      console.log(randomNum);
-  } while (randomNum % 5 !== 0);
-  // Logs: "Number divisible by 5 found!"
-  
-  // 10. Intermediate example: Simulating a basic guessing game
-  // Logs: "Incorrect guess." until the correct number is guessed
-  const secretNumber = Math.floor(Math.random() * 10) + 1;
-  let guess;
-  do {
-      guess = prompt("Guess the secret number (1-10):");
-      if (guess != secretNumber) {
-          console.log("Incorrect guess.");
-      }
-  } while (guess != secretNumber);
-  // Logs: "Congratulations! You guessed it!"
-  console.log("Congratulations! You guessed it!");
-
    -
    -
    looping through objects
    -

    looping through objects

    -

    Looping through objects in JavaScript is a common task that allows you to access and manipulate the properties and values of an object. Unlike arrays, which are indexed and iterable using loops like `for` or `for...of`, objects are collections of key-value pairs where each key is a unique string (or symbol) and the values can be any data type. To loop through an object, you typically use the `for...in` loop, which iterates over the object's enumerable properties, allowing you to access each key. Within this loop, you can retrieve the corresponding value using the bracket notation or dot notation (e.g., `object[key]`). Additionally, modern JavaScript offers methods like `Object.keys()`, `Object.values()`, and `Object.entries()` to retrieve an array of keys, values, or key-value pairs respectively, which can then be looped over using a `for` loop, `forEach`, or `for...of`. These methods provide flexibility in how you access and manipulate object data, making them powerful tools for handling objects in JavaScript.

    -

    Specifications

    - 
    -             
-  // 1. Using for...in to loop through an object's properties
-  // Logs: name: Alice, age: 30, occupation: Developer
-  const person = { name: "Alice", age: 30, occupation: "Developer" };
-  for (const key in person) {
-      console.log(`${key}: ${person[key]}`);
-  }
-  
-  // 2. Using Object.keys() to loop through an object's keys
-  // Logs: name, age, occupation
-  const keys = Object.keys(person);
-  for (const key of keys) {
-      console.log(key);
-  }
-  
-  // 3. Using Object.values() to loop through an object's values
-  // Logs: Alice, 30, Developer
-  const values = Object.values(person);
-  for (const value of values) {
-      console.log(value);
-  }
-  
-  // 4. Using Object.entries() to loop through an object's key-value pairs
-  // Logs: name: Alice, age: 30, occupation: Developer
-  const entries = Object.entries(person);
-  for (const [key, value] of entries) {
-      console.log(`${key}: ${value}`);
-  }
-  
-  // 5. Looping through a nested object
-  // Logs: address: street: 123 Main St, city: Anytown, zip: 12345
-  const user = {
-      name: "John",
-      address: {
-          street: "123 Main St",
-          city: "Anytown",
-          zip: "12345"
-      }
-  };
-  for (const key in user) {
-      if (typeof user[key] === 'object') {
-          for (const subKey in user[key]) {
-              console.log(`${key}: ${subKey}: ${user[key][subKey]}`);
-          }
-      } else {
-          console.log(`${key}: ${user[key]}`);
-      }
-  }
-  
-  // 6. Looping through an object to calculate the total of numeric properties
-  // Logs: Total: 55
-  const scores = { math: 15, science: 20, english: 20 };
-  let total = 0;
-  for (const key in scores) {
-      total += scores[key];
-  }
-  console.log(`Total: ${total}`);
-  
-  // 7. Looping through an object to create a new array of formatted strings
-  // Logs: ["Math: 15", "Science: 20", "English: 20"]
-  let formattedScores = [];
-  for (const key in scores) {
-      formattedScores.push(`${key.charAt(0).toUpperCase() + key.slice(1)}: ${scores[key]}`);
-  }
-  console.log(formattedScores);
-  
-  // 8. Using for...in with inherited properties (demonstrates skipping prototype properties)
-  // Logs: name: Laptop, price: 1200
-  function Product(name, price) {
-      this.name = name;
-      this.price = price;
-  }
-  Product.prototype.category = "Electronics";
-  const product = new Product("Laptop", 1200);
-  for (const key in product) {
-      if (product.hasOwnProperty(key)) {
-          console.log(`${key}: ${product[key]}`);
-      }
-  }
-  
-  // 9. Looping through an object's keys and converting them to uppercase
-  // Logs: NAME: Alice, AGE: 30, OCCUPATION: Developer
-  for (const key in person) {
-      const upperKey = key.toUpperCase();
-      console.log(`${upperKey}: ${person[key]}`);
-  }
-  
-  // 10. Looping through an array of objects
-  // Logs: Name: Alice, Occupation: Developer; Name: Bob, Occupation: Designer
-  const users = [
-      { name: "Alice", occupation: "Developer" },
-      { name: "Bob", occupation: "Designer" }
-  ];
-  for (const user of users) {
-      console.log(`Name: ${user.name}, Occupation: ${user.occupation}`);
-  }
-
    -
    -
    for...in loop
    -

    for...in loop

    -

    The `for...in` loop in JavaScript is a control structure used to iterate over the enumerable properties of an object. When you use a `for...in` loop, it cycles through each key or property name within the object, allowing you to access and manipulate the associated values. This loop is particularly useful when dealing with objects where you want to perform operations on each property without needing to know the specific keys in advance. However, it's important to note that the `for...in` loop also iterates over properties that are inherited through the object's prototype chain, which can sometimes lead to unintended results if you are only interested in the object's own properties. To avoid this, developers often use the `hasOwnProperty()` method within the loop to ensure that only the object's own properties are processed. While the `for...in` loop is designed for objects, it is generally not recommended for use with arrays because it does not guarantee the order of iteration and may include inherited properties, which can lead to unexpected behavior.

    -

    Specifications

    - 
    -             
-  // 1. Basic example: Looping through an object's properties
-  // Logs: name: Alice, age: 30, occupation: Developer
-  const person = { name: "Alice", age: 30, occupation: "Developer" };
-  for (const key in person) {
-      console.log(`${key}: ${person[key]}`);
-  }
-  
-  // 2. Looping through an object's properties with hasOwnProperty()
-  // Logs: name: Alice, age: 30, occupation: Developer (only own properties)
-  for (const key in person) {
-      if (person.hasOwnProperty(key)) {
-          console.log(`${key}: ${person[key]}`);
-      }
-  }
-  
-  // 3. Looping through an object's properties and calculating total of numeric values
-  // Logs: Total score: 150
-  const scores = { math: 50, science: 40, english: 60 };
-  let total = 0;
-  for (const subject in scores) {
-      total += scores[subject];
-  }
-  console.log(`Total score: ${total}`);
-  
-  // 4. Looping through an object with inherited properties
-  // Logs: name: Laptop, price: 1200, category: Electronics (logs inherited properties too)
-  function Product(name, price) {
-      this.name = name;
-      this.price = price;
-  }
-  Product.prototype.category = "Electronics";
-  const product = new Product("Laptop", 1200);
-  for (const key in product) {
-      console.log(`${key}: ${product[key]}`);
-  }
-  
-  // 5. Looping through an object and converting keys to uppercase
-  // Logs: NAME: Alice, AGE: 30, OCCUPATION: Developer
-  for (const key in person) {
-      const upperKey = key.toUpperCase();
-      console.log(`${upperKey}: ${person[key]}`);
-  }
-  
-  // 6. Looping through an object and counting the number of properties
-  // Logs: Number of properties: 3
-  let propertyCount = 0;
-  for (const key in person) {
-      propertyCount++;
-  }
-  console.log(`Number of properties: ${propertyCount}`);
-  
-  // 7. Looping through a nested object
-  // Logs: street: 123 Main St, city: Anytown, zip: 12345
-  const user = {
-      name: "John",
-      address: {
-          street: "123 Main St",
-          city: "Anytown",
-          zip: "12345"
-      }
-  };
-  for (const key in user.address) {
-      console.log(`${key}: ${user.address[key]}`);
-  }
-  
-  // 8. Looping through an object to collect keys in an array
-  // Logs: ["name", "age", "occupation"]
-  let keysArray = [];
-  for (const key in person) {
-      keysArray.push(key);
-  }
-  console.log(keysArray);
-  
-  // 9. Looping through an object and logging only properties with specific conditions
-  // Logs: math: 50, english: 60 (logs only scores 50 and above)
-  for (const subject in scores) {
-      if (scores[subject] >= 50) {
-          console.log(`${subject}: ${scores[subject]}`);
-      }
-  }
-  
-  // 10. Looping through an object's properties and values to create a formatted string
-  // Logs: Alice is 30 years old and works as a Developer.
-  let description = "";
-  for (const key in person) {
-      if (key === "name") {
-          description += `${person[key]} is `;
-      } else if (key === "age") {
-          description += `${person[key]} years old and `;
-      } else if (key === "occupation") {
-          description += `works as a ${person[key]}.`;
-      }
-  }
-  console.log(description);
-
    -
    -
    differences
    -

    differences

    -

    In JavaScript, `for`, `for...of`, `for...in`, `while`, and `do...while` loops are all used to perform repetitive tasks, but they differ in syntax and use cases. The `for` loop is the most traditional and flexible, allowing you to define an initializer, a condition, and an increment/decrement expression, making it ideal for iterating over arrays or performing tasks a specific number of times. The `for...of` loop is designed specifically for iterating over iterable objects like arrays, strings, and sets, providing a simple way to access the values directly without needing to manage an index, making it perfect for array iteration when you don't need to modify the loop's behavior based on the index. The `for...in` loop, on the other hand, is used to iterate over the enumerable properties of an object, allowing you to access each key in turn, but it's not ideal for arrays because it can include inherited properties and doesn't guarantee the order of iteration. The `while` loop runs as long as a specified condition is true, making it useful when the number of iterations isn't known beforehand and depends on dynamic factors. Finally, the `do...while` loop is similar to the `while` loop but guarantees that the loop body will execute at least once, even if the condition is false from the start, which is useful when the loop's action needs to be performed at least once regardless of the condition. Choosing the right loop depends on the specific task: use `for` for counting, `for...of` for iterating over values, `for...in` for object properties, `while` when the condition must be checked before each iteration, and `do...while` when the loop must run at least once.

    -
    -
    Objects -
    [16]
    -
    overview
    -

    overview

    -

    In JavaScript, an object is a complex data structure that allows you to store collections of data and more complex entities. Objects are used to represent real-world entities by encapsulating related data and behavior. Each object is a collection of properties, where a property is an association between a key (or name) and a value. The value can be a primitive data type, another object, or a function, which in this context is known as a method. The basic syntax for creating an object involves using curly braces `{}` to define an object literal. Inside the curly braces, properties are defined as key-value pairs separated by colons, with each pair separated by commas. For example, `let person = { name: "John", age: 30, greet: function() { console.log("Hello!"); } };` defines an object named `person` with properties `name`, `age`, and a method `greet`. You can access or modify the properties using dot notation (e.g., `person.name`) or bracket notation (e.g., `person["age"]`). Objects in JavaScript are dynamic, meaning you can add, modify, or delete properties after the object is created. This flexibility makes objects a foundational component for organizing and managing data in JavaScript.

    -

    Specifications

    - 
    -             
-  // Example 1: Basic object with a string property
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry" 
-  };
-  console.log(car);
-  // Logs: { brand: "Toyota", model: "Camry" }
-  
-  // Example 2: Object with a number property
-  let smartphone = { 
-    brand: "Apple", 
-    price: 999 
-  };
-  console.log(smartphone);
-  // Logs: { brand: "Apple", price: 999 }
-  
-  // Example 3: Object with a boolean property
-  let user = { 
-    name: "Alice", 
-    isLoggedIn: true 
-  };
-  console.log(user);
-  // Logs: { name: "Alice", isLoggedIn: true }
-  
-  // Example 4: Object with a method
-  let dog = { 
-    name: "Buddy", 
-    bark: function() { 
-      console.log("Woof!"); 
-    } 
-  };
-  dog.bark();
-  // Logs: "Woof!" (when the method is called)
-  
-  // Example 5: Nested object
-  let student = { 
-    name: "John", 
-    address: { 
-      street: "123 Main St", 
-      city: "New York" 
-    } 
-  };
-  console.log(student);
-  // Logs: { name: "John", address: { street: "123 Main St", city: "New York" } }
-  
-  // Example 6: Object with an array property
-  let book = { 
-    title: "The Great Gatsby", 
-    genres: ["Classic", "Fiction"] 
-  };
-  console.log(book);
-  // Logs: { title: "The Great Gatsby", genres: ["Classic", "Fiction"] }
-  
-  // Example 7: Adding a property to an existing object
-  let laptop = { 
-    brand: "Dell" 
-  };
-  laptop.model = "XPS 13";
-  console.log(laptop);
-  // Logs: { brand: "Dell", model: "XPS 13" }
-  
-  // Example 8: Deleting a property from an object
-  let movie = { 
-    title: "Inception", 
-    director: "Christopher Nolan" 
-  };
-  delete movie.director;
-  console.log(movie);
-  // Logs: { title: "Inception" } (after `director` property is deleted)
-  
-  // Example 9: Checking if a property exists in an object
-  let house = { 
-    bedrooms: 3, 
-    bathrooms: 2 
-  };
-  console.log("bathrooms" in house);
-  // Logs: true (since `bathrooms` exists in the `house` object)
-  
-  // Example 10: Using a function to create objects (constructor function)
-  function Person(name, age) {
-    this.name = name;
-    this.age = age;
-  }
-  let person1 = new Person("Sarah", 28);
-  console.log(person1);
-  // Logs: { name: "Sarah", age: 28 }
-
    -
    -
    accessing properties
    -

    accessing properties

    -

    In JavaScript, accessing properties in objects can be done using two main methods: dot notation and bracket notation. Dot notation is the most common and straightforward way to access an object's properties. You simply write the object's name, followed by a dot, and then the property name, like this: `objectName.propertyName`. For example, if you have an object `person` with a property `name`, you can access it with `person.name`. Bracket notation, on the other hand, is more flexible and is often used when the property name is stored in a variable or when the property name contains spaces or special characters. It involves writing the object's name, followed by the property name inside square brackets, like this: `objectName["propertyName"]`. For example, you could access the `name` property with `person["name"]`. Bracket notation is particularly useful when dealing with dynamic property names, allowing you to pass in a variable or expression that evaluates to the property name. Both methods are essential for working with objects in JavaScript, providing different options depending on the needs of the code.

    -

    Specifications

    - 
    -             
-  // Example 1: Accessing a property using dot notation
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry" 
-  };
-  let carBrand = car.brand;
-  console.log(carBrand);
-  // Logs: "Toyota"
-  
-  // Example 2: Accessing a property using bracket notation
-  let smartphone = { 
-    brand: "Apple", 
-    price: 999 
-  };
-  let phoneBrand = smartphone["brand"];
-  console.log(phoneBrand);
-  // Logs: "Apple"
-  
-  // Example 3: Accessing a property with a variable key using bracket notation
-  let user = { 
-    name: "Alice", 
-    isLoggedIn: true 
-  };
-  let propertyKey = "name";
-  let userName = user[propertyKey];
-  console.log(userName);
-  // Logs: "Alice"
-  
-  // Example 4: Accessing a nested object property using dot notation
-  let student = { 
-    name: "John", 
-    address: { 
-      street: "123 Main St", 
-      city: "New York" 
-    } 
-  };
-  let studentCity = student.address.city;
-  console.log(studentCity);
-  // Logs: "New York"
-  
-  // Example 5: Accessing a nested object property using bracket notation
-  let company = { 
-    name: "Tech Corp", 
-    employees: { 
-      count: 500, 
-      locations: ["New York", "San Francisco"] 
-    } 
-  };
-  let employeeCount = company["employees"]["count"];
-  console.log(employeeCount);
-  // Logs: 500
-  
-  // Example 6: Accessing an array within an object using dot notation
-  let book = { 
-    title: "The Great Gatsby", 
-    genres: ["Classic", "Fiction"] 
-  };
-  let firstGenre = book.genres[0];
-  console.log(firstGenre);
-  // Logs: "Classic"
-  
-  // Example 7: Accessing an array within an object using bracket notation
-  let movie = { 
-    title: "Inception", 
-    cast: ["Leonardo DiCaprio", "Joseph Gordon-Levitt"] 
-  };
-  let leadActor = movie["cast"][0];
-  console.log(leadActor);
-  // Logs: "Leonardo DiCaprio"
-  
-  // Example 8: Checking if a property exists using "in" keyword
-  let laptop = { 
-    brand: "Dell", 
-    model: "XPS 13" 
-  };
-  let hasModel = "model" in laptop;
-  console.log(hasModel);
-  // Logs: true
-  
-  // Example 9: Accessing a method within an object using dot notation
-  let dog = { 
-    name: "Buddy", 
-    bark: function() { 
-      return "Woof!"; 
-    } 
-  };
-  let dogBark = dog.bark();
-  console.log(dogBark);
-  // Logs: "Woof!"
-  
-  // Example 10: Accessing a non-existent property
-  let house = { 
-    bedrooms: 3, 
-    bathrooms: 2 
-  };
-  let garage = house.garage;
-  console.log(garage);
-  // Logs: undefined
-
    -
    -
    updating properties
    -

    updating properties

    -

    In JavaScript, updating or mutating properties in objects is a straightforward process, regardless of whether the object was declared using `let` or `const`. To update a property, you simply access the property using either dot notation or bracket notation and assign it a new value. For example, if you have an object `person` with a property `age`, you can update it with `person.age = 30`. If the object was declared with `let`, you can freely update its properties and even reassign the entire object to a new one. However, if the object was declared with `const`, while you cannot reassign the object itself (i.e., you can't make it reference a completely new object), you can still freely mutate its properties. This means you can change existing properties, add new ones, or delete them, even though the reference to the object remains constant. This behavior is possible because `const` only ensures that the reference to the object is immutable, not the contents of the object itself. Therefore, mutating an object's properties is common and works the same way regardless of whether `let` or `const` was used in the declaration.

    -

    Specifications

    - 
    -             
-  // Example 1: Updating a property in an object declared with let
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry" 
-  };
-  car.model = "Corolla";
-  console.log(car);
-  // Logs: { brand: "Toyota", model: "Corolla" }
-  
-  // Example 2: Updating a property in an object declared with const
-  const smartphone = { 
-    brand: "Apple", 
-    price: 999 
-  };
-  smartphone.price = 1099;
-  console.log(smartphone);
-  // Logs: { brand: "Apple", price: 1099 }
-  
-  // Example 3: Adding a new property to an object declared with let
-  let user = { 
-    name: "Alice", 
-    isLoggedIn: true 
-  };
-  user.age = 25;
-  console.log(user);
-  // Logs: { name: "Alice", isLoggedIn: true, age: 25 }
-  
-  // Example 4: Adding a new property to an object declared with const
-  const student = { 
-    name: "John", 
-    grade: "A" 
-  };
-  student.age = 18;
-  console.log(student);
-  // Logs: { name: "John", grade: "A", age: 18 }
-  
-  // Example 5: Updating a nested property in an object declared with let
-  let book = { 
-    title: "The Great Gatsby", 
-    details: { 
-      author: "F. Scott Fitzgerald", 
-      year: 1925 
-    } 
-  };
-  book.details.year = 2024;
-  console.log(book);
-  // Logs: { title: "The Great Gatsby", details: { author: "F. Scott Fitzgerald", year: 2024 } }
-  
-  // Example 6: Updating a nested property in an object declared with const
-  const laptop = { 
-    brand: "Dell", 
-    specs: { 
-      ram: "8GB", 
-      storage: "256GB" 
-    } 
-  };
-  laptop.specs.ram = "16GB";
-  console.log(laptop);
-  // Logs: { brand: "Dell", specs: { ram: "16GB", storage: "256GB" } }
-  
-  // Example 7: Removing a property from an object declared with let (setting it to undefined)
-  let movie = { 
-    title: "Inception", 
-    director: "Christopher Nolan" 
-  };
-  movie.director = undefined;
-  console.log(movie);
-  // Logs: { title: "Inception", director: undefined }
-  
-  // Example 8: Removing a property from an object declared with const (setting it to null)
-  const house = { 
-    bedrooms: 3, 
-    bathrooms: 2 
-  };
-  house.bathrooms = null;
-  console.log(house);
-  // Logs: { bedrooms: 3, bathrooms: null }
-  
-  // Example 9: Changing a property type in an object declared with let
-  let person = { 
-    name: "Sarah", 
-    age: 30 
-  };
-  person.age = "Thirty";
-  console.log(person);
-  // Logs: { name: "Sarah", age: "Thirty" }
-  
-  // Example 10: Changing a property type in an object declared with const
-  const animal = { 
-    species: "Dog", 
-    weight: 50 
-  };
-  animal.weight = "Fifty pounds";
-  console.log(animal);
-  // Logs: { species: "Dog", weight: "Fifty pounds" }
-
    -
    -
    deleting properties
    -

    deleting properties

    -

    In JavaScript, deleting properties from objects can be done using the `delete` operator. When you want to remove a specific property from an object, you can use `delete` followed by the object and the property name. For example, `delete person.age` would remove the `age` property from the `person` object. Once a property is deleted, it is no longer accessible and will return `undefined` if you try to reference it. The `delete` operator only affects the specific property and does not affect other properties of the object. It's important to note that `delete` only removes the property from the object itself and not from the object's prototype chain, meaning if the property is inherited from a prototype, it will still be accessible through the prototype. Additionally, `delete` works on objects declared with both `let` and `const`, as it doesn't affect the reference to the object but merely removes the specific property from the object's structure. This operation is useful when you need to dynamically manage the properties of an object, particularly when cleaning up or altering the object's data.

    -

    Specifications

    - 
    -             
-  // Example 1: Deleting a property from an object declared with let
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry" 
-  };
-  delete car.model;
-  console.log(car);
-  // Logs: { brand: "Toyota" }
-  
-  // Example 2: Deleting a property from an object declared with const
-  const smartphone = { 
-    brand: "Apple", 
-    price: 999 
-  };
-  delete smartphone.price;
-  console.log(smartphone);
-  // Logs: { brand: "Apple" }
-  
-  // Example 3: Deleting a nested property from an object
-  let user = { 
-    name: "Alice", 
-    profile: { 
-      age: 25, 
-      location: "New York" 
-    } 
-  };
-  delete user.profile.age;
-  console.log(user);
-  // Logs: { name: "Alice", profile: { location: "New York" } }
-  
-  // Example 4: Deleting a method from an object
-  const dog = { 
-    name: "Buddy", 
-    bark: function() { 
-      return "Woof!"; 
-    } 
-  };
-  delete dog.bark;
-  console.log(dog);
-  // Logs: { name: "Buddy" }
-  
-  // Example 5: Deleting a property and checking its existence
-  let book = { 
-    title: "1984", 
-    author: "George Orwell" 
-  };
-  delete book.author;
-  console.log("author" in book);
-  // Logs: false
-  
-  // Example 6: Deleting a property with bracket notation
-  const movie = { 
-    title: "The Matrix", 
-    director: "Wachowski" 
-  };
-  delete movie["director"];
-  console.log(movie);
-  // Logs: { title: "The Matrix" }
-  
-  // Example 7: Deleting a dynamically accessed property
-  let person = { 
-    name: "John", 
-    age: 30 
-  };
-  let prop = "age";
-  delete person[prop];
-  console.log(person);
-  // Logs: { name: "John" }
-  
-  // Example 8: Deleting a property that doesn't exist
-  const house = { 
-    bedrooms: 3, 
-    bathrooms: 2 
-  };
-  delete house.garage;
-  console.log(house);
-  // Logs: { bedrooms: 3, bathrooms: 2 }
-  
-  // Example 9: Deleting a property and adding it back later
-  let laptop = { 
-    brand: "Dell", 
-    model: "XPS 13" 
-  };
-  delete laptop.model;
-  laptop.model = "XPS 15";
-  console.log(laptop);
-  // Logs: { brand: "Dell", model: "XPS 15" }
-  
-  // Example 10: Deleting all properties from an object
-  let settings = { 
-    theme: "dark", 
-    notifications: true 
-  };
-  delete settings.theme;
-  delete settings.notifications;
-  console.log(settings);
-  // Logs: {}
-
    -
    -
    methods
    -

    methods

    -

    In JavaScript, methods are functions that are defined within an object and are used to perform actions related to that object. These methods allow objects to encapsulate behavior along with data, making it easier to manage and manipulate the object's state. A method is defined by creating a property within the object where the value is a function. For example, in an object representing a car, you might have a method called `startEngine` that logs a message or changes the state of the car. Methods can access and modify the properties of the object they belong to using the `this` keyword, which refers to the object itself. This ability to combine data and behavior in a single entity makes methods a powerful feature of objects, enabling more organized and modular code. Methods are a fundamental aspect of object-oriented programming in JavaScript, providing a way to define and reuse functionality that is directly tied to specific data structures.

    -

    Specifications

    - 
    -             
-  // Example 1: Basic method in an object
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry", 
-    startEngine: function() { 
-      return "Engine started"; 
-    } 
-  };
-  console.log(car.startEngine());
-  // Logs: "Engine started"
-  
-  // Example 2: Method that accesses object properties using 'this'
-  let smartphone = { 
-    brand: "Apple", 
-    model: "iPhone 12", 
-    getFullName: function() { 
-      return this.brand + " " + this.model; 
-    } 
-  };
-  console.log(smartphone.getFullName());
-  // Logs: "Apple iPhone 12"
-  
-  // Example 3: Method that updates object properties
-  let user = { 
-    name: "Alice", 
-    age: 25, 
-    incrementAge: function() { 
-      this.age += 1; 
-    } 
-  };
-  user.incrementAge();
-  console.log(user.age);
-  // Logs: 26
-  
-  // Example 4: Method that takes parameters
-  let calculator = { 
-    add: function(a, b) { 
-      return a + b; 
-    } 
-  };
-  console.log(calculator.add(5, 3));
-  // Logs: 8
-  
-  // Example 5: Method that uses a loop
-  let numbers = { 
-    values: [1, 2, 3, 4], 
-    sum: function() { 
-      let total = 0; 
-      for(let i = 0; i < this.values.length; i++) { 
-        total += this.values[i]; 
-      }
-      return total;
-    } 
-  };
-  console.log(numbers.sum());
-  // Logs: 10
-  
-  // Example 6: Method that returns another method
-  let greeter = { 
-    greet: function(name) { 
-      return function() { 
-        return "Hello, " + name; 
-      }; 
-    } 
-  };
-  let greetJohn = greeter.greet("John");
-  console.log(greetJohn());
-  // Logs: "Hello, John"
-  
-  // Example 7: Method that modifies an array property
-  let playlist = { 
-    songs: ["Song 1", "Song 2"], 
-    addSong: function(song) { 
-      this.songs.push(song); 
-    } 
-  };
-  playlist.addSong("Song 3");
-  console.log(playlist.songs);
-  // Logs: ["Song 1", "Song 2", "Song 3"]
-  
-  // Example 8: Method that checks for a condition
-  let person = { 
-    name: "Bob", 
-    age: 20, 
-    canVote: function() { 
-      return this.age >= 18; 
-    } 
-  };
-  console.log(person.canVote());
-  // Logs: true
-  
-  // Example 9: Method that returns a formatted string
-  let book = { 
-    title: "1984", 
-    author: "George Orwell", 
-    getDetails: function() { 
-      return `${this.title} by ${this.author}`; 
-    } 
-  };
-  console.log(book.getDetails());
-  // Logs: "1984 by George Orwell"
-  
-  // Example 10: Method that deletes a property from the object
-  let house = { 
-    rooms: 4, 
-    hasGarage: true, 
-    removeGarage: function() { 
-      delete this.hasGarage; 
-    } 
-  };
-  house.removeGarage();
-  console.log(house);
-  // Logs: { rooms: 4 }
-
    -
    -
    nested objects
    -

    nested objects

    -

    Nested objects in JavaScript refer to objects that are contained within other objects, allowing for a hierarchical structure of data. This nesting can represent more complex relationships between data, such as an object representing a person containing another object that represents the person's address. To access properties within nested objects, you can use a combination of dot notation and bracket notation. Starting from the outermost object, you chain property names to drill down to the desired level. For example, if you have an object `person` with a nested object `address` that contains a property `city`, you would access the city with `person.address.city`. If any of the property names contain spaces or special characters, or if the property name is dynamic, you can use bracket notation like `person["address"]["city"]`. It's important to ensure that each level of the object exists before trying to access deeper properties to avoid errors. Nested objects are a powerful way to model real-world data structures in JavaScript, allowing for organized and manageable code when dealing with complex data.

    -

    Specifications

    - 
    -             
-  // Example 1: Basic nested object
-  let person = { 
-    name: "John", 
-    address: { 
-      street: "123 Main St", 
-      city: "New York" 
-    } 
-  };
-  console.log(person.address.city);
-  // Logs: "New York"
-  
-  // Example 2: Nested object with multiple levels
-  let company = { 
-    name: "Tech Corp", 
-    departments: { 
-      hr: { 
-        manager: "Alice" 
-      }, 
-      it: { 
-        manager: "Bob" 
-      } 
-    } 
-  };
-  console.log(company.departments.it.manager);
-  // Logs: "Bob"
-  
-  // Example 3: Accessing a nested array inside an object
-  let user = { 
-    name: "Sarah", 
-    hobbies: { 
-      outdoor: ["Hiking", "Cycling"], 
-      indoor: ["Reading", "Gaming"] 
-    } 
-  };
-  console.log(user.hobbies.outdoor[0]);
-  // Logs: "Hiking"
-  
-  // Example 4: Nested object with methods
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry", 
-    features: { 
-      sunroof: true, 
-      startEngine: function() { 
-        return "Engine started"; 
-      } 
-    } 
-  };
-  console.log(car.features.startEngine());
-  // Logs: "Engine started"
-  
-  // Example 5: Nested object with dynamic property access
-  let laptop = { 
-    brand: "Dell", 
-    specs: { 
-      cpu: "i7", 
-      ram: "16GB" 
-    } 
-  };
-  let spec = "cpu";
-  console.log(laptop.specs[spec]);
-  // Logs: "i7"
-  
-  // Example 6: Nested object with an array of objects
-  let library = { 
-    name: "City Library", 
-    books: [ 
-      { 
-        title: "1984", 
-        author: "George Orwell" 
-      }, 
-      { 
-        title: "To Kill a Mockingbird", 
-        author: "Harper Lee" 
-      } 
-    ] 
-  };
-  console.log(library.books[1].author);
-  // Logs: "Harper Lee"
-  
-  // Example 7: Accessing a deeply nested property
-  let organization = { 
-    name: "Global Corp", 
-    locations: { 
-      usa: { 
-        ny: { 
-          address: "123 Broadway", 
-          employees: 200 
-        } 
-      }, 
-      uk: { 
-        london: { 
-          address: "456 King's Rd", 
-          employees: 150 
-        } 
-      } 
-    } 
-  };
-  console.log(organization.locations.uk.london.address);
-  // Logs: "456 King's Rd"
-  
-  // Example 8: Updating a nested object property
-  let student = { 
-    name: "Jane", 
-    courses: { 
-      math: { 
-        grade: "A" 
-      }, 
-      science: { 
-        grade: "B" 
-      } 
-    } 
-  };
-  student.courses.science.grade = "A+";
-  console.log(student.courses.science.grade);
-  // Logs: "A+"
-  
-  // Example 9: Checking if a nested property exists
-  let movie = { 
-    title: "Inception", 
-    details: { 
-      director: "Christopher Nolan", 
-      ratings: { 
-        imdb: 8.8 
-      } 
-    } 
-  };
-  console.log("imdb" in movie.details.ratings);
-  // Logs: true
-  
-  // Example 10: Adding a new property to a nested object
-  let house = { 
-    rooms: 4, 
-    amenities: { 
-      garage: true 
-    } 
-  };
-  house.amenities.pool = false;
-  console.log(house.amenities.pool);
-  // Logs: false
-
    -
    -
    pass by reference
    -

    pass by reference

    -

    In JavaScript, when objects are passed as arguments to functions or assigned to other variables, they are passed by reference. This means that the reference or memory address of the object is passed, not the actual object itself. As a result, if you modify the object within the function or through the new variable, those changes will affect the original object as well. This is because both the original object and the new reference point to the same location in memory. For example, if you have an object `person` and pass it to a function that alters one of its properties, the change will be reflected in the `person` object outside of the function as well. This behavior is essential to understand when working with objects in JavaScript, as it can lead to unintended side effects if the object is modified in different parts of the code. Understanding pass by reference helps in managing and controlling how objects are shared and modified throughout a program.

    -

    Specifications

    - 
    -             
-  // Example 1: Passing an object to a function and modifying it
-  let person = { 
-    name: "John", 
-    age: 30 
-  };
-  
-  function updateAge(obj) { 
-    obj.age = 31; 
-  }
-  
-  updateAge(person);
-  console.log(person);
-  // Logs: { name: "John", age: 31 }
-  
-  // Example 2: Assigning an object to a new variable and modifying it
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry" 
-  };
-  
-  let newCar = car;
-  newCar.model = "Corolla";
-  console.log(car);
-  console.log(newCar);
-  // Logs: { brand: "Toyota", model: "Corolla" }
-  // Logs: { brand: "Toyota", model: "Corolla" }
-  
-  // Example 3: Adding a property through a reference variable
-  let user = { 
-    name: "Alice", 
-    loggedIn: true 
-  };
-  
-  let anotherUser = user;
-  anotherUser.role = "admin";
-  console.log(user);
-  console.log(anotherUser);
-  // Logs: { name: "Alice", loggedIn: true, role: "admin" }
-  // Logs: { name: "Alice", loggedIn: true, role: "admin" }
-  
-  // Example 4: Deleting a property through a reference variable
-  let book = { 
-    title: "1984", 
-    author: "George Orwell" 
-  };
-  
-  let refBook = book;
-  delete refBook.author;
-  console.log(book);
-  console.log(refBook);
-  // Logs: { title: "1984" }
-  // Logs: { title: "1984" }
-  
-  // Example 5: Modifying a nested object property via reference
-  let employee = { 
-    name: "Bob", 
-    details: { 
-      position: "Manager", 
-      department: "Sales" 
-    } 
-  };
-  
-  let employeeRef = employee;
-  employeeRef.details.position = "Director";
-  console.log(employee.details.position);
-  console.log(employeeRef.details.position);
-  // Logs: "Director"
-  // Logs: "Director"
-  
-  // Example 6: Assigning a method to a reference variable and modifying the object
-  let laptop = { 
-    brand: "Dell", 
-    specs: { 
-      ram: "8GB", 
-      storage: "256GB" 
-    } 
-  };
-  
-  let refLaptop = laptop;
-  refLaptop.specs.storage = "512GB";
-  console.log(laptop.specs.storage);
-  console.log(refLaptop.specs.storage);
-  // Logs: "512GB"
-  // Logs: "512GB"
-  
-  // Example 7: Adding a nested object property through a reference
-  let movie = { 
-    title: "Inception", 
-    director: "Christopher Nolan" 
-  };
-  
-  let refMovie = movie;
-  refMovie.details = { releaseYear: 2010 };
-  console.log(movie.details.releaseYear);
-  console.log(refMovie.details.releaseYear);
-  // Logs: 2010
-  // Logs: 2010
-  
-  // Example 8: Passing an object with a method to a function and modifying it
-  let calculator = { 
-    value: 10, 
-    add: function(num) { 
-      this.value += num; 
-    } 
-  };
-  
-  function modifyCalculator(calc) { 
-    calc.add(5); 
-  }
-  
-  modifyCalculator(calculator);
-  console.log(calculator.value);
-  // Logs: 15
-  
-  // Example 9: Changing the object through a function that modifies nested properties
-  let student = { 
-    name: "Jane", 
-    grades: { 
-      math: "B", 
-      science: "A" 
-    } 
-  };
-  
-  function updateGrades(stud) { 
-    stud.grades.math = "A+"; 
-  }
-  
-  updateGrades(student);
-  console.log(student.grades.math);
-  // Logs: "A+"
-  
-  // Example 10: Copying a reference and modifying both references
-  let house = { 
-    rooms: 3, 
-    hasGarage: true 
-  };
-  
-  let houseRef = house;
-  houseRef.rooms = 4;
-  house.hasGarage = false;
-  console.log(house);
-  console.log(houseRef);
-  // Logs: { rooms: 4, hasGarage: false }
-  // Logs: { rooms: 4, hasGarage: false }
-
    -
    -
    looping through objects
    -

    looping through objects

    -

    Looping through objects in JavaScript is commonly done using the `for...in` loop, which allows you to iterate over the enumerable properties of an object. The `for...in` loop goes through each key in the object, enabling you to access both the key and its corresponding value within the loop. This approach is useful when you need to perform operations on each property of an object, such as logging values or applying changes to them. However, `for...in` does not guarantee the order of iteration, as the properties are iterated in the order they were added, which may not always be sequential. In addition to `for...in`, methods like `Object.keys()`, `Object.values()`, and `Object.entries()` can be used in combination with looping constructs like `for` or `forEach` to iterate through the keys, values, or key-value pairs of an object, respectively. These methods are often preferred for better control and compatibility with modern JavaScript features, allowing for more flexible and readable code when working with objects.

    -

    Specifications

    - 
    -             
-  // Example 1: Looping through an object with for...in
-  let person = { 
-    name: "John", 
-    age: 30, 
-    city: "New York" 
-  };
-  
-  for (let key in person) { 
-    console.log(key + ": " + person[key]); 
-  }
-  // Logs: 
-  // name: John
-  // age: 30
-  // city: New York
-  
-  // Example 2: Looping through an object and accessing keys
-  let car = { 
-    brand: "Toyota", 
-    model: "Camry", 
-    year: 2020 
-  };
-  
-  for (let key in car) { 
-    console.log("Key: " + key); 
-  }
-  // Logs:
-  // Key: brand
-  // Key: model
-  // Key: year
-  
-  // Example 3: Looping through an object and accessing values
-  let laptop = { 
-    brand: "Dell", 
-    ram: "16GB", 
-    storage: "512GB" 
-  };
-  
-  for (let key in laptop) { 
-    console.log("Value: " + laptop[key]); 
-  }
-  // Logs:
-  // Value: Dell
-  // Value: 16GB
-  // Value: 512GB
-  
-  // Example 4: Using Object.keys() to loop through an object's keys
-  let book = { 
-    title: "1984", 
-    author: "George Orwell", 
-    year: 1949 
-  };
-  
-  Object.keys(book).forEach(function(key) { 
-    console.log(key + ": " + book[key]); 
-  });
-  // Logs:
-  // title: 1984
-  // author: George Orwell
-  // year: 1949
-  
-  // Example 5: Using Object.values() to loop through an object's values
-  let user = { 
-    name: "Alice", 
-    age: 25, 
-    country: "USA" 
-  };
-  
-  Object.values(user).forEach(function(value) { 
-    console.log("Value: " + value); 
-  });
-  // Logs:
-  // Value: Alice
-  // Value: 25
-  // Value: USA
-  
-  // Example 6: Using Object.entries() to loop through an object's key-value pairs
-  let smartphone = { 
-    brand: "Apple", 
-    model: "iPhone 12", 
-    price: 999 
-  };
-  
-  Object.entries(smartphone).forEach(function([key, value]) { 
-    console.log(key + ": " + value); 
-  });
-  // Logs:
-  // brand: Apple
-  // model: iPhone 12
-  // price: 999
-  
-  // Example 7: Looping through a nested object with for...in
-  let student = { 
-    name: "Jane", 
-    grades: { 
-      math: "A", 
-      science: "B" 
-    } 
-  };
-  
-  for (let key in student.grades) { 
-    console.log(key + ": " + student.grades[key]); 
-  }
-  // Logs:
-  // math: A
-  // science: B
-  
-  // Example 8: Using for...of with Object.keys() to loop through keys
-  let house = { 
-    rooms: 3, 
-    bathrooms: 2, 
-    hasGarage: true 
-  };
-  
-  for (let key of Object.keys(house)) { 
-    console.log(key + ": " + house[key]); 
-  }
-  // Logs:
-  // rooms: 3
-  // bathrooms: 2
-  // hasGarage: true
-  
-  // Example 9: Using for...of with Object.values() to loop through values
-  let movie = { 
-    title: "Inception", 
-    director: "Christopher Nolan", 
-    releaseYear: 2010 
-  };
-  
-  for (let value of Object.values(movie)) { 
-    console.log("Value: " + value); 
-  }
-  // Logs:
-  // Value: Inception
-  // Value: Christopher Nolan
-  // Value: 2010
-  
-  // Example 10: Looping through an object and modifying properties
-  let employee = { 
-    name: "Bob", 
-    position: "Manager", 
-    salary: 50000 
-  };
-  
-  for (let key in employee) { 
-    if (key === "salary") { 
-      employee[key] += 5000; 
-    }
-  }
-  
-  console.log(employee);
-  // Logs:
-  // { name: "Bob", position: "Manager", salary: 55000 }
-
    -
    -
    this keyword
    -

    this keyword

    -

    In JavaScript, the `this` keyword refers to the object that is currently executing a function. Inside a regular function, `this` usually refers to the object on which the function is called, which is often the object that contains the method. For example, if a method is defined within an object, `this` inside that method refers to that object. However, `this` can behave differently in arrow functions. Unlike regular functions, arrow functions do not have their own `this` context; instead, they inherit `this` from the surrounding non-arrow function or the global context if no such function exists. This makes arrow functions unsuitable for methods in objects where you want to refer to the object itself because `this` in an arrow function will not point to the object but rather to whatever `this` is in the outer lexical scope. Therefore, while regular functions inside objects typically use `this` to refer to the object itself, arrow functions should be used cautiously within objects when you intend to refer to the object through `this`.

    -

    Specifications

    - 
    -             
-  // 1. Simple method in a car object using function declaration
-  const car1 = {
-    brand: 'Toyota',
-    getBrand: function() {
-      console.log(this.brand);
-    }
-  };
-  car1.getBrand(); // Logs: 'Toyota'
-  
-  // 2. Method shorthand syntax in a book object
-  const book1 = {
-    title: 'The Great Gatsby',
-    getTitle() {
-      console.log(this.title);
-    }
-  };
-  book1.getTitle(); // Logs: 'The Great Gatsby'
-  
-  // 3. Method borrowing from another object (library) using function declaration
-  const library1 = {
-    name: 'City Library',
-    getLibraryName: function() {
-      console.log(this.name);
-    }
-  };
-  const library2 = {
-    name: 'County Library'
-  };
-  library2.getLibraryName = library1.getLibraryName;
-  library2.getLibraryName(); // Logs: 'County Library'
-  
-  // 4. Method shorthand syntax with borrowing (device)
-  const device1 = {
-    model: 'iPhone 12',
-    getModel() {
-      console.log(this.model);
-    }
-  };
-  const device2 = {
-    model: 'Samsung Galaxy S21'
-  };
-  device2.getModel = device1.getModel;
-  device2.getModel(); // Logs: 'Samsung Galaxy S21'
-  
-  // 5. Using `this` in an arrow function within an object (animal)
-  const animal1 = {
-    species: 'Dog',
-    describe: function() {
-      const arrowDescribe = () => {
-        console.log(this.species);
-      };
-      arrowDescribe();
-    }
-  };
-  animal1.describe(); // Logs: 'Dog'
-  
-  // 6. Using `this` in an arrow function within an object (method shorthand) (tool)
-  const tool1 = {
-    type: 'Hammer',
-    describe() {
-      const arrowDescribe = () => {
-        console.log(this.type);
-      };
-      arrowDescribe();
-    }
-  };
-  tool1.describe(); // Logs: 'Hammer'
-  
-  // 7. `this` in a method using call() (appliance)
-  const appliance1 = {
-    brand: 'Whirlpool',
-    showBrand: function() {
-      console.log(this.brand);
-    }
-  };
-  const appliance2 = { brand: 'LG' };
-  appliance1.showBrand.call(appliance2); // Logs: 'LG'
-  
-  // 8. `this` in a method using apply() (vehicle)
-  const vehicle1 = {
-    type: 'SUV',
-    getType() {
-      console.log(this.type);
-    }
-  };
-  const vehicle2 = { type: 'Sedan' };
-  vehicle1.getType.apply(vehicle2); // Logs: 'Sedan'
-  
-  // 9. `this` in a method using bind() (gadget)
-  const gadget1 = {
-    brand: 'Apple',
-    showBrand: function() {
-      console.log(this.brand);
-    }
-  };
-  const gadget2 = { brand: 'Samsung' };
-  const boundShowBrand = gadget1.showBrand.bind(gadget2);
-  boundShowBrand(); // Logs: 'Samsung'
-  
-  // 10. `this` in an event handler method inside an object (method shorthand) (door)
-  const door = {
-    state: 'Open',
-    handleClick() {
-      console.log(this.state);
-    }
-  };
-  document.getElementById('doorButton').addEventListener('click', door.handleClick.bind(door)); // Logs: 'Open'
-
    -
    -
    privacy naming conventions
    -

    privacy naming conventions

    -

    In JavaScript, privacy conventions in objects are techniques used to encapsulate data and methods within an object, preventing external access or modification. Although JavaScript does not have true private properties like some other languages, developers often use conventions, such as prefixing variable names with an underscore (e.g., `_privateVariable`), to signal that certain properties or methods should be treated as private. This is only a convention, though, and does not enforce actual privacy. A more robust way to achieve privacy is by using closures or the `Symbol` type to create unique keys for properties. With the introduction of ES6, JavaScript also supports private fields through the `#` syntax, where a property prefixed with `#` is truly private and inaccessible outside the class definition. These private fields help to enforce encapsulation, ensuring that sensitive data and internal workings of an object are hidden from external code.

    -

    Specifications

    - 
    -             
-  // 1. Using an underscore to indicate a private property
-  const user1 = {
-    _password: 'secret123',
-    getPassword() {
-      return this._password;
-    }
-  };
-  console.log(user1.getPassword()); // Logs: 'secret123'
-  console.log(user1._password); // Logs: 'secret123' (but this access is discouraged)
-  
-  // 2. Using an underscore to indicate a private method
-  const user2 = {
-    _encryptPassword(password) {
-      return password.split('').reverse().join('');
-    },
-    setPassword(password) {
-      this._password = this._encryptPassword(password);
-    }
-  };
-  user2.setPassword('secret123');
-  console.log(user2._password); // Logs: '321terces'
-  
-  // 3. Using a closure to create a private variable
-  function User(name) {
-    let _age = 30; // private variable
-    this.name = name;
-    this.getAge = function() {
-      return _age;
-    };
-  }
-  const user3 = new User('John');
-  console.log(user3.getAge()); // Logs: 30
-  console.log(user3._age); // Logs: undefined (cannot access private variable)
-  
-  // 4. Using a Symbol to create a unique, private-like property
-  const _id = Symbol('id');
-  const user4 = {
-    [_id]: 12345,
-    getId() {
-      return this[_id];
-    }
-  };
-  console.log(user4.getId()); // Logs: 12345
-  console.log(user4[_id]); // Logs: 12345 (but it's hard to accidentally access)
-  
-  // 5. Using ES6 class with private fields (using # syntax)
-  class UserWithPrivateField {
-    #privateField = 'This is private';
-  
-    getPrivateField() {
-      return this.#privateField;
-    }
-  }
-  const user5 = new UserWithPrivateField();
-  console.log(user5.getPrivateField()); // Logs: 'This is private'
-  console.log(user5.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class
-  
-  // 6. Prefixing a method with an underscore to indicate it's for internal use
-  const calculator = {
-    _multiply(a, b) {
-      return a * b;
-    },
-    square(n) {
-      return this._multiply(n, n);
-    }
-  };
-  console.log(calculator.square(4)); // Logs: 16
-  console.log(calculator._multiply(2, 3)); // Logs: 6 (but direct access is discouraged)
-  
-  // 7. Using an immediately invoked function expression (IIFE) to create private variables
-  const counter = (function() {
-    let _count = 0; // private variable
-  
-    return {
-      increment() {
-        _count++;
-        return _count;
-      },
-      getCount() {
-        return _count;
-      }
-    };
-  })();
-  console.log(counter.increment()); // Logs: 1
-  console.log(counter.getCount()); // Logs: 1
-  console.log(counter._count); // Logs: undefined (cannot access private variable)
-
    -
    -
    getters
    -

    getters

    -

    In JavaScript, getters are special methods that allow you to access the properties of an object in a controlled manner. By defining a getter, you can specify a function that runs whenever a particular property is accessed, providing a way to encapsulate and control the retrieval of that property's value. Getters are defined within an object using the `get` keyword, followed by a function that does not take any arguments. The primary advantage of getters is that they allow you to perform calculations, transformations, or validations whenever a property is accessed, rather than just returning a stored value directly. This can be particularly useful when the value of a property depends on other data or when you want to keep certain properties read-only. Despite looking like a regular property, a getter is actually a method, meaning that no parentheses are required when accessing it. This provides a seamless experience when using objects, as getters appear to be normal properties from the outside.

    -

    Specifications

    - 
    -             
-  // 1. Basic getter for a full name
-  const person1 = {
-    firstName: 'John',
-    lastName: 'Doe',
-    get fullName() {
-      return `${this.firstName} ${this.lastName}`;
-    }
-  };
-  console.log(person1.fullName); // Logs: 'John Doe'
-  
-  // 2. Getter that calculates the area of a rectangle
-  const rectangle = {
-    width: 10,
-    height: 5,
-    get area() {
-      return this.width * this.height;
-    }
-  };
-  console.log(rectangle.area); // Logs: 50
-  
-  // 3. Getter that converts temperature from Celsius to Fahrenheit with a conditional
-  const temperature = {
-    celsius: 25,
-    get fahrenheit() {
-      if (this.celsius < -273.15) {
-        return 'Invalid temperature below absolute zero';
-      }
-      return this.celsius * 9/5 + 32;
-    }
-  };
-  console.log(temperature.fahrenheit); // Logs: 77
-  
-  // 4. Getter that returns the length of a string
-  const stringObj = {
-    text: 'Hello, world!',
-    get length() {
-      return this.text.length;
-    }
-  };
-  console.log(stringObj.length); // Logs: 13
-  
-  // 5. Getter that returns the current year
-  const dateInfo = {
-    get currentYear() {
-      return new Date().getFullYear();
-    }
-  };
-  console.log(dateInfo.currentYear); // Logs: (current year, e.g., 2024)
-  
-  // 6. Getter that capitalizes the first letter of a string with a conditional
-  const word = {
-    text: 'javascript',
-    get capitalized() {
-      if (this.text.length === 0) {
-        return 'Empty string';
-      }
-      return this.text.charAt(0).toUpperCase() + this.text.slice(1);
-    }
-  };
-  console.log(word.capitalized); // Logs: 'Javascript'
-  
-  // 7. Getter that returns a random number
-  const randomGenerator = {
-    get randomNumber() {
-      return Math.random();
-    }
-  };
-  console.log(randomGenerator.randomNumber); // Logs: (a random number between 0 and 1)
-  
-  // 8. Getter that formats a date as a readable string
-  const dateFormatter = {
-    date: new Date('2024-08-28'),
-    get formattedDate() {
-      return this.date.toDateString();
-    }
-  };
-  console.log(dateFormatter.formattedDate); // Logs: 'Wed Aug 28 2024'
-  
-  // 9. Getter that returns the number of items in an array with a conditional
-  const shoppingCart = {
-    items: ['Apple', 'Banana', 'Orange'],
-    get itemCount() {
-      if (this.items.length === 0) {
-        return 'Your cart is empty';
-      }
-      return this.items.length;
-    }
-  };
-  console.log(shoppingCart.itemCount); // Logs: 3
-  
-  // 10. Getter that returns a formatted currency string
-  const product = {
-    price: 19.99,
-    currency: 'USD',
-    get formattedPrice() {
-      return `${this.currency} ${this.price.toFixed(2)}`;
-    }
-  };
-  console.log(product.formattedPrice); // Logs: 'USD 19.99'
-
    -
    -
    setters
    -

    setters

    -

    In JavaScript, setters are special methods that allow you to define custom behavior when assigning a value to a property in an object. Like getters, setters are defined using the `set` keyword followed by a function that typically takes one parameter, representing the value being assigned. Setters enable you to control how a property's value is set, allowing you to enforce validations, modify or transform the input, or trigger side effects whenever the property is updated. Unlike regular methods, setters do not require parentheses when invoked; they are called automatically when the associated property is assigned a value. This allows you to encapsulate logic within the setter, ensuring that the object's state is managed properly and that any constraints on the data are maintained. By combining setters with getters, you can create powerful, flexible, and controlled access to an object's properties, providing a robust mechanism for data encapsulation and validation within JavaScript objects.

    -

    Specifications

    - 
    -             
-  // 1. Basic setter for updating a person's name
-  const person1 = {
-    firstName: 'John',
-    lastName: 'Doe',
-    set fullName(name) {
-      const parts = name.split(' ');
-      this.firstName = parts[0];
-      this.lastName = parts[1];
-    }
-  };
-  person1.fullName = 'Jane Smith';
-  console.log(person1.firstName); // Logs: 'Jane'
-  console.log(person1.lastName);  // Logs: 'Smith'
-  
-  // 2. Setter that converts and stores temperature in Celsius
-  const temperature = {
-    _celsius: 0,
-    set fahrenheit(value) {
-      this._celsius = (value - 32) * 5/9;
-    },
-    get celsius() {
-      return this._celsius;
-    }
-  };
-  temperature.fahrenheit = 77;
-  console.log(temperature.celsius); // Logs: 25
-  
-  // 3. Setter that validates and sets an age with a conditional
-  const person2 = {
-    _age: 0,
-    set age(value) {
-      if (value < 0) {
-        console.log('Age cannot be negative');
-      } else {
-        this._age = value;
-      }
-    },
-    get age() {
-      return this._age;
-    }
-  };
-  person2.age = -5;  // Logs: 'Age cannot be negative'
-  person2.age = 30;  // No log, age is set
-  console.log(person2.age); // Logs: 30
-  
-  // 4. Setter that trims and stores a username
-  const user = {
-    _username: '',
-    set username(value) {
-      this._username = value.trim();
-    },
-    get username() {
-      return this._username;
-    }
-  };
-  user.username = '  alice  ';
-  console.log(user.username); // Logs: 'alice'
-  
-  // 5. Setter that restricts and sets a bank account balance with a conditional
-  const bankAccount = {
-    _balance: 0,
-    set balance(amount) {
-      if (amount < 0) {
-        console.log('Balance cannot be negative');
-      } else {
-        this._balance = amount;
-      }
-    },
-    get balance() {
-      return this._balance;
-    }
-  };
-  bankAccount.balance = -100;  // Logs: 'Balance cannot be negative'
-  bankAccount.balance = 500;   // No log, balance is set
-  console.log(bankAccount.balance); // Logs: 500
-  
-  // 6. Setter that updates an email address with validation
-  const emailAccount = {
-    _email: '',
-    set email(address) {
-      if (address.includes('@')) {
-        this._email = address;
-      } else {
-        console.log('Invalid email address');
-      }
-    },
-    get email() {
-      return this._email;
-    }
-  };
-  emailAccount.email = 'notanemail';  // Logs: 'Invalid email address'
-  emailAccount.email = 'user@example.com';  // No log, email is set
-  console.log(emailAccount.email); // Logs: 'user@example.com'
-  
-  // 7. Setter that sets and formats a phone number
-  const contact = {
-    _phoneNumber: '',
-    set phoneNumber(number) {
-      this._phoneNumber = number.replace(/\D/g, '');
-    },
-    get phoneNumber() {
-      return this._phoneNumber;
-    }
-  };
-  contact.phoneNumber = '(123) 456-7890';
-  console.log(contact.phoneNumber); // Logs: '1234567890'
-  
-  // 8. Setter that logs changes to a person's height
-  const person3 = {
-    _height: 0,
-    set height(value) {
-      console.log(`Setting height to ${value} cm`);
-      this._height = value;
-    },
-    get height() {
-      return this._height;
-    }
-  };
-  person3.height = 180;  // Logs: 'Setting height to 180 cm'
-  console.log(person3.height); // Logs: 180
-  
-  // 9. Setter that stores a formatted date
-  const event = {
-    _date: '',
-    set date(value) {
-      this._date = new Date(value).toDateString();
-    },
-    get date() {
-      return this._date;
-    }
-  };
-  event.date = '2024-08-28';
-  console.log(event.date); // Logs: 'Wed Aug 28 2024'
-  
-  // 10. Setter that controls and sets a grade with a conditional
-  const student = {
-    _grade: '',
-    set grade(value) {
-      if (['A', 'B', 'C', 'D', 'F'].includes(value)) {
-        this._grade = value;
-      } else {
-        console.log('Invalid grade');
-      }
-    },
-    get grade() {
-      return this._grade;
-    }
-  };
-  student.grade = 'E';  // Logs: 'Invalid grade'
-  student.grade = 'A';  // No log, grade is set
-  console.log(student.grade); // Logs: 'A'
-
    -
    -
    factory functions
    -

    factory functions

    -

    In JavaScript, factory functions are functions that return new objects. Unlike constructors, which are typically used with the `new` keyword, factory functions create objects without requiring `new`. This approach allows for more flexibility, such as returning different types of objects based on certain conditions or encapsulating the logic of object creation in a reusable manner. Factory functions can be particularly useful when creating multiple instances of objects with similar properties or methods, as they can contain logic to initialize and configure the objects in a consistent way. Additionally, because factory functions do not rely on `this` or `new`, they avoid some of the pitfalls associated with these keywords, such as accidental global variable creation. By using closures, factory functions can also create private variables and methods, providing better encapsulation and control over the object’s internal state. This makes factory functions a powerful and versatile tool in JavaScript for object creation and management.

    -

    Specifications

    - 
    -             
-  // 1. Basic factory function to create a person object
-  function createPerson(firstName, lastName) {
-    return {
-      firstName,
-      lastName,
-      getFullName() {
-        return `${this.firstName} ${this.lastName}`;
-      }
-    };
-  }
-  const person1 = createPerson('John', 'Doe');
-  console.log(person1.getFullName()); // Logs: 'John Doe'
-  
-  // 2. Factory function to create a car object
-  function createCar(brand, model) {
-    return {
-      brand,
-      model,
-      getCarInfo() {
-        return `${this.brand} ${this.model}`;
-      }
-    };
-  }
-  const car1 = createCar('Toyota', 'Camry');
-  console.log(car1.getCarInfo()); // Logs: 'Toyota Camry'
-  
-  // 3. Factory function with default values
-  function createBook(title, author = 'Unknown') {
-    return {
-      title,
-      author,
-      getBookInfo() {
-        return `${this.title} by ${this.author}`;
-      }
-    };
-  }
-  const book1 = createBook('1984', 'George Orwell');
-  const book2 = createBook('The Great Gatsby');
-  console.log(book1.getBookInfo()); // Logs: '1984 by George Orwell'
-  console.log(book2.getBookInfo()); // Logs: 'The Great Gatsby by Unknown'
-  
-  // 4. Factory function to create a user with a method to check password
-  function createUser(username, password) {
-    return {
-      username,
-      checkPassword(input) {
-        return input === password;
-      }
-    };
-  }
-  const user1 = createUser('alice', 'secret123');
-  console.log(user1.checkPassword('secret123')); // Logs: true
-  console.log(user1.checkPassword('wrongpassword')); // Logs: false
-  
-  // 5. Factory function to create a point in 2D space
-  function createPoint(x, y) {
-    return {
-      x,
-      y,
-      getDistance(otherPoint) {
-        const dx = this.x + otherPoint.x;
-        const dy = this.y + otherPoint.y;
-        return Math.sqrt(dx * dx + dy * dy);
-      }
-    };
-  }
-  const point1 = createPoint(3, 4);
-  const point2 = createPoint(6, 8);
-  console.log(point1.getDistance(point2)); // Logs: 11.313708498984761
-  
-  // 6. Factory function to create a counter object
-  function createCounter() {
-    let count = 0;
-    return {
-      increment() {
-        count++;
-      },
-      getCount() {
-        return count;
-      }
-    };
-  }
-  const counter1 = createCounter();
-  counter1.increment();
-  counter1.increment();
-  console.log(counter1.getCount()); // Logs: 2
-  
-  // 7. Factory function to create a rectangle object with an area method
-  function createRectangle(width, height) {
-    return {
-      width,
-      height,
-      getArea() {
-        return this.width * this.height;
-      }
-    };
-  }
-  const rectangle1 = createRectangle(10, 5);
-  console.log(rectangle1.getArea()); // Logs: 50
-  
-  // 8. Factory function to create a person object with a private age
-  function createPersonWithAge(name, initialAge) {
-    let age = initialAge;
-    return {
-      name,
-      getAge() {
-        return age;
-      },
-      haveBirthday() {
-        age++;
-      }
-    };
-  }
-  const person2 = createPersonWithAge('Bob', 30);
-  person2.haveBirthday();
-  console.log(person2.getAge()); // Logs: 31
-  
-  // 9. Factory function to create a bank account object
-  function createBankAccount(owner, initialBalance) {
-    let balance = initialBalance;
-    return {
-      owner,
-      deposit(amount) {
-        if (amount > 0) {
-          balance += amount;
-        }
-      },
-      withdraw(amount) {
-        if (amount > 0 && amount <= balance) {
-          balance -= amount;
-        }
-      },
-      getBalance() {
-        return balance;
-      }
-    };
-  }
-  const account1 = createBankAccount('Charlie', 1000);
-  account1.deposit(500);
-  account1.withdraw(200);
-  console.log(account1.getBalance()); // Logs: 1300
-  
-  // 10. Factory function to create a library book object with availability status
-  function createLibraryBook(title, author) {
-    let isAvailable = true;
-    return {
-      title,
-      author,
-      borrowBook() {
-        if (isAvailable) {
-          isAvailable = false;
-        }
-      },
-      returnBook() {
-        isAvailable = true;
-      },
-      getAvailability() {
-        return isAvailable ? 'Available' : 'Checked Out';
-      }
-    };
-  }
-  const libraryBook1 = createLibraryBook('The Hobbit', 'J.R.R. Tolkien');
-  console.log(libraryBook1.getAvailability()); // Logs: 'Available'
-  libraryBook1.borrowBook();
-  console.log(libraryBook1.getAvailability()); // Logs: 'Checked Out'
-  libraryBook1.returnBook();
-  console.log(libraryBook1.getAvailability()); // Logs: 'Available'
-
    -
    -
    overview
    -

    overview

    -

    In JavaScr

    -

    Specifications

    - 
    -             
-  // Declare and initialize a variable to store age
-  let age = 25;
-
    -
    -
    destructuring
    -

    destructuring

    -

    In JavaScript, destructuring is a powerful feature that allows you to unpack values from arrays or properties from objects into distinct variables. When working with objects, destructuring lets you extract multiple properties into variables in a concise and readable manner. The property value shorthand is a specific aspect of destructuring that enables you to quickly assign object properties to variables with the same name as the property itself. For example, if you have an object `{ name: 'Alice', age: 25 }`, you can use destructuring to extract these properties into variables by writing `{ name, age } = person;`, where `person` is the object. This shorthand reduces redundancy and makes the code cleaner, as you don’t need to repeat the property name when creating a variable. Destructuring with property value shorthand is particularly useful when working with functions that return objects or when handling objects with many properties, making the code more concise and easier to understand.

    -

    Specifications

    - 
    -             
-  // 1. Basic object destructuring
-  const person = {
-    name: 'Alice',
-    age: 25
-  };
-  const { name, age } = person;
-  console.log(name); // Logs: 'Alice'
-  console.log(age);  // Logs: 25
-  
-  // 2. Destructuring with a different variable name
-  const user = {
-    username: 'john_doe',
-    email: 'john@example.com'
-  };
-  const { username: userName, email: userEmail } = user;
-  console.log(userName); // Logs: 'john_doe'
-  console.log(userEmail); // Logs: 'john@example.com'
-  
-  // 3. Destructuring with default values
-  const settings = {
-    theme: 'dark'
-  };
-  const { theme, fontSize = 16 } = settings;
-  console.log(theme);    // Logs: 'dark'
-  console.log(fontSize); // Logs: 16
-  
-  // 4. Destructuring nested objects
-  const userProfile = {
-    userDetails: {
-      firstName: 'Bob',
-      lastName: 'Smith'
-    },
-    preferences: {
-      language: 'English'
-    }
-  };
-  const {
-    userDetails: { firstName, lastName },
-    preferences: { language }
-  } = userProfile;
-  console.log(firstName); // Logs: 'Bob'
-  console.log(lastName);  // Logs: 'Smith'
-  console.log(language);  // Logs: 'English'
-  
-  // 5. Destructuring with rest properties
-  const employee = {
-    id: 101,
-    name: 'Sarah',
-    position: 'Developer',
-    department: 'Engineering'
-  };
-  const { id, name: employeeName, ...rest } = employee;
-  console.log(id);          // Logs: 101
-  console.log(employeeName); // Logs: 'Sarah'
-  console.log(rest);         // Logs: { position: 'Developer', department: 'Engineering' }
-  
-  // 6. Destructuring function parameters
-  function displayUser({ firstName, lastName }) {
-    console.log(`User: ${firstName} ${lastName}`);
-  }
-  const userObj = {
-    firstName: 'Emily',
-    lastName: 'Davis'
-  };
-  displayUser(userObj); // Logs: 'User: Emily Davis'
-  
-  // 7. Destructuring an object with renamed variables
-  const book = {
-    title: '1984',
-    author: 'George Orwell'
-  };
-  const { title: bookTitle, author: bookAuthor } = book;
-  console.log(bookTitle); // Logs: '1984'
-  console.log(bookAuthor); // Logs: 'George Orwell'
-  
-  // 8. Destructuring with default values and renamed variables
-  const options = {
-    color: 'blue'
-  };
-  const { color: primaryColor = 'red', size: buttonSize = 'medium' } = options;
-  console.log(primaryColor); // Logs: 'blue'
-  console.log(buttonSize);   // Logs: 'medium'
-  
-  // 9. Destructuring with nested objects and renamed variables
-  const product = {
-    productDetails: {
-      productName: 'Laptop',
-      price: 1200
-    },
-    availability: {
-      stock: 30,
-      warehouse: 'A1'
-    }
-  };
-  const {
-    productDetails: { productName: name, price },
-    availability: { stock }
-  } = product;
-  console.log(name);  // Logs: 'Laptop'
-  console.log(price); // Logs: 1200
-  console.log(stock); // Logs: 30
-  
-  // 10. Destructuring with computed property names
-  const key1 = 'property1';
-  const key2 = 'property2';
-  const dynamicObject = {
-    [key1]: 'Value 1',
-    [key2]: 'Value 2'
-  };
-  const { [key1]: value1, [key2]: value2 } = dynamicObject;
-  console.log(value1); // Logs: 'Value 1'
-  console.log(value2); // Logs: 'Value 2'
-
    -
    -
    destructured assignment
    -

    destructured assignment

    -

    Destructured assignment in JavaScript is a syntax that allows you to unpack properties from an object and assign them directly to variables. This powerful feature enables you to extract multiple properties from an object in a single, concise statement. For example, if you have an object `{ name: 'Alice', age: 25 }`, you can extract the `name` and `age` properties and assign them to variables by writing `const { name, age } = person;`. This method eliminates the need for repetitive code, making it easier to work with objects, especially when dealing with complex or nested structures. Destructured assignment also supports assigning default values, renaming variables, and even working with nested objects, giving you a flexible way to handle object data. It streamlines the process of accessing and manipulating object properties, resulting in cleaner, more readable, and maintainable code.

    -

    Specifications

    - 
    -             
-  // 1. Basic destructured assignment
-  const person = {
-    name: 'Alice',
-    age: 25
-  };
-  const { name, age } = person;
-  console.log(name); // Logs: 'Alice'
-  console.log(age);  // Logs: 25
-  
-  // 2. Destructured assignment with different variable names
-  const user = {
-    username: 'john_doe',
-    email: 'john@example.com'
-  };
-  const { username: userName, email: userEmail } = user;
-  console.log(userName); // Logs: 'john_doe'
-  console.log(userEmail); // Logs: 'john@example.com'
-  
-  // 3. Destructured assignment with default values
-  const settings = {
-    theme: 'dark'
-  };
-  const { theme, fontSize = 16 } = settings;
-  console.log(theme);    // Logs: 'dark'
-  console.log(fontSize); // Logs: 16
-  
-  // 4. Destructured assignment with nested objects
-  const userProfile = {
-    userDetails: {
-      firstName: 'Bob',
-      lastName: 'Smith'
-    },
-    preferences: {
-      language: 'English'
-    }
-  };
-  const {
-    userDetails: { firstName, lastName },
-    preferences: { language }
-  } = userProfile;
-  console.log(firstName); // Logs: 'Bob'
-  console.log(lastName);  // Logs: 'Smith'
-  console.log(language);  // Logs: 'English'
-  
-  // 5. Destructured assignment with rest properties
-  const employee = {
-    id: 101,
-    name: 'Sarah',
-    position: 'Developer',
-    department: 'Engineering'
-  };
-  const { id, name: employeeName, ...rest } = employee;
-  console.log(id);          // Logs: 101
-  console.log(employeeName); // Logs: 'Sarah'
-  console.log(rest);         // Logs: { position: 'Developer', department: 'Engineering' }
-  
-  // 6. Destructured assignment in function parameters
-  function displayUser({ firstName, lastName }) {
-    console.log(`User: ${firstName} ${lastName}`);
-  }
-  const userObj = {
-    firstName: 'Emily',
-    lastName: 'Davis'
-  };
-  displayUser(userObj); // Logs: 'User: Emily Davis'
-  
-  // 7. Destructured assignment with renamed variables
-  const book = {
-    title: '1984',
-    author: 'George Orwell'
-  };
-  const { title: bookTitle, author: bookAuthor } = book;
-  console.log(bookTitle); // Logs: '1984'
-  console.log(bookAuthor); // Logs: 'George Orwell'
-  
-  // 8. Destructured assignment with default values and renamed variables
-  const options = {
-    color: 'blue'
-  };
-  const { color: primaryColor = 'red', size: buttonSize = 'medium' } = options;
-  console.log(primaryColor); // Logs: 'blue'
-  console.log(buttonSize);   // Logs: 'medium'
-  
-  // 9. Destructured assignment with nested objects and renamed variables
-  const product = {
-    productDetails: {
-      productName: 'Laptop',
-      price: 1200
-    },
-    availability: {
-      stock: 30,
-      warehouse: 'A1'
-    }
-  };
-  const {
-    productDetails: { productName: name, price },
-    availability: { stock }
-  } = product;
-  console.log(name);  // Logs: 'Laptop'
-  console.log(price); // Logs: 1200
-  console.log(stock); // Logs: 30
-  
-  // 10. Destructured assignment with computed property names
-  const key1 = 'property1';
-  const key2 = 'property2';
-  const dynamicObject = {
-    [key1]: 'Value 1',
-    [key2]: 'Value 2'
-  };
-  const { [key1]: value1, [key2]: value2 } = dynamicObject;
-  console.log(value1); // Logs: 'Value 1'
-  console.log(value2); // Logs: 'Value 2'
-
    -
    -
    Document-Object-Model -
    [15]
    -
    document-object-model
    -

    document-object-model

    -

    The Document Object Model (DOM) is a programming interface that represents the structure of a web document as a tree of objects. Each part of the document, such as elements, attributes, and text, is an individual node in this tree, allowing scripts to dynamically access and manipulate the document's content, structure, and styling. The DOM is language-agnostic but is primarily used with JavaScript in web development. It enables developers to modify web pages on the fly, such as updating content, changing styles, adding or removing elements, and responding to user interactions without needing to reload the entire page. The DOM provides methods and properties to interact with various elements, facilitating dynamic and interactive web experiences.

    -
    dom tree structure
    -

    dom tree structure

    -

    The Document Object Model (DOM) is a representation of an HTML document as a tree-like structure, where each element, attribute, and piece of text in the HTML corresponds to a node in the tree. In this structure, the root node represents the entire document (usually the `html` element), and branches extend from this root to include child nodes, which represent nested HTML elements like `head`, `body`, `div`, and so on. Each of these elements is a node, and within them, further nodes can exist, representing attributes (like `class` or `id`), text, or even comments. The relationships between nodes are hierarchical, meaning some nodes are parents (with child nodes), while others are children of these parent nodes. This tree structure allows developers to navigate and manipulate the document programmatically, as the entire HTML document is essentially modeled as an interconnected set of nodes, where every component of the HTML can be accessed and altered through scripting languages like JavaScript.

    -
    document keyword
    -

    document keyword

    -

    In the context of the DOM and JavaScript, the `document` keyword refers to the global object that represents the entire HTML or XML document loaded in the browser. It acts as an entry point for interacting with the content of the web page through the DOM. Using JavaScript, developers can access the `document` object to query and manipulate elements, retrieve or modify attributes, and handle events such as user clicks or input. For instance, methods like `document.getElementById()` or `document.querySelector()` allow developers to select specific elements within the DOM, while properties like `document.title` can be used to change the title of the webpage. Essentially, the `document` keyword gives JavaScript the ability to access and modify the structure and content of the page dynamically, making it an essential part of creating interactive and responsive web applications.

    -

    Specifications

    - 
    -             
-  // 1. Get the HTML element by its ID
-  let element = document.getElementById("myElement");
-  
-  // 2. Change the text content of an element
-  document.getElementById("myElement").textContent = "Hello, World!";
-  
-  // 3. Select an element using a CSS selector
-  let element = document.querySelector(".myClass");
-  
-  // 4. Change the background color of the body
-  document.body.style.backgroundColor = "lightblue";
-  
-  // 5. Get all elements with a specific class name
-  let elements = document.getElementsByClassName("myClass");
-  
-  // 6. Create a new paragraph element
-  let newParagraph = document.createElement("p");
-  
-  // 7. Append a new child element to the body
-  document.body.appendChild(newParagraph);
-  
-  // 8. Change the page title
-  document.title = "New Page Title";
-  
-  // 9. Remove an element from the document
-  let elementToRemove = document.getElementById("removeMe");
-  elementToRemove.remove();
-  
-  // 10. Add an event listener to a button
-  document.getElementById("myButton").addEventListener("click", function() {
-    alert("Button clicked!");
-  });
-
    -
    -
    .querySelector()
    -

    .querySelector()

    -

    The `.querySelector()` method is a powerful function in JavaScript used to select and return the first element within the document that matches a specified CSS selector. It allows developers to target elements in the DOM based on their tag name, class, ID, or any other valid CSS selector pattern. For example, using `document.querySelector("#myId")` selects the element with the ID "myId", while `document.querySelector(".myClass")` selects the first element with the class "myClass." This method is particularly useful because it simplifies the process of selecting elements by allowing developers to use familiar CSS-style selectors, making it both flexible and intuitive. If no matching element is found, `.querySelector()` returns `null`. Unlike older methods like `getElementById()` or `getElementsByClassName()`, it provides more versatility, allowing for more complex and precise element selection in a single line of code.

    -

    Specifications

    - 
    -             
-  // 1. Select the first element with the class "example"
-  let element = document.querySelector(".example");
-  
-  // 2. Select the element with the ID "main-header"
-  let header = document.querySelector("#main-header");
-  
-  // 3. Select the first p element in the document
-  let firstParagraph = document.querySelector("p");
-  
-  // 4. Select the first li element inside an unordered list
-  let firstListItem = document.querySelector("ul li");
-  
-  // 5. Select an input element of type text
-  let textInput = document.querySelector('input[type="text"]');
-  
-  // 6. Select the first element with both "btn" and "primary" classes
-  let button = document.querySelector(".btn.primary");
-  
-  // 7. Select the first anchor (a) element inside a navigation bar
-  let navLink = document.querySelector(".navbar a");
-  
-  // 8. Select the first child element inside a container with the class "content"
-  let firstChild = document.querySelector(".content > *");
-  
-  // 9. Select the first div element with the data attribute "data-role"
-  let dataDiv = document.querySelector("div[data-role]");
-  
-  // 10. Select the first span element inside an element with the class "wrapper"
-  let spanElement = document.querySelector(".wrapper span");
-
    -
    -
    .getElementById()
    -

    .getElementById()

    -

    The `.getElementById()` method is a fundamental JavaScript function used to select and return a single element from the DOM based on its unique ID attribute. Since IDs in HTML must be unique within a document, this method is a fast and efficient way to retrieve a specific element without ambiguity. For example, calling `document.getElementById("header")` will return the element with the ID of "header" if it exists in the document. Once the element is selected, developers can manipulate its content, style, or attributes using other DOM properties and methods. If no element with the given ID is found, the method returns `null`. Unlike other methods such as `.querySelector()`, which can target elements using more complex CSS selectors, `.getElementById()` is limited to selecting elements by ID only, making it straightforward and commonly used for basic DOM manipulation tasks.

    -

    Specifications

    - 
    -             
-  // 1. Select the element with the ID "header"
-  let header = document.getElementById("header");
-  
-  // 2. Change the text content of an element with the ID "title"
-  document.getElementById("title").textContent = "New Title";
-  
-  // 3. Change the background color of an element with the ID "main-section"
-  document.getElementById("main-section").style.backgroundColor = "lightgray";
-  
-  // 4. Hide an element with the ID "sidebar"
-  document.getElementById("sidebar").style.display = "none";
-  
-  // 5. Set the value of an input field with the ID "username"
-  document.getElementById("username").value = "JohnDoe";
-  
-  // 6. Add a new CSS class to an element with the ID "footer"
-  document.getElementById("footer").classList.add("highlight");
-  
-  // 7. Change the source of an image with the ID "logo"
-  document.getElementById("logo").src = "new-logo.png";
-  
-  // 8. Set an attribute for an element with the ID "link"
-  document.getElementById("link").setAttribute("href", "https://example.com");
-  
-  // 9. Remove an element with the ID "ad-banner" from the document
-  let adBanner = document.getElementById("ad-banner");
-  adBanner.remove();
-  
-  // 10. Change the inner HTML of an element with the ID "content"
-  document.getElementById("content").innerHTML = "
    Updated content!
    ";
-
    -
    -
    .getElementsByClassName()
    -

    .getElementsByClassName()

    -

    The `.getElementsByClassName()` method is a JavaScript function used to select and return a live HTMLCollection of all elements in the document that have a specified class name. Unlike methods like `.getElementById()`, which returns a single element, `.getElementsByClassName()` returns a collection of elements, which means multiple elements can be selected if they share the same class. For example, `document.getElementsByClassName("item")` will retrieve all elements that have the class "item." Since it returns a live collection, the list automatically updates if elements with the matching class are added or removed from the document. However, this collection is not an array, so while it can be iterated over using loops, array methods like `forEach` won't work without conversion. If no elements match the class name, the method returns an empty collection. This method is useful when you need to manipulate or access multiple elements that share the same styling or functional grouping in the DOM.

    -

    Specifications

    - 
    -             
-  // 1. Select all elements with the class "item" and change their background color
-  let items = document.getElementsByClassName("item");
-  for (let i = 0; i < items.length; i++) {
-    items[i].style.backgroundColor = "lightblue";
-  }
-  
-  // 2. Get all elements with the class "button" and disable them
-  let buttons = document.getElementsByClassName("button");
-  for (let i = 0; i < buttons.length; i++) {
-    buttons[i].disabled = true;
-  }
-  
-  // 3. Select all elements with the class "menu-item" and hide them
-  let menuItems = document.getElementsByClassName("menu-item");
-  for (let i = 0; i < menuItems.length; i++) {
-    menuItems[i].style.display = "none";
-  }
-  
-  // 4. Change the text content of all elements with the class "title"
-  let titles = document.getElementsByClassName("title");
-  for (let i = 0; i < titles.length; i++) {
-    titles[i].textContent = "New Title";
-  }
-  
-  // 5. Add a CSS class to all elements with the class "active"
-  let activeElements = document.getElementsByClassName("active");
-  for (let i = 0; i < activeElements.length; i++) {
-    activeElements[i].classList.add("highlight");
-  }
-  
-  // 6. Set the border of all elements with the class "box" to red
-  let boxes = document.getElementsByClassName("box");
-  for (let i = 0; i < boxes.length; i++) {
-    boxes[i].style.border = "2px solid red";
-  }
-  
-  // 7. Change the font size of all elements with the class "text" to 18px
-  let texts = document.getElementsByClassName("text");
-  for (let i = 0; i < texts.length; i++) {
-    texts[i].style.fontSize = "18px";
-  }
-  
-  // 8. Add a background color to all elements with the class "highlighted"
-  let highlightedItems = document.getElementsByClassName("highlighted");
-  for (let i = 0; i < highlightedItems.length; i++) {
-    highlightedItems[i].style.backgroundColor = "yellow";
-  }
-  
-  // 9. Get all elements with the class "input-field" and clear their values
-  let inputFields = document.getElementsByClassName("input-field");
-  for (let i = 0; i < inputFields.length; i++) {
-    inputFields[i].value = "";
-  }
-  
-  // 10. Append text to all elements with the class "note"
-  let notes = document.getElementsByClassName("note");
-  for (let i = 0; i < notes.length; i++) {
-    notes[i].textContent += " - Updated";
-  }
-
    -
    -
    .getElementsByTagName()
    -

    .getElementsByTagName()

    -

    The `.getElementsByTagName()` method in JavaScript is used to select and return a live HTMLCollection of all elements with a specific tag name in the document. For example, calling `document.getElementsByTagName("p")` will return all `

    ` elements (paragraphs) in the DOM. This method works similarly to `.getElementsByClassName()`, but instead of selecting elements based on class, it targets them by their HTML tag name, such as `

    `, ``, ``, and so on. The result is a live collection, meaning it dynamically updates if elements of that tag are added or removed from the document. Like the HTMLCollection from `.getElementsByClassName()`, it isn't an array, so array methods won't work directly without converting it, though it can be looped through using basic loops like `for`. If no elements with the specified tag are found, it returns an empty collection. This method is useful for applying changes to groups of similar elements or when you want to interact with specific types of HTML tags in bulk.

    -

    Specifications

    - 
    -             
-  // 1. Select all p elements and change their text color to blue
-  let paragraphs = document.getElementsByTagName("p");
-  for (let i = 0; i < paragraphs.length; i++) {
-    paragraphs[i].style.color = "blue";
-  }
-  
-  // 2. Get all h1 elements and change their font size
-  let headers = document.getElementsByTagName("h1");
-  for (let i = 0; i < headers.length; i++) {
-    headers[i].style.fontSize = "36px";
-  }
-  
-  // 3. Select all a elements and change their href attribute
-  let links = document.getElementsByTagName("a");
-  for (let i = 0; i < links.length; i++) {
-    links[i].href = "https://newlink.com";
-  }
-  
-  // 4. Get all div elements and add a new CSS class
-  let divs = document.getElementsByTagName("div");
-  for (let i = 0; i < divs.length; i++) {
-    divs[i].classList.add("new-class");
-  }
-  
-  // 5. Change the border color of all table elements
-  let tables = document.getElementsByTagName("table");
-  for (let i = 0; i < tables.length; i++) {
-    tables[i].style.borderColor = "green";
-  }
-  
-  // 6. Get all button elements and disable them
-  let buttons = document.getElementsByTagName("button");
-  for (let i = 0; i < buttons.length; i++) {
-    buttons[i].disabled = true;
-  }
-  
-  // 7. Select all li elements and change their background color
-  let listItems = document.getElementsByTagName("li");
-  for (let i = 0; i < listItems.length; i++) {
-    listItems[i].style.backgroundColor = "lightgray";
-  }
-  
-  // 8. Get all img elements and set a new source
-  let images = document.getElementsByTagName("img");
-  for (let i = 0; i < images.length; i++) {
-    images[i].src = "new-image.jpg";
-  }
-  
-  // 9. Change the text alignment of all th elements in a table
-  let tableHeaders = document.getElementsByTagName("th");
-  for (let i = 0; i < tableHeaders.length; i++) {
-    tableHeaders[i].style.textAlign = "center";
-  }
-  
-  // 10. Get all span elements and add a tooltip by setting the title attribute
-  let spans = document.getElementsByTagName("span");
-  for (let i = 0; i < spans.length; i++) {
-    spans[i].title = "This is a tooltip";
-  }
-
    -
    -
    .innerHTML
    -

    .innerHTML

    -

    The `.innerHTML` property in JavaScript is used to get or set the HTML content inside an element. When accessed, `.innerHTML` returns the HTML code as a string, including all child elements and text within the specified element. For example, `document.getElementById("content").innerHTML` would retrieve the complete HTML inside the element with the ID "content." When setting `.innerHTML`, you can update the entire content of an element by assigning new HTML code as a string, such as `document.getElementById("content").innerHTML = "New content here";`. This will replace the existing content with the specified HTML structure. However, it's important to note that when using `.innerHTML` to set content, any existing child elements within the target element are completely replaced, and it can introduce security risks, such as cross-site scripting (XSS), if untrusted content is injected. Despite these considerations, `.innerHTML` is a commonly used and efficient way to dynamically update or retrieve the HTML structure of elements in a web page.

    -

    Specifications

    - 
    -             
-  // 1. Change the inner HTML of a div with the ID "content"
-  document.getElementById("content").innerHTML = "
    This is new content inside the div.
    ";
-  
-  // 2. Replace the content of an element with the ID "header" with an h1 tag
-  document.getElementById("header").innerHTML = "
    Welcome to My Website
    ";
-  
-  // 3. Add an unordered list inside an element with the ID "listContainer"
-  document.getElementById("listContainer").innerHTML = "
    • Item 1
    • Item 2
    • Item 3
    ";
-  
-  // 4. Change the content of a paragraph with the ID "description"
-  document.getElementById("description").innerHTML = "This is an updated description.";
-  
-  // 5. Insert a table inside an element with the ID "tableDiv"
-  document.getElementById("tableDiv").innerHTML = "
    NameAge
    John30
    ";
-  
-  // 6. Update the HTML content of a div with the ID "promo" to display an image
-  document.getElementById("promo").innerHTML = "Promotional Image";
-  
-  // 7. Replace the text inside a span with the ID "status" with a success message
-  document.getElementById("status").innerHTML = "Success! Your changes have been saved.";
-  
-  // 8. Add a new link inside a div with the ID "footer"
-  document.getElementById("footer").innerHTML = "Visit Example";
-  
-  // 9. Clear all content inside an element with the ID "formContainer"
-  document.getElementById("formContainer").innerHTML = "";
-  
-  // 10. Insert a bold text message inside a paragraph with the ID "note"
-  document.getElementById("note").innerHTML = "Important: Please read the instructions carefully.";
-
    -
    -
    .style
    -

    .style

    -

    The `.style` property in JavaScript is used to directly access and manipulate the inline CSS styles of a specific HTML element. It allows developers to modify the appearance of an element dynamically by setting individual CSS properties using JavaScript. For example, `document.getElementById("box").style.backgroundColor = "blue";` would change the background color of the element with the ID "box" to blue. The `.style` property only affects the inline styles of an element, meaning it wont change or override styles applied via external stylesheets or the `style` tag in the document. Each CSS property in JavaScript follows camelCase notation, so properties like `background-color` become `backgroundColor`, and `font-size` becomes `fontSize`. While `.style` provides a simple way to manipulate styles on the fly, its limited to inline styles, meaning more complex styling changes, or those affecting multiple elements, are usually better handled through external CSS or by adding/removing CSS classes.

    -

    Specifications

    - 
    -             
-  // 1. Change the background color of an element with the ID "header"
-  document.getElementById("header").style.backgroundColor = "lightblue";
-  
-  // 2. Set the text color of a paragraph with the ID "description"
-  document.getElementById("description").style.color = "green";
-  
-  // 3. Change the font size of an element with the ID "title"
-  document.getElementById("title").style.fontSize = "24px";
-  
-  // 4. Set the display of an element with the ID "sidebar" to none (hide it)
-  document.getElementById("sidebar").style.display = "none";
-  
-  // 5. Add a border to a div with the ID "box"
-  document.getElementById("box").style.border = "2px solid black";
-  
-  // 6. Change the width of an image with the ID "logo"
-  document.getElementById("logo").style.width = "150px";
-  
-  // 7. Set the margin of an element with the ID "container"
-  document.getElementById("container").style.margin = "20px";
-  
-  // 8. Change the text alignment of an element with the ID "footer" to center
-  document.getElementById("footer").style.textAlign = "center";
-  
-  // 9. Set the height of a div with the ID "main" to 500px
-  document.getElementById("main").style.height = "500px";
-  
-  // 10. Add padding to an element with the ID "content"
-  document.getElementById("content").style.padding = "15px";
-
    -
    -
    .createElement()
    -

    .createElement()

    -

    The `.createElement()` method in JavaScript is used to create a new HTML element dynamically within the document. When called, it generates a new element of the type specified as its argument, such as a `div`, `p`, or `button`. For example, `document.createElement("p")` creates a new `p` (paragraph) element but does not automatically add it to the DOM. To make the newly created element appear on the page, it needs to be inserted into the DOM using methods like `.appendChild()` or `.insertBefore()`. Once created, the new element can be further modified by setting attributes, adding classes, or manipulating its content using properties like `.setAttribute()`, `.classList`, or `.innerHTML`. This method is essential for dynamically adding content to web pages, enabling developers to build interactive elements, form inputs, and other components on the fly without needing to reload the page. It's a core part of DOM manipulation that facilitates creating flexible, interactive web experiences.

    -

    Specifications

    - 
    -             
-  // 1. Create a new paragraph element and add it to the body
-  let paragraph = document.createElement("p");
-  paragraph.textContent = "This is a new paragraph.";
-  document.body.appendChild(paragraph);
-  
-  // 2. Create a new div element and add it to an element with the ID "container"
-  let newDiv = document.createElement("div");
-  newDiv.textContent = "This is a new div inside the container.";
-  document.getElementById("container").appendChild(newDiv);
-  
-  // 3. Create a new list item element and add it to an unordered list with the ID "myList"
-  let listItem = document.createElement("li");
-  listItem.textContent = "New list item";
-  document.getElementById("myList").appendChild(listItem);
-  
-  // 4. Create a new button element and add it to a form with the ID "myForm"
-  let button = document.createElement("button");
-  button.textContent = "Submit";
-  document.getElementById("myForm").appendChild(button);
-  
-  // 5. Create a new image element and set its src attribute before adding it to a div with the ID "imageContainer"
-  let img = document.createElement("img");
-  img.src = "image.jpg";
-  img.alt = "A new image";
-  document.getElementById("imageContainer").appendChild(img);
-  
-  // 6. Create a new anchor element and add a link to an element with the ID "linkSection"
-  let link = document.createElement("a");
-  link.href = "https://example.com";
-  link.textContent = "Go to Example";
-  document.getElementById("linkSection").appendChild(link);
-  
-  // 7. Create a new heading element (h2) and add it to the body
-  let heading = document.createElement("h2");
-  heading.textContent = "This is a new heading";
-  document.body.appendChild(heading);
-  
-  // 8. Create a new span element and insert it inside a paragraph with the ID "textPara"
-  let span = document.createElement("span");
-  span.textContent = "This is a span inside the paragraph.";
-  document.getElementById("textPara").appendChild(span);
-  
-  // 9. Create a new input element and add it to a form with the ID "signupForm"
-  let input = document.createElement("input");
-  input.type = "text";
-  input.placeholder = "Enter your name";
-  document.getElementById("signupForm").appendChild(input);
-  
-  // 10. Create a new table element, add a row and cells, and append it to a div with the ID "tableContainer"
-  let table = document.createElement("table");
-  let row = document.createElement("tr");
-  let cell1 = document.createElement("td");
-  cell1.textContent = "Row 1, Cell 1";
-  let cell2 = document.createElement("td");
-  cell2.textContent = "Row 1, Cell 2";
-  row.appendChild(cell1);
-  row.appendChild(cell2);
-  table.appendChild(row);
-  document.getElementById("tableContainer").appendChild(table);
-
    -
    -
    .appendChild()
    -

    .appendChild()

    -

    The `.appendChild()` method in JavaScript is used to add a new node as the last child of a specified parent node in the DOM. This method allows developers to insert elements, which could be either existing elements from the document or new elements created with methods like `.createElement()`, into a parent container. For example, if you have an element `newElement` and want to add it to a container with the ID "content", you would use `document.getElementById("content").appendChild(newElement)`. The added node becomes the last child of the parent node, meaning it will be placed at the end of any existing content inside that parent. It’s a powerful tool for dynamically building or modifying the structure of a webpage, making it useful for tasks such as adding items to lists, appending new content sections, or inserting elements in response to user interactions. One key aspect of `.appendChild()` is that if the node being appended already exists in the DOM, it is removed from its previous position and placed at the new location, ensuring it can only exist in one place at a time.

    -

    Specifications

    - 
    -             
-  // 1. Create a new paragraph and append it to the body
-  let paragraph = document.createElement("p");
-  paragraph.textContent = "This is a new paragraph.";
-  document.body.appendChild(paragraph);
-  
-  // 2. Create a new div and append it to an element with the ID "container"
-  let div = document.createElement("div");
-  div.textContent = "This is a new div.";
-  document.getElementById("container").appendChild(div);
-  
-  // 3. Create a new list item and append it to an unordered list with the ID "myList"
-  let listItem = document.createElement("li");
-  listItem.textContent = "New list item";
-  document.getElementById("myList").appendChild(listItem);
-  
-  // 4. Create a new button and append it to a form with the ID "myForm"
-  let button = document.createElement("button");
-  button.textContent = "Click Me";
-  document.getElementById("myForm").appendChild(button);
-  
-  // 5. Create an image element and append it to a div with the ID "imageContainer"
-  let image = document.createElement("img");
-  image.src = "image.jpg";
-  image.alt = "Sample Image";
-  document.getElementById("imageContainer").appendChild(image);
-  
-  // 6. Create a new heading (h2) and append it to the body
-  let heading = document.createElement("h2");
-  heading.textContent = "This is a new heading.";
-  document.body.appendChild(heading);
-  
-  // 7. Create a new anchor element and append it to a div with the ID "linkSection"
-  let link = document.createElement("a");
-  link.href = "https://example.com";
-  link.textContent = "Visit Example";
-  document.getElementById("linkSection").appendChild(link);
-  
-  // 8. Create a new table row and append it to a table with the ID "myTable"
-  let tableRow = document.createElement("tr");
-  let tableData = document.createElement("td");
-  tableData.textContent = "New cell data";
-  tableRow.appendChild(tableData);
-  document.getElementById("myTable").appendChild(tableRow);
-  
-  // 9. Create a new span element and append it to a paragraph with the ID "textPara"
-  let span = document.createElement("span");
-  span.textContent = "This is a new span.";
-  document.getElementById("textPara").appendChild(span);
-  
-  // 10. Create a new option element and append it to a select element with the ID "dropdown"
-  let option = document.createElement("option");
-  option.textContent = "New Option";
-  option.value = "newOption";
-  document.getElementById("dropdown").appendChild(option);
-
    -
    -
    .removeChild()
    -

    .removeChild()

    -

    The `.removeChild()` method in JavaScript is used to remove a specific child node from its parent in the DOM. This method is called on the parent element and takes the child element you want to remove as an argument. For instance, if you have an element `childElement` inside a parent with the ID "container", you would use `document.getElementById("container").removeChild(childElement)` to remove it. The method returns the removed node, which can be useful if you need to store or manipulate it further. It's important to note that the node is completely removed from the DOM, meaning it no longer exists visually or interactively on the webpage unless added back later. The `.removeChild()` method is commonly used when you need to dynamically modify a page by deleting elements, such as when removing items from a list, cleaning up after user interactions, or resetting parts of a form. If the specified child node doesn't exist within the parent, an error is thrown, so it's often useful to check the existence of the node before attempting removal.

    -

    Specifications

    - 
    -             
-  // 1. Remove a paragraph from an element with the ID "content"
-  let content = document.getElementById("content");
-  let paragraphToRemove = document.getElementById("para1");
-  content.removeChild(paragraphToRemove);
-  
-  // 2. Remove a list item from an unordered list with the ID "myList"
-  let list = document.getElementById("myList");
-  let listItemToRemove = document.getElementById("item2");
-  list.removeChild(listItemToRemove);
-  
-  // 3. Remove an image from a div with the ID "imageContainer"
-  let imageContainer = document.getElementById("imageContainer");
-  let imageToRemove = document.getElementById("img1");
-  imageContainer.removeChild(imageToRemove);
-  
-  // 4. Remove a button from a form with the ID "myForm"
-  let form = document.getElementById("myForm");
-  let buttonToRemove = document.getElementById("submitBtn");
-  form.removeChild(buttonToRemove);
-  
-  // 5. Remove a div from an element with the ID "container"
-  let container = document.getElementById("container");
-  let divToRemove = document.getElementById("childDiv");
-  container.removeChild(divToRemove);
-  
-  // 6. Remove a row from a table with the ID "myTable"
-  let table = document.getElementById("myTable");
-  let rowToRemove = document.getElementById("row1");
-  table.removeChild(rowToRemove);
-  
-  // 7. Remove a heading from the body
-  let headingToRemove = document.getElementById("mainHeading");
-  document.body.removeChild(headingToRemove);
-  
-  // 8. Remove an option from a select element with the ID "dropdown"
-  let dropdown = document.getElementById("dropdown");
-  let optionToRemove = document.getElementById("option1");
-  dropdown.removeChild(optionToRemove);
-  
-  // 9. Remove a span from a paragraph with the ID "textPara"
-  let textPara = document.getElementById("textPara");
-  let spanToRemove = document.getElementById("span1");
-  textPara.removeChild(spanToRemove);
-  
-  // 10. Remove a link from a div with the ID "linkSection"
-  let linkSection = document.getElementById("linkSection");
-  let linkToRemove = document.getElementById("link1");
-  linkSection.removeChild(linkToRemove);
-
    -
    -
    .onclick
    -

    .onclick

    -

    The `.onclick` property in JavaScript is used to assign a function or event handler that will be triggered when the user clicks on a specific HTML element. This property makes it easy to define what should happen in response to a click event, such as changing content, submitting a form, or performing an action like showing or hiding elements. For example, `document.getElementById("button").onclick = function() { alert("Button clicked!"); }` will display an alert message when the button with the ID "button" is clicked. The function assigned to `.onclick` can be defined inline, or it can reference an external function, allowing for flexible event handling. By using `.onclick`, developers can make their webpages interactive and responsive to user actions without the need for full page reloads. This property is part of event-driven programming in JavaScript, enabling dynamic behavior based on user interaction. It is a simpler alternative to methods like `.addEventListener()`, although the latter is more versatile for handling multiple event types or multiple event handlers.

    -

    Specifications

    - 
    -             
-  // 1. Add an onclick event to a button with the ID "myButton" that shows an alert
-  document.getElementById("myButton").onclick = function() {
-    alert("Button clicked!");
-  };
-  
-  // 2. Add an onclick event to a div with the ID "container" that changes its background color
-  document.getElementById("container").onclick = function() {
-    this.style.backgroundColor = "lightblue";
-  };
-  
-  // 3. Add an onclick event to an image with the ID "myImage" that changes its source
-  document.getElementById("myImage").onclick = function() {
-    this.src = "new-image.jpg";
-  };
-  
-  // 4. Add an onclick event to a paragraph with the ID "text" that hides the paragraph
-  document.getElementById("text").onclick = function() {
-    this.style.display = "none";
-  };
-  
-  // 5. Add an onclick event to a link with the ID "myLink" that prevents the default action
-  document.getElementById("myLink").onclick = function(event) {
-    event.preventDefault();
-    alert("Link clicked, but navigation prevented.");
-  };
-  
-  // 6. Add an onclick event to a heading with the ID "header" that changes the text content
-  document.getElementById("header").onclick = function() {
-    this.textContent = "Header clicked!";
-  };
-  
-  // 7. Add an onclick event to a list item with the ID "listItem1" that changes its font size
-  document.getElementById("listItem1").onclick = function() {
-    this.style.fontSize = "24px";
-  };
-  
-  // 8. Add an onclick event to a form button with the ID "submitBtn" that alerts before submission
-  document.getElementById("submitBtn").onclick = function() {
-    alert("Form is about to be submitted.");
-  };
-  
-  // 9. Add an onclick event to a div with the ID "box" that toggles its visibility
-  document.getElementById("box").onclick = function() {
-    if (this.style.display === "none") {
-      this.style.display = "block";
-    } else {
-      this.style.display = "none";
-    }
-  };
-  
-  // 10. Add an onclick event to a span with the ID "clickMe" that changes its color to red
-  document.getElementById("clickMe").onclick = function() {
-    this.style.color = "red";
-  };
-
    -
    -
    .children
    -

    .children

    -

    The `.children` property in JavaScript is used to access all the child elements of a specified parent element in the DOM. It returns an HTMLCollection, which is a live, ordered collection of only the element nodes (excluding text nodes, comments, and other non-element nodes) that are direct children of the parent element. For example, if you have a `div` with several nested elements inside, calling `document.getElementById("parent").children` will give you a collection of all those child elements. This collection is live, meaning it automatically updates if the structure of the DOM changes, such as when new children are added or removed. Each element in the collection can be accessed using an index, similar to an array, but the HTMLCollection itself is not a true array, so it doesn't have methods like `forEach` unless converted. The `.children` property is useful for situations where you need to iterate over or manipulate all the direct child elements of a parent node, allowing for dynamic control of the DOM structure.

    -

    Specifications

    - 
    -             
-  // 1. Access the first child of a div with the ID "container" and change its text content
-  let container = document.getElementById("container");
-  container.children[0].textContent = "First child text updated.";
-  
-  // 2. Change the background color of the second child of a list with the ID "myList"
-  let list = document.getElementById("myList");
-  list.children[1].style.backgroundColor = "lightblue";
-  
-  // 3. Access all children of a div with the ID "content" and set their text color to red
-  let content = document.getElementById("content");
-  for (let i = 0; i < content.children.length; i++) {
-    content.children[i].style.color = "red";
-  }
-  
-  // 4. Add a new CSS class to the third child of a table row with the ID "tableRow"
-  let tableRow = document.getElementById("tableRow");
-  tableRow.children[2].classList.add("highlight");
-  
-  // 5. Change the font size of the first child of a div with the ID "headerSection"
-  let headerSection = document.getElementById("headerSection");
-  headerSection.children[0].style.fontSize = "20px";
-  
-  // 6. Hide the last child of an element with the ID "menu"
-  let menu = document.getElementById("menu");
-  menu.children[menu.children.length - 1].style.display = "none";
-  
-  // 7. Access the children of a form with the ID "myForm" and disable all input fields
-  let form = document.getElementById("myForm");
-  for (let i = 0; i < form.children.length; i++) {
-    if (form.children[i].tagName === "INPUT") {
-      form.children[i].disabled = true;
-    }
-  }
-  
-  // 8. Set the border of the second child of a div with the ID "box" to solid black
-  let box = document.getElementById("box");
-  box.children[1].style.border = "2px solid black";
-  
-  // 9. Change the text content of the first child of an element with the ID "footer"
-  let footer = document.getElementById("footer");
-  footer.children[0].textContent = "Footer content updated.";
-  
-  // 10. Change the width of all image children of a div with the ID "gallery"
-  let gallery = document.getElementById("gallery");
-  for (let i = 0; i < gallery.children.length; i++) {
-    if (gallery.children[i].tagName === "IMG") {
-      gallery.children[i].style.width = "150px";
-    }
-  }
-
    -
    -
    .parentNode
    -

    .parentNode

    -

    The `.parentNode` property in JavaScript is used to access the parent node of a specific DOM element. It returns the direct parent of the node on which it is called, allowing developers to navigate up the DOM tree. For example, if an element is nested within a `div`, calling `element.parentNode` will return that `div` as the parent. This property can be particularly useful when you need to manipulate or interact with an element’s parent, such as removing the element from the DOM, adding siblings, or changing styles. It's important to note that `.parentNode` returns any kind of node, including element nodes, document nodes, and even text nodes, depending on the structure. If the node has no parent (such as the root document element), `.parentNode` returns `null`. This property is essential for traversing the DOM and understanding the hierarchical relationships between elements, making it easier to modify and manage the document dynamically.

    -

    Specifications

    - 
    -             
-  // 1. Access the parent node of an element with the ID "child" and change its background color
-  let child = document.getElementById("child");
-  child.parentNode.style.backgroundColor = "lightgray";
-  
-  // 2. Remove the parent node of an element with the ID "listItem1"
-  let listItem1 = document.getElementById("listItem1");
-  listItem1.parentNode.removeChild(listItem1);
-  
-  // 3. Add a new CSS class to the parent node of a button with the ID "submitBtn"
-  let submitBtn = document.getElementById("submitBtn");
-  submitBtn.parentNode.classList.add("form-container");
-  
-  // 4. Access the parent node of a paragraph with the ID "text" and change its font size
-  let text = document.getElementById("text");
-  text.parentNode.style.fontSize = "18px";
-  
-  // 5. Hide the parent node of an image with the ID "myImage"
-  let myImage = document.getElementById("myImage");
-  myImage.parentNode.style.display = "none";
-  
-  // 6. Change the border of the parent node of an input field with the ID "username"
-  let username = document.getElementById("username");
-  username.parentNode.style.border = "1px solid red";
-  
-  // 7. Access the parent node of a div with the ID "box" and change its padding
-  let box = document.getElementById("box");
-  box.parentNode.style.padding = "20px";
-  
-  // 8. Add text to the parent node of a span with the ID "highlightSpan"
-  let highlightSpan = document.getElementById("highlightSpan");
-  highlightSpan.parentNode.textContent += " - Parent updated";
-  
-  // 9. Change the text color of the parent node of an element with the ID "link"
-  let link = document.getElementById("link");
-  link.parentNode.style.color = "blue";
-  
-  // 10. Append a new child element to the parent node of a list item with the ID "item2"
-  let item2 = document.getElementById("item2");
-  let newElement = document.createElement("div");
-  newElement.textContent = "New child element";
-  item2.parentNode.appendChild(newElement);
-
    -
    -
    Dom-Events -
    [07]
    -
    dom-events
    -

    dom-events

    -

    DOM (Document Object Model) events in JavaScript refer to the actions or occurrences that happen in the web browser, which the browser can respond to. These events are usually triggered by user interactions such as clicking a button, typing in a text field, or moving the mouse. JavaScript can listen for these events and execute specific functions, called event handlers, in response. Common DOM events include "click," "mouseover," "keydown," and "submit." By adding event listeners to HTML elements, developers can make their web pages more interactive, allowing the page to respond dynamically to user input or system-generated actions, like page loading. JavaScript's event model provides a powerful way to control the flow of interaction between the user and the web application.

    -

    Specifications

    - 
    -             
-  // 1. Click event - triggers when an element is clicked
-  document.getElementById("example1").addEventListener("click", function() {
-    console.log("Element clicked!");
-  });
-  // Logs: "Element clicked!"
-  
-  // 2. Double click event - triggers when an element is double clicked
-  document.getElementById("example2").addEventListener("dblclick", function() {
-    console.log("Element double-clicked!");
-  });
-  // Logs: "Element double-clicked!"
-  
-  // 3. Mouseover event - triggers when the mouse pointer enters an element
-  document.getElementById("example3").addEventListener("mouseover", function() {
-    console.log("Mouse over the element!");
-  });
-  // Logs: "Mouse over the element!"
-  
-  // 4. Keydown event - triggers when a key is pressed down
-  document.addEventListener("keydown", function(event) {
-    console.log("Key pressed:", event.key);
-  });
-  // Logs: "Key pressed: [key value]"
-  
-  // 5. Keyup event - triggers when a key is released
-  document.addEventListener("keyup", function(event) {
-    console.log("Key released:", event.key);
-  });
-  // Logs: "Key released: [key value]"
-  
-  // 6. Change event - triggers when the value of an input element is changed
-  document.getElementById("example4").addEventListener("change", function() {
-    console.log("Input value changed!");
-  });
-  // Logs: "Input value changed!"
-  
-  // 7. Submit event - triggers when a form is submitted
-  document.getElementById("exampleForm").addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevents actual form submission
-    console.log("Form submitted!");
-  });
-  // Logs: "Form submitted!"
-  
-  // 8. Focus event - triggers when an input field gains focus
-  document.getElementById("example5").addEventListener("focus", function() {
-    console.log("Input focused!");
-  });
-  // Logs: "Input focused!"
-  
-  // 9. Blur event - triggers when an input field loses focus
-  document.getElementById("example5").addEventListener("blur", function() {
-    console.log("Input lost focus!");
-  });
-  // Logs: "Input lost focus!"
-  
-  // 10. Scroll event - triggers when the page or an element is scrolled
-  window.addEventListener("scroll", function() {
-    console.log("Page scrolled!");
-  });
-  // Logs: "Page scrolled!"
-
    -
    -
    event handler registration
    -

    event handler registration

    -

    Event handler registration in JavaScript is the process of associating a specific function, called an event handler, with a DOM element so that the function is executed when a particular event occurs on that element. There are a few ways to register an event handler. One common approach is using the `addEventListener()` method, where you specify the event type (like "click" or "mouseover") and the function to be called when the event is triggered. Another method is to directly assign a function to an element's event property, such as `element.onclick`, though this approach only allows for one handler per event type. The `addEventListener()` method is preferred because it supports multiple event handlers for the same event type and provides better flexibility, including the ability to remove event handlers if needed. This registration process is key to making web pages interactive, allowing developers to control how their applications respond to user actions.

    -

    Specifications

    - 
    -             
-  // 1. Using addEventListener for a click event
-  document.getElementById("example1").addEventListener("click", function() {
-    console.log("Button clicked!");
-  });
-  // Logs: "Button clicked!"
-  
-  // 2. Using addEventListener for a double click event
-  document.getElementById("example2").addEventListener("dblclick", function() {
-    console.log("Element double-clicked!");
-  });
-  // Logs: "Element double-clicked!"
-  
-  // 3. Using addEventListener for a mouseover event
-  document.getElementById("example3").addEventListener("mouseover", function() {
-    console.log("Mouse over element!");
-  });
-  // Logs: "Mouse over element!"
-  
-  // 4. Using addEventListener for a keydown event
-  document.addEventListener("keydown", function(event) {
-    console.log("Key pressed:", event.key);
-  });
-  // Logs: "Key pressed: [key value]"
-  
-  // 5. Using addEventListener for a keyup event
-  document.addEventListener("keyup", function(event) {
-    console.log("Key released:", event.key);
-  });
-  // Logs: "Key released: [key value]"
-  
-  // 6. Using inline HTML event handler registration
-  function onButtonClick() {
-    console.log("Button clicked through inline registration!");
-  }
-  document.getElementById("example4").onclick = onButtonClick;
-  // Logs: "Button clicked through inline registration!"
-  
-  // 7. Assigning an event handler using the 'onchange' property
-  document.getElementById("example5").onchange = function() {
-    console.log("Input value changed through property registration!");
-  };
-  // Logs: "Input value changed through property registration!"
-  
-  // 8. Adding an event handler for focus using addEventListener
-  document.getElementById("example6").addEventListener("focus", function() {
-    console.log("Input field focused!");
-  });
-  // Logs: "Input field focused!"
-  
-  // 9. Using addEventListener for form submit
-  document.getElementById("exampleForm").addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevents form submission
-    console.log("Form submitted via event listener!");
-  });
-  // Logs: "Form submitted via event listener!"
-  
-  // 10. Removing an event listener using removeEventListener
-  function handleClick() {
-    console.log("Button clicked before removal!");
-  }
-  document.getElementById("example7").addEventListener("click", handleClick);
-  document.getElementById("example7").removeEventListener("click", handleClick);
-  // Logs nothing after removal of the event handler
-
    -
    -
    removing event handlers
    -

    removing event handlers

    -

    Removing event handlers in JavaScript is the process of detaching a previously added function from an event so that it no longer executes when the event occurs. This is typically done using the `removeEventListener()` method, which mirrors the `addEventListener()` method used for registration. To remove an event handler, you need to provide the same event type and function reference that were used when the event was initially registered. One important consideration is that the function reference must be the same; anonymous functions cannot be removed because there is no way to reference them directly. Removing event handlers is useful for improving performance, preventing memory leaks, or stopping unwanted interactions in certain parts of an application, especially when elements are dynamically created or removed from the DOM. It allows developers to manage user interactions more effectively and ensure that resources are properly freed when they are no longer needed.

    -

    Specifications

    - 
    -             
-  // 1. Removing a click event listener
-  function handleClick() {
-    console.log("Clicked!");
-  }
-  const btn1 = document.getElementById("example1");
-  btn1.addEventListener("click", handleClick);
-  btn1.removeEventListener("click", handleClick);
-  // Logs nothing after removal of the event handler
-  
-  // 2. Removing a double-click event listener
-  function handleDoubleClick() {
-    console.log("Double-clicked!");
-  }
-  const btn2 = document.getElementById("example2");
-  btn2.addEventListener("dblclick", handleDoubleClick);
-  btn2.removeEventListener("dblclick", handleDoubleClick);
-  // Logs nothing after removal of the event handler
-  
-  // 3. Removing a keydown event listener
-  function handleKeyDown(event) {
-    console.log("Key pressed:", event.key);
-  }
-  document.addEventListener("keydown", handleKeyDown);
-  document.removeEventListener("keydown", handleKeyDown);
-  // Logs nothing after removal of the event handler
-  
-  // 4. Removing a mouseover event listener
-  function handleMouseOver() {
-    console.log("Mouse over!");
-  }
-  const div1 = document.getElementById("example3");
-  div1.addEventListener("mouseover", handleMouseOver);
-  div1.removeEventListener("mouseover", handleMouseOver);
-  // Logs nothing after removal of the event handler
-  
-  // 5. Removing a keyup event listener
-  function handleKeyUp(event) {
-    console.log("Key released:", event.key);
-  }
-  document.addEventListener("keyup", handleKeyUp);
-  document.removeEventListener("keyup", handleKeyUp);
-  // Logs nothing after removal of the event handler
-  
-  // 6. Removing a change event listener on an input
-  function handleChange() {
-    console.log("Input value changed!");
-  }
-  const input1 = document.getElementById("example4");
-  input1.addEventListener("change", handleChange);
-  input1.removeEventListener("change", handleChange);
-  // Logs nothing after removal of the event handler
-  
-  // 7. Removing a focus event listener
-  function handleFocus() {
-    console.log("Input focused!");
-  }
-  const input2 = document.getElementById("example5");
-  input2.addEventListener("focus", handleFocus);
-  input2.removeEventListener("focus", handleFocus);
-  // Logs nothing after removal of the event handler
-  
-  // 8. Removing a submit event listener
-  function handleSubmit(event) {
-    event.preventDefault();
-    console.log("Form submitted!");
-  }
-  const form1 = document.getElementById("exampleForm");
-  form1.addEventListener("submit", handleSubmit);
-  form1.removeEventListener("submit", handleSubmit);
-  // Logs nothing after removal of the event handler
-  
-  // 9. Removing a scroll event listener
-  function handleScroll() {
-    console.log("Page scrolled!");
-  }
-  window.addEventListener("scroll", handleScroll);
-  window.removeEventListener("scroll", handleScroll);
-  // Logs nothing after removal of the event handler
-  
-  // 10. Removing a mousedown event listener
-  function handleMouseDown() {
-    console.log("Mouse button pressed!");
-  }
-  const div2 = document.getElementById("example6");
-  div2.addEventListener("mousedown", handleMouseDown);
-  div2.removeEventListener("mousedown", handleMouseDown);
-  // Logs nothing after removal of the event handler
-
    -
    -
    event object properties
    -

    event object properties

    -

    JavaScript stores events as Event objects, which contain related data and functionality through various properties and methods. When an event occurs, the Event object can be passed to the event handler function as an argument, providing access to important details about the event. For example, in the function `eventHandlerFunction(event)`, the `event` object can be used to access information like the time the event occurred. In the code `console.log(event.timeStamp)`, the `.timeStamp` property logs the number of milliseconds that have passed since the document was loaded and the event was triggered. Other common properties include `.target`, which refers to the element that triggered the event, and `.type`, which provides the name of the event, such as "click" or "keypress." These properties give developers the ability to manage and respond to events more effectively by providing essential information about what happened, when, and where on the page it occurred.

    -

    Specifications

    - 
    -             
-  // 1. The 'type' property - logs the type of event
-  document.getElementById("example1").addEventListener("click", function(event) {
-    console.log("Event type:", event.type);
-  });
-  // Logs: "Event type: click"
-  
-  // 2. The 'target' property - logs the element that triggered the event
-  document.getElementById("example2").addEventListener("click", function(event) {
-    console.log("Event target:", event.target);
-  });
-  // Logs: The element that was clicked
-  
-  // 3. The 'currentTarget' property - logs the element to which the event handler is attached
-  document.getElementById("example3").addEventListener("click", function(event) {
-    console.log("Event current target:", event.currentTarget);
-  });
-  // Logs: The element to which the event listener is attached
-  
-  // 4. The 'clientX' and 'clientY' properties - logs the mouse coordinates relative to the viewport
-  document.getElementById("example4").addEventListener("click", function(event) {
-    console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
-  });
-  // Logs: "Mouse X: [X coordinate] Mouse Y: [Y coordinate]"
-  
-  // 5. The 'preventDefault' method - prevents default behavior (e.g., link navigation)
-  document.getElementById("example5").addEventListener("click", function(event) {
-    event.preventDefault();
-    console.log("Default action prevented!");
-  });
-  // Logs: "Default action prevented!" and prevents the default behavior (like navigating a link)
-  
-  // 6. The 'key' property - logs the value of the key pressed
-  document.addEventListener("keydown", function(event) {
-    console.log("Key pressed:", event.key);
-  });
-  // Logs: "Key pressed: [key value]"
-  
-  // 7. The 'code' property - logs the physical key code of the key pressed
-  document.addEventListener("keydown", function(event) {
-    console.log("Key code:", event.code);
-  });
-  // Logs: "Key code: [key code]"
-  
-  // 8. The 'shiftKey' property - logs whether the Shift key was pressed during the event
-  document.addEventListener("keydown", function(event) {
-    console.log("Shift key pressed?", event.shiftKey);
-  });
-  // Logs: "Shift key pressed? true" or "false" depending on whether Shift was held
-  
-  // 9. The 'timeStamp' property - logs the time (in milliseconds) the event occurred since the page loaded
-  document.getElementById("example6").addEventListener("click", function(event) {
-    console.log("Event time stamp:", event.timeStamp);
-  });
-  // Logs: "Event time stamp: [number of milliseconds since page load]"
-  
-  // 10. The 'bubbles' property - logs whether the event bubbles up through the DOM
-  document.getElementById("example7").addEventListener("click", function(event) {
-    console.log("Event bubbles?", event.bubbles);
-  });
-  // Logs: "Event bubbles? true" or "false" depending on whether the event bubbles
-
    -
    -
    event types
    -

    event types

    -

    Event types in JavaScript refer to the different kinds of interactions or occurrences that can trigger an event on a webpage. These events are categorized based on the type of user or system interaction. For example, mouse events like "click," "dblclick," and "mouseover" are triggered by actions involving the mouse, such as clicking or hovering over elements. Keyboard events, such as "keydown," "keyup," and "keypress," occur when a user presses keys on the keyboard. There are also form-related events like "submit" and "change," which happen when a user submits a form or modifies the value of an input field. Additionally, there are window events, like "load" and "resize," which are triggered by actions related to the browser window or document, such as when a page fully loads or when the window is resized. By listening for and responding to these event types, JavaScript enables dynamic interaction, allowing webpages to respond to user behavior and system changes in real time.

    -

    Specifications

    - 
    -             
-  // 1. Click event - triggered when an element is clicked
-  document.getElementById("example1").addEventListener("click", function() {
-    console.log("Click event triggered");
-  });
-  // Logs: "Click event triggered"
-  
-  // 2. Double-click event - triggered when an element is double-clicked
-  document.getElementById("example2").addEventListener("dblclick", function() {
-    console.log("Double-click event triggered");
-  });
-  // Logs: "Double-click event triggered"
-  
-  // 3. Mouseover event - triggered when the mouse pointer enters an element
-  document.getElementById("example3").addEventListener("mouseover", function() {
-    console.log("Mouseover event triggered");
-  });
-  // Logs: "Mouseover event triggered"
-  
-  // 4. Mouseout event - triggered when the mouse pointer leaves an element
-  document.getElementById("example4").addEventListener("mouseout", function() {
-    console.log("Mouseout event triggered");
-  });
-  // Logs: "Mouseout event triggered"
-  
-  // 5. Keydown event - triggered when a key is pressed
-  document.addEventListener("keydown", function(event) {
-    console.log("Keydown event triggered. Key pressed:", event.key);
-  });
-  // Logs: "Keydown event triggered. Key pressed: [key pressed]"
-  
-  // 6. Keyup event - triggered when a key is released
-  document.addEventListener("keyup", function(event) {
-    console.log("Keyup event triggered. Key released:", event.key);
-  });
-  // Logs: "Keyup event triggered. Key released: [key released]"
-  
-  // 7. Submit event - triggered when a form is submitted
-  document.getElementById("exampleForm").addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevents form submission
-    console.log("Submit event triggered");
-  });
-  // Logs: "Submit event triggered"
-  
-  // 8. Focus event - triggered when an element gains focus (e.g., an input field)
-  document.getElementById("example5").addEventListener("focus", function() {
-    console.log("Focus event triggered");
-  });
-  // Logs: "Focus event triggered"
-  
-  // 9. Blur event - triggered when an element loses focus (e.g., an input field)
-  document.getElementById("example5").addEventListener("blur", function() {
-    console.log("Blur event triggered");
-  });
-  // Logs: "Blur event triggered"
-  
-  // 10. Scroll event - triggered when the user scrolls the page
-  window.addEventListener("scroll", function() {
-    console.log("Scroll event triggered");
-  });
-  // Logs: "Scroll event triggered"
-
    -
    -
    mouse events
    -

    mouse events

    -

    Mouse events in JavaScript are a set of events that are triggered by user interactions with a mouse or similar pointing device. These events capture various actions, such as clicking, moving the mouse, or pressing and releasing mouse buttons, allowing developers to create interactive web pages. Common mouse events include "click," which fires when a user clicks on an element; "dblclick," which occurs when the user double-clicks; and "mouseover" and "mouseout," which are triggered when the mouse pointer enters or leaves an element, respectively. There are also events like "mousedown" and "mouseup," which happen when the mouse button is pressed or released. JavaScript provides access to the event object during these interactions, allowing developers to access useful information such as the position of the cursor, which button was clicked, and the target element that triggered the event. By handling mouse events, developers can create dynamic user interfaces that respond to user actions, such as changing styles, triggering animations, or navigating to different parts of a webpage.

    -

    Specifications

    - 
    -             
-  // 1. Click event - triggered when an element is clicked
-  document.getElementById("example1").addEventListener("click", function() {
-    console.log("Click event triggered");
-  });
-  // Logs: "Click event triggered"
-  
-  // 2. Double-click event - triggered when an element is double-clicked
-  document.getElementById("example2").addEventListener("dblclick", function() {
-    console.log("Double-click event triggered");
-  });
-  // Logs: "Double-click event triggered"
-  
-  // 3. Mouseover event - triggered when the mouse pointer enters an element
-  document.getElementById("example3").addEventListener("mouseover", function() {
-    console.log("Mouseover event triggered");
-  });
-  // Logs: "Mouseover event triggered"
-  
-  // 4. Mouseout event - triggered when the mouse pointer leaves an element
-  document.getElementById("example4").addEventListener("mouseout", function() {
-    console.log("Mouseout event triggered");
-  });
-  // Logs: "Mouseout event triggered"
-  
-  // 5. Mousedown event - triggered when a mouse button is pressed down on an element
-  document.getElementById("example5").addEventListener("mousedown", function() {
-    console.log("Mousedown event triggered");
-  });
-  // Logs: "Mousedown event triggered"
-  
-  // 6. Mouseup event - triggered when a mouse button is released on an element
-  document.getElementById("example6").addEventListener("mouseup", function() {
-    console.log("Mouseup event triggered");
-  });
-  // Logs: "Mouseup event triggered"
-  
-  // 7. Mousemove event - triggered when the mouse moves within an element
-  document.getElementById("example7").addEventListener("mousemove", function() {
-    console.log("Mousemove event triggered");
-  });
-  // Logs: "Mousemove event triggered"
-  
-  // 8. Contextmenu event - triggered when the right mouse button is clicked (opens context menu)
-  document.getElementById("example8").addEventListener("contextmenu", function(event) {
-    event.preventDefault(); // Prevents the default context menu from opening
-    console.log("Contextmenu event triggered");
-  });
-  // Logs: "Contextmenu event triggered" (and prevents the default right-click menu)
-  
-  // 9. Mouseenter event - triggered when the mouse enters an element, does not bubble
-  document.getElementById("example9").addEventListener("mouseenter", function() {
-    console.log("Mouseenter event triggered");
-  });
-  // Logs: "Mouseenter event triggered"
-  
-  // 10. Mouseleave event - triggered when the mouse leaves an element, does not bubble
-  document.getElementById("example10").addEventListener("mouseleave", function() {
-    console.log("Mouseleave event triggered");
-  });
-  // Logs: "Mouseleave event triggered"
-
    -
    -
    keyboard events
    -

    keyboard events

    -

    Keyboard events in JavaScript refer to the interactions that occur when a user presses keys on the keyboard. These events are important for capturing and responding to user input, allowing developers to create features such as form validation, keyboard shortcuts, or interactive games. There are three main types of keyboard events: "keydown," which is triggered when a key is pressed; "keyup," which fires when the key is released; and the less commonly used "keypress," which captures the character of the key pressed but is now considered somewhat outdated. When a keyboard event occurs, an event object is generated, which provides useful information such as the key that was pressed, through properties like `key` and `code`. The `key` property represents the actual value of the key, such as "a" or "Enter," while `code` gives the physical key's location on the keyboard. Keyboard events are essential in building responsive web applications where user input needs to be handled efficiently, such as for form submissions, navigation, or executing commands based on specific key combinations.

    -

    Specifications

    - 
    -             
-  // 1. Keydown event - triggered when a key is pressed down
-  document.addEventListener("keydown", function(event) {
-    console.log("Keydown event triggered. Key pressed:", event.key);
-  });
-  // Logs: "Keydown event triggered. Key pressed: [key pressed]"
-  
-  // 2. Keyup event - triggered when a key is released
-  document.addEventListener("keyup", function(event) {
-    console.log("Keyup event triggered. Key released:", event.key);
-  });
-  // Logs: "Keyup event triggered. Key released: [key released]"
-  
-  // 3. Keypress event (deprecated) - triggered when a key is pressed (deprecated but still works for some older use cases)
-  document.addEventListener("keypress", function(event) {
-    console.log("Keypress event triggered. Key:", event.key);
-  });
-  // Logs: "Keypress event triggered. Key: [key pressed]"
-  
-  // 4. key property - logs the value of the key pressed (e.g., 'a', 'Enter')
-  document.addEventListener("keydown", function(event) {
-    console.log("Key pressed:", event.key);
-  });
-  // Logs: "Key pressed: [key value]"
-  
-  // 5. code property - logs the physical key code (e.g., 'KeyA', 'Space')
-  document.addEventListener("keydown", function(event) {
-    console.log("Key code:", event.code);
-  });
-  // Logs: "Key code: [key code]"
-  
-  // 6. shiftKey property - checks if the Shift key was pressed during the key event
-  document.addEventListener("keydown", function(event) {
-    if (event.shiftKey) {
-      console.log("Shift key was pressed along with", event.key);
-    }
-  });
-  // Logs: "Shift key was pressed along with [key value]" (only when Shift is held)
-  
-  // 7. ctrlKey property - checks if the Control key was pressed during the key event
-  document.addEventListener("keydown", function(event) {
-    if (event.ctrlKey) {
-      console.log("Control key was pressed along with", event.key);
-    }
-  });
-  // Logs: "Control key was pressed along with [key value]" (only when Control is held)
-  
-  // 8. altKey property - checks if the Alt key was pressed during the key event
-  document.addEventListener("keydown", function(event) {
-    if (event.altKey) {
-      console.log("Alt key was pressed along with", event.key);
-    }
-  });
-  // Logs: "Alt key was pressed along with [key value]" (only when Alt is held)
-  
-  // 9. metaKey property - checks if the Meta key (Command key on Mac, Windows key on Windows) was pressed during the key event
-  document.addEventListener("keydown", function(event) {
-    if (event.metaKey) {
-      console.log("Meta key was pressed along with", event.key);
-    }
-  });
-  // Logs: "Meta key was pressed along with [key value]" (only when Meta/Command/Windows key is held)
-  
-  // 10. preventDefault method - prevents the default action associated with a key (e.g., preventing form submission with Enter key)
-  document.addEventListener("keydown", function(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      console.log("Default action (form submission) prevented");
-    }
-  });
-  // Logs: "Default action (form submission) prevented" (when Enter is pressed)
-
    -
    -
    HTML Forms -
    [06]
    -
    html forms
    -

    html forms

    -

    HTML Forms are essential components of web pages that allow users to input and submit data to a server for processing. They are created using the `<form>` tag, which can contain various types of input elements such as text fields, checkboxes, radio buttons, dropdown menus, and buttons. Each input element is typically associated with a `<label>` to describe its purpose, enhancing accessibility and usability. The `<form>` tag includes attributes like `action`, which specifies the URL where the form data should be sent, and `method`, which determines the HTTP method (such as GET or POST) used to transmit the data. When a user fills out the form and submits it, the browser sends the collected information to the specified server endpoint, where it can be processed, stored, or used to trigger other actions. HTML Forms are fundamental for tasks like user registration, search queries, feedback collection, and online transactions, enabling interactive and dynamic user experiences on websites.

    -

    Specifications

    - 
    -             
-  <!-- 1. Login Form -->
-  <form action="/login" method="POST">
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" required>
-    
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" required>
-    
-    <button type="submit">Login</button>
-  </form>
-  
-  <!-- 2. Registration Form -->
-  <form action="/register" method="POST">
-    <label for="fullname">Full Name:</label>
-    <input type="text" id="fullname" name="fullname" required>
-    
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-    
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" required>
-    
-    <button type="submit">Register</button>
-  </form>
-  
-  <!-- 3. Contact Form -->
-  <form action="/contact" method="POST">
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="name" required>
-    
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-    
-    <label for="message">Message:</label>
-    <textarea id="message" name="message" rows="5" required></textarea>
-    
-    <button type="submit">Send</button>
-  </form>
-  
-  <!-- 4. Search Form -->
-  <form action="/search" method="GET">
-    <label for="query">Search:</label>
-    <input type="text" id="query" name="q" placeholder="Enter search term">
-    
-    <button type="submit">Search</button>
-  </form>
-  
-  <!-- 5. Feedback Form -->
-  <form action="/feedback" method="POST">
-    <label for="email">Your Email:</label>
-    <input type="email" id="email" name="email">
-    
-    <label for="rating">Rating:</label>
-    <select id="rating" name="rating">
-      <option value="5">Excellent</option>
-      <option value="4">Good</option>
-      <option value="3">Average</option>
-      <option value="2">Poor</option>
-      <option value="1">Very Poor</option>
-    </select>
-    
-    <label for="comments">Comments:</label>
-    <textarea id="comments" name="comments" rows="4"></textarea>
-    
-    <button type="submit">Submit Feedback</button>
-  </form>
-  
-  <!-- 6. Subscription Form -->
-  <form action="/subscribe" method="POST">
-    <label for="email">Subscribe to our newsletter:</label>
-    <input type="email" id="email" name="email" placeholder="Your email address" required>
-    
-    <button type="submit">Subscribe</button>
-  </form>
-  
-  <!-- 7. Order Form -->
-  <form action="/order" method="POST">
-    <label for="product">Product:</label>
-    <select id="product" name="product">
-      <option value="book">Book</option>
-      <option value="pen">Pen</option>
-      <option value="notebook">Notebook</option>
-    </select>
-    
-    <label for="quantity">Quantity:</label>
-    <input type="number" id="quantity" name="quantity" min="1" value="1" required>
-    
-    <label for="address">Shipping Address:</label>
-    <textarea id="address" name="address" rows="3" required></textarea>
-    
-    <button type="submit">Place Order</button>
-  </form>
-  
-  <!-- 8. File Upload Form -->
-  <form action="/upload" method="POST" enctype="multipart/form-data">
-    <label for="file">Choose a file to upload:</label>
-    <input type="file" id="file" name="file" required>
-    
-    <button type="submit">Upload</button>
-  </form>
-  
-  <!-- 9. Survey Form -->
-  <form action="/survey" method="POST">
-    <p>How did you hear about us?</p>
-    <label><input type="radio" name="source" value="social_media" required> Social Media</label>
-    <label><input type="radio" name="source" value="friend"> Friend</label>
-    <label><input type="radio" name="source" value="advertisement"> Advertisement</label>
-    
-    <p>Which features do you use? (Select all that apply)</p>
-    <label><input type="checkbox" name="features" value="feature1"> Feature 1</label>
-    <label><input type="checkbox" name="features" value="feature2"> Feature 2</label>
-    <label><input type="checkbox" name="features" value="feature3"> Feature 3</label>
-    
-    <button type="submit">Submit Survey</button>
-  </form>
-  
-  <!-- 10. Appointment Booking Form -->
-  <form action="/book-appointment" method="POST">
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="name" required>
-    
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-    
-    <label for="date">Preferred Date:</label>
-    <input type="date" id="date" name="date" required>
-    
-    <label for="time">Preferred Time:</label>
-    <input type="time" id="time" name="time" required>
-    
-    <button type="submit">Book Appointment</button>
-  </form>
-
    -
    -
    form validation
    -

    form validation

    -

    HTML Form validation is a crucial process that ensures the data submitted by users meets the required criteria before it is sent to the server for processing. This validation can be performed both on the client side and the server side to enhance the security and reliability of web applications. On the client side, HTML provides built-in validation attributes such as `required`, which ensures that a field is not left empty, `type`, which specifies the kind of input expected (e.g., `email`, `number`), and `pattern`, which allows developers to define a regular expression that the input must match. For example, using `<input type="email" required>` ensures that the user enters a valid email address and does not leave the field blank. Additionally, attributes like `min`, `max`, and `maxlength` can restrict the range and length of input values. Beyond these HTML attributes, developers can implement custom validation using JavaScript to handle more complex validation scenarios, provide real-time feedback, and enhance the user experience. Proper form validation not only helps in maintaining data integrity but also prevents malicious inputs, thereby safeguarding both the users and the application from potential security threats.

    -

    Specifications

    - 
    -             
-  <!-- 1. Required Field Validation -->
-  <form action="/submit" method="POST">
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 2. Email Format Validation -->
-  <form action="/submit" method="POST">
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 3. Number Range Validation -->
-  <form action="/submit" method="POST">
-    <label for="age">Age (18-99):</label>
-    <input type="number" id="age" name="age" min="18" max="99" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 4. Pattern (Regex) Validation -->
-  <form action="/submit" method="POST">
-    <label for="zipcode">Zip Code:</label>
-    <input type="text" id="zipcode" name="zipcode" pattern="^\d{5}(-\d{4})?$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 5. Minimum and Maximum Length Validation -->
-  <form action="/submit" method="POST">
-    <label for="password">Password (6-12 characters):</label>
-    <input type="password" id="password" name="password" minlength="6" maxlength="12" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 6. Select Dropdown with Required Validation -->
-  <form action="/submit" method="POST">
-    <label for="country">Country:</label>
-    <select id="country" name="country" required>
-      <option value="" disabled selected>Select your country</option>
-      <option value="us">United States</option>
-      <option value="ca">Canada</option>
-      <option value="uk">United Kingdom</option>
-    </select>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 7. Radio Buttons with Required Validation -->
-  <form action="/submit" method="POST">
-    <p>Gender:</p>
-    <label><input type="radio" name="gender" value="male" required> Male</label>
-    <label><input type="radio" name="gender" value="female"> Female</label>
-    <label><input type="radio" name="gender" value="other"> Other</label>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 8. Checkbox with Required Validation -->
-  <form action="/submit" method="POST">
-    <label><input type="checkbox" name="terms" required> I agree to the Terms and Conditions</label>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 9. Date Input with Min and Max Validation -->
-  <form action="/submit" method="POST">
-    <label for="birthday">Birthday:</label>
-    <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2023-12-31" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 10. URL Validation -->
-  <form action="/submit" method="POST">
-    <label for="website">Website:</label>
-    <input type="url" id="website" name="website" placeholder="https://example.com" required>
-    <button type="submit">Submit</button>
-  </form>
-
    -
    -
    regex
    -

    regex

    -

    Regular expressions, commonly known as regex, play a significant role in enhancing HTML forms by providing advanced validation capabilities. Within HTML forms, regex can be utilized through the `pattern` attribute on input elements to define specific rules that user input must match before the form can be successfully submitted. For instance, a regex pattern can ensure that an email address adheres to a standard format or that a password includes a mix of letters, numbers, and special characters. By leveraging regex in this manner, developers can enforce strict input criteria directly on the client side, reducing the likelihood of invalid or malicious data being submitted. This not only improves the overall user experience by providing immediate feedback but also enhances the security and integrity of the data collected through the forms. Additionally, while HTML's built-in validation attributes handle many common scenarios, regex offers the flexibility to implement more complex and customized validation rules, making it an invaluable tool for creating robust and reliable web forms.

    -

    Specifications

    - 
    -             
-  <!-- 1. Email Validation -->
-  <form action="/submit" method="POST">
-    <label for="email">Email:</label>
-    <input type="email" id="email" name="email" pattern="^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 2. Password Validation (Minimum 8 characters, at least one letter and one number) -->
-  <form action="/submit" method="POST">
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 3. Username Validation (Alphanumeric, 5-15 characters) -->
-  <form action="/submit" method="POST">
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" pattern="^[a-zA-Z0-9]{5,15}$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 4. Phone Number Validation (Format: 123-456-7890) -->
-  <form action="/submit" method="POST">
-    <label for="phone">Phone Number:</label>
-    <input type="tel" id="phone" name="phone" pattern="^\d{3}-\d{3}-\d{4}$" placeholder="123-456-7890" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 5. ZIP Code Validation (5 digits or 5+4 format) -->
-  <form action="/submit" method="POST">
-    <label for="zipcode">ZIP Code:</label>
-    <input type="text" id="zipcode" name="zipcode" pattern="^\d{5}(-\d{4})?$" placeholder="12345 or 12345-6789" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 6. URL Validation -->
-  <form action="/submit" method="POST">
-    <label for="website">Website:</label>
-    <input type="url" id="website" name="website" pattern="^(https?:\/\/)?([\w\-])+\.{1}([a-zA-Z]{2,63})([\/\w\-]*)*\/?$" placeholder="https://example.com" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 7. Credit Card Number Validation (Visa, MasterCard, etc.) -->
-  <form action="/submit" method="POST">
-    <label for="ccnum">Credit Card Number:</label>
-    <input type="text" id="ccnum" name="ccnum" pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14})$" placeholder="Visa or MasterCard" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 8. Date Validation (YYYY-MM-DD) -->
-  <form action="/submit" method="POST">
-    <label for="date">Date:</label>
-    <input type="date" id="date" name="date" pattern="^\d{4}-\d{2}-\d{2}$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 9. Time Validation (HH:MM, 24-hour format) -->
-  <form action="/submit" method="POST">
-    <label for="time">Time:</label>
-    <input type="time" id="time" name="time" pattern="^(?:[01]\d|2[0-3]):[0-5]\d$" required>
-    <button type="submit">Submit</button>
-  </form>
-  
-  <!-- 10. Custom Alphanumeric Validation (Letters, numbers, underscores, 3-10 characters) -->
-  <form action="/submit" method="POST">
-    <label for="custom">Custom Field:</label>
-    <input type="text" id="custom" name="custom" pattern="^[a-zA-Z0-9_]{3,10}$" required>
-    <button type="submit">Submit</button>
-  </form>
-
    -
    -
    html forms
    -

    html forms

    -

    DOM (Document Object Model) events in JavaScript refer to the actions or occurrences that happen in the web browser, which the browser can respond to. These events are usually triggered by user interactions such as clicking a button, typing in a text field, or moving the mouse. JavaScript can listen for these events and execute specific functions, called event handlers, in response. Common DOM events include "click," "mouseover," "keydown," and "submit." By adding event listeners to HTML elements, developers can make their web pages more interactive, allowing the page to respond dynamically to user input or system-generated actions, like page loading. JavaScript's event model provides a powerful way to control the flow of interaction between the user and the web application.

    -

    Specifications

    - 
    -             
-  // Example 1: Redeclaration in the same block
-  let x = 10;
-  // let x = 20; // SyntaxError: Identifier 'x' has already been declared
-
    -
    -
    Comments -
    [02]
    -
    - single line comments -
    -

    single line comments

    -

    In JavaScript, single-line comments are used to add brief explanations or notes within the code. They are created using two forward slashes //. Everything following the // on that line will be considered a comment and ignored by the JavaScript engine during execution.

    -

    Specifications

    - 
    -             
-  // This is a single-line comment
-  
-  // Declare and initialize a variable to store age
-  let age = 25;
-             
-  // Check if the score is greater than or equal to 80
-  let score = 85;
-  if (score >= 80) {
-    console.log('Great job!');
-  } else {
-    console.log('Keep trying!');
-  }    
-  
-  // Loop through numbers from 1 to 5
-  for (let i = 1; i <= 5; i++) {
-    console.log(i); // Output the current number
-  }
-   
-  // Function to add two numbers
-  function add(a, b) {
-    return a + b; // Return the sum
-  }
-  console.log(add(2, 3)); // Output: 5
-
    -
    -
    - multi line comments -
    -

    multi line comments

    -

    Multi-line comments in JavaScript are used to comment out blocks of code or add longer explanations within the code. They start with /* and end with */. Everything between these delimiters is considered a comment and ignored by the JavaScript engine during execution.

    -

    Specifications

    - 
    -             
-  /*
-    This is a multi-line comment.
-    It can span multiple lines.
-  */
-  
-  /*
-    Declare and initialize a variable to store the user's age.
-    This value will be used to determine access permissions.
-  */
-  let age = 30;
-  
-  /*
-    Function to greet the user.
-    It prints a welcome message to the console.
-  */
-  function greetUser(name) {
-    console.log('Hello, ' + name + '!');
-  }
-  
-  /*
-    Loop through an array of numbers.
-    Print each number to the console.
-  */
-  let numbers = [1, 2, 3, 4, 5];
-  for (let i = 0; i numbers.length; i++) {
-    console.log(numbers[i]); // Print the current number
-  }
-
    -
    -
    Data Types -
    [01]
    -
    Data Types
    -

    7 primitive data types & objects

    -

    JavaScript has a variety of data types that can be categorized into primitive types and objects. Primitive types are immutable and compared by value, while objects are mutable and compared by reference.

    -
    -
      -
    1. String: Represents text and is enclosed in quotes.
      2. -
    2. Number: Represents both integers and floating-point numbers.
      3. -
    3. Boolean: Represents true or false values.
      4. -
    4. Boolean: Represents true or false values.
      5. -
    5. Null: Represents the intentional absence of any object value.
      6. -
    6. Symbol: Represents a unique identifier created using the Symbol function.
      7. -
    7. BigInt: Represents integers larger than the maximum safe integer limit for Number.
      8. -
    8. Object: A complex data type that allows you to store collections of data in key-value pairs.
      9. -
    -

    Specifications

    - 
    -             
-  // String
-  let greeting = "Hello, world!";
-  let name = 'Alice';
-  let phrase = `JavaScript is fun!`; // Template literals allow for embedded expressions
-  
-  // Number
-  let age = 25;
-  let pi = 3.14159;
-  let negativeNumber = -42; // Negative number example
-  
-  // Boolean
-  let isStudent = true;
-  let hasGraduated = false;
-  let isLoggedIn = true;
-  
-  // Undefined
-  let x;
-  let y = undefined;
-  let z; // Undefined by default when not assigned
-  
-  // Null
-  let emptyValue = null;
-  let noValue = null;
-  let response = null; // Commonly used to indicate no response or empty result
-  
-  // Symbol
-  let sym1 = Symbol('unique');
-  let sym2 = Symbol('unique');
-  let sym3 = Symbol(); // Symbol without a description
-  
-  // BigInt
-  let bigInt1 = 1234567890123456789012345678901234567890n;
-  let bigInt2 = BigInt(1234567890123456789012345678901234567890);
-  let bigInt3 = 9007199254740991n; // Maximum safe integer + 1
-  
-  // Object
-  let person = {
-    name: "Alice",
-    age: 25
-  };
-  let car = {
-    brand: "Toyota",
-    model: "Corolla"
-  };
-  let book = {
-    title: "JavaScript: The Good Parts",
-    author: "Douglas Crockford"
-  };
-
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - 
    -
-
-
-
-        
-
-
-
-
-
-
-
-
-
-              .----.
-  .---------. | == |
-  |.-"""""-.| |----|
-  || Hello || | == |
-  || World || |----|
-  |'-.....-'| |::::|
-  `"")---(""` |___.|
- /:::::::::::\" _  "
-/:::=======:::\`\`\
-`"""""""""""""`  '-'
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
    -
    -
    - 
    -
-
-
-
-
-              .----.
-  .---------. | == |
-  |.-"""""-.| |----|
-  || Hello || | == |
-  || World || |----|
-  |'-.....-'| |::::|
-  `"")---(""` |___.|
- /:::::::::::\" _  "
-/:::=======:::\`\`\
-`"""""""""""""`  '-'
-
-
-
-
-
-
-
    - +
    +
    -
    -
    -
    -
    -
    -
    -
    @@ -11408,6 +88,6 @@

    Specifications

    - + \ No newline at end of file diff --git a/articles.js b/articles.js new file mode 100644 index 0000000..31c7b71 --- /dev/null +++ b/articles.js @@ -0,0 +1,661 @@ +document.addEventListener("DOMContentLoaded", function () { + // ------------------------------ + // Existing Functionalities + // ------------------------------ + + // Smooth scroll functionality + document.querySelectorAll(".alphsort a").forEach((link) => { + link.addEventListener("click", function (event) { + event.preventDefault(); + const targetId = this.getAttribute("href").substring(1); + const targetElement = document.getElementById(targetId); + if (targetElement) { + targetElement.scrollIntoView({ behavior: "smooth" }); + } + }); + }); + + // Toggle detail functionality + function toggleDetail(detailId, event) { + var detailRow = document.getElementById(detailId); + var isExpanded = detailRow.style.display === "table-row"; + detailRow.style.display = isExpanded ? "none" : "table-row"; + + if (isExpanded) { + event.target.classList.remove("expanded"); + } else { + event.target.classList.add("expanded"); + } + } + + // Add click event listeners to all clickable elements + document.querySelectorAll(".clickable").forEach((element) => { + element.addEventListener("click", function (event) { + const detailId = element.getAttribute("data-detail-id"); // Get the target id from data attribute + toggleDetail(detailId, event); // Pass the id to the toggle function + }); + }); + + // Dark mode functionality + const darkModeButton = document.getElementById("darkModeButton"); + const leftHalf = darkModeButton.querySelector(".half.left"); + const rightHalf = darkModeButton.querySelector(".half.right"); + + // Function to apply the mode by setting background colors + function applyMode(mode) { + if (mode === "dark") { + document.documentElement.classList.add("dark-mode"); + document.body.classList.add("dark-mode"); + leftHalf.style.backgroundColor = "var(--color-eight)"; // Dark background + rightHalf.style.backgroundColor = "transparent"; // Light background + } else { + document.documentElement.classList.remove("dark-mode"); + document.body.classList.remove("dark-mode"); + leftHalf.style.backgroundColor = "transparent"; // Light background + rightHalf.style.backgroundColor = "var(--color-eight)"; // Dark background + } + } + + // Initialize mode from localStorage or default to light + const currentMode = localStorage.getItem("mode") || "light"; + applyMode(currentMode); + + // Toggle mode and update background colors on button click + darkModeButton.addEventListener("click", function () { + const isDarkMode = document.body.classList.toggle("dark-mode"); + document.documentElement.classList.toggle("dark-mode"); + + if (isDarkMode) { + applyMode("dark"); + localStorage.setItem("mode", "dark"); + } else { + applyMode("light"); + localStorage.setItem("mode", "light"); + } + }); + + // Initial GSAP animation for ".bar" elements + gsap.to(".bar", 1.3, { + delay: 0, + height: 0, + stagger: { + amount: 0.5, + }, + ease: "power4.inOut", + onComplete: function () { + document.querySelector(".overlay").style.display = "none"; + }, + }); + + // Register GSAP Plugins + gsap.registerPlugin(TextPlugin); + + // Select the burger button and menu bars + const burgerButton = document.querySelector(".burger"); + const menuBars = document.querySelectorAll(".menu-bar"); + const menuOverlay = document.querySelector(".menu-overlay"); + const menuLines = document.querySelectorAll(".menu-line"); + const menuTitleTwos = document.querySelectorAll(".menu-title.two"); + const menuTitleOne = document.querySelectorAll(".menu-title.one"); + + let menuOpen = false; // Track the state of the menu + + // Toggle menu on burger button click + burgerButton.addEventListener("click", () => { + if (!menuOpen) { + menuOpen = true; + // Animate menu bars dropping down + gsap.to(menuBars, { + duration: 0.6, + x: "0%", + ease: "power4.out", + }); + gsap.to(menuOverlay, { + duration: 0.2, + backgroundColor: "var(--color-ten)", + }); + gsap.to(menuOverlay, { + duration: 0.5, + backdropFilter: "blur(3px)", + }); + gsap.to(menuLines, { + duration: 0.6, + delay: 0.1, + x: "0%", + stagger: 0.2, + ease: "power4.out", + }); + // ... (rest of your code for animating text) + } else { + menuOpen = false; + // Animate menu bars moving up + gsap.to(menuBars, { + duration: 0.7, + x: "100%", + ease: "power4.in", + }); + gsap.to(menuOverlay, { + duration: 0.2, + delay: 0.6, + backgroundColor: "transparent", + }); + gsap.to(menuOverlay, { + duration: 0.3, + backdropFilter: "blur(0px)", + delay: 0.6, + }); + gsap.to(menuLines, { + duration: 0.6, + delay: 0.1, + x: "130%", + stagger: 0.2, + ease: "power4.out", + }); + } + }); + + // Rotate the burger button on click + burgerButton.addEventListener("click", () => { + burgerButton.classList.toggle("rotate"); + }); + + // **Simplified Scramble Text on Hover Implementation** + + // Select the target element containing "MATHIEU" + const mathieuElement = document.querySelector(".center-text b"); + + // Original text + const originalText = mathieuElement.textContent; + + // Function to scramble to random text + function scrambleText() { + gsap.to(mathieuElement, { + duration: 1.2, + text: { + value: generateRandomText(originalText.length), + scramble: 20, // Adjust the scramble amount as needed + chars: "$#?&!%≠¿§¥ß¡€£389206XYKZENHAJ", + }, + ease: "none", + onComplete: unscrambleText, // After scrambling, unscramble + }); + } + + // Function to unscramble back to original text + function unscrambleText() { + gsap.to(mathieuElement, { + duration: 1.2, + text: { + value: originalText, + scramble: 20, + chars: "$#?&!%≠¿§¥ß¡€£389206XYKZENHAJ", + }, + ease: "none", + }); + } + + // Utility function to generate random text of a given length + function generateRandomText(length) { + const chars = "$#?&!%≠¿§¥ß¡€£389206XYKZENHAJ"; + let result = ""; + for (let i = 0; i < length; i++) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; + } + + // Add event listener for mouseenter to trigger scramble + const linkElement = document.querySelector(".center-text"); + linkElement.addEventListener("mouseenter", scrambleText); + + // **End of Scramble Text Implementation** + + // ------------------------------ + // Integrated Noise Background + // ------------------------------ + + const noise = () => { + let canvas, ctx; + + let wWidth, wHeight; + + let noiseData = []; + let frame = 0; + + let loopTimeout; + + // Create Noise + const createNoise = () => { + const idata = ctx.createImageData(wWidth, wHeight); + const buffer32 = new Uint32Array(idata.data.buffer); + const len = buffer32.length; + + for (let i = 0; i < len; i++) { + if (Math.random() < 0.5) { + buffer32[i] = 0xff000000; + } else { + buffer32[i] = 0xffffffff; // Optional: Set to white for contrast + } + } + + noiseData.push(idata); + }; + + // Play Noise + const paintNoise = () => { + if (frame === 9) { + frame = 0; + } else { + frame++; + } + + ctx.putImageData(noiseData[frame], 0, 0); + }; + + // Loop + const loop = () => { + paintNoise(frame); + + loopTimeout = window.setTimeout(() => { + window.requestAnimationFrame(loop); + }, 1000 / 25); + }; + + // Setup + const setup = () => { + wWidth = window.innerWidth; + wHeight = window.innerHeight; + + canvas.width = wWidth; + canvas.height = wHeight; + + noiseData = []; // Clear previous noise data + + for (let i = 0; i < 10; i++) { + createNoise(); + } + + loop(); + }; + + // Reset + let resizeThrottle; + const reset = () => { + window.addEventListener( + "resize", + () => { + window.clearTimeout(resizeThrottle); + + resizeThrottle = window.setTimeout(() => { + window.clearTimeout(loopTimeout); + setup(); + }, 200); + }, + false + ); + }; + + // Init + const init = () => { + canvas = document.getElementById("noise"); + if (!canvas) { + console.error( + 'Canvas with id "noise" not found. Please add a to your HTML.' + ); + return; + } + ctx = canvas.getContext("2d"); + + setup(); + reset(); + }; + + // Start the noise effect + init(); + }; + + // Initialize the noise background + noise(); + + // ------------------------------ + // End of Integrated Noise Background + // ------------------------------ + + // ------------------------------ + // New Functionality: Update Left Title and Number on Scroll with Scramble Text Animation + // ------------------------------ + + // Select the elements to update + const leftJavascriptDiv = document.querySelector(".left-javascript"); + const leftNumberDiv = document.querySelector(".left-number"); + + // Select all table headings with the class 'tableletters' + const tableHeadings = document.querySelectorAll(".tableletters"); + + // Variables to keep track of the current heading + let lastHeadingId = null; + + // Function to update the left title and number with scramble text effect + const updateLeftTitle = () => { + let currentHeading = null; + + // Loop through each heading to find the one currently in view + tableHeadings.forEach((heading) => { + const rect = heading.getBoundingClientRect(); + if (rect.top <= 76) { + currentHeading = heading; + } + }); + + // Update the content if a new heading is found + if (currentHeading && currentHeading.id !== lastHeadingId) { + lastHeadingId = currentHeading.id; + + // Update the left-javascript div with scramble text effect + gsap.to(leftJavascriptDiv, { + duration: 0.8, + text: { + value: currentHeading.textContent.toUpperCase(), + scramble: 5, // Adjust the scramble amount as needed + chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789", + }, + ease: "none", + }); + + // Update the left-number div with scramble text effect + const headingNumber = currentHeading.getAttribute("data-number"); + gsap.to(leftNumberDiv, { + duration: 0.8, + text: { + value: "[" + headingNumber + "]", + scramble: 5, // Adjust the scramble amount as needed + chars: "0123456789", + }, + ease: "none", + }); + } + }; + + // Add an event listener for the scroll event + window.addEventListener("scroll", updateLeftTitle); + + // Initial call to set the correct title and number on page load + updateLeftTitle(); + + // ------------------------------ + // End of New Functionality + // ------------------------------ + + // ------------------------------ + // ASCII Cube Animation + // ------------------------------ + + // Get the canvas and context + const cubeCanvas = document.getElementById("cubeCanvas"); + if (cubeCanvas) { + const cubeCtx = cubeCanvas.getContext("2d"); + + // Resize the canvas to match the size of the container and adjust for device pixel ratio + function resizeCubeCanvas() { + const pixelRatio = window.devicePixelRatio || 1; + cubeCanvas.width = cubeCanvas.clientWidth * pixelRatio; + cubeCanvas.height = cubeCanvas.clientHeight * pixelRatio; + cubeCtx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); // Reset the transform + } + + window.addEventListener("resize", resizeCubeCanvas); + resizeCubeCanvas(); // Initial resize + + // Variables for the cube animation + const density = " -=+xyzd#"; + + const l = 0.6; + const box = { + vertices: [ + vec3(l, l, l), + vec3(-l, l, l), + vec3(-l, -l, l), + vec3(l, -l, l), + vec3(l, l, -l), + vec3(-l, l, -l), + vec3(-l, -l, -l), + vec3(l, -l, -l), + ], + edges: [ + [0, 1], + [1, 2], + [2, 3], + [3, 0], + [4, 5], + [5, 6], + [6, 7], + [7, 4], + [0, 4], + [1, 5], + [2, 6], + [3, 7], + ], + }; + + const boxProj = []; + + function animate(time) { + const t = time * 0.006; + const width = cubeCanvas.clientWidth; // Use clientWidth for consistent scaling + const height = cubeCanvas.clientHeight; + const m = Math.min(width, height); + const aspect = width / height; + + const rot = { + x: t * 0.11, + y: t * 0.13, + z: -t * 0.15, + }; + + // Adjust d to zoom out the cube slightly + const d = 3.0; // Adjusted from 2 to 1.8 + const zOffs = map(Math.sin(t * 0.12), -1, 1, -2.5, -6); + + for (let i = 0; i < box.vertices.length; i++) { + const v = v3_copy(box.vertices[i]); + let vt = v3_rotX(v, rot.x); + vt = v3_rotY(vt, rot.y); + vt = v3_rotZ(vt, rot.z); + boxProj[i] = v2_mulN({ x: vt.x, y: vt.y }, d / (vt.z - zOffs)); + } + + // Clear the canvas + cubeCtx.clearRect(0, 0, cubeCanvas.width, cubeCanvas.height); + + // Set font for ASCII characters + cubeCtx.font = "12px monospace"; // Increased font size for sharpness + cubeCtx.textAlign = "left"; + cubeCtx.textBaseline = "top"; + + const charWidth = 8; // Adjusted character width + const charHeight = 14; // Adjusted character height + + const cols = Math.floor(width / charWidth); + const rows = Math.floor(height / charHeight); + + for (let x = 0; x < cols; x++) { + for (let y = 0; y < rows; y++) { + const coord = { x: x, y: y }; + const st = { + x: ((2.0 * (coord.x - cols / 2 + 0.5)) / m) * aspect, + y: (2.0 * (coord.y - rows / 2 + 0.5)) / m, + }; + + let d = 1e10; + const n = box.edges.length; + const thickness = 0.01; + const expMul = -50; + for (let i = 0; i < n; i++) { + const a = boxProj[box.edges[i][0]]; + const b = boxProj[box.edges[i][1]]; + d = Math.min(d, sdSegment(st, a, b, thickness)); + } + + const idx = Math.floor( + Math.exp(expMul * Math.abs(d)) * density.length + ); + + if (idx === 0) { + // Do not draw anything for background + continue; + } else { + const char = density[idx]; + cubeCtx.fillStyle = "royalblue"; + cubeCtx.fillText(char, x * charWidth, y * charHeight); + } + } + } + + requestAnimationFrame(animate); + } + + requestAnimationFrame(animate); + + // Utility functions + function vec3(x, y, z) { + return { x: x, y: y, z: z }; + } + + function v3_copy(v) { + return { x: v.x, y: v.y, z: v.z }; + } + + function v3_rotX(v, angle) { + const sinAngle = Math.sin(angle); + const cosAngle = Math.cos(angle); + return { + x: v.x, + y: v.y * cosAngle - v.z * sinAngle, + z: v.y * sinAngle + v.z * cosAngle, + }; + } + + function v3_rotY(v, angle) { + const sinAngle = Math.sin(angle); + const cosAngle = Math.cos(angle); + return { + x: v.x * cosAngle + v.z * sinAngle, + y: v.y, + z: -v.x * sinAngle + v.z * cosAngle, + }; + } + + function v3_rotZ(v, angle) { + const sinAngle = Math.sin(angle); + const cosAngle = Math.cos(angle); + return { + x: v.x * cosAngle - v.y * sinAngle, + y: v.x * sinAngle + v.y * cosAngle, + z: v.z, + }; + } + + function v2_mulN(v, n) { + return { x: v.x * n, y: v.y * n }; + } + + function map(value, inMin, inMax, outMin, outMax) { + return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; + } + + function sdSegment(p, a, b, thickness) { + const pa = { x: p.x - a.x, y: p.y - a.y }; + const ba = { x: b.x - a.x, y: b.y - a.y }; + const h = Math.max(0, Math.min(1, dot(pa, ba) / dot(ba, ba))); + const d = { + x: pa.x - ba.x * h, + y: pa.y - ba.y * h, + }; + return length(d) - thickness; + } + + function dot(a, b) { + return a.x * b.x + a.y * b.y; + } + + function length(v) { + return Math.sqrt(v.x * v.x + v.y * v.y); + } + } else { + console.error( + 'Canvas with id "cubeCanvas" not found. Please add a inside your .left-image div.' + ); + } + + // ------------------------------ + // End of ASCII Cube Animation + // ------------------------------ + + // ------------------------------ + // Mouse Circle Follow Effect + // ------------------------------ + + let prevX = null; + let prevY = null; + + document.addEventListener("mousemove", function (e) { + const square = document.getElementById("mouse-square"); + if (square) { + // Update the position of the square + square.style.left = e.pageX + "px"; + square.style.top = e.pageY + "px"; + + // Calculate angle of movement for rotation + if (prevX !== null && prevY !== null) { + const deltaX = e.pageX - prevX; + const deltaY = e.pageY - prevY; + const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI); + square.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`; + } + + // Update previous mouse positions + prevX = e.pageX; + prevY = e.pageY; + } + }); + + // ------------------------------ + // End of Mouse Circle Follow Effect + // ------------------------------ + + // ------------------------------ + // Marquee Effect for the .update Element + // ------------------------------ + + // Select the .update element + const marqueeContainer = document.querySelector(".marquee-container"); + const marquee = document.querySelector(".marquee"); + + if (marquee) { + // Add event listeners for mouse and touch interactions + marquee.addEventListener("mousedown", () => { + marquee.style.animationPlayState = "paused"; + marquee.style.filter = "none"; + }); + + marquee.addEventListener("mouseup", () => { + marquee.style.animationPlayState = "running"; + marquee.style.filter = "blur(2px)"; + }); + + // For touch devices + marquee.addEventListener("touchstart", () => { + marquee.style.animationPlayState = "paused"; + marquee.style.filter = "none"; + }); + + marquee.addEventListener("touchend", () => { + marquee.style.animationPlayState = "running"; + marquee.style.filter = "blur(2px)"; + }); + } + + // ------------------------------ + // End of Marquee Effect + // ------------------------------ +}); diff --git a/index.html b/index.html index 877d526..72901db 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,9 @@ + + + diff --git a/main.css b/main.css index 9377909..1d4548d 100644 --- a/main.css +++ b/main.css @@ -67,6 +67,12 @@ body.dark-mode { z-index: -2; } + .anton-regular { + font-family: "Anton", sans-serif; + font-weight: 400; + font-style: normal; + } + body.no-scroll { overflow: hidden; } @@ -631,7 +637,7 @@ body.dark-mode { .clickable::after { content: "[+]"; /* Plus sign, indicating expandable */ font-size: 12px; - color: var(--color-twelve); + color: var(--background-color-one); } .expanded::after { @@ -1163,7 +1169,7 @@ body.dark-mode { background-color: transparent; color: var(--background-color-one); text-decoration: none; - border-radius: 2px; + white-space: nowrap; transition: background-color 0.1s; }