JAVASCRIPT 내용 정리

JavaScript

• Expression

  • 값을 만들어내는 간단한 코드를 표현식이라고 합니다.

    

  • 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할수 있다.

   

• Statement

  • 하나 혹은 여러 개의 표현식이 모여 문장을 이룹니다.

  • 모든 표현식은 문장이 될 수 있습니다.

  • (보통) 문장의 끝에는 세미 콜론을 붙입니다.

  • 한 줄에 여러 문장을 적을 경우, 세미콜론으로 문장을 구분해야 한다.

  • 마지막 문장은 세미 콜론을 붙이지 않아도 문제가 없다.

  • 마지막 문장의 결과가 반환된다.

  • 조건문 (if), 반복문 (for) 도 문장입니다.

  • 이 경우에는 마지막 } 뒤에 세미콜론을 붙이지 않습니다.

  • 문장들이 모여 만들고자 하는 프로그램이 된다.

• Keywords, Reserved Words(키워드와 예약어)

  • Keywords

    • 자바스크립트에서 특정한 목적을 위해 사용되는 단어

    • 이러한 키워드 들은 예약어(?)로 지정되어 있습니다.

     

    

  • Reserved Words

    • 프로그램을 작성할 때, 변수명, 함수명 등 이름으로 사용할 수 없는 단어

     

    

  • Reserved Keywords

    • 이미 특정한 목적을 위해 사용하기 때문에 사용할 수 없는 예약어

     

    

     

  • Future reserved keywords

    • 앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어

    

   

• 식별자(Identifier)

  • 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열

    

  • 대소문자를 구분한다.

    

  • '유니코드 문자', '$', '_','숫자(0-9)'를 사용할 수 있지만, 숫자로 시작 할수는 없습니다.

  • '예약어'는 사용할 수 없고, '공백 문자'도 사용할 수도 없습니다.

    

   

   

• 주석(Comments)

  • 소스 코드에서 프로그램에 영향을 주지 않고, 무시되는 부분

  • 보통은 소스코드를 이해할수 있도록 돕는 역할로 사용

    

  • 한 줄만 주석(한 줄을 주석으로 만들고 싶을떈, //를 사용합니다)

    

  • 여러 줄 주석(여러 줄을 주석으로 만들고 싶으면, 시작과 끝에 /* */를 사용한다.)

   

• 변수와 상수(variable and constant)

  

  • const 상수를_지칭하는_이름 → 상수를 선언하는 방법

    

  • const 상수를_지칭하는_이름 = 값; → 상수를 선언하면서 바로 값을 할당하는 방법

  • let 변수를_지칭하는_이름; → 변수를 선언하는 방법

  • 변수를_지칭하는_이름 = 값; → 변수에 값을 할당하는 방법

    

   

• 변수의 유효 범위(scope of variables)

  • {} 안에서만 유효하다

    // 블럭
    {
        //
        const name = 'Mark';
        console.log(name);
    }

    →결과
    {}밖에서는 name을 인식 못한다.

    

    
    

    // 블럭
    {
        //
        const name = 'Mark';
        console.log(name);
    }
    
    //console.log(name);
    
    //밖에서 안으로
    let age = 37;
    
    {
        age++;
        console.log(age);
    }
    
    console.log(age);

    →결과
    
    • var의 유효 범위(함수 스코프)
    • function() {} 함수

    // var 함수 스코프
    
    var a = 0;
    
    (function(){
        a++;
        console.log(a);
    })();
    
    console.log(a);
    
    (function(){
        var b = 0;
        console.log(b);
    })
    
    b++;
    console.log(b);

    →결과

    

    
    
    • var는 함수스코프이기 때문에 {}은 있으나 없으나 상관없어서 정상적으로 출력이 된다

    //블록 스코프
    
    var c = 0;
    
    {
        c++;
        console.log(c);
    }
    
    {
        var d = 0;
        console.log(d);
    }
    
    console.log(d);

    →결과

    

   

  • // 블럭 { // const name = 'Mark'; console.log(name); } console.log(name);
  • 

• var와 호이스팅

  호이스팅 : 아래에 있는 함수를 위에서 호출 가능한 현상(아래 있는 선언을 끌어올리다.)

  호이스팅은 var에서만 일어난다.

  ex)

  // 함수먼저
  function hello1(){
      console.log('hello1');
  }
  
  hello1();
  
  // 함수의 호출을 먼저
  hello2();
  
  function hello2(){
      console.log('hello2');
  }

  →결과

  

   

• 자료형

  변수가 가지는 고정 타입이 없다. 하지만 타입이 없는 것은 아니다

  데이터 타입

  • 기본 타입(Primitive values)
    • Boolean
    • Null
    • Undefined
    • Number
    • String
    • Symbol(ECMAScript 6에 추가됨)

  • 객체(Objects)

  // Boolean
  
  const isTrue = true;
  const isFalse = false;
  
  console.log(isTrue, typeof isTrue);
  console.log(isFalse, typeof isFalse);
  
  const a = new Boolean(false);
  
  console.log(a, typeof a);
  
  if(a) {
      console.log('false?');
  }
  
  const b = Boolean(false);
  
  console.log(b, typeof b);
  
  if(b){
      console.log('false?');
  }

  →결과

  

  // Null
  
  const a = null;
  
  console.log(a, typeof a);
  
  // Undefined
  let b;
  
  console.log(b, typeof b);
  
  b = undefined;
  
  console.log(b);
  
  //null과 undefined는 비교하면 같다고 나옴
  if(a == b){
      console.log(a == b);
  }
  
  //===으로 비교하면 타입까지 비교함 false라서 if문 실행 안됨
  if(a === b){
      console.log(a === b);
  }

  →결과

  

  // Number
  
  const a = 37;
  
  console.log(a, typeof a);
  
  const b = 96.7;
  
  console.log(b, typeof b);
  
  const c = NaN; // NaN은 숫자가 아닌 Number형이라는 말이다.
  
  console.log(c, typeof c);
  
  const d = Number('Mark');
  
  console.log(d, typeof d);
  
  const e = Number('37');
  
  console.log(e, typeof e);

  →결과

  

   

  // String
  
  const a = 'Mark';
  
  console.log(a, typeof a);
  
  const b = "Mark" + ' Lee';
  
  const c = a + ' Lee';
  
  console.log(c, typeof c);
  
  const d = `$ Lee`;//백틱
  
  console.log(d, typeof d);

  →결과

  

   

  const a = Symbol();
  const b = Symbol(37);
  const c = Symbol('Mark');
  const d = Symbol('Mark');
  
  console.log(a, typeof a);
  console.log(c === d); //같은 인자를 넣어도 다른 심볼로 인식됨. 심볼은 고유한 것이다.
  
  new Symbol();// 심볼은 생성자로 만들어 질수가 없다

  →결과