[JavaScript] 모던 JS 기본 동작 원리

Song·2021년 6월 24일
0

JavaScript

목록 보기
1/3
post-custom-banner

What I Learned

  1. 모던 JavaScript란,
  2. JavaScript 데이터 타입
  3. 비교 연산자
  4. 변수 선언 방식

1. 모던 JavaScript란,

2015년부터 매년마다 업데이트되고 있는 JavaScipt ES6를 현재 브라우저에서 적용시킬 수 있는
범위 내에서 최신 버전의 표준을 준수하는 JavaScript를 뜻한다.

ES란, ECMAScript의 줄임말로 자바스크립트 사용 시 준수해야하는 규칙이 담겨져있는 표준 명세서다.
보통은 ES2015, ES2016와 같이 연도를 앞에 붙여 부르거나 ES6 이후에 업데이트된 스크립트는 ES6+ 로 통일해서 부르기도 한다.

2. JavaScript 데이터 타입

기본 자료형

기본 자료형으로는 number, string, boolean, null, undefined, symbol, bigInt 있는데,
symbol과 bigInt는 이번 ES6부터 추가된 자료형이다.

symbol

  • 코드 내 유일한 값을 가진 변수를 선언할 때 사용되는 자료형이다.
    어떤 변수와 비교해도 False를 반환하며 심지어 동일한 값을 넣은 변수여도 변수가 다르다면 동일하게 취급하지 않는다.

bigInt

  • 큰 숫자의 데이터를 다루는 자료형이다. 기본적으로 자바스크립트는 9000조의 숫자까지 다룰 수 있지만 암호 관련 작업이나 계산기 관련 작업 같이 그 이상의 숫자를 다룰 경우에 사용될 수 있다.

Boolean 타입

JS에서는 여러 자료형들이 상황에 따라 boolean 값으로 구분될 수 있으며 반대로 boolean() 함수를 이용하여 true 또는 false 값을 반환하기도 한다.

True

  • False로 변환하는 자료형을 제외한 나머지 ([], {} 포함)

False

  • null, undefined, NaN, 0 , ’‘(빈 문자열)

예시

const flowers = ['장미', '수국', '백합', '튤립', '진달래'];
	
// 처음에는 i에 4가 할당되므로 '진달래' 반환
// 그 후 i - 2 = 2가 되어 '백합' 반환
// 또 i - 2 = 0이 되어 false로 취급하고 for문 종료
for (let i = 4; i; i = i - 2) {
  console.log(flowers[i]);
}

// flowers.length는 true로 취급하여 '튤립' 반환
if (flowers.length) {
  console.log(flowers[3]);
}

// codeit를 Number로 변환 시 타입오류로 NaN이 반환된다.
// 그러므로 false가 되어 if 문이 실행되지 않는다.
if (Number('codeit')) {
  console.log(flowers[1]);
}

3. 비교 연산자

And, Or을 사용할 때 피연산자들이 false 또는 true이냐에 따라 반환하는 위치가 달라진다.

  • And
    오른쪽 피연산자가 true라면 왼쪽 값을 반환
    오른쪽 피연산자가 false 라면 오른쪽 값을 반환

  • Or
    오른쪽이 true라면 오른쪽 값을 반환
    오른쪽이 false라면 왼쪽 값을 반환

예시

// And 형태에서 왼쪽 피연사가 true 이므로 123 반환
console.log('String' && 123);

// or 형태에서 왼쪽 피연산자가 true 이므로 {} 반환
console.log({} || []);

// And 형태에서 둘 다 false이므로 0 반환
console.log(0 && false);

// or 형태에서 들 다 false 이므로 오른쪽 피연산자, undefined 반환
console.log(null || undefined);

// And 형태에서 왼쪽 피연산자가 false 이므로 NaN 반환
console.log(NaN && 'Codeit');

// or 형태에서 왼쪽은 false 지만 오른쪽이 true 이므로 true 반환
console.log('' || true);

// And 형태에서 왼쪽이 true이므로 null 반환
console.log('JavaScript' && null);

// or 형태에서 왼쪽이 true 이므로 3000 반환
console.log(3000 || undefined);

4. 변수 선언 방식

자바스크립트 변수 선언 방식으로 var, let, const가 있다.
이 중 let, const는 기존의 var를 보완하기 위해 ES6부터 새로 추가된 방식이다.

ES6 부터는 var보단 let, const를 사용하도록 권장하고 있다

구분varlet, const
중복 선언 여부가능 (undefined)불가능 (syntax error)
변수 선언 전
사용 여부
가능 (호이스팅)불가능 (reference error)
scope
(사용범위)
함수 스코프블록 스코프
  • 함수 스코프, 함수 기준으로 유효하지만for, if , while에서 선언한 변수는 밖에서도 유효하여 중복 선언등에 문제가 발생할 수 있다..
  • 블록 스코프 : 코드 블록 내에서 사용 가능

출처: codeIt

profile
Learn From Yesterday, Live Today, Hope for Tomorrow
post-custom-banner

0개의 댓글