[JS중급] 자바스크립트 동작 원리

---

자바스크립트 동작 원리

• 모던 자바스크립트? 
  • ECMAScript : JS 표준 명세서 (공식문서)
• 데이터 타입의 특징과 종류
  • JS의 경우, 다른 언어들보다 좀 더 유연하게 데이터 타입 지정 가능
  • number, string, boolean, null, undefined, object | symbol(유일값), bigint(엄청 큰 숫자)

// Symbol -> 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 됨
const user = Symbol('this is a user');

user === 'this is user'; // false
user === true; // false
user === false; // false

// 똑같은 설명을 붙인 심볼을 만들어도 두 값을 비교하면 false 반환
const symbolA = Symbol('this is Symbol');
const symbolB = Symbol('this is Symbol');

console.log(symbolA === symbolB); // false

// BigInt -> JS의 숫자형에는 9000조 정도의 정수 표현 한계 존재.. 그때 사용
// BigInt() 사용 or 일반 정수 마지막에 알파벳 n 사용
console.log(9007199254740993n); // 9007199254740993n
console.log(BigInt('9007199254740993')); // 9007199254740993n

// typeof -> 결과가 모든 타입과 1:1 매칭되지 않다는 점 존재
typeof null; // object -> 특별한 문법 설계 때문...

// JS에서 함수는 객체 취급... 하지만 함수에 사용하면 function 리턴
function sayHi() {
  console.log('Hi!?');
}

typeof sayHi; // function

• JS에선 if, while, for와 같이 조건 부분처럼 불린타입이 필요한 맥락에선 불린이 아닌 다른 타입의 값들도 불린타입으로 평가된다는 특징이 있음
  • Flasy값(False로 평가되는 값) : fasle, null, undefined, NaN, 0, ' '
  • Truthy값(True로 평가되는 값) : 나머지 값들(빈 배열[ ]과 빈 객체{ }도 포함)

const flowers = ['장미', '수국', '백합', '튤립', '진달래'];

// i-2 = 0 이 되는 순간 flase로 인식해 반복문 종료
for (let i = 4; i; i = i - 2) {
  console.log(flowers[i]);
}

if (flowers.length) { // 숫자 5가 true로 평가되어 if문 성립
  console.log(flowers[3]);
}

if (Number('codeit')) { // 형 변환시 NaN(falsy값)이 되기에 코드 실행 X
  console.log(flowers[1]);
}
>> 진달래 백합 튤립

• AND와 OR의 연산 방식
  • JS에서 논리연산자는 매번 T/F를 반환하는게 아닌, 둘 중 하나의 값을 반환하기도 함
    • AND연산자는 왼쪽값이 truthy하면 오른쪽 값을, falsy하면 왼쪽값을 리턴
    • OR연산자는 왼쪽값이 truthy하면 왼쪽값을, falsy하면 오른쪽 값 리턴
  • AND - OR 순으로 실행 (연산자우선순위)

console.log(true && true); // T
console.log(true && false); // F
console.log(false && true); // F
console.log(false && false); // F
// JS의 AND연산자는 왼쪽값이 truthy하면 오른쪽 값을, falsy하면 왼쪽값을 리턴하는 방식
console.log('durian' && 'JS'); // JS -> 왼쪽에 있는 값이 truthy하기에, JS 리턴

// OR연산자는 왼쪽값이 truthy하면 왼쪽값을, falsy하면 오른쪽 값 리턴
console.log(true || true); // T
console.log(true || false); // T
console.log(false || true); // T
console.log(false || false); // F

console.log(null && undefined); // null
console.log(0 || true); // T
console.log('0' && NaN); // NaN
console.log({} || 123); // { }

• null 병합 연산자 : 물음표 2개(??)를 사용해 null 또는 undefined 값을 가려내는 연산자
  
  • 연산자 왼편의 null, undefined가 있으면 오른쪽 값 리턴되고, 아니라면 연산자 왼편 값이 리턴 됨
  • OR연산자와 차이점 : null 병합 연산자는 왼쪽 값이 null이나 undefined인지 확인하고, OR연산자는 값이 falsy인지를 확인하는 것

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Coding' ?? 'JavaScript'; // Codeit
console.log(example1, example2, example3); // I love Coding

• 변수와 스코프
  
  • var 변수 사용시 문제점 : 호이스팅 현상 발생 | 중복 선언 가능(충돌가능성 有) | 변수의 스코프가 함수 단위로만 구분(고유하게 사용할 지역변수 생성 불가)
    • 호이스팅(hoisting) : 선언은 나중에 됐지만, 이 선언이 마치 먼저 선언된 것처럼 보이는 것... 선언부분만 끌어올려지기에, 할당된 값 자체는 그 이후에 접근 가능

// 함수 스코프(function scope)
var x;
// 블록 스코프(block scope)
let y;
const z;