Forem: 김영민

Building a Unique Developer Portfolio

김영민 — Sun, 09 Nov 2025 08:46:20 +0000

Creating a Portfolio Page

As a developer, I wanted to create a portfolio page that showcases my skills and experience in a unique way. I decided to go with a magazine-style concept, as it looks clean and easy to read.

Why Three Different Views?

I divided my portfolio into three views: resume, timeline, and gallery. Each view displays the same career data but in a different format.

Resume Page: A clean and traditional resume-style page.
Timeline: A timeline view that organizes my experience in chronological order.
Gallery: A gallery view that showcases my projects in detail.

Each page has a distinct feel and purpose, allowing me to highlight different aspects of my portfolio.

Notable Features

Color Pencil Hover Effect

I experimented with various hover effects and settled on a color pencil underline effect. The implementation turned out better than expected.

Gallery Emphasis

When creating the project details page, I worried that lengthy content would deter readers. To address this, I highlighted key points with underlines, making it easy to scan and understand the project's essence.

Responsive Timeline

The timeline's responsive design was the most challenging aspect. Initially, the columns would overflow, and overflow-x: auto would break the position: sticky property. After a day of troubleshooting, I resolved the issue using transform: scale(), which scales the entire timeline to fit within the viewport on smaller screens.

Sidebar Project Summary

On the resume and timeline pages, clicking on a project displays a brief summary in the sidebar. This design choice prevents the project overview from disrupting the page's flow, allowing readers to expand or collapse the summary as needed.

Conclusion

Through this project, I learned that the way data is presented significantly impacts the user experience. I will continue to experiment with different formats and designs to create engaging and effective portfolios.

You can visit my portfolio page at: https://readmekym.vercel.app/

Browser Rendering Process and Optimization

김영민 — Mon, 03 Nov 2025 05:36:53 +0000

Browser Rendering Process and Optimization

The process of a browser rendering a web page on the screen involves several steps. Understanding these steps is crucial for optimizing the performance of web applications.

The Entire Rendering Process

The sequence of events in the browser rendering process is as follows:

HTML parsing → DOM creation → CSS parsing → CSSOM creation 
→ render tree creation → layout → paint → compositing

1. HTML Parsing and DOM Tree Creation

The browser reads the HTML document and creates a DOM (Document Object Model) tree. The DOM tree represents the hierarchical structure of the HTML document as a tree of objects.

Characteristics of the DOM Tree:

Represents the HTML document's structure as an object model
Each element, attribute, and text is represented as a node
Parent-child and sibling node relationships can be determined

Role: Provides an interface for JavaScript to navigate and manipulate HTML elements.

2. CSS Parsing and CSSOM Tree Creation

The browser parses CSS files and <style> tags to create a CSSOM (CSS Object Model) tree.

Characteristics of CSSOM:

Represents each HTML element's applied CSS rules as objects
Combines with the DOM to prepare visual styles
Considered a render-blocking resource

3. Render Tree Formation

The browser combines the DOM and CSSOM to create a render tree.

Characteristics of the Render Tree:

Only includes elements that will be displayed on the screen (display: none elements are excluded)
Includes the styles and visual information for each element
The core data structure for rendering the screen

4. Layout (Layout/Reflow)

The browser calculates the exact position and size of each element based on the render tree.

Main Tasks:

Determines the position of elements within the viewport
Calculates the size, margin, and padding of each element
Layout calculations can cause reflow

5. Paint

The browser draws the elements on the screen in pixel units, using the positions and sizes calculated during the layout stage.

Applied Style Properties:

Color, text, shadow, border
Background image, transparency

Paint Layers:

z-index, position, opacity properties can create independent layers
Each element can have its own paint layer

6. Compositing

The browser combines the layers created during the paint process onto the screen.

Compositing Process:

Considers the layering order (z-index, position)
Uses the GPU to composite the final screen
Completes the rendering of the browser screen

Summary of the Rendering Process

Stage	Description	Key Points
HTML Parsing	HTML → DOM Tree	Incremental rendering possible
CSS Parsing	CSS → CSSOM Tree	Render-blocking resource
Render Tree Creation	DOM + CSSOM → Render Tree	Excludes `display:none` elements
Layout	Calculates element position/size	Can cause reflow (high cost)
Paint	Draws pixels	Can cause repaint
Compositing	Combines layers onto the screen	Utilizes GPU acceleration

Critical Rendering Path and Optimization

The Critical Rendering Path (CRP) refers to the sequence of events from the time the browser receives HTML, CSS, and JavaScript resources to the time it renders the first pixel on the screen.

1. DOM construction (HTML parsing)
        ↓
2. CSSOM construction (CSS parsing)  
        ↓
3. Render tree creation (DOM + CSSOM)
        ↓
4. Layout (position/size calculation)
        ↓
5. Paint (actual pixel drawing)

While it may seem similar to the browser rendering process, the CRP is specifically focused on optimizing the time it takes for the browser to receive resources and render the first pixel.

Key Checkpoints

1. CSS Blocks Rendering

<!-- Rendering is blocked until this CSS is loaded -->
<link rel="stylesheet" href="styles.css">

If CSS is not loaded, the browser will block rendering, causing a Flash of Unstyled Content (FOUC), where the HTML is rendered without CSS, and then the CSS is applied, causing a sudden change in the layout.

2. JavaScript Blocks Parsing

<!-- HTML parsing is blocked until this script is executed -->
<script src="app.js"></script>

JavaScript can update the DOM structure, so the browser blocks HTML parsing until the script is downloaded and executed.

