Skip to main content
HashnodeDongjun's BlogDongjun's Blog

Command Palette

Search for a command to run...

es2015 요약

Published
•6 min read
권
권동준

ES2015

ES2015는 Javascript의 버전이다. Ecma라는 단체에서 기존의 결점을 보완한 표준 자바스크립트 버전을 매년 발표한다. ES는 EcamaScript의 줄임말이다.

let

  • 블록 스코프 변수(block scoped variable)이다.
  • var가 함수 스코프 변수 이라는 점에서 대비된다.
  • 블록 단위안에서도 hoisting 되지 않는다.
  • 같은 스코프에서 재선언이 불가능하다.

ex:

  1. 블록 스코프 변수 / 함수 스코프 변수 예제
    if(true) {
    var a = 'a';
    let b = 'b';
    console.log('a => ', a); // a
    console.log('b => ', b); // b
}
console.log('a => ', a); // a
console.log('b => ', b); // b is not defined
  2. hoisting 예제
    if(true) {
    console.log('a => ', a); // undefined
    console.log('b => ', b); // b is not defined
    var a = 'a';
    let b = 'b';
}
  3. 같은 스코프에서 재선언 불가능 예제
    var a = 'a';  // a = 'a'
var a = 'aa'; // a = 'aa'
let b = 'b';  // b = 'b'
let b = 'bb'; // Identifier 'b' has already been declared

const

  • 읽기 전용 상수
  • 객체를 할당하면 참조값이 상수에 할당되므로 객체의 프로퍼티는 변경 가능
  • const 또한 block scoping을 따르며 hoisting 되지 않는다.

ex:

  1. 읽기 전용 예제
    const a = 'a'; // a = 'a'
a = 'b'        // Assignment to constant variable.
  2. 프로퍼티 변경 예제
    const a = {name: 'a'};
console.log('a.name => ', a.name); // a
a.name = 'b';
console.log('a.name => ', a.name); // b

Set - Collection

  • Set은 유일한 값들로 구성된 Collection
  • add한 순서대로 원소를 가지고 있다.
  • 중복된 값은 자동 삭제된다.

ex:

const a = new Set();
a.add(1).add(2).add(1); // Set {1, 2}
console.log('a size: ', a.size); // 2
a.delete(2); // Set {1}
a.forEach(f => console.log(f)); // 1

WeakSet - Collection

  • weakly하게 값을 참조한다는 뜻인데 WeakSet이 갖는 객체의 참조값이 다른곳에서 참조되지 않으면 객체는 garbage collect 대상
  • 객체 참조값만 가진다.
  • iterable 객체가 아니다.
  • .has(), .get(), .set(), .delete()만 지원

ex:

const ws = new WeakSet();
const value = {a: 'a'};
ws.add(value).add({b: 'moon'});
console.log(ws); // WeakSet {Object {b: "moon"}, Object {a: "a"}}
/* after the garbage Collection has run */
console.log(ws); // WeakSet {Object {a: "a"}}

Map - Collection

  • key-value로 이루어진 Collection
  • iterable 객체
  • 삽입한 순서대로 원소를 가진다.

ex:

const map = new Map();
const obj = {a: 2};
map.set(obj, 2).set(1, 1).set(1, 2);
console.log('map has 1: ', map.has(1)); // map has 1:  true
console.log('value of 1: ', map.get(1)); // value of 1: 2
map.delete(1);
console.log('map has 1: ', map.has(1)); // map has 1: false

WeakMap - Collection

  • WeakSet 과 비슷한 개념으WeakMap 의 key 가 약하게 참조된다.
  • key는 객체참조 값만을가진다.
  • iterable 객체가 아니다.

ex:

const ws = new WeakMap();
const obj = {a: 'a'};
ws.set(obj, 1).set({b: 2}, 2);
console.log(ws); // WeakMap {Object {a: "a"} => 1, Object {b: 2} => 2}
/* after the garbage Collection has run */
console.log(ws); // WeakMap {Object {a: "a"} => 1}

