ECMAScript???

Keun·2022년 6월 25일
좀 알고쓰자
0

아래에서 위로, 대각선으로 성장중.

목록 보기
14/19

ECMA SCRIPT 6 (ES6) ???

항상 공부를 할때, 개념을 알기 전에는 왜 그런것이 나왔나를 살펴보는 것이 중요하다.
그래서 역사를 배우는 것이다. 역사는 명분에 따라 움직이기 때문에..전쟁, 발명, 개척 등등, 모두 명분을 만들어서 하는 것들이다. 아무튼 저 요상한 것의 탄생의 비밀부터 시작해보자.

자바스크립트란?

개발자로 커리어 전환하면서 쓰는 나의 메인 언어. 자바스크립트는 1995년 Netscape 웹 브라우져 회사에서 웹페이지에 동적인 요소를 구현하기 위해서 만들어졌다고 한다. 많은 다른 웹 브라우저들이 자바스크립트를 사용하기 시작했고, 그 결과로, 우리가 흔히 볼 수 있는 웹 어플리케이션이 여기저기 나타났다.

ECMAScript 라는건?

이렇게 자바스크립트가 점점 다른 웹 브라우저들을 지원하기 시작하면서, 표준 규격이 필요했다. 그래서, ECMA 인터내셔널이라는 국제기구에서 "ECMAScript Standard"라고 불리는 스크립트 표준이 만들어지게 된다. 여기서, 자바스크립트와 ECMA스크립트랑 헷갈린다. 그전에 스크립트라는 공통점이 있는데, 스크립트 언어에 대해서 이번 기회에 좀 파악 해야 할 것 같다.

Script 언어란?

스크립트 언어라는 것은, 독립된 시스템에서 작동하도로고 특별히 설계된 프로그래밍 언어라고 한다. 여기서 "독립된"이라는 말이 정말 중요한 것 같다. 다시 말하자면, 프로그램을 쓰는 사용자가, 의도에 따라서 동작을 시킬 수 있게 하는 것이다. 스크립트 언어를 이용한 명령어의 실행이, 시스템 내부에서 어떤 원리로 동작하는지 전혀 상관없이, 사용자의 의도에 따라 제어 가능하다는 뜻이다.

그래서 어떻게 이해하면 되는건가요?

Java Script -> 1996년생.
ECMA Script -> 1997년생.

"Java Script는 ECMA Script의 사양을 준수하는 범용 스크립팅 언어이다."

Java Script는 ECMA Script와 BOM (Browser Object Model) 와 DOM (Document Object Model) 이라는 1개의 코어와, 2개의 모델로 이루어져 있다.

ES6 이건?

ECMA SCRIPT 6라는 것이고, ECMA-262 표준의 제 6판이라는 뜻이다. 이것은 ECMA Script 사양의 주요 변경 사항 및 개선 사항을 말해준다. 동의어로는 ES6, ES2015, ECMAScript 2015 라고 한다.
ECMAScript 는 국립국어원 표준어 제정하는곳이라고 생각하면 되는 것이고, 매년 해의 이름을 딴 ECMAScript가 새로 발표된다.
현재 제일 최신 버전은 2021년 6월에 출시한 ECMAScript 20201(ES2021), 12th Edition 이다.
그런데 왜 ES6를 언급을 많이할까? 왜 내눈에 많이 띌까? 들릴까? 왜?

ES6 는 굉장히 많은 변화가 있던 업데이트다. 구버전 웹브라우저 (Internet Explorer)및 레거시 코드와의 호환성 문제가 심각할 정도로 대격변이 일어났고, 호환성 문제가 엄청나게 발생했다. 그래서 ES6 이후에 표준으로 생긴 기능들이 많기 때문에 중요하게 다루어 진다고 한다.
즉, 이시기에 새로 추가된 많은 문법과 개념이 생겨났고, 그 이전의 표준에는 설명이 없다. 그렇기 때문에 중요하다는 말이다.
ECMAScript 6.

주요 기능 업데이트 부분.

  1. Class
  2. let & const
  3. Arrow Function
  4. Module
  5. Promise
  6. 비구조화 할당 지원
  7. 객체 리터럴
  8. Template literals
  9. 매개변수 기본값

물론 구글링해서 중요하다고 보는 것들로 구성을 했고, 이것을 기반으로 주요 기능이라고 말하는 것이다.

Class