CRP Optimization Strategies

1️⃣ JavaScript Loading Strategy

<!-- ❌ Blocks parsing -->
<script src="app.js"></script>

<!-- ✅ Executes after HTML parsing is complete -->
<script src="app.js" defer></script>

<!-- ✅ Downloads in parallel, executes as soon as downloaded -->
<script src="analytics.js" async></script>

<!-- ✅ Module syntax (automatic defer) -->
<script type="module" src="app.js"></script>

Differences between each approach:

Regular <script>: Blocks HTML parsing and executes immediately
defer: Downloads in parallel with HTML parsing, executes after parsing is complete (order is guaranteed)
async: Downloads in parallel with HTML parsing, executes as soon as downloaded (order is not guaranteed)
type="module": Automatically defers execution

2️⃣ Using Resource Hints

<!-- Preloads font -->
<link rel="preload" as="font" href="/myfont.woff2" type="font/woff2" crossorigin>

<!-- Preloads LCP image -->
<link rel="preload" as="image" href="/hero.jpg">

<!-- Prefetches resources for the next page -->
<link rel="prefetch" href="/next-page.bundle.js" as="script">

Types of resource hints:

preload: Prioritizes the download of resources needed for the current page
prefetch: Downloads resources for the next page during idle time
preconnect: Establishes a connection to a specific domain in advance

3️⃣ Font Optimization

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Need for font optimization:

Web fonts require a network request
Large font files can delay initial rendering
font-display: swap allows the browser to display the system font first and then swap to the web font once it's loaded

font-display options:

auto: Browser default behavior
block: Hides text until the font is loaded (up to 3 seconds)
swap: Displays system font first, then swaps to web font once loaded
fallback: Uses a fallback font for a short period
optional: Decides whether to use the web font based on network conditions

4️⃣ Image Optimization

<img src="thumb.webp" loading="lazy" alt="Thumbnail">

Image optimization methods:

Use WebP, AVIF, or other formats optimized for the web
Use lazy loading to delay loading images until they're visible in the viewport
Use srcset and sizes attributes to provide responsive images
Optimize image file size and compression

Reflow and Repaint

Let's dive deeper into the process of updating elements in the browser.

Definitions

Reflow: The process of recalculating the layout of an element, including its position and size.
Repaint: The process of redrawing an element's visual styles, such as color, background, or border.

DOM Update → Reflow/Repaint Flow

1. DOM Update

JavaScript updates the DOM, marking the affected node as dirty.
The render tree remains unchanged at this point.

2. Render Tree (Render Tree) Check

The browser checks the dirty node and determines which areas of the render tree need to be updated.
If the size or position of an element changes, a reflow is marked as necessary.
If only visual styles change, a repaint is marked as necessary.

3. Reflow (Layout) Stage

The browser recalculates the box model (box model) of the dirty node and its affected ancestors, descendants, and siblings.
The render tree is updated with the new layout information.

4. Repaint (Paint) Stage

The browser redraws the element with the updated visual styles.
The repaint stage occurs after the reflow stage, if necessary.

5. Composite Stage

The browser composites the painted layers onto the screen using the GPU.

DOM update → dirty mark → reflow (if necessary) → repaint → composite → screen update

Reflow Details

Definition

The process of calculating the layout of an element, including its position and size.

Relationship with Browser Rendering

DOM + CSSOM → Render Tree → Layout (Reflow) → Paint → Composite

Reflow is a necessary step in the rendering process to ensure that elements are correctly positioned and sized.

Occurrence Conditions

When an element's size, position, or DOM structure changes.
When CSS properties that affect layout are changed, such as width, height, margin, padding, or border.
When the browser window is resized or scrolled.

Characteristics

Reflow can be an expensive operation, especially when it affects many elements.
Reflow can cause a cascade of reflows in affected elements.

Repaint Details

Definition

The process of redrawing an element's visual styles, such as color, background, or border.

Relationship with Browser Rendering

Layout (Reflow) → Paint (Repaint) → Composite

Repaint occurs after the reflow stage, if necessary, to update the visual styles of an element.

Occurrence Conditions

When an element's visual styles change, such as color, background-color, or border-color.
When an element's opacity or transparency changes.

Characteristics

Repaint is generally less expensive than reflow.
Repaint only affects the element being updated, whereas reflow can affect multiple elements.

Reflow vs Repaint Comparison

Category	Reflow (Layout)	Repaint (Paint)
Definition	Calculates element position and size	Redraws element visual styles
Occurrence Conditions	Size, position, or DOM structure changes	Visual style changes
Calculation Cost	High	Low
Cascade Effect	Can affect multiple elements	Only affects the updated element
Examples	`width`, `height`, `display`, `font-size` changes	`color`, `background-color`, `border-color` changes

In conclusion, understanding the browser rendering process and the critical rendering path is crucial for optimizing the performance of web applications. By minimizing reflow and repaint operations, using efficient JavaScript loading strategies, and optimizing fonts and images, developers can improve the user experience and reduce the time it takes for the browser to render the first pixel on the screen.

Ace Your Next Interview: Frontend Developer Questions in Korea

김영민 — Tue, 23 Sep 2025 10:30:39 +0000

Frontend Developer Interview Questions in the Korean IT Industry

As a frontend developer, preparing for technical interviews can be a daunting task. In this article, we'll explore common interview questions that frontend developers may encounter in the Korean IT industry. These questions are designed to test not only your technical skills but also your understanding of web development principles and your ability to solve real-world problems.

Browser-Related Questions

