[JavaScript] ES6 - 변수, 클래스, 배열메소드, 가변 파라메터, 구조분할 할당, 객체 리터럴, 화살표 함수, 전개 연산자

알린·2024년 5월 15일

ES6 JavaScript

Web

목록 보기

5/9

ES6

JavaScript의 버전 중 하나
💡주요 기능
1. 화살표 함수: 함수를 간결하게 정의
2. 템플릿 리터럴: 문자열을 더 직관적으로 작성
3. let, const: 블록 스코프를 갖는 변수
4. Destructuring(구조분할 할당): 배열이나 객체에서 데이터 추출
5. 클래스: 객체 지향 프로그래밍
6. 모듈: 코드를 모듈화 해 재사용성과 유지보수성 높임
7. 확장된 객체 리터럴: 객체를 더 직관적으로 정의
8. 화살표 함수와 this: 화살표 함수는 자신의 this를 바인딩하지 않아, 기존 함수 선언 방식과 달리 외부 스코프의 this를 그대로 사용
9. Promise와 비동기 처리: 비동기 작업을 더 쉽게 다룰 수 있는 문법
10. 제너레이터(Generators): 이터레이터를 생성하는 함수를 간편하게 작성할 수 있는 문법 제공

ES6 사용 이유

호이스팅 문제
- var : 선언과 함께 undefinded로 초기화되어 메모리에 저장
- let, const : 선언만 메모리에 저장하고 초기화되지 않음
  👉 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작
