[Javascript] Prototype에 대해서 알아봅니다.

Prototype(또는 Prototype Object) 이란?

자바스크립트에서 함수를 만들면 함께 생성되는 객체가 Prototype(또는 Prototype Object)입니다.
그리고 해당 함수의 'prototype'이라는 속성으로 Prototype Object와 연결됩니다.

개인적인 생각으로는 Java에서, class 내부의 static member와 유사하다고 생각합니다.

Prototype의 목적

Prototype Object는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다.
간단한 예시를 들면 아래와 같습니다.

function Car () {}

Car.prototype.wheel = 4;
Car.prototype.sideMirror = 2;

let smallCar  = new Car ();
let bigCar = new Car ();

console.log('smallCar :: wheel count = ', smallCar.wheel);
console.log('smallCar :: side mirror count = ', smallCar.sideMirror);
console.log('bigCar :: wheel count = ', bigCar.wheel);
console.log('bigCar :: side mirror count = ', bigCar.sideMirror);
// [ 출력 ]
// smallCar :: wheel count =  4
// smallCar :: side mirror count =  2
// bigCar :: wheel count =  4
// bigCar :: side mirror count =  2

smallCar와 bigCar는 크기가 다를 뿐 둘다 자동차입니다. 자동차이기 때문에 공통적으로 가지고 있는 속성들이 있는데, 이를 smallCar와 bigCar에 각각 만들어주기보다 Car의 Prototype Object에 만들어두면 메모리에 같은 정보를 중복으로 저장시키지 않기 때문에 메모리 효율적이며, 이런 공통적인 속성의 값을 바꿀때 모든 객체의 값을 바꾸지 않고 Prototype Object에 있는 값만 바꿔주면 되어 편리합니다.

Prototype Object에 접근하기

위의 예시를 토대로 Prototype에 접근하는 방법을 알아보면,
Car.prototype 또는 smallCar.__proto__ / bigCar.__proto__ 를 이용해서 Prototype Object에 접근할 수 있습니다.
즉, {생성자함수}.prototype 또는 {객체}.__proto__ 가 Prototype Object를 가리킵니다.

참고자료

• https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript] 일반함수와 화살표 함수(arrow function)의 차이

일반함수와 화살표 함수(arrow function)의 차이에 대해서 알아봅니다.

ES6 이전에는 함수를 선언하기 위해서 함수선언식, 함수표현식 방식을 사용했습니다.
ES6에서는 새로운 함수 선언 방식으로 화살표 함수가 등장했습니다.

기존의 일반함수들은 function 키워드를 이용해서 함수를 선언하지만, 화살표 함수는 이름처럼 화살표 키워드를 이용합니다.

// 함수표현식
let function1 = function () {
  console.log('함수표현식');
}
// 함수선언식
function function2 () {
  console.log('함수선언식');
}

// 화살표 함수
let function3 = () => {
  console.log('화살표 함수');
}

일반함수와 화살표 함수는 크게 3가지 다른 점이 있습니다.

차이점 1: this

화살표 함수와 기존의 일반함수는 this가 다른 곳을 가리킵니다.
화살표 함수의 this는 바로 상위 스코프의 this와 같습니다. 하지만 기존의 일반함수는 this가 동적으로 바인딩됩니다.
일반함수의 this는 아래와 같습니다.

• 내부함수, 콜백 함수: 전역 객체(브라우저에서는 window, node에서는 global)
• 객체의 메소드: 메소드를 소유한 객체 자체
• 생성자 함수: 생성자로 생성하는 객체

차이점 2: 생성자 함수로 사용 가능 여부

일반함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 생성자 함수로 사용할 수 없습니다.
화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문입니다.

차이점 3: arguments 사용 가능 여부

일반함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있었지만, 화살표 함수에서는 arguments 변수가 전달되지 않습니다.

화살표 함수가 새로 나왔다고 해서 무조건 모든 상황에 좋은 건 아닌것 같습니다.
필요에 따라서 적절하게 함수를 만들어야겠습니다.

참고자료

• https://poiemaweb.com/es6-arrow-function
• http://webframeworks.kr/tutorials/translate/arrow-function
• https://poiemaweb.com/js-this

[Javascript] var, let, const에 대해서 알아봅니다

var, let, const는 javascript에서 변수를 선언할 때 사용하는 키워드입니다.

var

ES6 이전에는 변수를 선언할 때 var 키워드를 사용했습니다.
우선, var 키워드는 아래와 같은 특징을 가지고 있습니다.

• 변수의 중복 선언이 가능하다.
• var 키워드는 생략이 가능하다.
• block-scope이 아닌 function-scope이다.
• 호이스팅(hoisting) 당한다.

/*
 * function-scope과 block-scope의 차이
 */

// function-scope
for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log('outside i: ', i); // 출력: outside i:  10
// i를 var로 선언 했기 때문에 function-scope를 사용해서 for문에 선언한 i가 정상적으로 값을 가지고 있다.

// block-scope
for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log('outside i: ', i); // 출력: Uncaught ReferenceError: i is not defined
// i를 let으로 선언하면 block-scope을 사용해서 for문 밖에서는 사용할 수 없다.

/*
 * hoisting (호이스팅) 예시
 */

// 작성 코드
for (var i = 0; i < 10; i++) {
  console.log(i);
}

// 호이스팅 된 코드
var i
for (i = 0; i < 10; i++) {
  console.log(i);
}

위와 같은 특징을 가진 var는 변수의 사용에 대해서 다른 프로그래밍 언어와 다른 동작을 하는 이슈가 있었습니다. 잘 알고 일부러 쓰면 유용하게 사용할 수 있지만, 모르고 사용하면 스크립스 수행 간에 오류가 야기 될 수 있습니다.

오류 예 1. 한번 선언한 변수를 모르고 다시 선언 해서 다른 목적으로 사용할 때, 오류가 나지 않는다.
오류 예 2. 호이스팅으로 인해서, 변수 선언 이전에 변수를 사용하더라도 에러가 발생하지 않는다.

이로 인해서 ES6에서는 변수 선언 키워드로 새롭게 let과 const를 만들었습니다.

let

let은 아래와 같이 var와 다른 특징이 있습니다.

• 중복 선언 불가.
• block-scope (* const도 동일)
• 값의 할당 이전에 선언이 반드시 되어 있어야한다.

const

var의 단점을 피하기 위해서 let 하나만 있어도 될 것 같지만, const도 그것 만의 특징이 있습니다.

• immutable 변수를 만든다.
• 재선언, 재할당 모두 불가.
• 선언과 할당이 반드시 동시에 이뤄져야한다.

이로써, ES6에서는 변수의 선언에 사용하는 키워드가 여러개이므로 목적에 따라서 알맞게 사용하여야하겠습니다.

참고자료

• https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
• https://evan-moon.github.io/2019/06/18/javascript-let-const