When it comes to browser-related questions, interviewers often want to assess your understanding of how browsers work and how to optimize web applications for better performance. Here are some examples:

Explain the browser rendering process step by step.
What is the Critical Rendering Path, and how can you optimize it?
What is the difference between Reflow and Repaint, and under what conditions do they occur?
Explain browser caching strategies and their characteristics.
What is CORS, and how can you resolve CORS issues?
What are the differences between LocalStorage, SessionStorage, and Cookies?
Explain the Event Loop, Call Stack, and Task Queue.
How do you handle browser compatibility issues, and what methods do you use to resolve them?
What are the key metrics for web performance optimization, and how can you improve them?
What is the role of Service Workers, and how can you utilize them?

HTML-Related Questions

HTML is the foundation of web development, and interviewers may ask questions to test your understanding of HTML concepts and best practices. Here are some examples:

Explain the importance of semantic HTML and its major tags.
What is the role of the DOCTYPE declaration, and what are the characteristics of the HTML5 DOCTYPE?
What are the different types of meta tags, and how do they impact SEO and performance?
How do you ensure web accessibility (a11y) in your HTML code?
What are the key attributes and validation methods for the Form tag?
What is the purpose of the data-* attribute, and how can you use it?
What HTML tags and attributes can you use to optimize images?
What new elements were introduced in HTML5, and how can you use them?
What is the difference between the async and defer attributes in the script tag?
What HTML settings are required for Progressive Web Apps?

CSS-Related Questions

CSS is a crucial aspect of web development, and interviewers may ask questions to test your understanding of CSS concepts, best practices, and optimization techniques. Here are some examples:

Explain the CSS Box Model and the box-sizing property.
What is the difference between Flexbox and Grid, and when should you use each?
How do you calculate CSS specificity, and what are the rules for overriding styles?
What CSS techniques can you use for responsive web design?
What are the benefits and drawbacks of using CSS preprocessors like Sass or LESS?
What is the difference between CSS-in-JS and traditional CSS, and what are the pros and cons of each approach?
How can you optimize CSS animations and the transform property?
What are the benefits and drawbacks of using CSS methodologies like BEM or SMACSS?
What is the difference between a mobile-first and desktop-first approach, and when should you use each?
What CSS optimization techniques can you use to improve web performance?

JavaScript-Related Questions

JavaScript is a fundamental programming language for web development, and interviewers may ask questions to test your understanding of JavaScript concepts, syntax, and best practices. Here are some examples:

Explain the concept of hoisting and the Temporal Dead Zone (TDZ).
What is a closure, and how can you use it in your code?
What are the rules for this binding, and how does it work in different contexts?
How do you implement prototypal inheritance in JavaScript?
What are the differences between Promises, async/await, and callbacks?
What is event delegation, and how can you use it to improve performance?
What is the difference between scope and execution context, and how do they relate to each other?
What are the key features and use cases for ES6+ syntax?
How can you prevent memory leaks in your JavaScript code?
What is functional programming, and how can you apply it in JavaScript?

React-Related Questions

React is a popular JavaScript library for building user interfaces, and interviewers may ask questions to test your understanding of React concepts, best practices, and optimization techniques. Here are some examples:

Explain the concept of the Virtual DOM and its performance benefits.
What is the React lifecycle, and how do Hooks relate to it?
How can you optimize the use of useState and useEffect?
What is the problem of Props Drilling, and how can you solve it?
What are the benefits and drawbacks of using state management libraries like Redux or Zustand?
What is the difference between React.memo, useMemo, and useCallback, and when should you use each?
How can you write custom Hooks, and what are the benefits of doing so?
What are the principles of component design, and how can you write reusable components?
What are the key features and changes in React 18?
What React optimization techniques can you use to improve web performance?

Network-Related Questions

Understanding how the web works is crucial for frontend developers, and interviewers may ask questions to test your knowledge of network protocols, security, and optimization techniques. Here are some examples:

What is the difference between HTTP and HTTPS, and how does the SSL/TLS handshake work?
What are the main HTTP status codes, and what do they mean?
What are the principles of RESTful API design, and what are some best practices?
What is the difference between GraphQL and REST API, and what are the pros and cons of each?
What are some common web security threats (XSS, CSRF), and how can you prevent them?
How do you implement HTTP caching, and what are the benefits of doing so?
What is the difference between WebSockets and traditional HTTP communication?
How do CDNs work, and what are the performance benefits of using them?
What are some common API authentication methods (JWT, OAuth), and what are the security considerations?
What network optimization techniques can you use to improve web performance?

Computer Science-Related Questions

Finally, interviewers may ask questions to test your understanding of computer science concepts, data structures, and algorithms. Here are some examples:

What are the characteristics of common data structures (arrays, stacks, queues, trees), and what are their time complexities?
What are the different types of sorting algorithms, and what are their performance characteristics?
How do hash tables work, and what are some strategies for resolving collisions?
What are the concepts of time and space complexity, and how do you analyze them?
What is the difference between recursion and iteration, and when should you use each?
What is dynamic programming, and how can you apply it to solve problems?
How do database indexes work, and what are the performance implications?
What is the difference between processes and threads, and how do they relate to web development?
What are some strategies for memory management, and how do you prevent memory leaks?
What are some common design patterns (Singleton, Observer, Factory), and how can you apply them in your code?

Conclusion

I'll organize and post these questions one by one going forward.
Actually, the questions above might be a bit outdated by 1-2 years, so they might be somewhat different from what's used in the current industry. These days, there's also a growing trend of giving pre-assignments and conducting technical interviews based on the actual code that candidates have written. What kinds of questions do you ask when hiring junior or entry-level developers in your workplace?
It would be interesting for all of us to check together how much we know about these questions and whether there are any parts we might have forgotten.