- 일반적인 변수 선언 후 변수에 값을 할당하는 룰이 깨짐
  💡 호이스팅
  - javaScript에서 코드가 실행하기 전 var, let, const, class 등의 변수/함수 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상
  - 변수 생성 단계: 선언 ➡️ 초기화 ➡️ 할당
  - 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없음(일시적 사각지대(Temporal Dead Zone; TDZ)
    👉 var은 함수 선언부가 호출문보다 아래에 있어도 호출이 가능
    (undefined로 변수가 초기화돼 메모리에 저장됨)
    👉 let, const로 선언된 변수는 호이스팅되지만, 초기화되기 전까진 참조할 수 없음(참조에러 발생)
var는 지역변수로 선언해도 전역변수로 사용됨

변수

블록(함수, 제어문) 단위의 scope 내에서 지역 변수를 사용하기 위해 let 추가
상수의 키워드인 const가 추가 => JS에서도 보안적인 처리 가능
let : 재할당 가능한 변수를 선언
const : 재할당이 불가능한 변수를 선언
(객체 내부의 값은 재할당 가능)
⭕️ const의 재할당이 가능한 경우 ⭕️
👉 주소는 변경되지 않고, 주소가 참조하고 있는 age가 변경
```
const p1 = {name: "john", age: 20};
p1.age = 22;
```
❌ const의 재할당이 불가능한 경우 ❌
```
const p1 = {name: "john", age: 20};
p1 = {name: "susan", age: 20};
```

Class

Class를 생성하는 경우 new 키워드 필요
this는 자신 영역을 지정, super는 부모 영역을 지정
static 표현법이 있으며, 공통된 변수 및 공통 메소드가 설계가 가능
private를 통해 캡슐화 및 은닉이 가능 => 키워드는 '#'
private으로 선언한 변수는 getter, setter 활용 가능

👩🏻‍💻예시 코드

class Member{
  static count = 0; // static
  #name; // private 선언법
  #age;
  constructor(name, age, phone){
      // this.#name = name; // private name으로 초기화
      this.name = name; // setter 활용
      this.#age = age; // #age 직접 접근!
      this.phone = phone; // public 변수로
      Member.count++; // static count 접근
  }
  // setter 만드는 방법
  set name(name){
      this.#name = name + '님';
  }
  // getter 만드는 방법
  get name(){
      return this.#name + '@@@';
  }
  // age는 setter만 생성
  set age(age){
      this.#age = age;
  }
  // 일반 메소드 오버라이딩
  toString(){
      return this.#name + ', ' + this.#age + ', ' + this.phone;
  } 
  show(){
      let text = ''; 
      text += '이름 : ' + this.name +'<br>'; // getter 불러온다.
      // text += '나이 : ' + this.age +'<br>'; // getter가 없음으로 age로 접근 불가!
      text += '나이 : ' + this.#age +'<br>'; // getter가 없음으로 #로 직접접근
      text += '전번 : ' + this.phone +'<br>';
      text += '등록 된 Member 수 : ' + Member.count +'<br>';
      return text;
  }
}
let member1 = new Member('홍길동', 21, '010-1234-5678');
document.write(member1.show() + '<br>')
let member2 = new Member('최길동', 24, '010-4321-5678');
document.write(member2.show() + '<br>')
// 상속 예제
// 부모
class Car{
  constructor(name){
      // Class에서 사용할 멤버 변수
      this.name = name;
  }
  // 멤버 메소드
  print(){
      return 'name : ' + this.name;
  }
}
class Model extends Car{
  constructor(name, model){
      super(name);
      // super.name = name;
      this.model = model; 
  }
  show(){
      return this.print() + ', model : ' + this.model;
  }
}
const bmw = new Model('BMW', 'BMW i5');
document.write(bmw.show() + '<br>');
const hyundai = new Model('현대', '소나타');
document.write(hyundai.show() + '<br>');

화살표 함수

function name(){}에서 ()=>{}로 단축 표현이 가능

👩🏻‍💻예시 코드

function test1() {
  alert('test1');
}
test2 = function () {
  alert('test2');
}
test3 = () => {
  alert('test3');
}
test4 = (str) => {
  alert('test4  인자 : ' + str);
}
test5 = str => str + ', ' + str;

배열메소드

forEach, map, find, filter 사용 가능
forEach와 map은 front에서 list형을 표현하기 위해 자주 사용

💡 map
반복되는 인자를 return 받아 새로운 배열로 채워 생성해주는 메소드
배열의 숫자를 변형하거나 객체의 속성을 바꿀 때 유용
const myArray = ['apple', 'banana', 'orange'];
// value : 배열의 값, index : index정보..., array : 반복될 array
const myList1 = myArray.map((value, index, array) => { 
  return `<li>${index} - ${value}</li>` 
});
const myList2 = myArray.map(value => `<li>${value}</li>`); // 단축된 표현

💡 forEach
요소를 변형하지 않고, 요소에 대해 작업을 수행하는 메소드
로그를 출력하거나 DOM을 조작할 때 유용
myList1.forEach((value, index, array) => {
  document.write(value);
});
document.write('<br>');
myList2.forEach(value => document.write(value));

가변 파라메터

함수에 전달되는 인자의 수를 미리 정하지 않고, 가변적으로 받을 수 있는 기능

사용 경우

0개 이상의 값을 함수의 입력값으로 받을 때
가변적인 함수의 입력값이 있는 경우
입력 파라메터의 마지막에 설정하여 가변적인 여러 개의 값을 입력값으로 받을 수 있음

가변 인자 처리 방법

arguments 객체

모든 함수 내에서 사용할 수 잇는 배열과 유사한 객체

함수 호출 시 전달된 인자에 접근할 수 있음

// sum 함수의 인자를 가변적으로 받아 arguments 객체를 통해 접근하여 합을 구함
function sum() {
	let total = 0;
	for (let i = 0; i < arguments.length; i++) {
 		total += arguments[i];
	}
	return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

나머지 매개변수(Rest Parameters)

함수의 매개변수 목록에서 마지막 매개변수 앞에 ...을 붙여 사용

전달된 모든 인자를 배열로 수집

// sum함수는 ...args를 사용해 가변 인자를 배열로 받아 reduce 메서드를 통해 합을 구함
function sum(...args) {
	return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

화살표 함수 사용

const sum = (...args) => {
	return args.reduce((total, current) => total + current, 0);
};
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

arguments 객체와 나머지 매개변수의 차이점

배열 여부: arguments 객체는 배열이 아닌 유사 배열 객체(array-like object)이며, 나머지 매개변수는 실제 배열임
화살표 함수: 화살표 함수는 arguments 객체를 가지지 않지만, 나머지 매개변수는 사용 가능
명시적 사용: arguments 객체는 함수 내에서 암묵적으로 사용할 수 있지만, 나머지 매개변수는 매개변수 목록에서 명시적으로 선언해야 함

구조분할 할당

배열이나 객체에서 데이터를 추출하여 여러 변수에 나누어 할당하는 것
👉 데이터를 하나씩 꺼내어 여러줄에 걸쳐 변수에 옮길 필요가 없음

👩🏻‍💻 예시 코드

// 기존 방법
const fruits1 = ['apple', 'banana', 'pineapple'];
const fruit1 = fruits1[0];
const fruit2 = fruits1[1];
const fruit3 = fruits1[2];
document.write(fruit1 + ', ' + fruit2 + ', ' + fruit3 + '<br>');
// 구조분할 할당
const fruits2 = ['apple', 'banana', 'pineapple'];
const [f1, f2, f3] = fruits2; // 일치하면 모두 들어가고,
const [f5, /*빈공간*/, f6, f7] = fruits2; // 일치하지 않아도 알아서 채워진다.
document.write(f1 + ', ' + f2 + ', ' + f3 + '<br>');
document.write(f5 + ', ' + f6 + ', ' + f7 + '<br>');

객체 리터럴

리터럴: 소스 코드에서 특정한 자료형의 값을 직접 표현하는 방식
객체를 생성하는 간단하고 직관적인 방법 (객체 표현법)
key-value를 갖고 객체처럼 표현
👉 키로 값에 접근
속성명과 변수명이 동일한 경우 한 번만 작성

중괄호 {} 내에 속성과 속성 값의 쌍을 나열하여 객체를 정의

const person = {
   name: "John",
   age: 30,
   city: "New York"
};

객체 내 메서드 표기법

속성명: 익명함수
일반함수

👩🏻‍💻 예시 코드

let p1 = {
 name: "에너자이자",
 total_price: 5000,
 discount_price: 5000, 
 one_price: 2350,
 arrive_data: "내일(수)도착 보장",
 rate: 50,
 stack_money: 188,
 discount: function(discountPercentage) {  // 1. 속성명: 익명함수 형태
     this.discount_price = this.total_price * (1 - discountPercentage / 100);
 },
 printProperties() {  // 2. 일반 함수 형태
     let print = "";
     print += "name>> " + this.name + "<br>";
     print += "total_price>> " + this.total_price + "<br>";
     print += "discount_price>> " + this.discount_price + "<br>";
     print += "one_price>> " + this.one_price + "<br>";
     print += "arrive_data>> " + this.arrive_data + "<br>";
     print += "rate>> " + this.rate + "<br>";
     print += "stack_money>> " + this.stack_money + "<br>";
     document.getElementById("product").innerHTML = print;
 }
}

전개 연산자(spread operator)

깊은 복사
객체나 배열을 복사할 때 사용
기존 객체나 배열은 그대로 두고, 완전히 독립적인 새로운 객체나 배열을 생성하여 변수에 할당
배열의 경우 [...], 객체의 경우 {...}로 사용

💡얕은 복사 vs 깊은 복사

얕은 복사

객체나 배열의 참조를 복사하여 새로운 변수에 할당

참조하는 대상이 같기 때문에 원본이 변경되면 복사본도 함께 변경
👉 내부의 객체나 배열은 복사되지 않아, 객체나 배열의 깊은 내부 요소에는 적용되지 않음

깊은 복사

복사되는 객체나 배열의 모든 요소를 재귀적으로 복사하여 새로운 독립적인 객체나 배열을 생성

복사본은 원본과 완전히 분리되어 있어서 원본의 변경이 복사본에 영향을 주지 않음

👩🏻‍💻 예시 코드

// 배열 전개 연산자 예시
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
// 객체 전개 연산자 예시
const obj1 = { key1: 'value1' };
const obj2 = { key2: 'value2' };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { key1: 'value1', key2: 'value2' }