Start at the Basics

With the advent of AI and some tech-ed influencers, there seem to be alot of skipping of the essentials before using a framework in Javascript land. Understanding core JavaScript concepts is crucial, its like learning to walk before running. When I got this new job and had to get decent at understanding Vue, I took time to review these JavaScript to have an effective approach to Vue 3 development, I understand and can use React … but it NOT my favorite framework, this is another discussion. Here’s why these fundamentals matter :

Variables and Data Types

• Why it matters: Vue 3’s reactivity system relies heavily on proper variable declarations.
• The composition API requires an understanding of const for refs and reactive objects.
• Type awareness helps with Vue3’s template rendering and prop validation.

const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})

Template Literals

• Why it matters: This is essential for Vue3 template expressions and string interpolation.
• It is extensively used in computed properties and methods.
• Template literals can be helpful for dynamic component templates and prop values.

const greeting = computed(() => `Hello, ${user.name}!`)

Arrow Functions

• Why it matters: Critical for Vue 3’s Composition API.
• Used in setup() functions, computed properties, and watchers.
• Essential for maintaining correct this binding in methods.

const doubleCount = computed(() => count.value * 2)
watch(() => user.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`)
})

Objects and Object Destructuring

• Why it matters: Fundamental for working with Vue’s reactive objects.
• Required for component props and emits declarations.
• Essential for destructuring from setup() returns.

export default {
  setup(props, { emit }) {
    const { title, description } = props
    return { title, description }
  }
}

Arrays and Array Methods

• Why it matters: Critical for rendering lists with v-for.
• Essential for reactive data manipulation.
• Used in computed properties for data transformation.

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = ref([/* ... */])
const filteredItems = computed(() =>
  items.value.filter(item => item.isActive)
)
</script>

Promises and Async/Await

• Why it matters: Crucial for data fetching in setup().
• Required for async component operations.
• Essential for lifecycle hooks and watchers.

import { onMounted } from 'vue'
export default {
  async setup() {
    const data = ref(null)

    onMounted(async () => {
      data.value = await fetchData()
    })
    return { data }
  }
}

Modules and Exports

• Why it matters: Fundamental for component organization.
• Required for composables and plugins.
• Essential for maintaining clean architecture.

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

// Component.vue
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Classes and Object-Oriented Concepts

• Why it matters: Helpful for understanding component inheritance.
• Used in custom directive implementations.
• Valuable for complex state management.

class BaseComponent {
  constructor(name) {
    this.name = name
  }

  sayHello() {
    console.log(`Hello from ${this.name}`)
  }
}

class SpecialComponent extends BaseComponent {
  constructor(name, special) {
    super(name)
    this.special = special
  }
}

Optional Chaining

• Why it matters: Essential for safe property access in templates.
• Useful in computed properties.
• Helpful for handling async data states.

<template>
  <div>{{ user?.profile?.name }}</div>
</template>

<script setup>
const user = ref(null)
const userName = computed(() => user.value?.profile?.name ?? 'Guest')
</script>

Event Handling

• Why it matters:Critical for component communication.
• Required for DOM event management.
• Essential for custom event implementations.

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['custom-event'])

function handleClick() {
  emit('custom-event', { data: 'Some data' })
}
</script>

Error Handling

• Why it matters:Important for component error boundaries.
• Critical for API calls and async operations.
• Essential for maintaining app stability.

import { onErrorCaptured } from 'vue'

export default {
  setup() {
    onErrorCaptured((error, instance, info) => {
      console.error('Captured error:', error, instance, info)
      // Handle or report error
      return false // Prevent error from propagating further
    })

    async function fetchData() {
      try {
        const response = await api.getData()
        // Process data
      } catch (error) {
        console.error('Error fetching data:', error)
        // Handle error (e.g., show user-friendly message)
      }
    }

    return { fetchData }
  }
}

These code snippets demonstrate practical applications of each concept within the context of Vue 3 development, providing concrete examples for developers to understand and apply these fundamental JavaScript skills.

Practical Applications of Core JavaScript Concepts

To illustrate how these essential JavaScript concepts are used in widely used beginner scenarios, let’s explore three mini-projects: a weather app, a background color changer, and a todo app. These examples will demonstrate the practical application of the concepts we’ve discussed.

Weather App

const apiKey = 'YOUR_API_KEY';
const cityInput = document.getElementById('cityInput');
const getWeatherBtn = document.getElementById('getWeatherBtn');
const weatherInfo = document.getElementById('weatherInfo');

// Async function declaration
async function getWeather(city) {
  try {
    // Async/await for API call
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
    // Async/await for parsing JSON
    const data = await response.json();

    // Template literal for string interpolation
    // DOM manipulation
    weatherInfo.innerHTML = `
      <h2>${data.name}</h2>
      <p>Temperature: ${data.main.temp}°C</p>
      <p>Description: ${data.weather.description}</p>
    `;
  } catch (error) {
    // Error handling
    console.error('Error fetching weather data:', error);
    weatherInfo.innerHTML = '<p>Failed to fetch weather data. Please try again.</p>';
  }
}

// Event listener
getWeatherBtn.addEventListener('click', () => getWeather(cityInput.value));

Core Concepts Implemented:

• Async/Await: For handling asynchronous API calls.
• Fetch API: To retrieve weather data from an external service.
• DOM Manipulation: To update the HTML content dynamically.
• Template Literals: For easy string interpolation and multi-line strings.
• Error Handling: Using try/catch to manage potential errors during the fetch operation.

---

Background Color Changer

const colorBtn = document.getElementById('colorBtn');
const colorDisplay = document.getElementById('colorDisplay');

// Arrow function
const generateRandomColor = () => {
  // Math object usage
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  // Template literal
  return `rgb(${r}, ${g}, ${b})`;
};

// Event listener with arrow function
colorBtn.addEventListener('click', () => {
  const newColor = generateRandomColor();
  // DOM manipulation
  document.body.style.backgroundColor = newColor;
  colorDisplay.textContent = newColor;
});

Core Concepts Implemented:

• Arrow Functions: For concise function expressions.
• Math Object: To generate random RGB values for colors.
• Template Literals: For constructing the RGB string.
• Event Listeners: To handle user interactions (button clicks).
• DOM Manipulation: To change the background color and display the current color.

---

Todo App

const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

// Local storage usage
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// Arrow function
const renderTodos = () => {
  // Array method (map)
  // Template literal
  todoList.innerHTML = todos.map((todo, index) => `
    <li>
      ${todo}
      <button onclick="removeTodo(${index})">Delete</button>
    </li>
  `).join('');
};

// Event handling function
function addTodo(e) {
  e.preventDefault();
  const newTodo = todoInput.value.trim();
  if (newTodo) {
    // Array method (push)
    todos.push(newTodo);
    // Local storage
    localStorage.setItem('todos', JSON.stringify(todos));
    todoInput.value = '';
    renderTodos();
  }
}

// Array manipulation
function removeTodo(index) {
  // Array method (splice)
  todos.splice(index, 1);
  // Local storage
  localStorage.setItem('todos', JSON.stringify(todos));
  renderTodos();
}

// Event listener
todoForm.addEventListener('submit', addTodo);
renderTodos();

Core Concepts Implemented:

• Local Storage: For persisting todos across sessions.
• Array Methods: Using map for rendering and push/splice for modifying the todo list.
• Arrow Functions: For concise syntax in functions.
• Event Handling: To manage form submissions and button clicks.
• Template Literals: For generating HTML markup dynamically.

---

These mini-projects illustrate how core JavaScript concepts come together in practical applications. They showcase asynchronous programming, DOM manipulation, event handling, array methods, and more, providing a tangible context for understanding the above essential fundamental JavaScript skills before getting into Vue3.js development.