Exploring Programming Language Paradigms

김영민 — Sun, 21 Sep 2025 08:08:45 +0000

Programming Language Paradigms

Programming language paradigms are fundamental styles or approaches to writing software. Each paradigm provides a unique perspective on how to design, structure, and implement code. Understanding these paradigms is essential for developers to choose the best approach for their projects.

Overview of Programming Languages and Paradigms

The following table summarizes some popular programming languages and the paradigms they support:

Language	Supported Paradigms	Characteristics
C	Procedural	System programming, performance-oriented
Java	Object-Oriented, Functional	Large-scale enterprise applications, popular
Python	Procedural, Object-Oriented, Functional	Multi-paradigm, easy syntax, extensive libraries
JavaScript	Procedural, Object-Oriented, Functional, Event-Driven	Core language for web development, flexible multi-paradigm support
Ruby	Object-Oriented, Functional	Concise syntax, famous for Rails
Haskell	Functional	Pure functional programming, academic research, and finance
C++	Procedural, Object-Oriented	Performance-centric, games, and high-performance systems
C#	Object-Oriented, Functional	Strongly supported in Microsoft environments
Scala	Object-Oriented, Functional	Introduces functional programming to the Java ecosystem
Kotlin	Object-Oriented, Functional	Popular for Android development, modern alternative to Java
Prolog	Logic	AI, data inference systems
SQL	Declarative	Database query language

Key Programming Paradigms

Procedural Programming

Characteristics: Programs are written in a sequence of commands, executed in order.
Usage: Simple problem-solving, logical flow implementation.
Advantages: Simple structure, suitable for small projects.
Disadvantages: Difficult code reuse, challenging for large projects.
Main Languages: C, Pascal, BASIC

Object-Oriented Programming (OOP)

Characteristics: Data is encapsulated into objects, which interact with each other.
Usage: Complex system design, maximizing code reuse.
Advantages: Inheritance, polymorphism, and encapsulation enhance maintainability and extensibility.
Disadvantages: Initial design and structuring can be challenging.
Main Languages: Java, C++, Python, C#, Ruby

Functional Programming

Characteristics: Minimizes state and side effects, focusing on functions as primary components.
- Pure Functions: Emphasizes functions with no side effects, calculating output based solely on input.
- Immutability: Treats data as immutable to prevent unexpected changes and facilitate parallel processing.
Usage: Parallel processing, data analysis, complex mathematical computations.
Advantages: High code readability, easy testing, and debugging.
Disadvantages: May have a learning curve compared to object-oriented programming.
Main Languages: Haskell, Scala, Lisp, F#, parts of JavaScript, Python

Declarative Programming

Characteristics: Focuses on what the program should accomplish, abstracting how it's done.
Usage: Database queries, user interface design.
Advantages: Concise code, easy maintenance.
Disadvantages: Can be challenging for complex logic implementation.
Main Languages: SQL, HTML, CSS, parts of React (JSX)

Event-Driven Programming

Characteristics: Programs react to specific events (clicks, inputs, network requests).
Usage: User interfaces, real-time data processing.
Advantages: Efficiently handles asynchronous tasks.
Disadvantages: Event flow can become complex.
Main Languages: JavaScript, Node.js

Logic Programming

Characteristics: Solves problems based on logical rules.
Usage: AI, data inference, complex problem-solving.
Advantages: Allows logical modeling of problems.
Disadvantages: Can be slow in execution.
Main Languages: Prolog, Datalog

Multi-Paradigm Programming

Characteristics: A single language supports multiple paradigms.
Usage: Choosing the best paradigm for the problem at hand.
Advantages: Offers flexibility for different requirements.
Disadvantages: Requires choosing the appropriate paradigm.
Main Languages: Python, JavaScript, C#, Kotlin, Swift

Other Paradigms

Data-Oriented Programming

Focuses on data storage and manipulation.
Languages: R, MATLAB, Julia

Distributed Programming

Designs programs to operate in distributed environments.
Languages: Erlang, Elixir

Conclusion

Understanding programming language paradigms is crucial for software development. Each paradigm has its strengths and weaknesses, and the choice of paradigm can significantly impact the success of a project. By grasping the fundamentals of these paradigms, developers can make informed decisions about which approach to use for their specific needs, leading to more efficient, maintainable, and scalable software solutions.

Understanding Type Systems in Programming

김영민 — Fri, 19 Sep 2025 11:00:25 +0000

Introduction to Type Systems in Programming Languages

Type systems are a fundamental concept in programming languages, determining how a language handles variables, data types, and operations. In this article, we'll delve into the world of type systems, exploring the different categories, their characteristics, and examples of languages that implement them.

Type Classifications

The following table summarizes the main type classifications:

Type Classification	Description	Examples
Dynamically Typed	Type determined at runtime	JavaScript, Python, Ruby
Statically Typed	Type determined at compile time	Java, C, C++, TypeScript
Strongly Typed	Strict type conversion	Python, Java, Kotlin
Weakly Typed	Automatic type conversion	JavaScript, PHP, Perl

Dynamically Typed Languages

Dynamically typed languages determine the type of a variable at runtime. This means that a variable can hold any type of data, and its type is only known when the code is executed.

Characteristics

Variables can hold any type of data
Type is determined at runtime
Advantages: flexible and concise code
Disadvantages: type-related errors are only discovered at runtime

Examples

JavaScript

