[JavaScript] ES6 신문법

내일배움캠프: Node.js_4기

9일차 TIL

~오늘의 수강 과목~

1. JavaScript 문법 종합반 2주차 (최원장 튜터님)

_ ES6 신문법 : let, const, 화살표 함수, 삼항연산자, 구조분해할당, 단축속성명, 전개구문, 나머지 매개변수, 템플릿 리터럴

_ 일급 객체로서의 함수

---

ES6 신문법

ES6는 2015년에 도입된 최신식 자바스크립트 문법이라고 한다.

 

 

1. let, const

2015년도 이전에는 변수를 선언할 때 var를 사용했지만 유연한만큼 위험성이 컸기 때문에 let(변수), const(상수)라는 새로운 문법이 생김

(var, let, const의 차이는 6주차 TIL에서 예제 코드를 통해 간단하게 정리한 적이 있다)

let은 재할당이 가능하고, const는 재할당이 불가능하다는 특징이 있으며, 둘 다 재선언은 할 수 없다

 

 

2. 화살표 함수 (Arrow Function)

function, return 키워드 없이 함수를 만들 수 있으며, 이름처럼 화살표를 닮은 기호가 들어감

function arrowFunc() {
	return true;
}

// 위 코드를 화살표함수 버전으로
let arrowFunc = () => true;

 

 

3. 삼항 연산자 (ternary operator)

condirion ? true인 경우 : false인 경우

console.log(true ? '참' : '거짓');

// 참 출력

 

 

4. 구조 분해 할당 (Destructuring)

[배열]이나 {객체}의 속성을 분해한 후 그 값을 변수에 담을 수 있게 해주는 문법

구조를 없애버리고 각각을 할당

// (1). 배열의 경우 - 순서가 중요
let [value1, value2] = [1, 'new']
// 1은 value1에, 'new'는 value2에 할당해줘<라고 하는 것이 구조분해할당
console.log(value1); // 1 출력
console.log(value2); // new 출력

let arr = ['value1', 'value2', 'value3']
let [a, b, c, d] = arr;

console.log(a); // value1 출력
console.log(b); // value2 출력
console.log(c); // value3 출력
console.log(d); // undefined 출력. 자바스크립트 엔진이 생각하기에 d에도 뭔가 들어와야 할것같은데 값이 들어오지 않았기 때문에 자동으로 없다는 뜻의 언디파인 할당


// (2). 객체인 경우 - key가 중요
// let user = {
//     name: 'nbc',
//     age: 30,
// }

// 구조분해할당
// let {name, age} = { // 2. name과 age라는 각각의 변수에 할당
//     name: 'nbc', // 1. 각각의 값을 분해해서
//     age: 30,
// }

console.log(name); // nbc 출력. 더이상 객체 형태가 아닌 스트링 타입
console.log(age); // 30 출력. 더이상 객체 형태가 아닌 넘버 타입

// 새로운 이름으로 할당
let user = {
    name: 'nbc',
    age: 30,
}

// let {
//     name: newName, // 2. 여기로 들어옴
//     age:newAge
// }  = user // 1. 위에 있는 user 객체가

// console.log(newName); // nbc 출력
// console.log(newAge);  // 30 출력


let {name, age, birthday = 'today'} = user;
console.log(name);
console.log(age);
console.log(birthday); // 초기값 설정 안하면 undefined 출력 / 'today'로 초기값 넣으면 today 출력. 초기값은 undefined인 경우에만 의미가 있다

 

 

5. 단축 속성명 (property shorthand)

key : value 가 각각 똑같다면 생략 가능

const name = 'nbc';
const newAge = '30';

const obj = { // 왼쪽은 이름일 뿐이고 오른쪽이 실질적 데이터
    name, // name: name, 이런 식으로 키와 밸류의 이름이 같으면 생략 가능
    age: newAge // 오른쪽에 있는 것을 이렇게 변수로 사용 가능
}
// 만약 age 키의 밸류도 똑같이 age였다면 const obj = {name, age}; 라고 작성 가능. 변수임에도 객체처럼 보임. 이것이 단축속성명

 

 

6. 전개 구문 (Spread)

배열 혹은 객체를 전개하는(=펼쳐주는) 문법

// 배열 예시
let arr = [1,2,3] // 전개 구문은 이 구조를 벗어버리고 새로운 구조로 덧입히고 싶을 때 사용
console.log(arr) // [ 1, 2, 3 ] 출력
console.log(...arr) // 1 2 3 출력

let newArr = [...arr, 4]
console.log(arr) // [ 1, 2, 3 ] 출력
console.log(newArr) // [ 1, 2, 3, 4 ] 출력


// 객체 예시
let user = {
    name: 'nbc',
    age: 30
}

let user2 = {...user} // user의 중괄호를 벗겨버리고 값을 쭉쭉 펴서 다시 user2의 중괄호로 다시 묶음
console.log(user); // { name: 'nbc', age: 30 } 출력
console.log(user2); // { name: 'nbc', age: 30 } 출력

 

 

7. 나머지 매개변수 (rest parameter)

function exampleFunc (a,b,c, ...args) { // 매개변수의 개수를 정확히 모를 때 추가적으로 어떤 아규먼츠가 들어올 수 있음
    console.log(a,b,c)
    console.log(args) // [ 4, 5, 6, 7 ] 출력
    console.log(...args) // 4 5 6 7 출력
}

exampleFunc(1,2,3,4,5,6,7);

 

 

8. 템플릿 리터럴 (Template Literal)

여러 줄로 이루어진 문자열, 문자 보간기능(=데이터를 끼워넣어 출력) 사용 가능

`백틱`과 ${} 사용

고정된 인삿말에 사용자가 입력한 이름만 바꿔끼우는 식으로 사용하면 좋을 것 같다

// 템플릿 리터럴(Template Literal)
const testValue = '안녕하세요!';
console.log(`hello world ${testValue}`);
console.log(`
    Hello
        My name is JavaScript!

        Nice to meet you!
`) // 멀티라인 지원

이렇게 멀티라인 출력 가능

 

 

---

오늘의 메모

• 강의는 3주차를 듣고 있지만 2주차 복습이 필요한 것 같아 정리해봤다
• 개인과제를 드디어 시작했다(강의는 잠시 중단...)
• 과제를 위해 api 받아오는데 무슨 핸드폰번호에 집주소까지 쓰라고 해서 약간 충격받았다 뭐임???
• 여전히 알고리즘 풀이가 어렵다
• 집에 물이 새서 앞으로 강의를 어디서 들어야할지 고민이다 다 떠나서 일단 너무 슬퍼,,,,🥹

급하게 와서 바닥에 앉아있는 나

• 오늘도 세션이 열려서 헐레벌떡 달려갔는데 이 메타버스 시스템이 너무 잘 되어있어서 웃겨 죽는줄 알았다 여기는 발표장이고 저 가운데서 연설하고 계신 분이 튜터님이신데 너무 본격적이라 깔깔 웃었다ㅠㅠ 

 

내일의 목표

1. 개인과제 자바스크립트 부분 1개 이상 구현

 

앞으로의 목표

1. 알고리즘 문제 꾸준히 풀어보기 x 1000000
2. 지금 작성 중인 이 코드가 왜 여기에 들어가는 건지 정확히 알고 사용하는 것을 궁극적 목표로(사실 지금도 어렵다)