ES6

❓ES6

- ECMAScript 표준의 가장 최신 버전(6번째 버전)

❔예시

1. Arrow function(화살표 함수): 간결한 문법으로 함수 선언

const square = (num) => num * num;

2. Template literals (템플릿 리터럴): 문자열 생성시 따옴표 대신, 백틱(`)을 사용(기존의 + 대체)

const name = "홍길동";
console.log(`Hello, ${name}!`);  // "Hello, 홍길동!"

3. Destructuring assignment (구조 분해 할당): 배열이나 객체의 속성을 해체하여 그 값을 개변 변수에 담음

let [a, b] = [1, 2];
let {name, age} = {name: "홍길동", age: 25};

4. Spread and Rest operators (스프레드와 나머지 연산자): ...연산자를 이용해 배열이나 객체를 확장하거나, 함수의 인자를 유동적으로 작성할 수 있음

// Spread Operator(스프레드 연산자)

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];  // [1, 2, 3, 4, 5, 6]

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3};  // {a: 1, b: 2, c: 3}

let arr = [1, 2, 3, 4, 5]; 
console.log(...arr);
// 1 2 3 4 5

var str = 'javascript'; 
console.log(...str);
// "j" "a" "v" "a" "s" "c" "r" "i" "p" "t"

// Rest Operator(나머지 연산자)

function func1(...args) {
	console.log(`args: [${args}]`)
  // args: [1,2,3,4,5]
}
func1(1,2,3,4,5);

function func2(arg1, arg2, ...arg3) {
  	console.log(`arg1: ${arg1}, arg2: ${arg2}, arg3: [${arg3}]`)
  // arg1: 1, arg2: 2, arg3: [3,4,5]
}
func2(1,2,3,4,5);

5. 반복문 3종 (forEach(), map(), reduce())

1. forEach(): 배열의 각 요소에 대해 주어진 함수 실행. 반환값x. 원본 배열 변경

let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index) => {
  console.log(`Index ${index} has value ${value}`);
});

2. map(): 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 반환. 원본 배열 보존

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((value) => value * 2);
console.log(newArr);  // [2, 4, 6, 8, 10]

3. reduce(): 배열의 각 요소에 대해 callback함수의 실행값을 누적하여 단일 출력값을 반환

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 15

// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

6. String Method (includes, startsWith, endsWith) :포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith) boolean 타입을 return 해준다.

const str = 'Hello World Hanamon';
str.includes("Hana"); // true
str.startsWith("Hello"); // true
str.endsWith("mon"); // true

---

🔸변수 선언 방식의 차이(var, let, const)

var	재정의o 재선언o
let	재정의o 재선언x
const	재정의x 재선언x

---

❎ var을 사용하지 않는 이유

1. 스코프 문제

var는 함수 레벨 스코프(function-level scope) -> var로 선언된 변수가 해당 함수 내 어디서든 접근 가능! -> 예상치 못한 결과나 버그를 초래

let과 const는 블록 레벨 스코프(block-level scope) -> 블록({}) 내에서만 접근 가능하며, 블록 밖에서는 접근할 수 없음 -> 코드 예측 쉬움

2. 호이스팅 문제

❓호이스팅: JavaScript에서 변수 선언이 그 범위의 최상단으로 끌어올려지는 현상

var는 호이스팅에 의해 변수가 선언되기 전에도 접근이 가능 -> 이 때 변수의 값은 undefined -> 가독성 저하 및 실수 유발

let과 const는 호이스팅이 발생하지만, 선언 전에 접근하려하면 ReferenceError가 발생 -> 변수 선언을 먼저 하도록 유도

3. 재선언 문제

var는 같은 스코프 내에서 같은 이름의 변수를 여러 번 선언할 수 있음 -> 같은 이름의 변수를 재선언하는 실수를 유발

let과 const는 같은 스코프 내에서 동일한 이름의 변수 재선언시 에러 발생

---

❓filter()

- 배열의 각 요소를 테스트하고, 주어진 테스트를 통과하는 모든 요소로 이루어진 새로운 배열을 반환. 원본 배열 보존

let arr = [1, 2, 3, 4, 5, 6];
let evenNumbers = arr.filter((value) => value % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6]