let value = 42;    // number
value = "Hello";   // string

Python

value = 10          # int
value = "Python"    # str

Statically Typed Languages

Statically typed languages determine the type of a variable at compile time. This means that the type of a variable is known before the code is executed, and any type-related errors are caught during compilation.

Characteristics

Variables must be declared with a specific type
Type is determined at compile time
Advantages: type-related errors are caught at compile time
Disadvantages: more code is required for initial declarations

Examples

Java

int value = 42;         // only numbers are allowed
value = "Hello";        // compile-time error

C

char name[] = "Alice";  // only strings are allowed

Strongly Typed Languages

Strongly typed languages have a strict type system, where type conversions are explicit and any implicit conversions are not allowed.

Characteristics

Explicit type conversions are required
Implicit type conversions are not allowed
Advantages: prevents type-related errors
Disadvantages: more verbose code

Examples

Python

print(1 + "2")  # TypeError

Java

int number = 10;
String text = "20";
int sum = number + Integer.parseInt(text); // explicit conversion required

Weakly Typed Languages

Weakly typed languages have a lenient type system, where type conversions are automatic and implicit.

Characteristics

Implicit type conversions are allowed
Explicit type conversions are not required
Advantages: more flexible code
Disadvantages: can lead to unexpected behavior

Examples

JavaScript

console.log(1 + "2");    // "12" (number is converted to string)
console.log("5" - 2);    // 3 (string is converted to number)

Mixed Typed Languages

Mixed typed languages combine elements of both dynamically and statically typed languages. They can enforce type checks at compile time but also allow for dynamic typing in certain situations.

Characteristics

Combination of dynamic and static typing
Type checks can be enforced at compile time
Advantages: flexibility and type safety
Disadvantages: can be complex to implement

Examples

TypeScript (JavaScript with static typing)

let value: number = 10; // static typing
value = "Hello";        // compile-time error

Kotlin

var name: String = "Alice"  // static typing
name = 42                   // compile-time error

Conclusion

In conclusion, type systems are a crucial aspect of programming languages, and understanding their differences is essential for effective programming. By recognizing the strengths and weaknesses of each type system, developers can choose the best language for their project and write more robust, maintainable code. Whether you prefer the flexibility of dynamically typed languages or the type safety of statically typed languages, knowing the characteristics of each type system will help you become a better programmer.

Mastering JavaScript Inheritance with Prototypes

김영민 — Mon, 15 Sep 2025 11:01:36 +0000

Understanding JavaScript Prototypes

JavaScript prototypes are a fundamental concept in object-oriented programming, providing a mechanism for inheritance. Unlike class-based languages, JavaScript uses prototype-based inheritance, allowing objects to inherit properties and methods from other objects.

What are Prototypes?

In JavaScript, every object has an internal [[Prototype]] property that references its parent object. When accessing a property on an object, if it doesn't exist, the prototype chain is searched for that property.

Prototype Chain

The prototype chain is a series of objects referencing each other, allowing for continuous searching of properties. If the chain is traversed and the property is still not found, undefined is returned. Object.prototype is the top-most prototype that all objects reference.

Setting Prototypes

Objects can set their prototypes using the prototype property.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Set the greet method on the Person prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice', 30);
person1.greet(); // "Hello, my name is Alice"

Utilizing Prototypes

Prototypes are useful for:

Inheritance: Sharing common functionality among multiple objects.
Method sharing: Saving memory by sharing methods among objects.
Class-based inheritance: Defining classes and methods using prototypes.

Prototype Chain Example

