ES6의 문법 소개 및 실습
1. let, const
let(변수, 변하는 수), const(상수, 항상 상常, 변하지 않는 수)
둘의 가장 큰 차이는 '한번 선언하고 할당한 값에 다시 재할당 할수 있는가
2015년도 이전에는 var만이 쓰였다
let a = 1;
a = 2; // 재할당 가능
const a = 1;
a = 2; // 재할당 불가, TypeError: Assignment to constant variable. 에러 발생
var a = 1;
var a = 2; // 기존 var 선언문은 재할당 뿐만 아니라 재선언까지 가능
let a = 1;
let a = 2; // let은 재선언 불가, SyntaxError: Identifier 'a' has already been declared 에러 발생
const a = 1;
const a = 2; // const 재선언 불가, SyntaxError: Identifier 'a' has already been declared 에러 발생
2. 화살표 함수, arrow function
function add () {}
var add = function () {}
var add = () => {}
// 위 3가지 함수 선언문은 같은 기능이다
var add = () => {return 1;} // 이처럼 함수의 return이 간단할 경우
var add = () => 1; // {중괄호} 마저 생략할 수 있다
3. 삼항 연산자
condition ? true : false
ex)
console.log (true ? "참" : "거짓"); // 실행 결과: 참
console.log (false ? "참" : "거짓"); // 실행 결과: 거짓
4. 구조분해할당 : destructuring
배열의 [요소]나, 객체의 {속성}을 하나하나 떼어내서
그 값을 변수에 담는다
4-1. 배열의 경우
let arr1 = [1, "new"];
let [value1, value2] = arr1; // 기존 배열 arr1의 내용을 가져와 새로운 변수 value1과 value2를 만들었다
console.log(value1+",",value2); // 실행 결과: 1, new
let arr2 = ["value1", "value2", "value3"];
let [a, b, c, d] = arr2; // 기존 배열 arr2의 내용을 가져와 새로운 변수 a, b, c, d를 만든다.
console.log(a, b, c, d); // 실행 결과: value1 value2 value3 undefined
// 자바스크립트는 변수 d에 대해 들어와야할 값이 있는데 안들어왔네? 라고 생각한다
// 지금처럼 새로운 변수 d를 선언하는데 변수의 값을 정의하지 않았으므로 undeinfed가 출력된다
그렇다면 만약 변수 d의 값을 공백으로 선언하면 어떨까?
let arr3 = ["value1", "value2", "value3", ];
let [a, b, c, d] = arr3; // 기존 배열 arr3의 내용을 가져와 새로운 변수 a, b, c, d를 만든다.
console.log(a, b, c, d); // 실행 결과: value1 value2 value3 undefined
// 배열 arr3에서 ,로 4번째 요소가 있다는걸 표시해 줬지만 그 요소의 값이 공백이라면 undefined가 된다
console.log(typeof d); // 실행 결과: undefiend
변수 d를 null로 선언한다면?
let arr4 = ["value1", "value2", "value3", null];
let [a, b, c, d] = arr4; // 기존 배열 arr4의 내용을 가져와 새로운 변수 a, b, c, d를 만든다.
console.log(a, b, c, d); // 실행 결과: value1 value2 value3 null
// 변수 d의 값을 null로(명시적으로 값이 비어있음을) 선언하였으니 null이 나온다.. 너무 당연한가?
// console.log(typeof d); // 실행 결과: object
// null의 데이터 타입은 object이다.
// 이에 대한 설명: https://velog.io/@jeongho218/javascript-%EC%99%9C-typeof-null%EC%9D%98-%EA%B2%B0%EA%B3%BC%EB%8A%94-object%EC%9D%BC%EA%B9%8C
변수의 초기값을 지정하고 시작할 수도 있다.
let arr5 = ["value1", "value2", "value3"];
let [a, b, c, d=4] = arr5; // 기존 배열 arr5의 내용을 가져오지만, 변수 d의 초기값을 4로 지정하였다.
console.log(a, b, c, d); // 실행 결과: value1 value2 value3 4
// 변수 재지정때 값이 undefined라면 초기값을 그대로 가져간다.
// 재지정된 변수의 값이 존재한다면 그 값으로 덮어씌어진다.
4-2. 객체의 경우
let {name, age} = {
name: "nbc",
age: 30,
}; // 변수 name과 age는 객체의 key 값을 분해해서 각각 할당받게 된다
console.log(name, age);
// 실행 결과: nbc 30
새로운 이름으로 할당
let user = {
name: "nbc",
age: 30,
};
>let {
name: newName, // 순서 2. key name의 값인 "nbc"를 새 변수 newName에 넣고
age: newAge, // 순서 3. key age의 값은 30을 새 변수 newAge에 넣는다.
} = user // 순서 1. 객체 user의 key 값을 가져와서
console.log(newName, newAge); // 실행 결과: nbc 30
그렇다면 아래 birthday처럼 기존 객체 user에 없는 key를 선언하면 어떻게 될까?
let {name, age, birthday} = user;
console.log(name, age, birthday); // 실행 결과: nbc 30 undefined
// 배열때와 마찬가지로 할당 받지 못한 변수는 undefiend이다.
그럼 배열때처럼 할당 받지 못하는 변수의 초기값을 지정해준다면?
let {name, age, birthday = "today"} = user;
console.log(name, age, birthday); // 실행 결과: nbc 30 today
// 만약 기존 객체 user에 새로 birthday key와 "yesterday"라는 key 값을 지정해준다면 변수 birthday의 값은 yesterday로 덮어씌워지게 될 것이다
5. 단축 속성명: property shorthand
정말정말 많이 쓰이는 형태 우리도 많이 쓰게 될 것이고
다른 많은 개발자들도 쓰고 있기 때문에
이걸 모른다면 다른 사람들이 쓴 코드를 해석할때 굉장히 힘들것이다.
자바스크립트의 객체는 언제나 key - value의 pair
key는 이름, value가 object의 실질적 데이터
이번 예시는 key와 value의 데이터가 겹칠때
const obj = {
name: name, // key와 value의 데이터가 같아도 에러없이 사용할 수 있으며
name, // <- key와 value의 데이터가 같다면 이렇게 한번만 쓰는 것도 가능하다.
age: newAge // key와 value의 데이터가 다르다면 생략은 되지 않는다.
}
이를 응용하여 마치 배열과도 같은 형태로 작성할 수 있다.
const age = "30";
const obj = {name, age}; //배열처럼 생겼지만 객체다
const obj1 = {name: name, age: age}; //obj1과 obj는 같은 내용을 갖는 객체다
6. 전개 구문 spread operator (...)
destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나이다
6-1. 배열의 경우
let arr = [1, 2, 3];
console.log(arr); // 실행 결과: [ 1, 2, 3 ]
console.log(...arr); // 실행 결과: 1 2 3
// 기존 배열 구조를 벗고 새로운 구조를 덧입힐때 사용한다.
기존 배열 끝에 요소를 추가하고 싶을때, push를 쓰는 방법 외에도
let newArr = [...arr, 4];
console.log(arr); // 실행 결과: [ 1, 2, 3 ]
console.log(newArr); // 실행 결과: [ 1, 2, 3, 4 ]
// 기존 배열에 요소를 더 추가한 새로운 배열을 만들 수 있다.
6-2. 객체의 경우
let user = {
name: "bnc",
age: 30,
} ;
// 기존 객체 user는 { name: "bnc", age: 30,}; 의 내용을 가지고 있다.
let user2 = {...user};
console.log(user2); // 실행 결과: { name: 'bnc', age: 30 }
// 기존 객체 user와 같은 내용의 객체가 생성되었다.
7. 나머지 매개변수 (rest parameter)
기본적인 함수의 사용법
function exampleFunc (a, b, c) {
console.log(a, b, c); // 실행 결과: 1 2 3
}
exampleFunc(1, 2, 3);
다만 매개변수의 개수를 정확히 모른다면?
function exampleFunc (a, b, c, ...args) { // arguments 논거, 주장, a, b, c외에도 추가적으로 들어올 수 있다.
console.log(a, b, c); // 실행 결과: 1 2 3
console.log(...args); // 실행 결과: 4 5 6 7 '...args'에는 4 5 6 7이 들어갔다
console.log(args); // 실행 결과: [ 4, 5, 6, 7 ] 'args'에는 배열의 형태로 저장된다.
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);
/// 매개변수를 꼭 ...args로 명시해줘야 나머지 매개변수를 모두 인식할 수 있다
8. 템플릿 리터럴(Template Literal)
보통 문자열을 출력할때 "쌍따옴표"나 '따옴표'를 사용하는데,
`백틱, 억음부호` 로도 사용 가능하다.
console.log("Hello World!"); // 실행 결과: Hello World!
// 벨로그에서 백틱사이에 오는 글은 배경색이 생기는것 같다.많이 불편하네..
// 단순 문자열 출력 외에도 JavaScript 코드나 변수, 연산도 들어갈 수 있다.
console.log(Hello World ${3+3}); // 실행 결과: Hello World 6
const testValue = "안녕하세요!";
console.log(Hello World! ${testValue}); // 실행 결과: Hello World! 안녕하세요!
console.log("Hello World!", testValue); // 실행 결과: Hello World! 안녕하세요! 같은 기능... 하지만 지금은 쉬운 예시이니까 이 정도지만... 어떻게 더 응용이 가능할까..
백틱 진짜 많이 쓰이니까 용어와 사용 방법을 반드시 알아둬야 한다
멀티라인도 지원한다.
// 실행 결과:
// Hello
// My name is JavaScript!
//
// Nice to meet you!
//
백틱이 아닌 "쌍따옴표"나 '따옴표'를 사용해서 멀티라인을 시도하면
ex) console.log("Hello
World!");
console.log("Hello
^^^^^^^
SyntaxError: Invalid or unexpected token 문법 에러가 발생한다.
백틱으로 인해서 개발자 측면의 사용자 편의성이 굉장히 좋아졌다.
