[Javascript] 논리연산자를 이용한 동적 셀렉트박스

기본 연산자, 논리 연산자를 이용한 동적 셀렉트 박스를 구현하면서 javascript를 많이 경험해 보자

1. 연산자

수학 연산자

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %
• 거듭제곱 연산자 **

var a = 3;
var b = 2;
var c = 4;

[나머지연산자]
a % b = 1  // 3을 2로 나눈 후 나머지 출력

[거듭제곱 연산자]
a ** b = 9   // a를 b의 수만큼 곱한 수 출력
a ** c = 81  // a를 c의 수만큼 곱한 수 출력

 

할당 연산자 = 

let a = 1;
let b = 2;
let c = 3 - (a = b + 1); //a = 3 , c = 0;

let aa, bb, cc;
aa = bb = cc = 2 + 3;  // aa = 5, bb = 5, cc = 5

// 위 코드와 동일한 코드, 가독성 좋게 줄을 나눠서처리
cc = 2 + 3;
bb = cc;
aa = cc;

 

복합 할당 연산자

let n = 5;
n += 3;     // n은 8
n *= 4;     // n은 32, 위 덧셈이 적용되어 8 *4 계산이 출력
n += 1 + 4  // n은 37

let a = 1, b = 1;
let c = ++a; // 2
let d = b++; // 1

let aa = 2;
let x = 1 + (aa *= 2);  // x = 5

 

증감 감소 연산자

See the Pen gOgxvEr by JNoony (@jnoony) on CodePen.

 

 

비트 연산자 : 인수를 32비트 정수로 변환하여 이진 연산을 수행

• 비트 AND &
• 비트 OR |
• 비트 XOR ^
• 비트 NOT ~
• 왼쪽 시프트(LEFT SHIFT) >>
• 오른쪽 시프트(RIGHT SHIFT) <<
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) >>>

 

쉼표 연산자: 코드를 짧게 쓰려는 의도로 가끔 사용

let a = (1 + 2, 3 + 4);  // a = 7;

 

 

 

2. 비교 연산자

불린 형 반환

alert(2 > 1)   // treu
alert(2 == 1)  // false
alert(2 != 1)  // true

//반환된 변수 변수에 할당
let result = 5 > 4;
alert(result)  // true

 

문자열 비교

alert('z' > 'a');      // true
alert('pink' > 'red')  // false
alert('Bee' > 'Be')    // true
alert( '2' > 1 );      // true
alert( '01' == 1 );    // true

alert( 'c' == 'C' )   // false
alert( 'c' > 'C' )    // true
alert( 'c' < 'C' )    // false

 

문자열 비교 시 적용되는 알고리즘은 다음과 같습니다. (영어는 사전 순이 아니라 유니코드 순.)

unicode-table.com/kr/alphabets/english/

영어 알파벳

1. 두 문자열의 첫 글자를 비교
2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.

 

일치 연산자

alert( 0 == false );    // true
alert( ' ' == false );  // true :: 동등모드
alert( 0 === false );   // false  ::엄격모드 

alert( null === undefined ); // false
alert( null == undefined );  // true

 

null vs 0  , 비교가 불가능한 undefined

alert( null > 0 );   // false
alert( null == 0 );  // false
alert( null >= 0 );  // true

alert( undefined > 0 );  // false 
alert( undefined < 0 );  // false 
alert( undefined == 0 ); // false 

 

 

 

3. if문

let year = prompt('오늘은 몇년도?', '');
if (year == 2021) {
  alert( "정답입니다!" );
}
else if(year > 2021) {
  alert( '년도를 내리시지' ); 
}
else {
  alert( '오답입니다!' ); 
}

 

 

 

 

4. 논리 연산자

• || (or)  :  result = value1 || value2;
• && (and)  : result = a && b;
• ! (not) : result =! value;
• ?? (null 병합)

alert( 1 && null && 2 );  // null
alert( null || 2 && 3 || 4 );   // 3

 

※ '??'와 '||'의 차이

let height = 0;
alert(height || 100);  // 100
alert(height ?? 100);  // 0, height가 null이나 undefined일 경우에만 100


let _height = null;
let _width = null;
let area = (_height ?? 100) * (_width ?? 50);

alert(area);  // 5000
alert(_height ?? (100 * _width) ?? 50)  // 0

 

 

 

