[JS] 나머지 매개변수, 전개 구문, 단축 속성명

 

 

자주 쓰이는 문법들을 알아보자 ~

 

function showName(name) {
  console.log(name);
}

showName("aoto"); // "aoto"
showName("aoto", "yae"); // Error는 안뜨지만 aoto만 뜬다.
showName(); // undefined

 

매개변수에 name만 쓰여있지만,

매개변수를 넘길 때 개수 제한은 없어 더 많거나 적은 값을 넘겨도 Error가 발생하지 않는다.

 

arguments

- 함수로 넘어온 모든 인수에 접근할 수 있다.

- 함수 내에서 이용 가능한 지역 변수이다.

- length / index가 있어서 배열이라 생각할 수 있지만

- 실은 Array 형태의 객체

- 그러니 배열의 내장 메서드 없음(forEach, map)

function showName(name) {
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

showName("aoto", "yae");
// 2
// "aoto"
// "yae"

 

❗️ ES6에선 나머지 매개변수를 사용할 것을 권장

 

💡 나머지 매개변수 Rest parameters

전달하는 매개변수의 개수가 정확하지 않을 때 사용

function exam(a, b, c, ...args) {
  console.log(a, b, c);
  console.log(...args);
  console.log(args)
}

exam(1, 2, 3, 4, 5, 6, 7, 8);
// 1 2 3
// 4 5 6 7 8
// [4, 5, 6, 7, 8] 전개 연산자를 안 쓰면 배열을 반환한다.

 

- 배열 메서드 사용 가능

function showName(...names) {
  console.log(names);
}

showName(); // []
showName("aoto"); // ['aoto']
showName("aoto", "yae"); // ['aoto', 'yae']

 

응용!

function add(...numbers) {
  let result = 0;
  numbers.forEach((num) => (result += num));
//   let result = numbers.reduce((prev,curr) => (prev+curr)); 위와 같음
  console.log(result);
}

add(1, 2, 3); // 6
add(1, 2, 3, 4, 5); // 15

function User(name, age, ...skills) {
  this.name = name;
  this.age = age;
  this.skills = skills;
}

const user1 = new User("aoto", 30, "html", "css");
const user2 = new User("yae", 40, "JS", "React");
const user3 = new User("haru", 50, "English");

console.log(user1); // User {name: 'aoto', age: 30, skills: Array(2)}
console.log(user2); // User {name: 'yae', age: 40, skills: Array(2)}
console.log(user3); // User {name: 'haru', age: 50, skills: Array(1)}

 

❗️ 주의할 점은 나머지 매개변수는 항상 마지막에 위치해야 한다. (...skills)

 

💡 전개 구문 Spread syntax

전개 연산자(...)를 작성해 말 그대로 펼쳐서 전개해 주는 것

let arr1 = [1, 2, 3];

console.log(arr1); // [1, 2, 3]
console.log(...arr1); // 1 2 3

 

❗️ 합치거나 추가 : 배열을 손쉽게 합치거나, 추가하기

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

let result2 = [...arr2, 7];
console.log(result2); // [4, 5, 6, 7]

 

❗️ 복제 : 원본 안 건들고 복제하기

let arr = [1, 2, 3];
let arr2 = [...arr];

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

user2.name = "yae";
console.log(user.name); // "aoto"
console.log(user2.name); // "yae"

 

응용!

let user = { name: "aoto" };
let info = { age: 30 };
let fe = ["JS", "React"];
let lang = ["Korean", "English"];

user = {
  ...user,
  ...info,
  skills: {
    ...fe,
    lang,
  },
};

console.log(user); // {name: 'aoto', age: 30, skills: {…}}

let [name, ...rest] = ["aoto", 20, "Gyeongi"]

console.log("name", name) // "aoto"
console.log("rest", rest) // [20, "Gyeongi"]
// 나머지 부분을 배열로 반환한다!

 

💡 Property Shorthand 단축 속성명

객체의 key 와 value 가 같을 때 ~

const name = "aoto";
const newAge = 30;

const obj = {
  name: name, // key 와 value 는 값이 같을 수 있다 이럴 때 생략이 가능!!
  age: newAge,
};

// 위 obj 와 같다.
const obj2 = {
  name,
  age: newAge,
};

// 만약 age도 같다면
const obj3 = { name, age }; // 마치 배열 같지만 객체다.

 

 

 

🔗 https://youtu.be/lekNM8ldxno?si=qCxUOuvn3T3Q1GtP