[ JavaScript 문법 종합반 2주차 (2)] ES6문법, 단축속성명, 전개구문, 탬플릿 리터럴

• 단축 속성명 (property shorthand):
  객체의 key와 value 값이 같다면, 생략 가능하다.

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

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

// 단축 속성명 (property shorthand) **사용빈도 높음

const name = "abc";

const newage = "30";

// 자바스크립트 obj -> key value

const obj = {

name : name, // name 은 같으므로 생략가능

age : newage // 만약 newage가아닌, age로 써져있으면 생략가능

}

const obj = { name : age } ; //객체임에도 단축속성명을 통해 배열할수있다.

 

---

 

• 전개 구문 (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 = "nbc2"

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

// 전개구문 = Spread

// destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나.

let arr = [ 1, 2, 3];

console.log(arr);

console.log(...arr);

----------------------------

mac@macui-MacBook-Pro Week_2 % node 03.js
[ 1, 2, 3 ]
1 2 3

- 배열을 전개하는 문법. (arr)로 값을 출력하면 [ 1, 2, 3 ] 으로 출력되나 (...arr)로 출력하면 1,2,3 으로 출력된다.

let arr = [ 1, 2, 3];

let newArr = [...arr, 4];

console.log(arr);

console.log(...newArr);

-------------------------------

mac@macui-MacBook-Pro Week_2 % node 03.js
[ 1, 2, 3 ]
1 2 3 4

- newArr를통해 push와 같은 기능으로 값을 추가를 할 수 있다.  ( es6에서 추가된 기능)

// 객체

let user = {

name: "nbc",

age : 30,

}

let user2 = {...user}

console.log (user);

console.log (user2);

----------------------

mac@macui-MacBook-Pro Week_2 % node 03.js
{ name: 'nbc', age: 30 }
{ name: 'nbc', age: 30 }

- 객체로도 활용이가능하다.  [Spread Operator : 스프레드 오퍼레이터]  기존에 있던 객체의 중괄호({})를  풀어서 퍼뜨려 주고, 다시 중괄호({})로  묶을 수 있도록 풀어주는 것.

 

---

 

• 나머지 매개변수(rest parameter)

function func (a, b, ...args) {
	console.log(...args)
}

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

// 나머지 매개변수 (rest parameter)

function exampleleFunc ( a, b, c) {

console.log(a,b,c);

}

exampleleFunc (1,2,3);

----------------------

mac@macui-MacBook-Pro Week_2 % node 03.js
1 2 3

// function exampleleFunc ( a, b, c ... args ) //

//<- ...args 추가로 받아올수 있다.

function exampleleFunc ( a, b, c,...args) {

console.log(a,b,c);

console.log(args) // [ 배열형태로 ] 들어간다.

console.log(...args)

}

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

--------------------------------------

mac@macui-MacBook-Pro Week_2 % node 03.js

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

 

---

 

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

백틱(`) 을 사용하여  문자열 내의 공백을 그대로 출력시켜준다.

${}을 사용하여 표현식을 넣을 수 있다.