[JavaScript] 모던 JS 기본 동작 원리
What I Learned
- 모던 JavaScript란,
- JavaScript 데이터 타입
- 비교 연산자
- 변수 선언 방식
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를 사용하도록 권장하고 있다
구분 | var | let, const |
---|---|---|
중복 선언 여부 | 가능 (undefined) | 불가능 (syntax error) |
변수 선언 전 사용 여부 | 가능 (호이스팅) | 불가능 (reference error) |
scope (사용범위) | 함수 스코프 | 블록 스코프 |
- 함수 스코프, 함수 기준으로 유효하지만for, if , while에서 선언한 변수는 밖에서도 유효하여 중복 선언등에 문제가 발생할 수 있다..
- 블록 스코프 : 코드 블록 내에서 사용 가능
출처: codeIt
Author And Source
이 문제에 관하여([JavaScript] 모던 JS 기본 동작 원리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ysong0504/JavaScript-모던-JS-기본-동작-원리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)