WIL

Wrap-up Retrospective: What I learned

자바스크립트 기초적인 문법 학습

월~목: 강의를 수강하며 JS만이 가지고 있는 독특한 문법에 대해 학습하였다. 특히, 콜백함수, 실행 컨텍스트, 호이스팅, this 바인딩, 클로져 등과 같은 새로운 개념들이 많아 과제를 수행하면서 실전에 적용해보는 연습을 하였다.

금~토: JS 기본 문법을 다진 후, 프로그래머스 알고리즘 문제를 페어 프로그래밍 형식으로 풀어보았다. 다양한 메서드들을 사용하였는데, 아직 익숙하지 않은 메서드들이 많아서 MDN 문서를 읽어가면서 체득하는 시간을 가졌다.

특강

'Pull Request로 협업하기'. 거의 협업의 신세계를 맛본듯한 특강이었다... 매번 contributor로 초대해서 branch만 나눠서 협업을 했었는데 실제 현업에서는 이런 식으로 하는 거라니... 머리에 뭔가 맞은 기분이었다...!!

'TIL/WIL'. TIL로 쓰지말라는 건 다 쓰고 있었던 나. 암튼 앞으로는 빠르게 지식 습득하고 기록해두는 건 Notion에, "진짜" TIL과 정리된 글들만을 위주로 블로그에 올리려고 한다!

'DevCra의 CIO 강창민 코치님 그룹 면담'. C-level은 CTO, CIO 같은 임원급 개발자를 말한다고 한다. 그리고 페어 프로그래밍은 Navigator와 Driver가 서로 핑퐁을 하는 것이 목적이 아닌, 서로의 역할에 충실하게 프로그래밍을 해나가는 것이라고 하셨다. Navigator는 자기 주도적 학습을 베이스로 Driver에게 자신이 알고 있는 지식들을 제대로 전달하는 코치 역할이고, Driver는 Navigator의 가이드에 따라 코드를 완성해나가는 역할이다. 개발자님은 자기 주도적 학습을 굉장히 강조하셨는데 특히 혼자 스스로 공부하며 고민을 해본 경험이 중요하다고 하셨다. 내가 특히 궁금했던 것이 항해99를 하면서 플러스로 더 가져갈 수 있는 방법이 뭔지였는데 그에 대한 스페셜리티로 자기 주도학습을 다시금 강조해주셨다. 특히, 현업에서의 사수는 기술적인 것을 알려주는 사람이 아닌, 상황에 대한 브리핑, 인수인계를 해주는 사람이기 때문에 결국 기술적인 부분은 혼자 학습해야하는 것이다. 개발자는 모르는 것을 digging하는 사람!!

The goal for the next week

프로그래머스 알고리즘 문제를 더 풀어보려고 한다.

JS methods 중에서 써봤거나, 자주 사용한다는 메서드들만 추려서 따로 정리해보며 리뷰해보려 한다.

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.

1. 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

2. 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 = () => { }

3. 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!"

4. 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;
  }
}

5. 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

6. 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 }