오프라인 스터디 준비한 내용을 블로그 포스팅 해보려한다.
책이 너무 두꺼워서 혼자 읽기는 어려울것 같아서 만든 스터디인데 생각보다 너무 좋아서 좋다(?)
당연하게 받아들였던 것 들에 대해 원리를 배우려니 익숙하지만 어렵기도하다.
그치만 자바스크립트 달인이 될때까지 열심히 무한 반복해야지~~!

8장 : 제어문

제어문

• 제어문이란 ?
  • 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용함
  • 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되지만 제어문을 통해 코드의 실행 순서를 인위적으로 제어할 수 있음
  • 그러나 가독성을 해치는 단점이 있기 때문에 잘 써야함!

블록문

• 블록문은 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라 부름.
• 자바스크립트는 블록문을 하나의 실행단위로 취급함.
• 단독으로 사용할 수도 있으나 제어문이나 함수를 정의할 때 사용하는 것이 일반적임
• 문 의 끝에는 세미콜론을 붙이는게 일반적이나 블록문의 끝에는 세미콜론을 붙이지 않음

조건문

• 조건문은 주어진 조건식의 평가 결과에 따라 코드블록의 실행을 결정함.
• 조건식은 불리언 값으로 평가될 수 있는 표현식임
• 자바스크립트는 if…else 문과 switch문 두 가지 조건문을 제공함

if… else 문

• 조건식의 평가가 true일 경우 if 문의 코드 블록이 실행되고 false일 경우 else문의 코드 블록이 실행된다.
• if문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트엔진에 의해 암묵적으로 불리언 값으로 강제 변환 되어 실행할 코드 블록을 결정하게 됨.
• 코드블록 내에 문이 하나라면 중괄호 생략이 가능하다.
• 간단한 if else문은 삼항 연산자로 바꿔 쓸 수 있다.
• 그러나 복잡할 경우에는 if else를 사용하는 편이 가독성이 좋다.

9장 : 타입 변환과 단축 평가

타입 변환이란?

• 명시적 타입 변환 & 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환 & 타입 강제 변환 : 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는것
  • 기존 원시 값을 직접 변경하는 것은 아님.
  • 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
  • 다른 타입으로 계산된다해도 재할당되는게 아님
  • 단 한번 사용하고 버려짐
  • 타입 변환 결과를 예측하지 못하거나 예측이 결과와 일치하지 않는다면 오류를 생산할 가능성이 높아짐
• 코드를 간결하고 예측하기 쉽게 적절히 사용하는 것이 좋음.

암묵적 타입 변환

• 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환한다.

문자열 타입으로 변환

1+'2' //"12"

• + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작함.
• 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환함.
• 템플릿 리터럴 표현식도 평가 결과를 문자열 타입으로 암묵적으로 변환한다.
  

숫자 타입으로 변환

1 - '1' //0
1*'10 // 10
1/'one' //NaN

• 위의 세개의 연산자는 모두 산술 연산자임
• 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자타입이어야함
• 피연산자중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환함.
• 피연산자를 숫자 타입으로 변활할 ㅅ ㅜ없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평과 결과는 NaN이 됨.

'1'>0 //true

• 비교 연산자의 역할은 불리언 값을 만드는 것임.
• 비교 연산자 또한 모든 피연산자가 코드 문맥상 모두 숫자 타입이어야함.
• 비교연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환함

불리언 타입으로 변환

• 조건식은 불리언 값으로 평가가 되어야하는 표현식이다.
• 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 혹은 Falsy 값으로 구분한다.
  false, undefined,null,0,-0,NaN, ’’

명시적 타입 변환

• 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.

문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메서드를 사용하는 방법
3. 문자열 연결 연산자를 이용하는 방법

숫자타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법 - 문자열만 숫자 타입으로 변환 가능
3. + 단항 산술 연산자를 이용하는 방법
4. * 산술 연산자를 이용하는 방법

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. ! 부정 논리 연산자를 두 번 사용하는 방법

단축 평가

논리 연산자를 사용한 단축 평가

• 논리 곱

  'Cat'&&'Dog' //'Dog'

  • 왼쪽, 오른쪽이 모두 truthy이므로 오른쪽값을 반환한다.
