2023 - 05 - 19 구조분해할당, ES6 , 단축 속성명, 전개구문 (스프레드 오퍼레이터), 나머지 매개변수 (레스트 파라미터), 템플릿 리터럴 (백틱)

오늘 할일

자바스크립트 2주차 강의 듣기

 

 

오늘 배운 것

1. 구조분해할당 destructuring,

2. ES6 단축속성명 property shorthand 

3. 전개구문 (스프레드 오퍼레이터) spread operator,

4. 나머지 매개변수 (레스트 파라미터) rest parameter,

5. 템플릿 리터럴 (백틱) template literal

 

 

1. 구조분해 할당 destructuring
구조분해할당은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 함.

배열 : 대괄호 [ ] 안의 요소들
객체 : 중괄호 { } 안의 요소들

(1) 배열 구조분해할당

[1, 'new'];
let [value1, value2] = [1, 'new'];

이렇게 할 경우 우항의 배열 [1, 'new'] 을 분해해서
변수 value1에 1을, 변수 value2에 'new'를 각각 할당함.

이것을 바로 구조분해할당이라고 함.

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


변수 value1에 1이 할당되고, value2에 'new'가 할당됨.
// 1 1 , 2 new

 

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

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3


let arr = ["value1", "value2", "value3"];은 배열이고, let [a,b,c]는 변수다. 
변수 a에 "value1", 변수 b에 "value2", 변수 c에 "value3" 각각 할당함. (구조분해할당)

다음과같이, 요소의 개수와 배열의 개수가 불일치할 경우도 있다. 배열은 3개인데 변수는4개인 상황 undefined나옴

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

console.log(a, b, c, d) // value1, value2, value3, undefined


이 경우에는 위와 마찬가지로 변수 a에 "value1", 변수 b에 "value2", 변수 c에 "value3" 각각 할당받지만,
변수를 배정받지 못한 d는 undefined값이 나옴.
변수를 배정받지 못한 d가 4를 배정받을수 있도록 d = 4라고 써서 직접 입력할수도 있음.

(하지만 여기서 입력한 4는 초기값 (이니셜 value값)으로써, 만약 배열에 "value4"가 있다면
d = 4라고 할지라도 d에는 value4가 할당됨.)


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

console.log(a, b, c, d) // value1, value2, value3, 4

(2) 객체 구조분해할당 : 배열의 경우 순서가 중요하지만, 객체의 경우에는 key값이 중요하다.

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name, age, height} = {
    name: 'jake',
    age: 30,
    height: 186,
}; 

console.log("name => ", name);
console.log("age => ", age);
console.log("height => ", height);

// name: jake, age:30, height:186

더이상 객체타입이 아닌, 일반 문자열string과 숫자열number 타입으로 나옴.

객체를 새로운 이름으로 할당하는 방법

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

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

이렇게 하면 name을 newName으로, age를 newAge로, height를 newHeight로 재할당함.


console.log('newName => ', newName);
console.log('newAge => ', newAge);
console.log('newHeight => ', newHeight);


// newName = 'jake'
// newAge = 30
// newHeight = 186

 

객체에서 undefined로 나오는 경우(배열과 동일함)

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let {name, age, height, birthday} = user;

console.log(name, age, height, birthday); 

// jake, 30, 186, undefined

여기서 birthday는 할당이 안되어있기에 undefined로 나온다. 
이를 막으려면 초기값 (이니셜 value값) 지정가능

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

// jake, 30, 186, today

 

2. ES6 단축속성명 property shorthand 

const name = "jake";
const newAge = "30";
const height = "186";

const obj = {
    name: name,
    age: newAge,
    height: height,
}

key-value. 왼쪽은 key, 오른쪽은 value. 오른쪽 value가 실질적인 데이터
왼쪽과 오른쪽이 같은 경우 아래와 같이 key값을 과감히 생략 가능.
즉 key와 value가 똑같으면 생략할 수 있다.

const obj = {name, age: newAge, height}

만약 key-value값이 모두 같아서 key값을 모두 생략한 경우

const name = "jake";
const age = "30";
const height = "186";

const obj = {
    name: name,
    age: age,
    height: height
}

const obj {name, age, height}

이는 객체임에도 배열처럼 보일수도 있으나, 객체다. 단축 속성명을 썼을 뿐이다.
그리고 객체와 배열의 가장 큰 차이점은, 배열은 대괄호 [ ], 객체는 중괄호 { }

 

 

3. 전개구문 (스프레드 오퍼레이터) spread operator

전개구문은 말 그대로 배열 또는 객체를 전개하는 것이다.

배열에서의 전개구문

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


전개구문은 ...을 사용 -> 새로운 구조를 써야할 때 사용
...arr이라는 뜻은 arr을 반복해 써넣은것을 의미한다.
let newArr로 하나를 더 추가해 [1, 2, 3, 4]를 만들고 싶을 때
..arr 전개구문을 사용한다.


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

객체에서의 전개구문

let user = {
    name: 'jake',
    age: 30,
    height: 186,
};

let user2 = {
    ...user,
    gender: 'male'
};

console.log(user2); //{ name: 'jake', age: 30, height: 186 }

...user라는 전개구문을 씀으로써 user의 객체속성을 다 가져옴.

const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];
const combinedNumbers = [...numbers, ...moreNumbers];

console.log(combinedNumbers); //[1, 2, 3, 4, 5, 6]

 

 

4. 나머지 매개변수 (레스트 파라미터) rest parameter

매개변수의 개수를 정확히 모를 때 사용.  ...args (arguments) = 추가적인 나머지(arguments)가 들어올 수 있다.

 

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
여기서 args에는 4, 5, 6, 7이 들어감.


여기서 ... 는 스프레드 문법이다. console에서 이 스프레드 문법을 빼고 출력해보면
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] 추가된 4 5 6 7은 배열 형태로 나온다.
즉, ...를 꼭 해서 나머지 매개변수로 인식할 수 있도록 해야 한다.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
  }
  const result = sum(1, 2, 3, 4, 5);
  
  console.log(result); // 15

 

5. 템플릿 리터럴 (백틱) template literal

console.log ("Hello World"); 
console.log (`Hello World`);  


쌍따옴표 또는 따옴표가 아닌, 백틱 `` 으로도 문자열을 묶을 수 있음.
백틱을 넣으면 JavaScript코드, 변수, 연산등도 들어갈 수 있다. ${ }형태로 넣어야 함.

console.log (`Hello World ${3+3}`); // Hello World 6


const testValue = "안녕하세요!";
console.log(`Hello World ${testValue}`); // Hellow World 안녕하세요!


템플릿 리터럴은 따옴표와는 달리, 멀티라인(여러 줄)을 지원한다.

console.log( `
            Hello
            My Name is JavaScript
            Nice to meet You!
`);

const name = 'John';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;

console.log(message); 

// My name is John and I am 30 years old.