사실 자바 공부 할때부터 이상하게 별거 아닌것 같은 개념인데 클래스, 프로토타입, 인스턴스 등등 이름이 어려워서 그런지 좀 어렵게 느껴진다. 그래서 구글링을 한 2시간 동안 해보면서 이해하려고 공부를 해보았다.

그림에 나와있는 메커니즘으로 ES5프로토타입에서 ES6 클래스의 변화를 볼 수 있다.

-ES5

var Person = (function () {
  // Constructor
  function Person(name) {
    this._name = name;
  }

  // public method
  Person.prototype.sayHi = function () {
    console.log("Hi! " + this._name);
  };

  // return constructor
  return Person;
})();

// 인스턴스 생성
var me = new Person("Lee");
me.sayHi(); // Hi! Lee.

console.log(me instanceof Person); // true

-ES6

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

  sayHi() {
    console.log(`Hi! ${this._name}`);
  }
}

// 인스턴스 생성
const me = new Person("Lee");
me.sayHi(); // Hi! Lee

console.log(me instanceof Person); // true

Person 객체가 생성되면 prototype과 생성자 함수가 생기고 이를 기반으로 인스턴스를 new 예약어로 생성 가능하며 인스턴스는 proto 로 다시 Person.prototype 을 가르키게 된다.

이건 한번 제대로 다시 공부해야할것같다. 쉽지않다.

let & const

이걸 모르면 지금까지 타입스크립트 쓴 의미도 사라지고, 프로젝트 할 때 진짜 생각없이 해본 것이다. 써봤던 사람은 적어도 왜 썼는지 알아야한다.

let과 const는 블록 스코프, var는 함수 스코프.

셋다 변수 선언 할 때 쓰이는 것이긴 한데,
1. var
문제가 많다. 초보자가 좋아할것이다. 함수블럭만을 스코프로 인정하여 전역변수 남용이 발생한다. 변수 선언이 중복적이든 그 이전에 참조를 하든 다 가능하다.
그렇기 때문에 let과 const가 만들어진것이다.

  1. let & const
    블록스코프로 사용한다. 변수 중복 선언이 안된다!
    let은 변수에 재할당이 가능하지만, const는 변수 재선언, 변수 재할당 모두 불가능.
    변수 선언 이전에 var같이 참조 이런게 절대 안된다. 왜냐하면 호이스팅 동작은 var와 같지만, 선언 → 초기화 → 할당의 기본 주기중 선언과 초기화 사이에 TDZ(Temporal Dead Zone)이 추가되며 선언 사각지대를 형성하기 때문에 선언 이전 참조시 에러를 발생시키기 때문이다.

나는 그래서 그냥 조용히 const만 쓴다. 이게 개발자로써 맞는것일지는 모르겠지만, 그냥 꽉 묶어놔야 에러도 적게 발생할 것이고, 일단 내가 선언한 변수, 메모리에 할당한 값이 막 바뀐다고 생각해보자. 내가 웹을 만드는데 가뜩이나 보면 머리아픈 상황에 변수까지 바뀐다? 와우...

Arrow Function

ES6 이전 -> 내가 제일 즐겨썼고, 기본적인 형태

function foo() {
  console.log("foo");
}

ES6 이후 -> 내가 요즘 기본적으로 쓰는 형태, 자바스크립트 하면서 제일 흔하게 쓴다.

const foo = () => {
  console.log("foo");
}

일반함수와 화살표함수의 차이 -> 일반함수는 자신만의 데이터를 가질수있지만, 화살표함수는 안된다. 

function fun(arg){
    console.log(arg)
    return arg
}
fun(1) //1이 출력됩니다.

let fun2 = (arg)=>{
    console.log(arg)
    return arg
}
fun2(1)   //1이 출력됩니다. 
function fun(arg){
    this.name = arg
}
new fun(1234).name  //1234가 출력됩니다.

let fun2 = (arg)=>{  //new 연산자를 통한 생성은 불가능
    this.name = arg
}
new fun2(1234).name  //에러발생!

이런것까지는 잘...몰랐다..

Module

export, import를 통해 나누어서 개발된 파일간의 관계를 유지해준다.
export를 파일에서 써주고, 다른 파일에서 import를 해주면 export한 파일을 참조한다.

* test.js
export const test_number = 1234

* test2.js
import * as testCode from "./test.js"

console.log(testCode.test_number)  //1234

