You don't konw JS - 5장 문법

5. 문법 & 자바스크립트 동작 환경

5.1. 문과 표현식

: 모든 문은 완료값을 가짐

• var 문 자체의 완료 값은 undefined

var a = 42      //undefined

• 블록{} : 내부의 가장 마지막 문/ 표현식의 완료값

var b;      //undefined
if(true){ 
	b = 4+31; 
}    // 35

→ 완료 값을 포착하기 위해서는 ⁉️

• do 표현식 이용

        : 블록 실행 후 블록 내 마지막 문의 완료 값을 do 표현식 전체의 완료값으로 반환

       -  do 사용 이전

var a,b;

a =if(true){
    b = 1+23;
}
console.log(a);

 

      -  do 사용

var a,b;

a = do {
    if(true){
        b = 1+23;
    }
}

console.log(a);

---

1)부수효과 유발 연산자

  (1) 단항연산자

• 전위 연산자

         : 표현식으로부터 값이 반환되기 전에 부수효과를 일으킴 → ++/--된 결과가 결과값에 반영

var a = 12   //undefined
++a    //13

• 후위 연산자

         : 값을 반환한 이후에 부수효과가 발생

var a = 12  // undefined
a++    //12

• • 후위 연산자에서 결과를 결과값에 바로 반영할 수 있는 방법은 ?
  • 콤마 연산자 , 사용
    

    var a = 12,b;   // undefined
    b = (a++,a);    // 13
    

 

---

(2)delete

     : 객체의 프로퍼티를 없애거나 배열에서 슬롯을 제거(부수효과로 작용)할 때 사용

var obj = {
	a:12
};      // undefined
obj.a;    //12
delete obj.a;  //true
obj.a;      // undefined

• 결과값
  • true : 유효한/ 허용된 연산일 경우
  • false : 그 이외

 

---

(3) = 할당 연산자 / 복합 할당 연산자 : +=,-=…

var haen;  //undefined
haen = 12; // 12
haen;     //12

: haen = 12 문의 실행결과는 이제 막 할당된 값이므로 12를 haen에 할당하는 자체가 본질적으로 부수효과

   → 이러한 할당원리는 연쇄할당문에서 유용

var a,b,c;   //undefined
a = b = c = 31;    // 31
a   // 31

---

2. 콘텍스트 규칙

: 같은 구문이지만 어디에서 어떤 식으로 사용하느냐에 따라 서로 다른 의미를 가지는 경우발생

• 중괄호

       → 중괄호가 사용되는 곳

          -  객체리터럴

var haen = () => {
    console.log("hello");
};

var a = {
    name:haen()
};

          : a의 우측 {}는 a에 할당될 값이므로 객체 리터럴

 

         -  레이블

           : 자바스크립트에는 레이블 점프 라는 특별형태의 goto 장치가 마련

              - continue, break : 선택적으로 어떤 레이블을 받아 goto처럼 실행의 흐름을 점프

                  → 사용빈도가 드물고,못마땅한 구석도 많아서 가급적 피하는게 좋다

        -  블록

        -  객체분해

             - 기본 문법 : let {var1, var2} = {var1:…, var2:…}

             - 할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

       -  else if 

           :  자바스크립트에서 사실살 else if는 존재 ❌

              -   if와 else 실행문에 하나밖에 없는 경우 {} 생략 가능

              -  else if문은 사실상 아래와 같은 형태에서 else의 {} 생략

if{ 
}
else{
    if{
        
    }
    else{
        
    }
}

---

5.2 연산자 우선순위

: 표현식에 연산자가 여러 개 있을 경우 처리되는 규칙

• &&는 ||보다 먼저
• 단락평가
  •  &&와 ||는 좌측 피연산자의 평가 결과만으로 전체 결과가 이미 결정될 경우 우측 피연산자의 평가를 건너뜀 → 불필요한 작업 감소
    • a && b 에서 a = falsy → false
    • a || b 에서 a = truthy → true
• ||은 ? : 보다 우선순위 높음
• 결합성
  • 연산자가 좌측부터 그룹핑이 되는지 → 좌측 결합성
  • 연산자가 우측부터 그룹핑이 되는지 → 우측 결합성
  • 처리 방향과는 다름 ‼️ 
    • &&와 || : 좌측 결합성
      • a && b && c → (a && b) && c
      • a || b || c →(a || b) || c
    • ? : , =: 우측 결합성
      • a ? b : c ? d : e → a ? b : (c ? d : e)
      • a = b = c = 12; → a = (b = (c = 12));

var a = 12;
var b = "haen";
var c = false;

var d  = a && b || c ? c || b? a: c && b : a;
//var d  = ((a && b) || c) ? ((c || b)? a: (c && b)) : a;

---

5.3 세미콜론 자동 삽입(ASI)

: 세미콜론이 누락된 곳에 엔진이 자동으로 ; 삽입

• 주로 break, continue, return, yield에서 활약

---

5.4 에러

• TDZ (임시 데드 존) ES6에서 새로 도입된 개념.
• TDZ : 아직 초기화를 하지 않아 변수를 참조할 수 없는 코드 영역 → 대표적인 예 : let 블록 스코핑

{
  a = 12; // ReferenceError
  let a;
}

---

5.5 함수인자

• argument 배열 : 비권장 → Rest 인자 권장
• 인자와 그 인자에 해당하는 arguments 슬롯을 동시에 참조 안하면 안전

---

5.6 try…finally

• 원래는 try 다음 catch/finally 둘 중 하나만 필수
• try에 return이 존재하는 경우는 ⁉️

function haen(){
    try {
        return "i'm haen"
    }finally {
        console.log("Hello");
    }
}

console.log(haen());

//Hello
//i'm haen

1. try문 실행 후 return값이 haen의 결과값으로 전달
2. finally문 실행 → “Hello”출력
3. finally문이 끝난후 haen()함수가 종료되면서 결과값 반환 → “i’m haen"출력

• finally의 return 은 try나 catch의 return을 덮어씀

---

5.7 switch

• case 표현식의 매칭은 ===으로 이루어짐‼️
• case a == 10 이렇게 명시를 하여도 ===으로 이루어짐
  → case문에 논리연산자 사용시 문제 발생: ==이 ||보다 우선 연산자이므로 b==10 :  true,
  “haen”과 true의 연산 결과는 true이므로 “haen”반환
  → 이런경우 결과값을 boolean값으로 떨어지게 case !!(a||b == 10)로 변환
• var a = "haen"; var b = 10; switch (true){ case(a||b == 10): console.log("10"); break; default: console.log("이런"); }

 

 

 

 

질문이나 궁금하신점 또는 제가 잘못 알고있는 정보는 댓글 부탁드립니다😊