Javascript "ES6"문법

ECMAScript 6 (ES6)

 

 

 

 

오늘은 자바스크립트에서 2015년도에 대규모 문법적 향상 및 변경인

ES6 문법에 대해 정리하고자 한다.

 

 

1. let 과 const

 

✅ let : 재할당 가능, 재선언 불가

let name = "john"
console.log(name) // john

name = "bob" // 재할당 가능
console.log(name) // bob

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

 

✅ const : 재할당, 재선언 불가 / 초기값 없을시 선언 불가능

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

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

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

 

 

2. 화살표 함수 (Arrow Function)

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

// ES5
function func() {
	return true
}

//ES6
const func = () => {
	return true
}
// return 문이 한줄이면 return도 생략 가능.
const func = () => true

// function 은 호출시 this가 정해짐, 화살표함수는 선언시 this가 정해진다.

 

 

3. 삼항 연산자 (ternary operator)

✅ if..else 문을 간단하게 표현하는 연산

condition ? expr1 : expr2

console.log(box ? "참" : "거짓") // 참
// 만약 box의 값이 true면 참을, false면 거짓을 반환해라 ~
console.log(box ? "참" : "거짓") // 거짓
// 만약 box의 값이 true면 참을, false면 거짓을 반환해라 ~

 

 

4. 구조 분해 할당 (Destructuring)

✅ 배열 [ ] 이나 객체 { } 의 속성을 분해해서 그 값을 변수에 담는 문법.

// 배열의 경우
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

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

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

let [a,b,c,d = 4] = arr // 비어있던 d의 값을 4로 할당가능
console.log(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

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

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

 

 

5. 단축 속성명 (property shorthand)

✅ 객체의 key 와 value의 값이 같을시, 생략 가능

const name = "john"
const age = "25"

const obj = {
	name: name
	age: age
};

// 단축 속성명 사용시
const obj = {
	name,
	age
}; 

console.log(obj); // { name: john, age: 25 }

 

 

6. 전개 구문 (Spread)

✅ 배열이나 객체를 전개하는 문법.  구조 분해 할당과 함께 정말 많이 사용된다!

// 배열
let arr = [1,2,3];

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

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user} // 새로운 객체 user2 = {name: "nbc", age: 30} 생성.

user2.name = "nbc2" // user2 객체의 name을 nbc2 로 변경 (user 객체에는 영향 x)

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

 

 

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

✅ 나머지 매개변수는 함수에 전달된 인수들 중, 매개변수로 명시하지 않은 나머지 인수들을 배열로 수집한다.

function exampleFunction(param1, param2, ...restParams) {
  console.log(param1);        // 첫 번째 매개변수
  console.log(param2);        // 두 번째 매개변수
  console.log(restParams);    // 나머지 매개변수들 (배열)
}

exampleFunction(1, 2, 3, 4, 5);
// param1 = 1
// param2 = 2
// resrParams = [3, 4, 5] 가 할당된다.

 

 

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

✅ 백틱(` `) 과 ${ } 를 통해 표현하는 방법.

let name = "John";
let age = 30;

// 템플릿 리터럴 사용
let greeting = `안녕하세요, ${name}님! 나이는 ${age}세 입니다.`;

console.log(greeting);
// 출력: 안녕하세요, John님! 나이는 30세 입니다.

 

템플릿 리터럴을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수 있다.

let multiLineString = `
  이것은
  여러 줄로
  구성된 문자열입니다.
`;

console.log(multiLineString);
/*
  출력:
  이것은
  여러 줄로
  구성된 문자열입니다.
*/

 

9. named export  vs  default export

✅ 1. default export

 

하나의 모듈에선 하나의 항목만을 기본으로 내보낼 수 있다. 이를 'default export' 라고 부르며, 가져올 때는 이름을 지정하지 않고 가져올 수 있다.

// 모듈 정의 (exampleModule.js)
const myDefaultExport = "This is the default export.";

export default myDefaultExport;

 

이제 다른 파일에서 이 모듈을 가져올 때, 'default export' 는 이름을 지정하지 않고 가져올 수 있다.

 

// 모듈 가져오기
import myDefaultExport from './exampleModule';

console.log(myDefaultExport); // 출력: This is the default export.

 

✅ 2. named export

 

'named export' 는 여러 개의 항목을 명시적으로 내보낼 수 있도록 하는 방법이다. 

'named export' 를 사용하면 모듈에서 여러 항목을 가져올 때 항목의 이름을 사용하여 가져올 수 있다.

// 모듈 정의 (exampleModule.js)
export const variable1 = "This is variable1.";
export const variable2 = "This is variable2.";

export function myFunction() {
  console.log("This is myFunction.");
}

 

이제 다른 파일에서 이 모듈에서 내보낸 항목들을 가져올 때, 항목의 이름을 사용하여 가져올 수 있다.

// 모듈 가져오기
import { variable1, variable2, myFunction } from './exampleModule';

console.log(variable1); // 출력: This is variable1.
console.log(variable2); // 출력: This is variable2.
myFunction();           // 출력: This is myFunction.

 

 

 

여러번 반복 학습을 통해 ES6의 새로운 문법 9가지를 많이 익혔다.

하지만 익힌 것과는 별개로, 내가 코딩을 할 때 이 문법을 어떻게, 어디서 적용해야 할지는 아직 감이 잡히지 않는다.

앞으로 코딩하는 프로젝트에서는 ES6의 문법을 적극 활용해보도록 노력해야겠다.