🍦Vanilla JS (12) ES5, ES6

ES5(ECMAScript 5)

• 자바스크립트의 5번째 버전으로, 2009년에 발표되었습니다. ES5는 새로운 기능을 추가하는 것 보다는 기존의 기능을 개선하는데 초점을 맞췄습니다.
• 개선된 기능은 아래와 같습니다.

JSON 객체

• JSON(JavaScript Object Notation)은 데이터를 교환하는데 사용되는 경량 데이터 형식 입니다.
• ES5에서는 JSON.parse() 와 JSON.stringify() 메소드를 사용하여 JSON 데이터를 다룰 수 있습니다.

let data = '{"name":"John", "age":30}';
let obj = JSON.parse(data);
console.log(obj.name); // "John"
console.log(JSON.stringify(obj)); // "{"name":"John","age":30}"

Array 메소드

기존 Array 메소드에 새로운 메소드가 추가되었습니다. 이러한 메소드를 사용하면 더욱 간단하고 효율적인 코드를 작성할 수 있습니다.

• forEach() : 배열의 각 요소를 순회하며, 요소에 대해 지정된 함수를 실행하는 메소드
• ⭐️ map() : 배열의 모든 요소를 순회하면서 새로운 배열을 만듭니다.
• filter() : 배열의 요소 중에서 조건을 만족하는 요소만 추출하여 새로운 배열을 만듭니다.
• reduce() : 배열의 모든 요소를 순회하며, 순회 과정에서 누적값을 사용하여 하나의 결과값을 만듭니다.

let numbers = [1,2,3,4,5,6,7,8,9,10];
numbers.forEach((num) => console.log(num));

let squares = numbers.map(num => num * num);
console.log(squares);

let evenNumbers = numbers.filter(num => num % 2 == 0);
console.log(evenNumbers);

let sum1 = numbers.reduce((tot, num) => tot + num, 0);
console.log(sum1);

1
2
3
4
5
6
7
8
9
10
[
   1,  4,  9, 16,  25,
  36, 49, 64, 81, 100
]
[ 2, 4, 6, 8, 10 ]
55

ES6(ECMAScript 6)

• ECMAScript 6은 자바스크립트의 6번째 버전으로 2015년에 발표되었습니다.
• ES6은 이전 버전의 자바스크립트보다 더욱 강력하고 효율적인 기능을 제공합니다.

let, const

ES6에서는 let과 const 키워드를 사용하여 변수를 선언합니다.

let은 블록 스코프 변수를 선언하고, const는 변경 불가능한 변수를 선언합니다.

const arr = [1, 2, 3];
arr[0] = 100;
// 오류가 안나는 이유 : 참조 주소는 변경되지 않고, 주소가 가리키는 값만 변경됐기 때문에..
// 정리하면 property, value는 const도 변경 가능
console.log(arr); // [100, 2, 3]

// arr = [4,5,6]; // const에 새로운 객체 참조 주소를 대입하는 것이기 때문에 오류.

const arr1 = [1, 2, 3];
const arr2 = arr1.concat([4, 5, 6]);
console.log(arr2);
console.log(arr1); // 변형되지 않음.

화살표 함수

화살표 함수는 간단하고 간결한 코드를 작성하는데 유용합니다.

const add = (num1, num2) => console.log(num1 + num2);
add(4, 3);

// ✨ 화살표 함수 사용시 this 문제 해결 가능!
/* 기존의 함수 정의 방식에서 함수 내부에서 this 키워드를 사용 할 때,
호출되는 위치에 따라 참조하는 객체가 다르게 결정되는 문제가 있음 */
const obj = {
  name: "홍길동",
  func1() {
    const func2 = function () {
      console.log(this.name);
    };
    func2();
  },
};
obj.func1(); // undefined

const obj2 = {
  name: "홍길동",
  func1() {
    const func2 = () => console.log(this.name);
    func2();
  },
};
obj2.func1(); // 홍길동

/* --------------------------------------------- */
const btn1 = document.getElementById("myButton1");
const btn2 = document.getElementById("myButton2");

btn1.addEventListener("click", () => console.log(this));
// 이 때는 this 말고 btn1 넣으면 정상적으로 찾아줌. ㅋㅋ

btn2.addEventListener("click", function () {
  console.log(this);
});
/* --------------------------------------------- */
const pBtn = document.getElementById("pButton");
const pEls = document.querySelectorAll("p");
pBtn.addEventListener("click", () => pEls.forEach((e) => console.log(e)));

템플릿 리터럴

• 백틱(``)으로 묶는 문자열을 템플릿 리터럴이라고 합니다.
• 템플릿 리터럴은 변수를 쉽게 포함할 수 있고, 여러 줄의 문자열을 쉽게 표시할 수 있습니다.

const userName = "홍길동";
const season = "봄";
const message = `안녕하세요, ${userName}님, ${season}이 왔습니다.`;
console.log(message);

안녕하세요, 홍길동님, 봄이 왔습니다.

전개 연산자(Spread operator)

• 배열이나 객체를 개별 요소로 분리

const arr3 = [1,2,3];
const arr4 = [4,5,6];
const newArr = [...arr3, ...arr4];
console.log(newArr);

const arr5 = [1,2,3,4,5,100];
const arr6 = [...arr5];
console.log(arr6);

// 전개 연산자를 이용한 가변 인수 함수 만들기
function sum(...numbers) {
  return numbers.reduce((tot, num) => tot + num, 0);
}
console.log(sum(1,2,3,4,5,6,7,8,9,10));

[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 100 ]
55