JS | 연산자, 조건문, 반복문, 형 변환

23754 단어 강의노트jsjs

✒️ECMA Script (ES6)

표준화된 자바스크립트 !

✒️데이터 타입 확인

typeof 를 통해서 데이터 타입을 확인할 수 있다.

*****typeof*****
console.log(typeof 123); // number
console.log(typeof null); // object
console.log(typeof []);  // object
console.log(typeof {});  // object

하지만 이처럼 null, 배열, 객체 모두 object 로 반환하여 정확한 타입을 확인하기 어렵습니다.

그러면 데이터 타입을 확인할 수 있는 함수를 만들어 사용해봅시다.

function getType(data) {
  return Object.prototype.toString.call(data);
}

console.log(getType(123)); //[object Number]
console.log(getType(true)); //[object Boolean]
console.log(getType(null)); //[object Null]
console.log(getType([])); //[object Array]
console.log(getType({})); //[object Object]

데이터 타입을 정확히 확인 가능합니다.


✒️연산자

✔️ 산술 연산자 : +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)

✔️ 할당 연산자 (=)

  let a = 2 
  // a= a+1 
  a += 1  (산술 연산자 모두 사용 가능)

✔️ 비교 연산자 : ===(일치), !==(불일치), <, <=, >,>=

== 와 === 차이

‘===’는 변수 값, 유형 모두 비교

‘==’는 변수 값을 기반으로 유형을 수정한다.

✔️논리 연산자

 const a = 1===1 // true
 const b = "AB"==="AB"
 const c = false
 
 && 연산자 => and 연산자 : 모두 ture 여야 ture 반환 
 console.log(a && b && c) // false
 
 || 연산자 => or 연산자 : 조건 중에 하나라도 truetrue 반환
 console.log(a || b || c) // true
 
 ! 연산자 => 부정연산자 : 특정한 값의 반대 값을 반환
 console.log( !a ) 

✔️삼항 연산자

 ? 연산자 : 조건  (실행명령 각각 1개뿐일 때)
 (userNumber % 3 === 0)?alert("3의 배수입니다."):alert("3의 배수가 아닙니다.");

✒️조건문

✔️ If Else문

  if (조건1) { 
  	조건1true 일 때만 실행할 명령
  } if else (조건2) { 
  	조건 1false, 조건 2true 일 때 
  } else { 
  	false 일 때 실행할 명령
  }
  
  ex
  const a = random();
  
  if (a === 0) {
    console.log("a is 0");
  } else if (a === 2) {
    console.log("a is 2");
  } else {
    console.log("rest...");
  }

✔️ switch문 if 문으로 처리할 조건이 많을 때 사용하면 좋다.

 **switch** ( 대상 ) {
   **case** 조건1 :
     조건1일 때
     ***break;  <---- break를 쓰지 않으면 다음 case문도 실행한다.***
   **case** 조건2:
     조건2일때
   **case** 조건3;
     조건2일때, 조건3일때
     **break**;
   **default:**
     모든 case와 충족하지 않을 때
 
 ex
 switch (session) {
 case "1":
 document.write(
 "<p>마케팅 세션은 <strong>201호</strong> 에서 진행됩니다.</p>"
 );
 break;
 case "2":
 document.write(
 "<p>개발세션은 <strong>203호</strong> 에서 진행됩니다.</p>"
 );
 break;
 case "3":
 document.write(
 "<p>디자인 세션은 <strong>205호</strong> 에서 진행됩니다.</p>"
 );
 break;
 default:
 alert("잘못 입력했습니다.");
 }

✒️반복문

✔️ for문

    처음 시작 값 설정해 ;어떤 조건을 걸고 반복할건가? ; 어떤 증가성 규칙으로?
    
    for (초기 값 ; 종료 조건 ; 증가 식) {
    	실행할 코드
    } 
    
    ex.
    for (let i = 0; i<3; i++){
    	console.log(i)
    }

✒️변수 유효 범위

변수가 유효하게 동작할 수 있는 범위

  • const, let : 블록 레벨 안에서만 유효함
    function scope(){
        if(true){
            const a = 123  // 이 {} 범위 안에서만 동작
        }
        console.log(a) // 유효범위 벗어남 => 동작x 
    }
    
    function scope(){
      console.log(a) // 선언보다 먼저 실행함 => 동작, 출력 x
        if(true){
            const a = 123
        }
    }
  • var : 함수 레벨 안에서 유효함
    ⇒ 의도하지 않은 범위에서 변수가 사용(호이스팅)되며, 메모리 누수로 이어질 수 있고, 유지 보수가 힘들기 때문에 사용하지 않는다.
    function scope(){
        if(true){
            var a = 123 
        }
        console.log(a) // 출력됨
    }
    
    function scope(){
       console.log(a) // undefined 로 출력됨
        if(true){
            var a = 123 
        }
    }

✒️ 형(Type) 변환

   const a = 1 // 숫자
   const b =1// 문자
   
   // 동등 연산자 ==
   console,log(a == b) // ture
   
   숫자와 문자는 타입이 달라서 false 로 나와야하지만, 형 변환이 일어나면서 true 반환
   따라서 일치연산자(===)를 사용하도록 해야한다. 
   
   const c = + b // 숫자 1 
   => 문자열에 + 붙이면 숫자로 형변환이 일어남 
   
   const d = a + '민지' // '1민지' 
   => 숫자에 문자열(빈 문자열도 가능)을 더하면 문자열로 형변환이 일어남
  • Truthy (참 같은 값)
    true, { }, [ ], 1, 2, ‘false’(문자), -12(음수), ‘3.14’ ...
  • Falsy (거짓 같은 값) 7개
    false, ‘빈문자열’ , null, undefined, 0, -0, NaN(not a number)

좋은 웹페이지 즐겨찾기