Promise

  • 비동기 프로세스 진행시, 순서를 보장할때 사용한다. AJAX~
let prom = (num) => {
    return new Promise((res, fail) => {
        if (num > 4) {
            res(num)  //성공이면,
        } else {
            fail("err")  //에러발생
        }
    })
}

prom(5)
    .then(val => console.log(val)) // 5 출력
    .catch(err => console.log(err))

나중에는 async await 나왔슴!

비구조화 할당

이거는 내 지인들이랑 내가 맨날 말할때마다 명칭이 바뀐다.
어떤 사람은 구조분해할당, 어떤사람은 분해구조 할당, 어떤사람은 구조화 분해 할당 기타등등
나는 깔끔하게 비구조화할당으로 말할것이다. 앞으로.

한마디로 하자면, 구조가 없는 객체를 알맞게 처리하도록 돕는 기능이다.

//일반적인 사용 방법
let arr = ['1', '2', '3']
let [one, two, three] = arr
console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

let [, , wow] = arr  //첫번째, 두번째를 빈값으로 선언
console.log(wow)  //3 


//////////////////////////////////////////////////
//값 할당(서로 바꾸기)
let num = 123;  
let text = 'hi'; 
[num, text] = [text, num]
console.log(num, text)


//////////////////////////////////////////////////
//객체의 값에 대해 적용
let data = {width : 100, height : 200}
let {width, height} = data
console.log(width)  //100
console.log(height)  //200

//////////////////////////////////////////////////
//다양한 변환
let param = {
    jsn : {
        name : 'hello',
        number : 1543
    },
    arr : [
        {arr_name : 'world', index : 4567},
        {arr_name : 'world record', index : 5513},
    ],
    param_text : 'im param_text'
}

let {jsn : {name : re_name}, arr : [{arr_name : new_name}], param_text} = param

//re_name은 param.jsn.name을 변환하여 별칭을 준 값
//new_name은 param.arr배열의 첫번째 arr_name을 변환하여 별칭을 준 값
//param_text는 param.param_text의 값을 변수명 그대로 사용한 값(별칭부여X)
console.log(re_name, new_name , param_text)

객체 리터럴

객체를 생성할때 동적이고 간결하게 표현 가능하다고 한다.
한번도 써본적이없는데?,,,,사용해봐야겠다.

let x = 1,
  y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }
const obj = {
  name: "Lee",
  // 메소드 축약 표현
  sayHi() {
    // sayHi: function() { 과 같은 표현
    console.log("Hi! " + this.name);
  },
};

obj.sayHi(); // Hi! Lee

Template literals

이건 많이 써봤던 것이다. 간단히 말해서 백틱 ( ) 이것을 쓰고 ${} 를 안에다가 넣으면 긴글을 단순하게 표현 가능하게 해주는 기능이다. 

const first = "Samuel";
const last = "slow";
console.log(`제 이름은 ${first} ${last} 입니다.`);
console.log(`
	긴글을 아무리 써도 단지 개행을 자연스럽게 해주면? // 원래는 + "\n" + 를 해주지만
	따로 \n을 해주지 않더라도 출력시 개행이 되지!
	`);

매개변수 기본값

이건 진짜 예상치 못한 기능이다. 그런데 몇번 써봤던 것 같기도 하다. 일단 그냥 예시값? 정도로 들었던 것 같은데, 참 신기하고 굉장히 기본적이고 쉬운 문법이다. 이게 이때 만들어진거구나..

function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5)); // 5

함수의 매개변수에 기본값을 할당하여, 해당 자리에 적절한 값이 없을때 기본으로 들어가게 하는 값이라고 한다.

느낀점

구글링해보면 ES6가 굉장히 많이 나온다. 어딜가나 보인다. 그런데 보기만했지 이것에대해서 진지하게 찾아보진 않았던 것 같다. 그런데 오늘 해냈다는 것에서 뭔가 뿌듯하다.
그런데 찾아보면서 오히려 부족한게 계속 나오는 것 같은데, 찾아보고 정리하면서 발전하는 개발자가 되야할 것이다.

참고:

https://en.wikipedia.org/wiki/ECMAScript#:~:text=11th%20Edition%20%E2%80%93%20ECMAScript%202020,-The%2011th%20edition
https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html
https://takeuu.tistory.com/93
https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

profile
Keun
이전 포스트

React Hooks 정리.

다음 포스트

useCallback vs. useMemo

0개의 댓글