240510 TIL

오늘은 지난 번에 공부했던 문법을 복습하고 추가적으로 ES6 문법에 대해 공부했다. 반복되는 내용은 포스팅하지 않고 복습 중 새로 알게 된 부분만 기록하기로 한다.

1. 배열 메소드

(1) reduce

reduce는 다른 메소드와는 다르게 두 개의 인자를 갖는다. 쉽게 말해 첫 번째로는 누적값, 두 번째가 현재값이라고 할 수 있다. 처음 누적값에는 인덱스 0에 해당하는 값이, 현재값으로는 인덱스 1에 해당하는 값이 할당된다. 함수를 통해 return되는 값이 누적값에 저장되고 현재값은 다음 인덱스의 값으로 넘어간다.

const sum = numbers.reduce((acc, num) => acc + num);
console.log(sum);  // 15

(2) sort

sort는 기존 배열 자체를 변경한다. sort는 유니코드 배열에 따라 정렬하는데, 예를 들면 100과 25의 경우 100이 더 앞서기 때문에 100이 더 앞으로 온다. 따라서 string을 정렬할 때는 문제가 되지 않지만 숫자를 정렬할 때는 함수를 포함시켜주어야 한다.

// 문자열 정렬
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);  // ["Apple", "Banana", "Mango", "Orange"]

// 숫자 정렬
const numbers = [40, 100, 1, 5, 25];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 5, 25, 40, 100]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers);  // [100, 40, 25, 5, 1]

2. ES6

(1) 구조분해할당

[배열]

let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

배열에 존재하지 않는 값을 호출 시 undefined 값이 저장되며, 이를 방지하기 위해 초기값을 지정해줄 수 있다.

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

[객체]

let {name, age} = {name: "nbc", age: 30};

let user = {name: "nbc", age: 30};
let {name: newName, age: newAge} = user;
console.log(newName, newAge) //nbc 30

존재하지 않는 값의 경우의 반환값과 초기값 설정은 배열과 동일하다.

(2) 단축 속성명

key와 value 값이 같다면 생략 가능

const name = "nbc"
const age = "30"
//같은 표현
const obj1 = { name: name, age: age }
const obj2 = { name, age }

(3) 전개 구문

[배열]

let arr = [1,2,3];
let newArr = [...arr, 4]; // [1,2,3,4]

[객체]

let user = {name: "nbc", age: 30};
let user2 = {...user}; //{name: "nbc", age: 30}

(4)나머지 매개변수

function func (a, b, ...args) {
	console.log(...args) // 전개 구문 미사용 시 배열로 출력됨
}

func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

매개변수의 개수를 확정지을 수 없을 때 ...args로 추가 매개변수를 받을 수 있다.

(5) 템플릿 리터럴 (백틱, ${})

내장된 표현식을 허용하는 문자열 리터럴, 멀티라인을 지원함

const testValue = "안녕하세요";
console.log(`Hello world ${testValue}`);

(+) named export와 default export

[default export]

default로 export 시 다른 파일에서 선언된 이름이 아닌 다른 이름으로 import가 가능하다.

const Name = () => {}

export default Name

// other file 
// 다른 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

[named export]

여러 개의 변수/클래스 등을 export 할 때 사용

export const Name1 = () => {}
export const Name2 = () => {}

// other file
import {Name1, Name2} from "name.js"
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"