[JavaScript] JS의 최신 기능들

arguments 객체

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체이다. js는 유연한 언어로 함수 호출 시 인자 형식을 맞추지 않아도 에러가 발생하지 않는다.

📌 참고 : ES6 호환 코드를 작성 중이라면 되도록 나머지 매개변수 구문을 사용해야 한다.

• arguments 객체는 매개변수 개수가 정확히 정해지지 않은 함수를 구현할 때 유용하다.
• 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야 하는 함수를 생성할 때 유용하다.

function defineDate(year, month, date) {
  let length = arguments.length;
  
  if (length === 1) {
    return year + "년"
  } else if (length === 2) {
    return year + "년 " + month + "월"
  } else if (length === 3) {
    return year + "/" + month + "/" + date
  };
};

arguments

• 함수로 넘어온 모든 인수에 접근할 수 있다.
• 함수 내에서 이용 가능한 지역 변수
• length/index가 있어 배열이라고 생각할 수 있지만, Array 형태의 객체임
• 배열의 내장 메소드가 없음 (forEach,map)

function showName(name){
	console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
}
showName('Mike', 'Tom');
// 2
// 'Mike'
// 'Tom'

---

나머지 매개변수와 전개 구문 (Rest parameters, Spread syntax)

나머지 매개변수와 전개 구문은 ...로 사용한다. 둘의 차이점은 무엇일까 ?

나머지 매개변수는 함수의 인수 전달 시에 마지막으로 사용되며, 전달된 인수들의 목록을 배열로 압축할 때 사용되어진다.

전개구문은 뭉쳐있는 여러 개 값들을 개별적인 값들의 목록으로 만들 때 사용한다.

--> 나머지 매개변수는 배열로 합쳐주고, 전개 구문은 배열 또는 객체를 펼쳐주는 역할을 함.

---

나머지 매개변수 (Rest parameters)

function showName(...names){
	console.log(names);
}
showName(); // []
showName('Mike'); // ['Mike']
showNmae('Mike', 'Tom'); // ['Mike', 'Tom']

나머지 매개변수는 정해지지 않은 개수의 수를 배열로 나타낼 수 있게 한다. ...를 찍고 뒤에 names라는 배열 이름을 정해주면 names 배열 안에 전달된 변수들이 들어가게 된다. 아무것도 전달하지 않으면 undefined가 아니라 빈 배열이 나타나게 된다.

// 전달받은 모든 수를 더해야함
function add(...numbers){
	const result = numbers.reduce((prev, cur) => prev + cur);
    return result;
}

console.log(add(1,2,3)); // 6
console.log(add(1,2,3,4,5,6,7,8,9,10)); // 55

// ----------------------------------------------------

// user 객체를 만들어 주는 생성자 함수 만들기
function User(name, age, ...skills){
	this.name = name;
    this.age = age;
    this.skills = skills;
}

const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Tom", 20, "JS", "React");
const user3 = new User("Jane", 10, "English");

console.log(user1);
// {
//   name: "Mike",
//   age: 30,
//   skills: ["html", "css"]
// }
console.log(user2);
// {
//   name: "Tom",
//   age: 20,
//   skills: ["JS", "React"]
// }
console.log(user3);
// {
//   name: "Jane",
//   age: 10,
//   skills: ["English"]
// }

---

전개 구문(Spread Syntax)

1) 전개 구문 : 배열

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const result = [...arr1, ...arr2];

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

const result = [0, ...arr1, ...arr2, 7, 8, 9];
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2) 전개 구문 : 객체

const user = {name: 'Mike'}
const mike = {...user, age: 30}

console.lg(mike) // {name: 'Mike', age: 30}

3) 전개 구문 : 복제

const arr = [1, 2, 3];
const arr2 = [...arr]; // [1, 2, 3]

const user = {name: 'Mike', age: 30};
const user2 = {...user};

user2.name = "Tom";

console.log(user.name); // "Mike"
console.log(user2.name); // "Tom"