WIL

Wrap-up Retrospective: What I learned

• JavaScript Basic Syntax Learning

  • Mon-Thurs: Learned about the unique grammar of JavaScript while taking lectures. Practiced applying new concepts such as callback functions, execution context, hoisting, this binding, and closures in real-world assignments.

  • Fri-Sat: After mastering the basic syntax of JS, solved algorithm problems on programmers.co.kr in pair programming format. Used various methods, but still unfamiliar with some of them, so spent time reading MDN documentation to better understand.

• Special Lectures

  • 'Collaborating with Pull Requests': It felt like experiencing a whole new world of collaboration. We used to collaborate by inviting each other as contributors and creating branches, but real-world collaboration works like this... It felt like something clicked in my mind...!!

  • 'TIL/WIL': I've been using TIL to document my learning progress, despite being told not to use it. Anyway, from now on, I will quickly acquire knowledge and document it in Notion, and only upload "real" TIL and organized posts on my blog!

  • 'Group Interview with CIO Coach Kang Changmin from DevCra':

    • C-level refers to executives such as CTO and CIO.

    • A pair programming is not about ping-ponging between Navigator and Driver, but about faithfully fulfilling each other's roles in programming. Navigator plays the role of a coach who conveys the knowledge they have properly to the Driver based on self-directed learning, and the Driver plays the role of completing the code according to the guidance of the Navigator. The coach emphasized self-directed learning, especially the importance of solving problems and thinking independently while studying alone.

    • I was particularly curious about how to make the most of my experience in HANGHAE 99 Bootcamp, and he emphasized self-directed learning again as a specialty. In particular, the mentor in the real world is not someone who teaches technical aspects, but someone who briefs and hands over the situation, so ultimately, you have to learn technical aspects on your own.

    • A developer is a person who digs into what they don't know!!

The goal for the next week

• Problem-solving on Programmers coding test website

• I will review and summarize the JavaScript methods that I have used or frequently use while solving algorithm problems

---

What is JavaScript ES?

JavaScript ES (ECMAScript) refers to the standard specification for scripting languages that JavaScript follows. ECMAScript is a language specification that was created by Ecma International, a non-profit organization based in Switzerland.

JavaScript is an implementation of ECMAScript and the current version of JavaScript is ECMAScript 2022 (ES2022). ES2022 includes new features like class fields, private methods, and dynamic import, among others. Previous versions of ECMAScript include ES2015 (ES6), ES2016 (ES7), ES2017 (ES8), ES2018 (ES9), ES2019 (ES10), ES2020 (ES11), ES2021 (ES12), and ES2022 (ES13).

The ES specifications are important because they provide a standard that web developers can use to ensure compatibility across different web browsers and platforms. By following the ECMAScript standard, developers can write code that is more consistent, maintainable, and portable.

ECMAScript Scope

Among other things, ECMAScript defines (from MDN website):

• Language syntax (parsing rules, keywords, control flow, object literal initialization, ...)

• Error handling mechanisms (throw, try...catch, ability to create user-defined Error types)

• Types (boolean, number, string, function, object, ...)

• A prototype-based inheritance mechanism

• Built-in objects and functions, including JSON, Math, Array methods, parseInt, decodeURI, etc.

• Strict mode

• A module system

• Basic memory model

ES5 vs. ES6

Some key differences between ES5 and ES6 in JavaScript.

Variable Declaration

// ES5 - function-level scope
var age = 12; 
var age = 22;

// ES6 
let age; // block-level scope and can be reassigned
const birthday; // block-level scope and cannot be reassigned

Arrow Function

provide a shorter syntax for writing function expressions. They also have lexical scoping for "this", which can simplify the code in some cases.

// ES5
function funcName() { }
let funcName = function () { }

// ES6
let funcName = () => { }

Default Parameter Values

simplify code and improve readability

// ES5
function sayHello(name) {
  name = name || "World";
  console.log("Hello, " + name + "!");
}
sayHello(); // "Hello, World!"
sayHello("John"); // "Hello, John!"

// ES6
function sayHello(name = "World") { // default value
  console.log("Hello, " + name + "!");
}
sayHello(); // "Hello, World!"
sayHello("John"); // "Hello, John!"

Classes

introduced OOP in JS

// ES5
function Animal(name) {
  this.name = name;
}
Animal.prototype.getName = function() {
  return this.name;
}

// ES6
class Animal {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

Modules

good to reuse code across files

// ES6
// math.js
export function add(x, y) {
  return x + y;
}
export function subtract(x, y) {
  return x - y;
}

// app.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // outputs 3
console.log(subtract(3, 1)); // outputs 2

Iterators and Generators

easier to work with collections of data like arrays and sets

// ES6
let mySet = new Set([1, 2, 3]);
let iterator = mySet.values();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

function* countDown(from) { // * meaning this function is generator
  while (from > 0) {
    yield from; // Generator function starts executing from the beginning until it reaches the first yield keyword, where it stops
    from--;
  }
}
let generator = countDown(5);
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: undefined, done: true }