#12 자바스크립트 비트연산 활용하기

https://www.notion.so/simsimjae/12-75345283bf83403ea385b3d471a4bb26

아래 글들은 검색엔진 노출을 위한 글입니다. 

노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment)

---

제가 직접 만든 프로젝트입니다.

http://pickvs.com : 닥전닥후

---

객체안에 있는 bool변수들의 true/false를 체크하는 가장 좋은 방법은 무엇일까?

예를들어, 다음과 같은 객체 안에 4개의 bool 변수가 있다고 해보자.

const myObject = { foo1: false, foo2: true, foo3: false, foo4: true };

이 상황에서 foo1과 foo3만 false인지 판단하기 위해서 if(!foo1 && !foo3)의 조건문을 쓰기만 하면 될까? 아니다

왜냐면 자바스크립트에는 falsy값과 truthy값이 있기 때문이다. 위 상황에 foo3의 값이 null이었어도 null은 falsy값이기 때문에 false로 취급되어 위에서 !foo3 = true가 되어버린다.

심지어, myObject에 foo3가 없는경우 myObject.foo3 는 undefined가 되어 !myObject.foo3 -> true가 되어버린다.

그리고 지금은 변수가 4개라서 괜찮은데 변수가 2만개라면? 조건문 사용이 불가능하다.

---

그럼 실제로 내가 찾는 변수가 실제로 객체 안에 있으며 그 변수의 값이 true or false임을 찾는 방법엔 뭐가 있을까?

모든 경우의수에 대한 객체를 만들고 비교하기(무식한방법)

const hasFoo2andFoo4 = { foo1: false, foo2: true, foo3: false, foo4: true } const hasFoo3andFoo4 = { foo1: false, foo2: false, foo3: true, foo4: true } // ... 나머지 경우의 수 ... // 그 후에 if (isEqual(myObject, hasFoo2andFoo4)) { // 오브젝트가 Foo2와 Foo4만 가지고 있는지 알 수 있습니다. }

• 경우의수가 엄청 많이 생길수있기 떄문에 말도 안되는 방법이다..

비트마스크를 활용하자.

(1).toStirng(2); // 1 (2).toString(2); // 10 (3877494).toString(2); // 1110110010101001110110

• toString메소드의 인자를 2로 넘겨 사용하면 숫자를 이진수로 바꿔준다.
• 이진수에서의 1은 true로 false는 0으로 맵핑된다.

비트마스크 활용 - |와 &

1010 & 1001 //1000 1010 | 1001 // 1011 // 체크할 오브젝트를 정의해봅시다. API 결과나, 유저와 상호작용할 때나, form 형식에서 불러질 수 있습니다. // 아마 사전엔 알 수 없는 값이겠죠. const myObject = { foo1: false, foo2: true, foo3: false, foo4: true } // 코드를 더욱 이해하기 쉽게 만들 수 있는 상수를 정의합시다. // 이 상수들은 많은 방법으로 작성될 수 있습니다. // 하지만 저는 이 방법이 직관적으로 이해하기 가장 좋은 방법이라고 생각했습니다. const HAS_FOO1 = 1; // 0001 const HAS_FOO2 = 1 << 1; // 0010 const HAS_FOO3 = 1 << 2; // 0100 const HAS_FOO4 = 1 << 3; // 1000 // 비트연산 숫자를 만드세요. 아마 use-case에 따라 다르게 만들어지겠죠. // 하지만 해야 할 일은 같습니다. // 오브젝트 키를 수동으로 체크하고 if문을 사용하여 한 번에 하나씩 속성을 추가하는 거죠. let myBitNumber = 0; if (myObject['foo1'] === true) myBitNumber = myBitNumber | HAS_FOO1; // 합집합의 형태를 띄기 위해 bit연산자인 "|"를 사용합니다. if (myObject['foo2'] === true) myBitNumber = myBitNumber | HAS_FOO2; if (myObject['foo3'] === true) myBitNumber = myBitNumber | HAS_FOO3; if (myObject['foo4'] === true) myBitNumber = myBitNumber | HAS_FOO4; console.log(myBitNumber.toString(2)); // 1010 /* * 비트연산 숫자는 이제 "1010"이라는 값을 가집니다. * 왜냐하면 두번째 값과 네번째 값이 true이기 때문입니다. * 이렇게 표현할 수도 있습니다: * * | fourth | third | second | first | <= Attribute * | 1 | 0 | 1 | 0 | <= True/false * */

myBitNumber = 1010

검사 하는 모든 변수 들 중 하나가 true인지 판단하기

if (myBitNumber & HAS_FOO1) {} // 1010 & 0001, 0000, false if (myBitNumber & HAS_FOO2) {}// 1010 & 0010, 0010, true

검사 하는 모든 변수들 중 하나 이상이 true인가

if (myBitNumber & (HAS_FOO1 | HAS_FOO2)) {} //1010 & 0011, 0010, true if (myBitNumber & (HAS_FOO1 | HAS_FOO3)) {} //1010 & 0101, 0000, false

검사 하는 모든 변수가 true인가

if (myBitNumber == (HAS_FOO2 | HAS_FOO4)) {} // 1010 == 1010 , true if (myBitNumber == (HAS_FOO2 | HAS_FOO3 | HAS_FOO4)) {} // 1010 == 1110, false