JS문제풀이 (로꾸거배열) + (&, |, 연산자 단축평가)

attention

에이 티 티 이 엔 티 아이 온 유 갓 미 룩킹 포 어텐션~

string을 배열로 바꿔 순서를 거꾸로 바꿔 출력하면 된다. string을 배열로 바꾸는 방법엔 여러 가지가 있다.

1. Spread Operator

const str = 'attention';
const arr = [...str]; //빈 array에 attention요소 추가
console.log(arr); // output =>['a''t''t''e''n''t''i''o''n']

 

2. Array.from()

const str = 'attention';
const arr = Array.from(str); //문자열을 변환해 배열 생성
console.log(arr); //output => ['a', 't', 't', 'e', 'n', 't', 'i', 'o', 'n']

 

3. .split

const str = 'attention';
const arr = str.split(""); //한 글자 단위로 쪼개서 배열 생성
console.log(arr); // output -> ['a', 't', 't', 'e', 'n', 't', 'i', 'o', 'n']

취향에 맞게 사용하면 되겠다. 이제 배열에 저장했으니 역순으로 바꾼 후 출력하면 된다.

 

.reverse()와 .join( ) 사용하기

const str = 'attention';
const arr = str.split(""); // arr=['a', 't', 't', 'e', 'n', 't', 'i', 'o', 'n']
const rts =arr.reverse().join(""); // reverse를통해 배열 순서가 거꾸로 됨. +join으로 문자열로 변환
console.log(rts); //output => noitnetta

str 거꾸로니까 rts라고 했어 센스 있지 ㅎㅎ

 

최종 완성 코드

const word = prompt("단어를 입력하세요.");
const arr = word.split("");
const drow =arr.reverse().join("");
console.log(drow);

 

 

 

이 문제는 답을 구하는 게 중요하기보다는 3, 4번에 있는 &, |를 아는가에 관심을 기울이자. 참고로 난 몰랐다 ㅎ

추가로 단축 평가에 대해서도 알아보는 시간을 가지자.

&연산자와 |연산자의 경우 &&과 ||모습이 분명 익숙할 텐데 원리가 비슷하나 결과는 다르다. 

const a=19;
console.log((a==19)&&false);
console.log((a==19)||false);

예시를 보자. 1번 log와 2번 log 각각 어떤 값이 나올까? 정답은 false, true

&&의 경우 둘 다 TRUE로 평가되어야 TRUE를 반환, ||의 경우 둘 중 하나라도 TRUE로 평가된다면 TRUE값을 반환한다.

const a=19;
console.log(a&false); //0
console.log(a|false); //19
console.log(a&&false); //false
console.log(a||false); //19
console.log(true&&a); //19
console.log(false||a); //19
console.log(a&&true); //true
console.log(a||15); //19

4, 5,6번째 console.log에서 true가 아닌 19가 나온 건 단축 평가에 대해서 이해해야 한다.

먼저, &&와 ||에서 boolean값이 나오지 않을 때와 그 과정에 대해서 보도록 하자.

논리 연산자(&&, ||,!)의 경우 판단을 할 때, 좌항에서 우항으로 진행된다.

 

&&의 경우 둘 다 true로 평가되어야 true가 되기에 좌항에서 false로 평가될 경우 바로 false라는 값을 반환한다.

3번째 log의 경우 19는 truthy값이므로, 뒤의 피연산자가 false이므로 false를 반환한다.둘 다 trthy값을 가질 경우는 좀 특이해진다. 마지막에 truthy값인 피연산자가 반환된다.5,7번째 log를 보자 두 피연산자 모두 truthy값이므로 각각 뒤에 있는 피연산자인 19와 true가 반환된다.

 

|| 

는 둘 중 하나라도 true라면 true이기에 첫 번째 피연산자에서 truthy값이라면, 바로 첫번째 피연산자를 반환한다.4,6,8번째  log를 보게 되면 4번째 log는 앞에 있는 a가 truthy값이므로 a의 값인 19를 반환한다.6번째의 경우 첫 번째의 피연산자가 false지만 두번째에 있는 a가 truthy값이므로  위와 같이 19를 반환한다.마지막 8번째는 둘 다 truthy값을 갖지만 첫번째 피연산자인 a에서 바로 true가 판별되었기에 바로 a값을 반환한다.

 

즉 단축 평가란,  표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평과 과정을 생략하는 것을 말한다.

추가로, 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다는 것도 기억하자.

 

이해를 했다면 console.log("딱복"||"물복")이라면 무엇이 출력될까? 정답은 딱복(이 훨씬 맛있잖아 당연히)다른 답을 도출했다면 다시 읽어보자 천천히 위의 설명을.

 

&와 |

다시 본론으로 돌아와 &, |은 &&, ||처럼 둘 다 true를 만족한다, 하나만 만족해도 된다 메커니즘과 비슷한데 다음을 보자.4 = 100, 11 = 1011, 40 = 101000 맞다. 숫자를 이진수 비트로 나타낸 것이다. &와 |는 하나 또는 둘 모두의 해당 비트가 1인 각 비트 위치에서 1을 반환한다. 다음 예시를 보면 이해 가능하다.4와 6을 비교하면 4의 경우 00100, 6의 경우 00110이다. &은 각 비트 모두 1이어야 1을 반환한다.  |은 각 비트 중 하나라도 1이라면 1을 반환한다. 4&6 => 00100  4|6 => 00110이 되는 것이다. 

 

아까 위에서 본 예제를 다시 보면서 이해해보자. 너무 멀어졌으니 다시 들고 오겠다.

const a=19;
console.log(a&false); //0
console.log(a|false); //19
console.log(a|4); //23

a는 19이고, 비트로 표현하면 010011이고 false는 000000 &은 모두 1이어야 1을 반환 모두 1인 비트가 없으니 0을 반환한다.

|는 하나만 1이어도 1을 반환하기에 010011 => 19를 반환한다.

마지막의 경우 4는 000100이니까 a|4는 010111이 된다. 십진수로 표현하면 23이 된다.(1+2+4+16)

 

의외로 코드를 구성하다 보면 이런 부분에서 오류, 혹은 원하는 결과가 나오지 않을 때가 있다.

&&,||정도야 내가 잘 아니까 여기서 문제가 있는 건 아니겠지 하는 태도는 지양해야겠다.