5. while과 for 반복문

let i = 0;
while(i < 3){
   alert(i);
   i++;
} // 0,1,2가 출력됨

while(i){
   alert(i--)
} // 3,2,1 이 출력됨

 

do... while 반복문

let i = 0;
do{
   alert( i );
   i++;
} while ( i < 3 );  // 0,1,2 출력

 

for 반복문

for( let i = 0;i < 3;i++ ){
  alert(i)
} //0,1,2 출력

 

반복문 빠져나오기

let sum = 0;
while(true){
   let val = +prompt('숫자 입력','');
   if( !val ) break;  // 숫자 쓰는란이 ''이면 빠져나옴
   sum += val;  // 숫자 입력한 만큼 더해짐
}
alert('총: '+sum);  

 

다음 반복으로 넘어가기

for( let i=0; i<10; i++){
   if( i % 2 == 0){
      alert(i)
   } // 0,2,4,6,8
}

 

 

 

 

6. 정리한 내용 모아서 간단한 동적 Select Box 만들기

<!-- HTML5 -->
<h1>오늘 뭐 먹지?</h1>
<select id="sel">
  <option>--종류 고르기--</option>
  <option value="food1">양식</option>
  <option value="food2">한식</option>
  <option value="food3">분식</option>
  <option value="food4">중식</option>
  <option value="food5">일식</option>
  <option value="food6">패스트푸드</option>
  <option value="food7">편의점</option>
</select>

 

/*********
* javascript
*********/ 
//첫번째 셀박
let selBox = document.querySelector('#sel'); 

//첫번째 셀박의 selected 감지
selBox.addEventListener('input',function(e){
  // 배열오브젝트 데이터에 selected된 value값으로 filter
  let data = listData.filter(item => item.name === e.target.value);
  
  // 첫번째 value에 관련된 두번째 셀박 그리기
  secondSelBox(data[0].name, data[0].data);
  
  // 다음 선택시 이전 두번째 셀박 삭제하기
  document.querySelectorAll('select')[1].nextSibling.remove();
})

// 선택한 Element 다음형제 만드는 프로토타입 만들기
Element.prototype.appendAfter = function (element) {
    element.parentNode.insertBefore(this, element.nextSibling);
}, false;

// 두번째 셀박 그리기 함수
function secondSelBox(name,data){
  var sel = document.createElement('select');
  sel.id = 's-'+name;
  for ( let i=0,len = data.length; i<len;i++) {
    var opt = document.createElement("option");
    opt.value = data[i].val;
    opt.innerHTML = data[i].name;
    sel.appendChild(opt);
  } 
  sel.appendAfter(document.getElementById('sel'));
}



//데이터
var listData = [
  {
    name:"food1",
    data:[
      {val:'sec-food1',name:'돈까스'},
      {val:'sec-food2',name:'스테이크'},
      {val:'sec-food3',name:'폭립'}
    ],
  },
  {
    name:'food2',
    data:[
      {val:'sec-food1',name:'콩비지'},
      {val:'sec-food2',name:'보리밥'},
      {val:'sec-food3',name:'해물칼국수'}
    ]
  },
  {
    name:'food3',
    data:[
      {val:'sec-food1',name:'김밥'},
      {val:'sec-food2',name:'즉석떡볶이'},
      {val:'sec-food3',name:'쫄면'},
      {val:'sec-food4',name:'오뎅'},
      {val:'sec-food5',name:'비빔만두'}
    ]
  },
  {
    name:'food4',
    data:[
      {val:'sec-food1',name:'마라탕'},
      {val:'sec-food2',name:'꿔바로우'}
    ]
  },
  {
    name:'food5',
    data:[
      {val:'sec-food1',name:'초밥'},
      {val:'sec-food2',name:'다코야키'}
    ]
  },
  {
    name:'food6',
    data:[
      {val:'sec-food1',name:'감자튀김'}
    ]
  },
  {
    name:'food7',
    data:[
      {val:'sec-food1',name:'라면'},
      {val:'sec-food2',name:'커피우유'},
      {val:'sec-food3',name:'과자'},
      {val:'sec-food3',name:'아이스크림'}
    ]
  }
]

 

See the Pen ZELXyqw by JNoony (@jnoony) on CodePen.