목차
1장 - 프로그래밍
2장 - 자바스크립트란?
3장 - 자바스크립트 개발 환경과 실행 방법
4장 - 변수
5장 - 표현식과 문
6장 - 데이터 타입
서론은 건너뛰고 주요내용 위주로 정리 예정
[2.2 자바스크립트의 표준화 및 배경]
[배경]
- 마이크로 소프트는 자바스크립트의 파생 버전인 JScript를 자사 브라우저에서만 동작하는 기능을 추가하기 시작했고 이로인해 크로스 브라우징 이슈가 발생
- 표준화된 자바스크립트의 필요성 증가
[표준화]
- 1997년 7월 ECMA-262 라는 표준화된 자바스크립트 초판 사양 완성 및 ECMAScript 로 명명
이후 2015년 ECMAScript 6 (ES6) 가 공개되었고 이때
- let / const 키워드
- 화살표 함수
- 클래스
- 모듈
위와 같은 기능들이 대거 도입되며 큰 변화가 있었다.
위 연대기표를 참고하면 될 듯 하다. 이후로도 매년 새로운 버전 출시
[2.3.1 Ajax]
- js를 이용해 서버 - 브라우저 간 비동기 방식의 데이터 통신 기능
- 변경할 필요가 없는 부분은 다시 렌더링 하지 않고, 서버로 부터 필요한 부분만 한정적으로 렌더링
-부드러운 화면 전환 효과 기대 가능
[2.3.2 JQuery]
- Js보다 배우기 쉽고 직관적이라 한 때 이를 더 선호하는 개발자가 양산되기도 했다는 사실..
[2.3.4 Node.js]
- Node.js 는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.(와 여태 몰랐음)
- 원래는 브라우저의 자바스크립트 엔진에서만 동작했었는데 이를 브라우저에서 독립시킴으로써 브라우저 이외의 환경에서도 동작할 수 있도록했다.
- 비동기 I/O 지원
- 단일스레드 이벤트 루프 기반으로 동작
위와 같은 장점으로 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application) 에 적합하다.
그러나 CPU 사용률이 높은 애플리케이션에는 권장 안함.
[2.4 자바스크립트와 ECMAScript]
위와 같은 포함관계를 형성한다고 알아두자.
EcmaScript는 Js의 표준사양인 ECMA-262 를 지칭한다.
- 값, 타입, 객체/프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정
그렇다면 Js(자바스크립트)는 무엇인가?
프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript + 브라우저가 별도로 지원하는 클라이언트 사이드 Web API 를 합친 개념
(* 클라이언트 사이드 Web API : DOM, BOM, Canvas, XML, fetch, SVG, Web Storage 등등,,)
[2.5 자바스크립트의 특징]
- Js는 Html, Css와 함께 웹을 구성하는 요소 중 하나임. 웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
- 개발자가 별도로 컴파일 작업을 수행하지 않는 인터프리터 언어(파이썬도)임. << Q. 반대는 뭘까? A. 컴파일러언어 Ex) C,C++,Java
- 근데 중요한것은 대부분의 모던 자바스크립트 엔진(ex: 크롬, V8, 파이어폭스, 사파리, ms 엣지)은 인터프리터와 컴파일러의 장점을 결합해 처리속도가 느리다는 인터프리터의 단점을 해결했다. 즉, 혼합형이라고 할 수도 있다.
결론 : 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어임.
주의할 점은, 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이고 강력한 프로토타입 기반의 객체지향 언어임.
[3.1 자바스크립트 실행 환경]
[3.3 Node.js]
Node.js 란? 브라우저에서만 동작하던 js를 브라우저 이외의 환경에서 동작 시킬 수 있는 js 실행 환경!
npm 이란? js의 패키지 매니저. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI 제공
[4.1 변수란 무엇일까?]
변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간. 또는 이를 식별하기 위해 붙인 이름
이 이름을 식별자 라고도 한다.
[4.3 변수 선언]
[변수 선언 및 할당&사용과정]
1. 변수 선언시 값을 저장하기 위한 메모리 공간을 확보.
2. 변수 이름과 확보된 메모리 공간의 주소를 연결(바인딩이라고 함) << 값을 저장할 수 있도록 해주는 역할
3. 이 공간이 release 되기 전까지는 누구도 이 공간을 사용할 수 없도록 보호된다. << 안전하게 사용 가능
[변수 선언 방법]
var, let, const 키워드 사용
- var : 함수 레벨 스코프 지원. 의도치 않게 전역 변수가 선언되어 심각한 부작용 발생 가능성 내재
이를 보완하기 위해 등장한 것이 let, const (ES6 에서 등장함.)
var 키워드로 변수가 선언되면 값을 할당하지 않아도 확보된 메모리 공간이 비어있는 것이 아닌, undefined 라는 값이 암묵적으로 할당되어 초기화 된다. 즉 var 키워드를 사용한 변수 선언은 선언단계와 초기화 단계가 동시에 진행된다. 이 방법 덕분에 할당하지 않은 상태에서 곧바로 참조할 시 쓰레기 값이 발생하는 문제에 대해 걱정할 필요가 없어진다. 이는 자바스크리트의 독특한 특징이므로 기억하도록 하자.
[4.4 변수 선언의 실행 시점과 변수 호이스팅]
호이스팅 : 선언문이 마치 해당 스코프의 최상단에 끌어올려진 듯한 현상
js엔진은 변수 선언이 소스코드 어이데 있든 다른 코드보다 먼저 실행함. 따라서 변수 선언이 코드 어디에 있든 상관없이 변수 참조 가능.
변수에 대한 호이스팅은 쉽게 이해 했을 것이다.
추가로 함수에 대해서도 살펴보자. 이전에 정리한 블로그 내용을 인용해 설명할 예정이다.
const 키워드? >> 재할당 금지. 한번만 할당 가능.
+++ TDZ ( Temporal Dead Zone ) : 변수를 사용하는 것을 허용하지 않는 공간 +++
console.log(num1);
let num1 = 123;다음과 같이 작성 후 코드를 실행하면, 에러가 발생합니다. 에러 내용은 Cannot access 'num1' before initialization 이라고 나옴.
이는 num1 변수가 초기화 되기 전에 num1 변수에 접근할 수 없다는 에러 메세지인데,, let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것 같아 보임..그런데, 그게아니라 TDZ 라는 공간의 특성 때문이라는 점. 아래 글 참고하자.
자바스크립트의 변수 선언 키워드인 let과 const를 사용해 변수를 선언하고, 변수 선언문의 위쪽에서 let과 const 키워드로 선언된 변수에 접근하려 한다면 에러가 발생함. 이렇게 에러가 발생하는 이유는, var 키워드와는 다르게 let과 const 키워드로 선언된 변수는, 변수 스코프의 가장 위쪽에서 변수의 초기화가 완료될 때까지 TDZ라는 공간에 있기 때문.
결론만 말하면, let과 const 키워드는 호이스팅이 발생하지 않는 것이 아니라, var 키워드와는 다르게 변수 스코프의 가장 위쪽에서 변수의 초기화가 완료될 때까지 TDZ라는 공간에 있기 때문에 호이스팅이 발생하지 않는 것처럼 보이는 것.
[4.7 식별자 네이밍 규칙]
위 예약어들을 변수 이름으로 명명하지 않도록 조심하자.
추가로 "_", "$" 는 포함 가능하다. 단 식별자는 특수문자를 제외한 문자, "_", "$" 로 시작하며, 숫자로 시작하는 것은 허용하지 않음.
코딩을 하다보면, 특히 개발을 하다보면, 변수명을 정하는데 생각보다 오랜 고민을 하고 있을 때가 많다. 실무에서 자주 사용하는 컨벤션을 숙지할 수 있도록 하고, 아래의 4가지 유형의 네이밍 컨벤션을 알아두도록 하자.
js에서는 일반적으로 변수/함수 이름에는 카멜케이스를 사용
생성자 함수, 클래스 이름에는 파스칼 케이스 사용
ECMAScript 사양에 정의되어 있는 객체와 함수들도 카멜케이스, 파스칼 케이스 사용.
[5.2 표현식과 문 - 리터럴]
리터럴 : 사람이 이해할 수 있는 문자 or 약속된 기호를 사용해 값을 생성하는 표기법
js 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있음.
ex) - 이진수 리터럴 : 0b
- 8진수 리터럴 : 0o
- 16진수 리터럴 : 0x
[5.3 표현식]
var score = 10 + 20;
score; // 100
//리터럴 표현식
10
'Hello'
//식별자 표현식 (선언은 이미 존재한다는 전제하에)
sum
person.name
arr[1]
//연산자 표현식
sum = 10
sum !== 10
// 함수/메서드 호출 표현식 (선언은 이미 존재한다는 전제하에)
square()표현식은 값으로 평가된다. 그리고, 값으로 평가될 수 있는 문은 모두 표현식이다.
[5.4 문]
문 : 프로그램을 구성하는기본단위 && 최소 실행 단위
토큰 : 문법적 의미를 갖음. 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등 이들은 각각 문법적 의미를 갖으며 더 이상 나눌 수 없다.
따지고 보면 국어의 명사,조사,부사 이런것도 토큰이 아닐까 싶다.
[5.5 세미콜론과 세미콜론 자동 삽입 기능]
세미콜론은 문의 종료를 나타냄.
단, 0개 이상의 문을 중괄호로 묶은 코드블럭 { ..} 은 세미콜론을 붙이지 않음.
Why? 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문
근데 중요한건, 이렇게 문의 끝에 붙이는 세미콜론은 옵션이라는 점.(= 생략 가능)
How? js 엔진이 문의 끝이라고 예측되는 지점마다 세미콜론 자동 삽입 기능(ASI) 이 암묵적으로 실행된다.
근데 이것이 항상 개발자의 예측과 일치하는 것은 아니다.
[5.6 표현식인 문과 표현식이 아닌 문]
var x; // 표현식이 아님.(변수 선언문은 값으로 평가될 수 없기때문)
// 1+2, x = 1 +2 이런건 표현식임
// x = 1+2; 이건 표현식이면서 완전한 문이기도 함.
표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단한 방법 => 변수에 할당해 보기
표현식인 문 - 변수에 할당 가능
표현식이 아닌 문 - 불가
[6.1 숫자타입]
자바스크립트의 숫자 타입은 정수만을 위한 타입(ex: int 등) 이 없고 모든 수를 실수(real number)로 처리한다.
console.log(1 === 1.0); // true=== 연산자를 이용하여 1과 1.0을 비교했을 때, true 값을 반환하는 것을 확인할 수 있을 것이다.
console.log(10 / 0) // Intinity. 양의 무한대
console.log(10 / - 0) // -Intinity. 음의 무한대
console.log(1 * 'String') // NaN다른 프로그래밍 언어에선 어떤 수를 0으로 나누면 심각한 에러를 막기위한 예외를 발생시킨다. 하지만, 자바스크립트에선 이를 Infinity 라는 특별한 값으로 나타낸다. 또한 NaN(Not a Number) 라는 것이 있다는 사실도 알아두자.
[6.2 문자열 타입]
문자열 : 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자 표현 가능.
- 작은따옴표(' ') 또는 큰따옴표(" ") 또는 백틱 (` `)로 감싼다.
[6.5 undefined 타입]
앞 챕터에서 설명했다만, var 키워드로 선언한 변수는 undefined로 초기화된다. 즉, 변수선언에 의해 확보된 메모리 공간에 실제 값이 할당 되기 전까지는 undefined라는 값으로 채워진다.(이 작업은 js엔진이 수행한다.) 이 말은 즉, 변수 선언 후 할당하지 않은 채로 console.log()로 값을 찍어보면 undefined 를 출력하는 것을 확인할 수 있다.
[6.6 null 타입]
자바스크립트는 대소문자를 구별한다. NaN도 마찬가지지만, null 또한 대소문자에 유의하여 사용하도록 하자.
null 이란? 변수에 값이 없다는 것을 의도적으로 명시. 즉, 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미
[6.7 심벌 타입]
ES6에서 추가된 타입이다. 심벌 값이란? 다른 값과 중복 되지않는 유일한 값.
충돌 위험이없는 객체 유일 프로퍼티 키를 만들기 위해 사용.
사용법 : Symbol 함수를 호출하여 생성. 외부에 노출되지 않으며 다른값과 절대 중복되지 않음.
// 심벌 생성
var key = Symbol('key');
console.log(typeof key); // symbol
//객체 생성
var obj = {};
// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]); // value
[6.8 객체 타입]
js 의 데이터타입은 대분류로 원시타입, 객체타입 으로 분류한다.
[6.9 데이터 타입의 필요성]
메모리 값을 저장하려면 얼만큼의 공간이 필요한미 먼저 결정해야한다. 4바이트짜리 자료형을 굳이 16바이트의 공간에 저장한다면, 공간낭비가 발생한다. internal fragment 를 생각해보면 쉽게 이해할 수 있을 것이다. 이를 위해 데이터 타입의 정의가 필요하다.
[6.10 동적 타이핑]
자바스크립트의 변수는 변수를 선언할 때 타입을 선언하지 않는다. 그저 var, let, const 를 이용한다.실행시간에 타입이 결정된다.
동적타이핑이란? 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 이를 타입 추론 이라고 한다. 또한, 재할당에 의해 변수타입은 언제든지 동적으로 변경될 수 있다.
이러한 성질은 개발의 편리함을 제공하는 동시에 양날의 검이 될 수 있다는 사실을 알아야한다. 개발자 의도와 상관없이 js엔진에 의해 암묵적으로 타입이 변환되기도 한다.
ex) 숫자 타입의 변수로 예측했지만 실제론 문자열 타입일 수도 있음. 따라서 이러한 이유로 안정적인 변수를 만들기 위해 변수를 사용하기 이전에 데이터 타입을 체크해야 하는 경우가있다.(이로 인해 우리가 타입스크립트를 배우고 사용하는게 아닐까? 결국은 더욱 강력한 자바스크립트를 위한 방법이 아닐까 싶다.)
'개발' 카테고리의 다른 글
| 비동기와 API (1) | 2025.07.09 |
|---|---|
| [모던 자바스크립트 DeepDive] Js 심화 스터디 week 02 (6) | 2025.07.08 |
| 배열메서드 알아보기 feat(map, filter..) (1) | 2025.06.25 |
| 콜백 함수 (0) | 2025.06.22 |
| 화살표 함수 (feat : 함수표현식 vs 함수선언식) (0) | 2025.06.21 |