JavaScript 문법 종합 2주차(ES6 문법)

🔴ES6

🔴화살표함수, 삼항연산자

🔴구조 분해 할당

🔴단축 속성명

🔴전개구문

🔴나머지 매개변수

🔴템플릿 리터럴

ES6

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었다. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다.

 

ES6 문법 소개

let, const

기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드이다.

• 선언 : 변수명을 자바스크립트 엔진에 알리는 것
• 할당 : 변수에 값을 저장하는 것 (= 할당연산자)

 

let과 const의 특징

• let: 재할당은 가능하고, 재선언은 불가능

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

• const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

 

화살표 함수 (Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법

// 함수 선언문
function add () {

}

// 함수 표현식
var add = function () {

}

// 화살표 함수로 간략 표기
var add = () => {
    
}

const mysum = (x, y) => {
    return x, y          // return문이 한 줄인 경우 return을 지우고 { }도 지우고 mysum1처럼두면됨
};
const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y}; // 중괄호 있으면 안댐

const mysum3 = (x, y) => ({x: x, y: y}); const mysum4 = (x, y) => {
  return {x: x, y: y};
}

const mysum5 = function(x, y) {
  return {x: x, y: y};
};

function mysum6(x, y) {
  return {x: x, y: y};
}

this

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

 

삼항 연산자 (ternary operator)

condition ? true인경우 : false인경우

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

console.log(1 === 1 ? "참" : "거짓") // 참
console.log(1 !== 1 ? "참" : "거짓") // 거짓

 

 

💫구조 분해 할당 (Destructuring_DE : not/ strructure : 구조)

배열[ ]이나 객체{ }의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법(구조를 찢음)

 

배열 [ ]인 경우

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

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

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

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

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

 

객체 { } 인 경우

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

//

let {name, age} = {
    name: "nbc",
    age: 30
};
console.log(name); // nbc_string타입
console.log(age); // 30_number타입

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

let {
    name: newName, 
    age: newAge
} = user;

// 의 것은

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

// 라는 의미가 되고 newName과 newAge로 새로 할당된다

let {
    name: newName, 
    age: newAge
} = user;

console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

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

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

//
let user = {
    name: "nbc",
    age: 30
    birthday: "yesterday";
};
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // yesterday

 

단축 속성명 (property shorthand)

객체의 key와 value 값이 같다면, 생략 가능하다.

const name = "nbc";
const newage = "30";

const obj = {
	name: name, 
	age: newAge
};
// 를 name: name로 key와 value가 같다면,

const obj = {
	name, 
	age: newAge
};
// 그냥 name으로 간소화(생략)해도 된다.

const name = "nbc";
const age = "30";

const obj = { name: name, age: age };
const obj = { name, age };
// 이건 간소화 된것이며 배열이 아님을 생각해야 함

 

💫전개 구문 (Spread operator)

배열이나 객체를 전개하는 문법으로 구조분해할당과 함께 정말 많이 사용된다. 기존의 구조를 벗어나 새로운 구조로 덧입혀 작성할 때사용한다.

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

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

let [name, ...rest] = ["Tom", 10, "Seoul"];

console.log(name); // Tom
console.log(rest); //[10, "Seoul"]

---

// 객체
let user = {
    name: "nbc", 
    age: 30
};
console.log(user); // { name: 'nbc', age: 30 }
console.log(...user); //오류

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

let user2 = {...user};

console.log(user); // { name: "nbc", age: 30}
console.log(user2); // { name: "nbc", age: 30}

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

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

 

나머지 매개변수(rest parameter)

function exampleFunc (a, b, c) {
	console.log(a, b, c);
}
exampleFunc(1, 2, 3); // 1 2 3

function exampleFunc (a, b, c, ...args) {
	console.log(a, b, c);
    console.log(...args);
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);

// 1 2 3
// 4 5 6 7

function exampleFunc (a, b, c, ...args) {
	console.log(a, b, c);
    console.log(args);
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);

// 1 2 3
// [ 4, 5, 6, 7 ]

 

💫템플릿 리터럴 (Template literals)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식으로, 백틱(```) 과 ${ }로 표현한다.

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

// hello world 안녕하세요

// 멀티라인 사용가능

const testValue = "안녕하세요"
console.log(`hello world ${testValue}`);
console.log(`
    Hello
        My name is Javascript!!

        Nice to meet you~~
`);

//hello world 안녕하세요
//
//  Hello
//      My name is Javascript!!
//
//      Nice to meet you~~

 

named export vs default export

default Export

// name.js
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"
import {newName} from "name.js" // x

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

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)