프론트엔드 면접 핸드북 - 자바스크립트(3)

// ES5 Function Constructor
function Person(name) {
  this.name = name;
}

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

// ES5 Function Constructor
function Student(name, studentId) {
  // Call constructor of superclass to initialize superclass-derived members.
  Person.call(this, name);

  // Initialize subclass's own members.
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// ES6 Class
class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

const Person = function (firstName) {
  this.firstName = firstName;

  // 일반 함수
  this.sayName1 = function () {
    console.log(this.firstName);
  };

  // 화살표 함수
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};

const john = new Person("John");
const dave = new Person("Dave");

john.sayName1(); // John

// 일반 함수의 this는 바뀔 수 있다. 하지만 화살표 함수에서는 바뀌지 않는다.
john.sayName1.call(dave); // Dave (call로 인해 this는 이제 dave 객체다)
john.sayName2.call(dave); // John (call을 사용했지만 this는 여전히 john 객체다)

// apply도 call을 사용한 예제와 마찬가지로 바뀌지 않는다
john.sayName1.apply(dave); // Dave
john.sayName2.apply(dave); // John

// bind를 사용해도 마찬가지로 바뀌지 않는다
john.sayName1.bind(dave)(); // Dave
john.sayName2.bind(dave)(); // John

var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined
// sayNameFromWindow1 변수는 전역 스쿠프에 속하며, 전역 스쿠프에서 this는 window 객체다.

var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John. this는 변하지 않는다.

render() {
   return(
     <ChildComponent onChange={ this.handleChange.bind(this) } />
   )
}

const names = ["irish", "daisy", "anna"];

const transformNamesToUppercase = function (names) {
  const results = [];
  for (let i = 0; i < names.length; i++) {
    results.push(names[i].toUpperCase());
  }
  return results;
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']

const transformNamesToUppercase = function (names) {
  return names.map((name) => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']

// 예제 배열 선언
const foo = ["one", "two", "three"];

const [one, two, three] = foo; // 배열 내부 순서대로 변수에 할당된다.
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

// 변수 교환
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

// 예제 변수 선언
const o = { p: 42, q: true };
const { p, q } = o; // 객체의 필드 이름을 그대로 사용해야 한다

console.log(p); // 42
console.log(q); // true

const { p: pValue, q: qValue } = o; // 새로운 변수명을 제공할 수도 있다.
console.log(pValue); // 42
console.log(qValue); // true

var person = { name: "Tyler", age: 28 };
console.log(
  "Hi, my name is " + person.name + " and I am " + person.age + " years old!"
);
// 'Hi, my name is Tyler and I am 28 years old!'

const person = { name: "Tyler", age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'

console.log("This is line one.\nThis is line two.");
// This is line one.
// This is line two.

console.log("This is line one.\n" + "This is line two.");
// This is line one.
// This is line two.

console.log(`This is line one.
    This is line two.`);
// This is line one.
// This is line two.

const person = { name: "Tyler", age: 28 };
document.body.innerHTML = `
      <div>
        <p>Name: ${person.name}</p>
        <p>Name: ${person.age}</p>
      </div>
    `;

function curry(fn) {
  // 커링에는 재귀 패턴을 사용한다.
  if (fn.length === 0) {
    // Function.prototype.length는 파라미터의 수
    return fn;
  }

  // 커링 로직 재귀 함수
  // depth = 분리할 갯수(최대 재귀 호출 횟수), args = 현재까지 누적된 파라미터 배열
  function _curried(depth, args) {
    return function (newArgument) {
      if (depth - 1 === 0) {
        // 필요한 파라미터가 모두 쌓였다면 처음 제공된 함수 호출
        return fn(...args, newArgument);
      }

      // 파라미터가 전부 쌓이지 않았다면, 커링 로직을 다시 호출한다.
      return _curried(depth - 1, [...args, newArgument]);
    };
  }

  return _curried(fn.length, []); //
}

function add(a, b) {
  // add는 2개의 파라미터가 필요하다.
  return a + b;
}

var curriedAdd = curry(add); // add 함수를 커링시킨다.
var addFive = curriedAdd(5); // 첫번째 파라미터에 5가 들어간 새로운 함수를 만든다.

var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

function putDookieInAnyArray(arr) {
  return [...arr, "dookie"];
}

const result = putDookieInAnyArray(["I", "really", "don't", "like"]); // ["I", "really", "don't", "like", "dookie"]

const person = {
  name: "Todd",
  age: 29,
};

const copyOfTodd = { ...person };

function addFiveToABunchOfNumbers(...numbers) {
  return numbers.map((x) => x + 5);
}

const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]

const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

const { e, f, ...others } = {
  e: 1,
  f: 2,
  g: 3,
  h: 4,
}; // e: 1, f: 2, others: { g: 3, h: 4 }

function foo() {
  // 모든 변수는 이 함수 안에서만 접근 가능하다.
  var bar = "bar";
  let baz = "baz";
  const qux = "qux";

  console.log(bar); // bar
  console.log(baz); // baz
  console.log(qux); // qux
}

console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

if (true) {
  var bar = "bar";
  let baz = "baz";
  const qux = "qux";
}

// var 키워드로 선언된 변수는 함수 스쿠프 어디에서든 접근 가능하다.
console.log(bar); // bar

// let, const 키워드로 선언된 변수를 중괄호 바깥에서는 접근 불가능하다.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

console.log(foo); // undefined
var foo = "foo";

console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
let baz = "baz";

console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
const bar = "bar";

var foo = "foo";
var foo = "bar";
console.log(foo); // "bar"

let baz = "baz";
let baz = "qux"; // Uncaught SyntaxError: Identifier 'baz' has already been declared

let foo = "foo";
foo = "bar";

// 아래 코드는 오류를 발생시킨다.
const baz = "baz";
baz = "qux";