• 논리 합

  'Cat'||'Dog' // 'Cat'

  • 하나만 true여도 true를 반환함.
  • 왼쪽이 true이므로 왼쪽 반환
  • 조건이 Falsy일 때 무언가를 해야한다면 논리합 연산자 표현식으로 if문을 대체할 수 있음.
    
• 단축평가를 사용하는 때
  1. 객체를 가리키려는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
  2. 함수 매개변수에 기본값을 설정할 때

옵셔널 체이닝 연산자

• ?. : 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어감
• falsy라도 null 또는 undefined가 아니면 우항의 참조 프로퍼티를 이어가는 특징이있다.

var elem = null;
var value = elem?.value;
console.log(value) // null

null 병합 연산자

• ?? : 왼쪽의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 왼쪽의 피연산자를 반환한다.
• 변수의 기본값을 설정할 때 유용하다.
• falsy의 경우 예기치 않은 오류가 일어날 수 있으니 조심해서 사용할 것. 오직 null과 undefined에서만 동작한다.

13장 : 스코프

스코프란?

💡 핵심 단어 - 스코프 - 유효범위

• 스코프는 식별자가 유효한 범위를 말함
• 모든 프로그래밍 언어의 기본적이며 중요한 개념
• 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있음
• var 변수와 let,const 변수의 스코프는 다르게 동작함
• 스코프는 변수,함수와 깊은 관련이 있음

• 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위가 결정됨 ⇒다른 코드가 변수 자신을 참조할 수 있는 범위가 결정 되는 것임.(모든 식별자가 마찬가지임)
  

⇒ 즉 스코프란, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신인 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨. 이를 스코프라 함

• 식별자 결정: 같은 변수가 있을 때, 어떤 변수를 참조해야할 건지 결정해야함.
• 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 결정함.
• 따라서 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있음

→ 하나의 값은 유일한 식별자에 연결되어야함.

• 스코프를 통해 식별자인 변수 이름의 충돌ㅇ르 방지하여 같은 이름의 변수를 사용할 수 있게함.
• 스코프 내에서는 식별자는 유일해야하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있음

⇒ 스코프는 네임 스페이스라고도 할 수 있음.

스코프의 종류

💡 핵심 단어 1. 전역 스코프 2. 지역 스코프

전역과 전역 스코프

• 전역이란 코드의 가장 바깥 영역을 뜻함.
• 전역 변수는 어디서든지 참조할 수 있음
• 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 됨.

지역과 지역 스코프

• 지역이란 함수 몸체 내부를 뜻함.
• 지역은 지역 스코프를 만들고, 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 됨.
• 지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조가 가능함.
• 지역 변수는 자신의 지역 스코프오 ㅏ하위 지역 스코프에서 유효함.

스코프 체인

💡 핵심단어 - 식별자를 검색하는 규칙

• 중첩함수 : 함수 몸체 내부에서 함수가 정의된 것.
• 외부함수 : 중첩함수를 포함하는 함수
• 함수가 중첩될 수 있으므로, 스코프 또한 중첩이 가능하다. ⇒ 즉, 스코프는 함수의 중첩에 의해 계층적으로 구조를 갖는다는 것을 의미한다.
  
• 모든 스코프는 하나의 계층적 구조로 연결되며 모든 지역 스코프의 최상위 스코프는 전역 스코프다.
• 스코프 체인 : 스코프가 계층적으로 연결 된 것.
• 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색함. ⇒ 상위 스코프에서 유효한 변수는 하위 스 코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다는 것을 의미함.
  

var x=1;

function foo(){
  let y=2;
  console.log(x,y);
  function boo(){
    var z=3;
    console.log(x,y,z);
  }
  boo();//1,2,3

}

foo(); // 1,2
console.log(x); //1
console.log(y); //error
console.log(z); //error

함수 레벨 스코프

• 지역은 지역 스코프를 만든다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미다.
• 모든 코드 블록이 지역 스코프를 만든다. 이런 특성을 블록 레벨 스코프라한다.
• 그러나 var로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프를 인정한다. ⇒ 함수 레벨 스코프

• var 변수는 함수 레벨 스코프만 인정하기 때문에 함수 밖에서 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.

렉시컬 스코프

• 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것
• 함수 정의가 평가 되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고 부름.
• 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않음.

⇒ 함수의 상위 스코프는 언제나 자신이 정의된 스코프임.

→ 24장 클로저와 연결