[JavaScript]자바스립트 문법

 

 

💻 5.1 문과 표현식

 

자바스크립트에서의 문 != 표현식

 

문: 문장

표현식 : 어구

연산자: 구두점/접속사

var a = 3*6;
var b=a;
b;

자바스크립트에서의 표현식은 "단일한, 특정한" 결괏값으로 계산됨.

 

위 각 세줄은 표현식이 되기도하고, 표현식이 포함된 문이기도하다.

 

+ '선언문' : var a = 3 * 6; 이런식의 변수 선언의 문

+ '할당 표현식' : a = 3 * 6;  

+ '표현식 문' : 표현식의 전부이면서 완전환 문

 

💡 문의 완료 값

 

모든 문은 완료 값을 가짐.

var a = 43; //완료값 : undefined
a = 43; //완료값 : 43

선언문의 완료값은 undefined

 

할당 표현식은 할당 이후의 값이 완료값

 

 ❗ {}블록은 마지막 문/표현식의 완료값이 블록의 완료값

var a, b;

if(true){
	b=42;
}

 

+ 변수에 문의 완료값을 할당하는 방법

do{ }표현식 사용

var a, b;
a=do {
	if(true){
    	b=42;
    }
}

 

💡 표현식의 부수효과

 

대부분 표현식에는 부수효과가 없지만, 몇가지 살펴보겠습니다.

 

함수 호출 표현식

function foo(){
	a=a+1;
}

var a =1;
foo(); // 결괏값 'undefined' ❗ 부수효과 : 'a'가 변경

 

++ 표현식

var a =42;
b = a++; // 42 반환 ❗부수효과 : a 값을 1 증가시킴 

a;//43
b;//42

 

+ 콤마 연산자 👉 b에 1증가된 a 값 할당

b = (a++, a); 
b; //43

 

delete 연산자

var obj={
	a:42;
};

delete obj.a; // 결괏값 true ❗ 부수효과 : 프로퍼티 제거
obj.a;//undefined

 

할당 연산자 (=)

var a, b, c;
a= 42;	//결괏값 42 ❗ 부수효과 : 할당
a=b=c=42;

 

💡 콘텍스트 규칙

 

자바스크립트 문법 규칙 중 같은 구문이어도 어떤 식으로 사용되느냐로 다른의미를 가지기도 함.

 

중괄호 {}

• 객체 리터럴

var a = {
	foo:bar();
}

• 레이블

{
	foo : bar();
}

foo는 bar()의 레이블

 

가끔, 자바스크립트의 레이블 점프를 이용할 때 사용가능.

continue 레이블 | break 레이블

 

+ JSON 문 {"a" : 42}는 레이블 문으로 인식하여, 레이블에 따음표가 들어가 에러를 반환

👉 JSON은 자바스크립트 구문의 하위집합이라 할 수 있지만, 그 자체로 올바른 자바스크립트 문법은 아님.

 

• 블록

[]+{};//"[object Object]"
{}+[];// 0

첫째 줄, {}을 실제값 으로 해석 👉 문자열로 강제 변환 된 "[object Object]" 반환

둘째 줄, {} 빈 블록으로 간주, +[]을 숫자 0으로 강제변환

 

• 객체분해

function foo(){
	//...
    return{
    	a:42, 
        b: "foo"
    }
}
var {a, b}=foo();

함수의 프로퍼티 할당에도 사용

function foo({a, b}){
	//...
    //var a= obj.a, b= obj.b할 필요 ❌
	//..
}

 

• else if와 선택적 블록

자바스크립트에서는 else if 문이 없다.

else if 문은 아래와 같이 해석

else{
	if{
    
    }


}

❗ else if는 위반 사례, if문에서 단일 문이라 할지라도 블록 {}으로 감싸는 것을 지양

---

💻5.2 연산자 우선순위

 

&&, ||

둘중 &&의 우선순위가 더높다.

 

, 연산자

b = (a++, a); 
b; //43

,연산자는 우선순위가 최하위이기때문에 ()를 사용하여 묶어 줘야한다.

 

💡 단락 평가

&&, || 연산자는 첫 피연산자에서 결과가 나면 뒤 피연산는 건너 뜀.

 

 

 

💡 끈끈한 우정

 

&&, ||, 삼항연산자(?:)

우선순위 : && -> || -> 삼항연산자

 

 

💡결합성

 

우선순위가 동일할 경우의 그룹핑

우측 부터 : 우측 결합성

좌측 부터 : 좌측 결합성

 

❗ 이 결합성은 처리방향과는 무관.

 

• 삼항 연산자 (? :)

a?b:c?d:e;

삼항연산자는 우측 결합성 연산자로 아래와 같이 결합

a?b:(c?d:e);

 

• = 연산자

var a, b, c;
a=b=c=42;

=연산자는 우측결합성 연산자로 아래와 같이 결합

a=(b=(c=42));

---

💻 5.3 세미콜론 자동삽입

 

자바스크립트의 ASI 는 누락된 세미콜론을 삽입해줌.

 

행바꿈시에 적용되며, 중간에는 적용 ❌

 

 

❗ 세미콜론 누락도 엄밀히 말하면 에러사항이기에 작성하는 것을 지양

---

 

💻 5.4 에러

 

자바스크립트는 하위에러타입 & 일부 에러 는 컴파일 시점에 발생

 

❗ 조기에러 : 코드가 실행 되기 전에 발생

var a = /+foo/; //조기에러
var a;
42 =a ; //조기에러

 

💡너무 이른 변수 사용

 

ES6의 TDZ(임시 데드존) : 아직 초기화를 하지 않아 변수를 참조할 수 없는 코드 영역

 

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

 

TDZ에 있는 a 할당으로 에러

+typeOf는 에러 안남.

 

💻 5.6 try...filnally

 

finally 절은 다른 블록 코드에 상관없이 필히 실행되어야 할 콜백함수와 같다.

 

• try문 return
• try문 thorw
• try문 continue

위 상황에서도 finally문이 실행되고나서 try문이 실행됩니다.

function foo(){
	try{
    	return 42;
        //throw 42
    }
    finally{
    	console.log("finally");
    }
}
console.log(foo());
//finally
//42 // Uncaught Exception: 42

 

 

• finally문에서 thorw
• finally문에서 return

위 상황에서는 이전 결과들이 무시됩니다. 

 

function foo(){
	try{
    	return 42;
    }
    finally{
    	throw "oops";
        //return;
    }
}
console.log(foo());
//Uncaught Exception: oops //

 

💻 5.7 switch

 

switch 표현식과 case 표현식간의 매치 과정은 === 알고리즘과 같습니다.

 

만일, 강제변환이 일어나는 동등비교 == 를 원한다면 아래와 깉이 사용해야합니다.

var a = 42;
switch(true){
	
   case a ==10:
    	break;
   case a ==42:	//수행
   		break;
   default:

}

 

❗ 하지만 위와 같이 사용하더라도 truthy값은 매치에 실패합니다.

 

👉 && || 사용에 주의 

var a = "hello";
var b = 10;
switch(true){
	
   case (a || b ==10):
    	break;
   default: //수행

}

case문에서 a 인 "hello"를 반환하여 이는 매치되지 않음.