<모던 자바스크립트>
1. 모던 자바스크립트 이해하기
모던 자바스크립트란?
ECMAScript
• 자바스크립트라는 프로그래밍 언어의 표준 (자바스크립트 표준 명세서)
• ecma 국제 표준화 기구에서 관리 (ECMA-262로 관리됨)
• 1997년에 처음 나옴 ES년도가 정식명
💡ES6이 자바스크립의 발전에 굉장히 큰 영향을 준 버전 →ES6+라고도 부름
Modern JavaScript
현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
ECMAScript 더 알아보기
• JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준
• CMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서
• JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물'
• JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다
• 우리가 자바스크립트로 HTML 코드를 제어하기 위해 사용하는 DOM(Document Object Model)을 다루는 문법들은 ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술
2. 자바스크립트의 동작원리
데이터 타입의 특징과 종류
자바스크립트
• 데이터 타입이 유연함 (상황에 따라 변할 수 있다)
기본형
Number, String, Boolean, Null, Undefined,
ES2020에 새롭게 추가됨 → Symbol, BigInt
Symbol : 유일한 값을 만들 때
BigInt : 엄청 큰 숫자를 다룰 때
참조형
Object
Symbol과 BigInt
Symbol
const user = Symbol();
Symbol 값을 담게 된 user라는 이름의 변수는 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 된다
BigInt
자바스크립트에서 아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입
→ 자바스크립트의 숫자형(number type) 값에는 9000조 정도의 정수 표현의 한계가 존재한다
console.log(9007199254740991 + 1 === 9007199254740991 + 2); // true
console.log(9007199254740991 + 2); /// 9007199254740992
console.log(9007199254740993); /// 9007199254740992
console.log(9007199254740993n); // 9007199254740993n
console.log(BigInt('9007199254740993')); // 9007199254740993n
• BigInt 타입의 값은 일반 정수 마지막에 알파벳 n을 붙이거나 BigInt라는 함수를 사용하면 된다
• BigInt 타입끼리만 연산할 수 있고, 서로 다른 타입끼리의 연산은 명시적으로 타입 변환을 해야 한다
typeof 연산자
typeof 'Codeit'; // string
typeof Symbol(); // symbol
typeof {}; // object
typeof []; // object
typeof true; // boolean
typeof(false); // boolean
typeof(123); // number
typeof(NaN); // number
typeof(456n); // bigint
typeof(undefined); // undefined
typeof null; // object
function sayHi() {
console.log('Hi!?');
}
typeof sayHi; // function
typeof 연산자의 결과가 모든 타입과 1:1로 매칭되지 않는다는 점 주의
💡 자바스크립트에서 함수는 객체로 취급되나 typeof 연산자를 함수에 사용하면 function이 리턴된다는 점
불린

False로 평가되는 값 → Falsy
True로 평가되는 값 → Truthy
AND와 OR의 연산 방식
// AND와 OR의 연산 방식
console. log('Codeit' && 'JavaScript'); //Javascript가 출력
• 자바스크립트에서 논리연산자는 매번 ture 혹은 false를 리턴하는 게 아니라 상황에 따라서 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작함
AND 연산
왼쪽 값이 truthy 인 경우 오른쪽 값 리턴
왼쪽 값이 falsy 값인 경우 왼쪽 값 리턴
OR 연산
왼쪽 값이 truthy 인 경우 왼쪽 값 리턴
왼쪽 값이 Falsy 면 오른쪽 값 리턴
AND 와 OR 연산자 사이에서는 AND 연산자의 우선순위가 더 높다
// AND와 OR의 연산 방식
console. log(null && undefined); // null
console. log(0 || true); // true
console. log('0' && NaN); // NaN
console. log({} || 123); // {}
NULL 병합 연산자
null 병합 연산자
물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자
const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit
console.log(example1, example2, example3); // I love Codeit
연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴된다
연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴
변수와 스코프
var
• 호이스팅 : 선언 부분만 끌어올려짐 (값을 할당하면 할당된 값 자체는 그 이후에 접근이 가능함)
→let, const는 호이스팅 불가능
• 변수 중복 선언 가능
• 함수 단위이기 때문에 모 전역변수로 평가 된다
var문제를 개선하기 위해 ES2015에서 let과 const가 등장
- 변수 이름 중복선언 불가 (SyntaxError 발생)
- 변수 선언 전에 사용 불가 (ReferenceError 발생)
- 블록 스코프
// 변수와 스코프
var x; // 함수 스코프 (function scope)
let y; // 블록 스코프 (block scope)
const z; // 블록 스코프 (block scope)
함수 스코프란 말 그대로 함수를 기준으로 스코프를 구분
→ 함수 안에서 선언한 변수는 함수 안에서만 유효하게 됨
function sayHi() {
var userName = 'codeit';
console.log(`Hi ${userName}!`);
}
console.log(userName); // ReferenceError
-----
function sayHi() {
const userName = 'codeit';
console.log(`Hi ${userName}!`);
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
{
let language = 'JavaScript';
}
console.log(userName); // ReferenceError
console.log(i); // ReferenceError
console.log(language); // ReferenceError
'🏃♀️ 대외활동 > Codeit Boost-Node.js' 카테고리의 다른 글
4주차 스터디 모던 자바스크립트 (3) [코드잇 부스트 백엔드 스터디 ] (0) | 2024.05.25 |
---|---|
4주차 스터디 모던 자바스크립트 (2) [코드잇 부스트 백엔드 스터디 ] (0) | 2024.05.25 |
3주차 컴퓨터 구조 이해하기 [코드잇 부스트 백엔드 스터디 ] (0) | 2024.05.20 |
3주차 소프트웨어 이해하기 [코드잇 부스트 백엔드 스터디] (0) | 2024.05.20 |
2주차 프로그래밍과 데이터 in JavaScript [코드잇 부스트 백엔드 스터디] (1) | 2024.05.12 |