YeonjuOHYE / javascript

0 stars 0 forks source link

유.돈.노#5) 문법 #6

Open YeonjuOHYE opened 5 years ago

YeonjuOHYE commented 5 years ago

5.1 문과 표현식

문(statement)는 문장 sentence 표현식(expression)은 어구 phrase 연산자는 구두점/접속사

5.1.1 문의 완료값

모든 문은 완료값을 가진다.

var b = a

여기에서 b=a 는 할당 이후의 값이 완료 값이지만, var문 자체의 완료 값은 undefined

그렇다면 완료 값을 포착하는 방법은?

var b;

if(true) {
b= 4 + 38;
}

하면 b값을 확인할 수 있다. 왜냐하면 { } 블록은 내부의 가장 마지막 문/표현식의 완료 값을 자신의 완료값으로 반환

하지만 다음 코드는 안된다.

var b;

a = if(true) {
b= 4 + 38;
}

굳이 하고 있다면 eval을 사용해라...

var a,b;
a = eval("if(true) {b = 4 + 38;}")
a;//42

다행히 do 표현식이 있어서 대체할 수도 있다.

var a,b;
a = do {
  if(true) {
    b = 4 +38;
  }
}

a;//42

5.1.2 표현식의 부수 효과

1)부수 효과를 가진 예1

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

var a = 1;
foo();// 결괏값: indefined, 부수 효과: 'a'가 변경됨 (2로)

2)다른 부수 효과를 지닌 표현식

var a = 42;
var b = a++;

a; //43
b; //42 

후위 연산자의 작용을 굳이 반환하고자 할 떄 다음은 안된다.

var a = 42;
var b = (a ++); 

요거는 된다.

 var a = 42, b;
b = (a++, a );

a; //43
b; // 43

3)delete 역시 부수 효과를 일으키는 연산자 delete 연산자의 결과값은 유효한/허용된 연산을 경우 true, 그 외에는 false이다. 이 연산자의 부수 효과는 바로 프로퍼티를 제거하는 것

4)할당 연산자

var a;
a = 42; //42
a; //42 

42를 a에 할당하는 자체가 본질적으로 부수 효과다

이렇게 할당 표현식/문 실행 시 할당된 값이 완료 값이 되는 작동 원리는 다음과 같은 연쇄 할당문에서 특히 유용

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

5.1.3 콘텍스트 규칙

중괄호

레이블문이란

foo : for(var i = 0; i <4 ; i ++) {
  for(var j =0; j <4; j ++) {
      if(i == j) {
       continue foo;
      }

     if((j*i) %2 ==1) {
      continue;
    }

      console.log(i,j);
  } 
}

레이블은 비 루프 블록에 적용할 수 있다. 단 이런 비 부르 레이블은 break만 참조 할 수 있다. continue에서는 사용 할 수 없다.

function foo() {
bar: {
  console.log("Hello");
  break bar;
  console.log("절대 실행 x");
 }

console.log("world");
}
foo();
// Hello
// world

레이블 루프 잘 안쓰이고 못마땅한 구석도 많아 사용하지 말고 함수 호출하는 편이 낫다

※ JSONP json은 {"a":42} 은 레이블문법에 맞지 않음 그런데 jsonp라 뭘 한다구?

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

윗줄 +sms {} 을 실제 값으로 해석 아랫줄은 {}을 동떨어진 빈 블록으로 해석

객체 분해
function getData() {
// ...
return {
a : 42,
b: "foo"
}
}

var {a,b} = getData(); // var {b,a}도 동일한 결과
console.log(a,b); // 42 "foo"
function foo({a,b,c}) {
// 다음처럼 할 필요 x
// var a = obj.a, b = obj.b, c = obj.c
console.log(a,b,c);
}

foo({
c: [1,2,3],
a: 42,
b: "foo",
}) // 42 "foo" [1,2,3]
else if 와 선택적 블록
if (a) {

}
else if (b) {

}
else {

}

결국 다음과 같다.

if (a) {

}
else {
 if (b) {

 }
 else {

 }
}

5.2 연산자 우선순위

&& 연산자가 먼저 평가되고 || 연산자가 그다음에 평가된다.

5.2.1 단락 평가

&& || 에서 앞쪽이 맞으면 뒤에 확인하지 않는 것을 단락 평가라고 한다.

5.2.3 결합성

&& ||는 좌측부터 결합 ? 는 우측부터 결합 a=b=c=42 이것도 우측부터 결합

5.3 세미콜론 자동 삽입

자동 세미콜론은 행 바꿈에만 적용. 어떠한 경우에도 줄 중간에 삽입되는 일이 없다!

5.4 에러

조기 에러 (컴파일 도중)

5.4.1 너무 이른 변수 사용

ES6는 '임시 데드 존' 이라는 개념 도입 TDZ는 아직 초기화를 하지 안항 변수를 참조할 수 없는 코드 영역

{
 a = 2;
 let a;
}

{
 typeof a;// undefined
 typeof b; //Ref Err (TDZ)
 let b; 
}

5.5 함수 인자

TDZ

var b = 3;
function foo( a= 42, b = a +b+5) {
}

인자와 arguments 배열 슬롯을 동시 참조 x 그리고 이제 rest 써라

5.6 try....finally

try 뒤에 catch와 finally 둘중에 하나만 사용 (같이 써도 상관은 없지만)

finally에서 throw하면 이전의 실행 결과는 모두 무시 , try 문 완료 값도 사장
finally return은 try나 catch 절의 return을 덮어 쓴다 .

5.7 swtich

swich (true) {
case a == 10:
console.log("10");
break;
case a == 42:
console.log("42");
break;
default:
}

이 때 조심은 &&, || 이면 피연산자 반환되니까 매치 안되는 거 조심!!

break해주지 않으면 이미지 지나친 바로 다음절을 다시 실행