Here's an example of a prototype chain:

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm a(n) ${this.name}`);
};

function Dog(name) {
  Animal.call(this, name);  // Call the parent class constructor
}

Dog.prototype = Object.create(Animal.prototype);  // Set Dog's prototype to Animal's
Dog.prototype.constructor = Dog;  // Update the constructor

const dog = new Dog('Dog');
dog.sayHello();  // "Hello, I'm a(n) Dog"

Implicit Prototype Chain

If you don't explicitly set a prototype chain, JavaScript will default to Object.prototype. However, to share new methods, you need to explicitly set the prototype or use inheritance.

Best Practices

Avoid creating overly deep prototype chains, as they can impact performance.
Only add necessary methods and properties to prototypes, and avoid unnecessary inheritance.

In conclusion, understanding JavaScript prototypes is crucial for effective object-oriented programming. By leveraging prototypes, you can create more efficient, scalable, and maintainable code. Remember to use prototypes judiciously and follow best practices to avoid potential performance issues.

Mastering Map and Set in JavaScript

김영민 — Fri, 12 Sep 2025 11:43:23 +0000

Introduction to Map and Set in JavaScript

Map and Set are new data structures introduced in ES6 to complement the existing objects and arrays, providing more powerful features and flexibility in specific situations.

Map: A More Powerful Key-Value Store

Map is a data structure that stores key-value pairs, offering more robust features and flexibility compared to traditional objects.

Key Features of Map

No key restrictions: Unlike objects, where keys are limited to strings and symbols, Map allows any type to be used as a key.
Preserves insertion order: Map remembers the order in which elements were inserted, making it an iterable object.
Easy size checking: Map has a size property, making it simple to check the number of elements.
Performance optimization: Map provides more efficient addition, deletion, and lookup of key-value pairs compared to objects.

Using Map

const map = new Map();

// Add elements
map.set('key1', 'value1');
map.set(42, 'value2'); // Using a number as a key
map.set({ a: 1 }, 'value3'); // Using an object as a key

console.log(map.get('key1')); // 'value1'
console.log(map.get(42)); // 'value2'

// Check size
console.log(map.size); // 3

// Delete an element
map.delete(42);

// Check if a key exists
console.log(map.has(42)); // false

// Iterate over all elements
map.forEach((value, key) => {
  console.log(key, value);
});

Set: A Collection of Unique Values

Set is a data structure that stores a collection of unique values, similar to an array but without duplicates.

Key Features of Set

No duplicates: Set automatically removes duplicates, ensuring all values are unique.
Stores unique values: Set can store numbers, strings, objects, and other values, with each value being unique.
Preserves insertion order: Set remembers the order in which elements were inserted.

Using Set

const set = new Set();

// Add elements
set.add(1);
set.add(2);
set.add(2); // Duplicate value is ignored
set.add('Hello');

console.log(set); // Set { 1, 2, 'Hello' }

// Check size
console.log(set.size); // 3

// Delete an element
set.delete(1);

// Check if a value exists
console.log(set.has(1)); // false

// Iterate over all elements
set.forEach(value => {
  console.log(value);
});

Practical Use Case: Removing Duplicates from an Array

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Conclusion

In conclusion, Map and Set are powerful data structures in JavaScript that provide more flexibility and features compared to traditional objects and arrays. By understanding how to use Map and Set, you can write more efficient and effective code, and take advantage of their unique features to solve complex problems.

Unwrapping JavaScript Primitive Values and Methods

김영민 — Thu, 11 Sep 2025 08:15:37 +0000

JavaScript Primitive Values and Methods

JavaScript primitive values are treated as simple values, so they can't have methods or properties directly. However, when you call a method on a primitive value, it seems to work. Let's dive into how this is possible.

Introduction to Primitive Values

In JavaScript, primitive values include:

String (strings)
Number (numbers)
BigInt (big integers)
Boolean (booleans)
undefined (undefined)
null (null)
Symbol (symbols)

Auto-Boxing of Primitive Values

JavaScript automatically wraps primitive values in objects when a method is called on them. This process is called auto-boxing. For example, when you call a string method on a primitive string value, JavaScript converts it to a String object, calls the method, and then converts it back to the original primitive value.

In other words, when you call a method on a primitive value, JavaScript temporarily boxes it in an object, executes the method, and then unboxes it, returning the original primitive value.

Here's an example:

let str = "Hello";
let result = str.toUpperCase(); // "HELLO"

console.log(result);  // "HELLO"

As you can see, str is a primitive string value, but you can still call methods like toUpperCase(), charAt(), slice(), and split() on it. This is because JavaScript automatically converts str to a String object, calls the method, and then converts it back to the original primitive string value.

Practical Tips

When working with primitive values in JavaScript, keep in mind that auto-boxing occurs when you call methods on them. This means you can use methods like toUpperCase() on string primitives, but it's essential to remember that the original value remains a primitive.

Conclusion

In conclusion, JavaScript's auto-boxing feature allows you to call methods on primitive values by temporarily converting them to objects. This behavior is essential to understand when working with primitive values in JavaScript, and it can help you write more efficient and effective code. By recognizing how auto-boxing works, you can take advantage of methods like toUpperCase() on string primitives and write more robust JavaScript applications.

Mastering JavaScript Iterables

김영민 — Thu, 11 Sep 2025 05:24:59 +0000

Introduction to JavaScript Iterable Objects

Iterable objects in JavaScript represent a sequence of values that can be iterated over, such as arrays or strings. Understanding iterable objects is essential for effective data processing and manipulation in JavaScript.

What are Iterable Objects?

An iterable object is an object that implements the Symbol.iterator property, which returns an iterator. This iterator is responsible for yielding values one at a time, allowing us to iterate over the object's values using a for...of loop.

Structure of Iterable Objects

An iterable object consists of two main components:

Iterable: An object that defines the Symbol.iterator method, which returns an iterator.
Iterator: An object that has a next() method, which returns an object with value and done properties.

let arr = [1, 2, 3, 4, 5];

for (let value of arr) {
  console.log(value);  // 1, 2, 3, 4, 5
}

Examples of Iterable Objects

Some of the most commonly used iterable objects include:

Arrays: Can be iterated over using for...of to access each element.
Strings: Can be iterated over character by character.

let str = "Hello";

for (let char of str) {
  console.log(char);  // 'H', 'e', 'l', 'l', 'o'
}

Implementing Custom Iterable Objects

We can create our own iterable objects by defining the Symbol.iterator method and implementing the iterator logic.

let myIterable = {
  items: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let value of myIterable) {
  console.log(value);  // 1, 2, 3, 4, 5
}

Differences Between `for...of` and `for...in`

for...of: Iterates over the values of an iterable object.
for...in: Iterates over the keys of an object.

let arr = [10, 20, 30];

// for...of iterates over values
for (let value of arr) {
  console.log(value);  // 10, 20, 30
}

// for...in iterates over indices
for (let index in arr) {
  console.log(index);  // 0, 1, 2
}

Using the Spread Operator with Iterable Objects

The spread operator (...) can be used to expand an iterable object into an array or another iterable.

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];  // expands the array and creates a new one
console.log(newArr);  // [1, 2, 3, 4, 5]

Examples of Other Iterable Objects

Other examples of iterable objects include:

Maps: Can be iterated over using for...of to access key-value pairs.
Sets: Can be iterated over using for...of to access unique values.

let map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let [key, value] of map) {
  console.log(key, value);  // 'a' 1, 'b' 2
}

let set = new Set([1, 2, 3, 4]);

for (let value of set) {
  console.log(value);  // 1, 2, 3, 4
}

Generators and Iterables

Generators are a special type of function that can be used to create iterable objects. They are defined using the function* syntax and use the yield keyword to produce values.

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

let gen = myGenerator();
for (let value of gen) {
  console.log(value);  // 1, 2, 3
}

Conclusion

In conclusion, iterable objects are a fundamental concept in JavaScript that enables us to work with sequences of values in a flexible and efficient way. By understanding how to create and use iterable objects, we can write more effective and scalable code. Whether you're working with arrays, strings, maps, or sets, iterable objects provide a powerful tool for data processing and manipulation.

Mastering the 'this' Keyword in JavaScript

김영민 — Tue, 09 Sep 2025 12:06:44 +0000

Understanding the `this` Keyword in JavaScript

The this keyword in JavaScript is a special keyword that refers to the context of the currently executing code. It can be confusing, especially for beginners, but understanding how this works is crucial for effective JavaScript development.

Introduction to `this`

The this keyword behaves differently depending on where it is used. Let's explore the various contexts in which this can be used.

1. Global Context

In the global context, this refers to the global object. In a browser environment, this points to the window object, while in a Node.js environment, it points to the global object.

console.log(this);  // browser: window object

2. Regular Functions

Inside a regular function, this refers to the global object. However, in strict mode, this is set to undefined.

function example() {
  console.log(this);  // browser: window object, strict mode: undefined
}
example();

3. Object Methods

When used inside an object method, this refers to the object itself.

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name);  // "John" output, this refers to person object
  }
};

person.greet();

4. Arrow Functions

Arrow functions behave differently than regular functions. They statically bind this, meaning that the this inside an arrow function refers to the this of the outer function. This is known as lexical scoping.

const person = {
  name: 'John',
  greet: function() {
    const innerGreet = () => {
      console.log(this.name);  // "John" output, this refers to greet method's this
    };
    innerGreet();
  }
};

person.greet();

5. Class Methods

In JavaScript classes, this refers to the instance of the class.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const john = new Person('John');
john.greet();  // "Hello, John"

6. Event Handlers

Inside a DOM event handler, this refers to the DOM element that triggered the event.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this);  // outputs the clicked button element
});

Dynamic Binding of `this`

The this keyword is dynamically bound, meaning its value depends on how the function is called.

In global execution, this refers to the global object.
In method calls, this refers to the object the method belongs to.
Using call, apply, or bind methods allows you to explicitly set this.

Strict Mode and `this`

In strict mode, the behavior of this is more strictly defined. Inside regular functions, this is set to undefined instead of the global object, preventing accidental modifications to the global object.

'use strict';

function example() {
  console.log(this);  // undefined
}
example();

Conclusion

Understanding the this keyword is essential for effective JavaScript development. By recognizing how this behaves in different contexts, you can write more robust and maintainable code. Remember that this is dynamically bound, and its value depends on the execution context. With practice and experience, you'll become more comfortable using this in your JavaScript projects.

Understanding JavaScript Copy by Reference

김영민 — Tue, 09 Sep 2025 10:54:23 +0000

JavaScript Copy by Reference

JavaScript is a versatile language with various data types, including primitive and reference types. Understanding how these types are copied is crucial for effective programming. In this article, we'll delve into the world of JavaScript copy by reference, exploring the differences between primitive and reference types, shallow and deep copying, and providing practical tips for working with these concepts.

Primitive Types

Primitive types in JavaScript are values stored directly in variables. When you copy a primitive value, it creates a new copy of the value in a new memory space.

Examples: string, number, boolean, undefined, null, symbol, bigint

let a = 10;
let b = a;  // a's value is copied to b

b = 20;  // only b is changed

console.log(a);  // 10
console.log(b);  // 20

Here, a and b have independent values.
Although a's value is copied to b, they occupy different memory spaces. Therefore, changing b doesn't affect a.

Reference Types

Reference types in JavaScript store the reference address of an object in variables. When you copy an object or array, you're copying the reference address, not the value. This means both variables will point to the same object.

Examples: object, array, function, date, regExp, map, set

let person1 = {
  name: 'John',
  age: 30
};

let person2 = person1;  // person1's reference address is copied to person2

person2.age = 35;  // person2's age value is changed

console.log(person1.age);  // 35 (person1 is also changed)
console.log(person2.age);  // 35

person1 and person2 point to the same object. Changing person2 affects person1 because they reference the same memory space.

Characteristics of Copy by Reference

Both variables point to the same object, so changing one affects the other.
No new object is created when copying arrays or objects; only the reference address is copied.

Shallow Copy

When copying reference types, we use the concept of shallow copying. Shallow copying only copies the top-level properties of an object and copies the reference to inner objects or arrays.

Shallow Copy Example

let original = {
  name: 'Alice',
  hobbies: ['reading', 'biking']
};

let copy = { ...original };  // shallow copy using spread operator

copy.name = 'Bob';  // only the copy is changed
copy.hobbies.push('swimming');  // both the original and copy are changed

console.log(original.name);    // Alice (unchanged)
console.log(original.hobbies); // ['reading', 'biking', 'swimming']
console.log(copy.hobbies);     // ['reading', 'biking', 'swimming']

Changing name only affects the copy, but both the original and copy share the same hobbies array.

Deep Copy

Deep copying creates a completely independent object by copying all nested objects and arrays. This solves the reference problem that can occur with shallow copying.

Deep Copy Example

Using JSON.parse() and JSON.stringify() for deep copying

let original = {
  name: 'Alice',
  hobbies: ['reading', 'biking']
};

let copy = JSON.parse(JSON.stringify(original));  // deep copy

copy.name = 'Bob';  // only the copy is changed
copy.hobbies.push('swimming');  // only the copy is changed

console.log(original.name);    // Alice (unchanged)
console.log(original.hobbies); // ['reading', 'biking']
console.log(copy.hobbies);     // ['reading', 'biking', 'swimming']

JSON.parse(JSON.stringify()) creates a new copy of the object, including all nested objects and arrays, solving the reference issue.

Alternative Methods

Using the cloneDeep() function from the lodash library for deep copying

const _ = require('lodash');
let copy = _.cloneDeep(original);

This method is particularly useful when dealing with complex, nested objects.

In conclusion, understanding how JavaScript copies values, whether by reference or by value, is essential for writing effective and bug-free code. By recognizing the differences between primitive and reference types and knowing when to use shallow or deep copying, you can better manage your data and avoid common pitfalls. Remember, the key to mastering JavaScript is practice and a deep understanding of its fundamental concepts.

Unlocking JavaScript's Built-in Object Power

김영민 — Mon, 08 Sep 2025 10:10:37 +0000

Mastering JavaScript's Built-in Object Methods

JavaScript provides a plethora of built-in object methods that can be used to create, manipulate, and interact with objects. In this article, we'll delve into the most commonly used object methods, exploring their use cases, examples, and practical tips for implementing them in your daily coding routine.

1. `Object.keys(obj)`

Retrieving an Object's Keys

Object.keys(obj) is a method used to retrieve an array of a given object's own enumerable property names. This method is particularly useful when you need to iterate over an object's properties or check if a specific key exists.

Example:

const user = { name: "Alice", age: 25 };
console.log(Object.keys(user)); // ["name", "age"]

2. `Object.values(obj)`

Retrieving an Object's Values

Object.values(obj) returns an array of a given object's own enumerable property values. This method is useful when you need to perform value-based operations, such as filtering or summing.

Example:

const user = { name: "Alice", age: 25 };
console.log(Object.values(user)); // ["Alice", 25]

3. `Object.entries(obj)`

Retrieving an Object's Key-Value Pairs

Object.entries(obj) returns an array of a given object's own enumerable string-keyed property pairs. This method is useful when you need to iterate over an object's properties and access both the key and value simultaneously.

Example:

const user = { name: "Alice", age: 25 };
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25

4. `Object.assign(target, ...sources)`

Merging Objects

Object.assign(target, ...sources) is a method used to copy the values of all enumerable own properties from one or more source objects to a target object. This method is useful when you need to merge objects or create a new object with the properties of an existing object.

Example:

const user = { name: "Alice" };
const updates = { age: 25, city: "Seoul" };
const merged = Object.assign({}, user, updates);
console.log(merged); // { name: "Alice", age: 25, city: "Seoul" }

5. `Object.fromEntries(array)`

Creating an Object from an Array

Object.fromEntries(array) is a method used to create a new object from an array of key-value pairs. This method is useful when you need to convert an array of data into an object.

Example:

const entries = [["name", "Alice"], ["age", 25]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "Alice", age: 25 }

6. `Object.freeze(obj)`

Freezing an Object

Object.freeze(obj) is a method used to freeze an object, making it immutable. This method is useful when you need to ensure that an object's properties cannot be modified.

Example:

const config = Object.freeze({ theme: "dark", version: 1 });
config.theme = "light"; // ignored
console.log(config.theme); // "dark"

7. `Object.hasOwn(obj, key)`

Checking if an Object has a Property

Object.hasOwn(obj, key) is a method used to check if an object has a specific property. This method is useful when you need to ensure that an object has a certain property before attempting to access it.

Example:

const user = { name: "Alice" };
console.log(Object.hasOwn(user, "name")); // true
console.log(Object.hasOwn(user, "toString")); // false

8. `Object.getPrototypeOf(obj)`

Retrieving an Object's Prototype

Object.getPrototypeOf(obj) is a method used to retrieve an object's prototype. This method is useful when you need to inspect an object's inheritance chain.

Example:

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

9. `Object.defineProperty(obj, key, descriptor)`

Defining a Property

Object.defineProperty(obj, key, descriptor) is a method used to define a property on an object. This method is useful when you need to create a property with specific attributes, such as making it read-only or hidden.

Example:

const user = {};
Object.defineProperty(user, "name", {
  value: "Alice",
  writable: false, // non-configurable
  enumerable: true, // enumerable
});
console.log(user.name); // "Alice"
user.name = "Bob"; // ignored

10. `Object.seal(obj)`

Sealing an Object

Object.seal(obj) is a method used to seal an object, making it impossible to add or remove properties. This method is useful when you need to ensure that an object's structure remains intact.

Example:

const user = { name: "Alice" };
Object.seal(user);
user.age = 25; // ignored (cannot add new properties)
user.name = "Bob"; // allowed (can modify existing properties)
console.log(user); // { name: "Bob" }

Practical Applications

These built-in object methods are essential in various real-world scenarios:

Object.keys/values/entries: frequently used for iterating over objects or converting them to arrays.
Object.assign: commonly used for merging objects or creating new objects with existing properties.
Object.freeze: used to ensure immutability in state management and other applications.
Object.hasOwn: useful for safely checking if an object has a specific property.
Object.fromEntries: handy for converting array data into objects.

By mastering these built-in object methods, you'll become more proficient in handling objects and writing more efficient, readable code. Remember to explore and practice each method to get the most out of JavaScript's built-in functionality.