[ECMAScript] Javascript ES6 기초 문법 정리

ES6 기초 문법 정리

1. Class

class Car {
  constructor(name) {
    this.brand = name;
}
present() {
  return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();

Brand라는 변수에 대해서는 따로 정의하지 않아도 적용이 된다.Class의 constructor 생성자로 파라미터를 받고 클래스를 초기화 시키는 구조.

따라서 brand를 호출하면 생성자로 초기화 했던 Ford라는 string이 출력이 된다.

class Car {
  constructor(name) {
    this.brand = name;
  }
 
  present() {
    return 'I have a ' + this.brand;
  }
}
 
class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  } 
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

위의 코드 구조를 보면 Ford, Mustang이라는 2개의 파라미터가 Model로 전달되고, super를 통해서 부모의 Car 생성자에 Ford가 전달된다. Car에서는 brand를 Ford로 초기화 했고, Model에서는 model을 Mustang으로 초기화 한 것을 알 수 있다.ES6에서는 상속 구조도 허용이된다. 자바와 같은 super()를 사용함으로 부모의 생성자를 호출한다.

Mycar.show()함수에서 this.present()를 사용하는데, 이는 부모의 present()함수를 호출하는 것으로 I Have a Ford가 출력이 되며, 그 뒤에 It is a Mustang이라는 문자열이 출력되는 구조로 해석할 수 있다.

2. Arrow Function

hello = function() {
  return "Hello World!";
}
hello = () => {
  return "Hello World!";
}
hello = () => "Hello World!";

Function()이라는 불필요한 문자열을 줄이기 위해서 사용한다. 위의 코드는 다 같은 결과를 출력한다.

자주 보이는 패턴으로 function을 정의할 때 불필요한 문자를 제거하고 직관적으로 알 수 있게 끔 화살표 함수를 사용하게 된다.

hello = (val) => "Hello " + val;
hello = val => "Hello " + val;

파라미터가 들어간 화살표 함수는 위와 같이 사용한다. 결과는 동일하다.

class Header {
  constructor() {
    this.color = "Red";
  }
 
//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}
 
const myheader = new Header();
 
 
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
 
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

예로 위와 같이 클래스 안에서 화살표 함수를 사용할 수 있다.

3. Variables

ES6에서는 3개의 변수를 사용할 수 있다.

Var로 선언된 변수는 선언된 코드 블록 외부에서도 접근이 가능하고,

let으로 선언된 변수는 선언된 코드 블록 내부에서만 접근이 가능하다.

Const로 선언된 상수는 코드블록 내부에서만 접근이 가능하고, 상수이므로 값을 변경할 수 없다.

function sayHello() {
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i); // 에러 발생 X (var는 선언된 코드블록 외부에서도 접근 가능)
}
sayHello();

function sayHello() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i); // 에러 발생 O (let은 선언된 코드블록 내부에서만 접근 가능)
}
sayHello();

const x = 1;
x = 2; // 에러 발생 O (const는 read-only)

4. Array Method

ES6에서의 배열을 사용하는 방법은 .map()을 사용하는 것이다.

const myArray = ['apple', 'banana', 'orange'];
const items = myArray.map(function(item) {
  return "<p>" + item + "</p>";
});
const myList = myArray.map((item) => <p>{item}</p>)

위 코드의 myArray에 적힌 요소들이 map으로 인해 <p>apple</p>, <p>banana</p>와 같은 형태로 변환된다.

5. Destructing(비구조할당)

객체에서 값을 꺼내올 때 구조 분해 할당 문법(Destructing)을 사용할 수 있다. 객체 전체가 필요한 것이 아니라 객체 내부의 특정 항목만 필요할 경우에 사용된다.

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

이전에는 배열의 순서로 찾았는데

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

구조화를 통하면 위와 같이 사용할 수 있게 된다. 물론, 구조화를 진행할 때 변수를 선언하는 순서가 가장 중요하다.

const vehicles = ['mustang', 'f-150', 'expedition'];
 
const [car, , suv] = vehicles;

자동차와 suv만 원하는 경우는 트럭은 생략하고 쉼표는 유지한다.

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);

이러한 구조화는 배열을 반환할 때 유용하게 사용된다.

6. Spread 연산자

스프레드 연산자(…)을 사용하면 기존 배열이나 객체의 전체, 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있게 된다.

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

numbersCombined를 호출할 경우 1,2,3,4,5,6이 출력된다.

이러한 스프레드 연산자는 앞에서 설명한 구조 분해와 함께 사용된다.

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

이 경우의 rest를 호출하게 되면 3,4,5,6이 출력된다.

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}
 
const updateMyVehicle = {
  type: 'car',
  year: 2021,
  color: 'yellow'
}
 
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

추가적으로 객체도 결합해서 사용할 수 있다.

7. module

모듈을 사용할 경우 코드를 별도의 파일로 나눌 수가 있는데, 이 때 Import와 export를 사용한다.

모든 파일에서 함수 또는 변수를 Export할 수 있고, 이때 Named 및 Default라는 두가지 유형이 존재한다.

export const name = "Jesse"
export const age = "40"

Named Export는 위 처럼 변수별로 Export를 하거나

const name = "Jesse"
const age = "40"

export { name, age }

한 번에 전부 Export를 할 수 있다.

const message = () => {
  const name = "Jesse";
  const age = "40";
  return name + ' is ' + age + 'years old.';
};

export default message;

다음은 Default Export인데, 위의 예는 message라는 화살표 함수를 export하는 구조다. 하나의 파일에는 export default가 하나만 존재할 수 있다!

Import에서는 Default가 추가 되었는지, 추가되지 않았는지의 2가지 경우에 따라 모듈을 가져올 수 있다.

import { name, age } from "./person.js";
import message from "./message.js";

Named Export는 {}를 사용해야 하고, Default는 {} 없이 사용할 수 있다.

참고 사이트

https://www.w3schools.com/react/react_render.asp

https://ing-yeo.net/2020/10/react-beginner-0/

저작자표시 변경금지

'FrontEnd > ES&JS 문법' 카테고리의 다른 글

[Javascript] 호이스팅이란? (0)	2022.10.17
[Typescript] 자주 쓰는 문법 정리 (1)	2022.09.08
[Javascript] RxJS란? (0)	2022.05.26
[Javascript] 클로저(Closure) 요약 (0)	2022.04.21
[ECMAScript] Javascript ES6 Spread, Rest 정리 (0)	2021.12.10