data life

[JavaScript] 최신 JavaScript 기능 (2024) 본문

Front-end/JavaScript

[JavaScript] 최신 JavaScript 기능 (2024)

주술회전목마 2024. 4. 22. 23:06

1. 프라이빗 클래스 필드와 메소드

- 객체 지향 프로그래밍에서 중요한 역할을 합니다.

- 다른 사람이 작성한 함수를 사용할 시, 프라이빗해야 하는 문제를 해결해줍니다.

class MyClass {
  #privateMethod() {
    console.log("This is a private method.");
  }
  publicMethod() {
    console.log("This is a public method.");
    this.#privateMethod(); // 클래스 내부에서만 호출 가능
  }
}

const instance = new MyClass();
instance.publicMethod(); // "This is a public method." 출력
// 아래 코드는 문법 오류입니다. 클래스 외부에서 호출할 수 없습니다.
// instance.#privateMethod();

 

2. at() 함수

- 배열의 음수 인덱스를 사용하여 마지막 항목에 엑세스하도록 도와주는 함수입니다.

const arrs = [1, 2, 3];
const arr = arrs.ar(-1);
const arr = arrs[arrs.length - 1]; // 기존방식

 

3. toReversed(), toSorted(), with(), toSpliced()

- reverse(), sort(), splice() 함수들은 이미 익숙하도록 사용하고 있지만 배열을 변경한다는 점에서 불편함을 느꼈을 수 있습니다. 위의 함수들은 배열을 수정하지 않고 수정된 복사본을 반환하므로 복사를 만들 필요가 없어졌습니다.

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

const months = ["Jan", "Mar", "Apr", "May"];
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
console.log(months); // ["Jan", "Mar", "Apr", "May"]

const items = [1, 2, 3];
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

 

4. Object.prototype.hasOwnProperty()

- 객체가 특정 속성을 자체 속성으로 갖고있는지 여부를 확인하는 데 사용됩니다.

- 객체의 직접적인 속성만 확인하며, 존재하면 true, 상속된 속성이거나 전혀 선언되지 않은 속성이면 false를 반환

const myObject = {
  name: "John",
  age: 30
};

console.log(myObject.hasOwnProperty("name")); // true
console.log(myObject.hasOwnProperty("gender")); // false

 

주의할 점으로는 객체 생성의 근원지를 장담할 수 없을 경우엔 다음과 같이 사용해야합니다.

Object.prototype.hasOwnProperty.call(myObject, 'name');

 

 

출처 : 대부분 모르는 최신 JavaScript 기능(2024년) | ui-log