arrow function

  • 보다 간결한 구문을 지닌 익명함수이다.
  • 자기 고유의 this 를 갖지 않고, 외부 스코프의 this 를 그대로 가진다 (lexical binding)

ex:

const func = (x, y) => { return x + y; };
/* json을 리턴할 때에는 괄호를 넣어준다. */
const func2 = () => ({ foo: 1 });

class

  • 기존모델에 단지 새롭게 추가된 구문일 뿐,전혀 새로운 객체지향 모델이 아니다.
  • 생성자나 상속의 좀 더 간단하고 명확한 구문이 제공된다.
  • 생성자는 constructor 로 표현된다.
  • 클래스 바디는 중괄호 안에 두고 여기에 메소드를 function 키워드 없이 정의한다.
  • 메소드는 prototype 프로퍼티에 추가된다.
  • class는 프로퍼티와 메소드로 이루어져 있다.
  • class 는 extends 구문으로 다른 class 를 상속한다.
  • 자식 클래스에 constructor 가 없으면 부모의 그것이 자동으로 호출된다.
  • 생성자에서 super 키워드를 통해 상속 계층을 구현한다. this 보다 먼저 사용하지 않으면 예외가 발생한다.
  • static 키워드를 통해 정적 메소드를 만들 수 있다. 이 메소드는 클래스 prototype 프로퍼티가 아닌 클래스 자체 메소드 다. (유틀리티 함수 작성에 쓰인다.)

ex:

  1. 일반 예제
    class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.sqrt(dx*dx + dy*dy);
    }
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2)); // 7.0710678118654755
  2. 상속
    class Cat {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Lion extends Cat {
    speak() {
        super.speak();
        console.log(this.name + ' roars.');
    }
}
const lion = new Lion('happy');
lion.speak();

Template string

  • 백틱(Backtick)을 이용해 문자열을 만드는 새로운 방법
  • 코드의 가독성을 높여준다.
  • ${} 표현식을 사용하여 변수, 함수, 연산식 등을 표현 할 수 있다.

ex:

const name = 'dowon';
const myStr = `Hi ${name}. Have a great day!`;
console.log(myStr); // Hi dowon. Have a great day!
console.log("string text line 1\n"+
"string text line 2");
/* "string text line 1
 string text line 2" */
console.log(`string text line 1
string text line 2`);
/* "string text line 1
 string text line 2" */
const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // Fifteen is 15 and not 20.
const a = () => "test";
console.log(`a: => ${a()}`);

for~of 구문

  • for~in 문은 객체의 열거가능한 모든 속성에 대해 반복했다면, for ~ of 문은 컬렉션의 요소를 반복.
  • forEach(), for in 구문과 달리, break, continue, 그리고 return 구문과 함께 사용할 수 있습니다.
  • for~of 루프 구문은 data를 순회하기 위한 구문
  • 배열 뿐만 아니라 Collection 객체, DOM NodeList 등등 을 다를수 있다.

ex)

for (let chr of "12") {
console.log(chr);
}
//1
//2
let iterable = [10, 20, 30];
for (let value of iterable) {
    console.log(value);
}
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
    console.log(value);
}
// 0
// 255
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
    console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
for (let [key, value] of iterable) {
    console.log(value);
}
// 1
// 2
// 3
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
    console.log(value);
}
// 1
// 2
// 3

Iterator

  • Iterator 는 새로운 문법이나 built-in 이 아니라 프로토콜(약속)이다.
  • 간단한 약속만 지키면 누구나 만들수 있다.
  • Set Map Array 등이 Iterator 객체이다.
  • Symbol.iterator 를 Key 로 갖는 속성이 반드시 존재해야 한다.
  • 다음 규칙에 따라 next() 메서드를 구현한 객체를 iterator 라고 한다: ```bash 아래의 두 속성을 가지는 객체를 리턴하며 인자가 없는 함수:
  • done (boolean)
    • iterator 가 순회를 모두 마쳤을 경우 true
    • iterator 가 순회할 다음 value 가 존재할 경우 false
  • value - iterator 에 의해 리턴될 값. done 이 true 일 경우 생략 가능 ```

