자바스크립트 복습 - 10

stulta_amiko·2022년 5월 18일
0

자바스크립트 복습

목록 보기
10/12
post-thumbnail

ES2016의 새로운 기능

Array.prototype.includes() / 지수연산자

includes()는 배열에 찾고자 하는 원소가 존재한다면 true를 반환하고 아니면 false 를 반환한다. 그리고 파라메터를 두개로 늘려서 파라미터의 첫번째는 찾고자하는 수를 두번째 파라미터는 시작할 인덱스를 뜻한다.

let array = [1, 2, 3, 4, 5];

console.log(array.includes(3)); // true
console.log(array.includes(10)); //false
console.log(array.includes(2, 0)); //true
console.log(array.includes(1, 3)); //false

이런식으로 간단한 예제를 통해서 includes의 역할을 볼 수 있다.

지수연산자

console.log(Math.pow(3, 2)); // 9
console.log(2 ** 3); // 8

기존의 방식은 .pow()를 이용하지만 새로운 방식은 중간의 애스터리스크만 두개 이용하면 지수연산자를 계산할 수 있다.

ES2017의 새로운 기능

문자열 패딩

패딩은 앞자리나 뒷자리에 추가할수있다. 쉽게 설명하자면 일종의 띄워쓰기 같은것이다.
뒤에 추가하는건 padEnd() 앞에 추가할땐 padStart()를 사용한다.

console.log("Hello".padStart(6)); // Hello
console.log("Bye".padEnd(5)); //Bye  (끝)

이런식으로 사용한다.
그리고 패딩에 사용자 지정 값을 추가할 수 도 있다.

console.log("Hello".padEnd(11, " Velog")); //Hello Velog
console.log("1".padStart(3, 0)); // 001
console.log("77".padStart(3, 0)); // 077

이런식으로 파라메터의 값을 추가하면 앞이나 뒤에 값을 추가 할 수 있다.

Object.entries() / Object.values()

const car = {
    company: "Porsche",
    type: "992.1",
    year: "2022",
};

console.log(Object.entries(car)); // [ [ 'company', 'Porsche' ], [ 'type', '992.1' ], [ 'year', '2022' ] ]
console.log(Object.values(car)); // [ 'Porsche', '992.1', '2022' ]

간단한 예제를 보면서 무슨코드인지 보자 두 메서드는 객체에 접근하는 메서드이다.
예제에서 볼 수 있듯이 entries는 모든 값을 반환하고
value는 키값을 제외한 value값만 보여주는것을 볼 수 있다.

Object.getOwnPropertyDescriptors()

const car = {
    company: "Porsche",
    type: "992.1",
    year: "2022",
};

console.log(Object.getOwnPropertyDescriptors(car));

실행결과
{
company: {
value: 'Porsche',
writable: true,
enumerable: true,
configurable: true
},
type: {
value: '992.1',
writable: true,
enumerable: true,
configurable: true
},
year: {
value: '2022',
writable: true,
enumerable: true,
configurable: true
}
}

실행결과만 봐도 무슨일을 할 수 있는지 알 수 있는 간단한 메서드이다.

어토믹스

멀티스레드 환경을 지원하기 위해 어토믹스가 도입되었다.

Atomics 오브젝트는 atomic operations 정적메소드로서 제공됩니다. 다음과 같은 오브젝트와 함께 SharedArrayBuffer 사용합니다.

어토믹스는 정적이므로 new를 이용해서 사용하거나 함수 형태로 호출 할 수 는없다.

Atomics.add()/.sub()/.load()/.store()

const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);
uint8[0] = 10;
console.log(Atomics.add(uint8, 0, 5)); // 10

console.log(uint8[0]); // 15

console.log(Atomics.load(uint8, 0)); // 15

먼저 add()의 사용법이다.
간단하게 위 예제를 보면 어떻게 사용하는지 알 수 있다. 파라메터로 대상 배열 그리고 위치 그리고 더하고자 하는 값을 더하면 그 위치의 값을 바꿔주는 모습을 볼 수 있다.

그리고 load()를 사용한 모습도 볼 수 있다. 잘보면 대상배열의 첫번째 파라메터로 주고 두번째 파라메터로 배열의 인덱스를 넣는것을 볼 수 있다.

sub()는 add()와 반대로 값을 빼주는 메서드이다.
store()는 특정값을 배열의 특정 인덱스에 넣는 역할을 하는 메서드이다.

const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);
uint8[0] = 10;
console.log(Atomics.sub(uint8, 0, 5)); //10

console.log(uint8[0]); //5
console.log(Atomics.store(uint8, 0, 23)); //23
console.log(uint8[0]); //23

위 예제를 보면 쉽게 알 수 있다.

0개의 댓글