ex:

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};
for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

Rest Parameter 와 Default Parameter

이건 코드로 확인하는게 가장 편하다.

  1. rest parameter

     // 사용법은 아래와 같다.
 function(a, b, ...theArgs) {
    // ...
 }
 // ex
 function restParam(...arg) {
     for(let val of arg) console.log(val);
 }
 restParam(1,2,3,4,5);
 // es2
 function restParam2(first, ...arg) {
     console.log(first); // 시작
     for(let val of arg) console.log(val);
     // 1
     // 2
     // 3
     // 4
     // 5
 }
 restParam('시작', 1,2,3,4,5);

  2. Default Parameter

    • parameter 값이 없을 시 Default로 값을 넣어준다.
      function defaultParam(a = 'test', b = 'done') {
  console.log(`a: ${a}`);
  console.log(`b: ${b}`);
}
defaultParam();
//

기타

const obj = {a:1, b:2};
const {a,b} = obj;
console.log(a,b); // 12
const a = [1,2,3];
const aCopy = [...a];
console.log(aCopy);
#es2015
1 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

내 문서를 읽는 작은 에이전트를 다시 만들며

내 사이트 dongjun.win에 붙어 있던 작은 AI 어시스턴트를 최근에 다시 손봤다. 방문자가 AI 어시스턴트 페이지에서 질문을 던지면, 내 이력서와 프로젝트 문서, 강점 진단, 리더십 리포트, 버크만(Birkman) 리포트를 바탕으로 답하는 기능이다. 겉으로는 단순하다. "최근 프로젝트는?", "어떤 기술을 쓰나요?", "일하는 방식은 어떤가요?" 같

May 27, 202610 min read

내 실생활에 AI 더하기 (1) — 사진, 영상 하이라이트 만들기

폰 사진 앱을 켜다가 여행 영상 폴더 앞에서 매번 멈춘다. 문제는 "안 본다"가 아니라 "안 보게 된다"였다. 분명히 좋아서 찍었는데, 시간이 지나니 불필요한 컷이 너무 많아서 다시 들어가기가 부담스러운 폴더가 된다. 핵심 장면만 추린 2~3분짜리 메모리 필름이 있다면 한 번에 그 시간을 다시 만날 수 있을 것 같았다. 업무에서는 AI를 매일 많이 쓴다.

May 13, 202611 min read3

법률 AI 검색 실험기 (12) — Lane-based Retrieval 설계와 전체 회고

법률 QA 검색기를 만들면서 거쳐 온 설계 여정의 마지막 이야기다. 벡터 검색의 한계를 마주한 순간부터, 임베딩 선택, selector, rewriter, graph, source-router, 그리고 lane-based retrieval까지. 이 글에서는 최종 단계인 lane 구조 설계를 정리하고, 시리즈 전체를 돌아본다. 검색기 운영 설계의 최종 단계 query-prep 단계를 마무리하면서 자연스럽게 다음 질문이 떠올랐다. prerewri...

May 11, 20266 min read7

법률 AI 검색 실험기 (11) — 오답 분석: 법률 RAG는 왜 자신 있게 틀리는가

틀린 답 하나가 열어준 토끼굴 "중소기업 특별세액감면이 최저한세 적용 대상인가요?" 단순해 보이는 질문이었다. 법령 QA 시스템은 자신 있게 답했다. "조세특례제한법 제132조가 해당 감면 조문을 열거하므로, 최저한세 적용 대상입니다." 조문 번호도 있고, 논리 구조도 있고, 결론도 명확했다. 문제는 하나뿐이었다. 틀렸다는 것. 실제로 제132조의 열거 조문과 해당 감면 조문의 관계를 확인하면, 시스템이 내린 결론과 실제 적용이 달랐다. 세무 ...

May 5, 20264 min read14
D

Dongjun's Blog

28 posts