[항해99] React 입문주차 S.A.

🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

느슨한 타입(loosely typed)의 동적(dynamic) 언어

 

자바스크립트(JavaScript) = 느슨한 타입(loosely typed)의 동적(dynamic) 언어.

=> 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능.

=> ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어

==> 스크립트(script) : 자바스크립트로 작성한 프로그램.

       ⌙ 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행.

 

(강점)

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌
• 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

=> 이 세 가지 모두를 지원하는 브라우저 연관 기술은 자바스크립트뿐.

=> 이런 특징으로 브라우저 인터페이스를 만들 때 가장 널리 사용.

=> 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능.

---

JavaScript 형변환

 

형 변환(type conversion) = 함수와 연산자에 전달되는 값 대부분이 적절한 자료형으로 자동 변환되는 과정.

 

문자형으로 변환

=> 문자형의 값이 필요할 때 발생.

    ⌙  alert 메서드는 매개변수로 문자형을 받기에 alert(value)에서 value는 문자형이어야 함.

                                만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환.

    ⌙  String(value) 함수 호출해 전달받은 값을 문자열로 변환도 가능.

=> 문자형으로의 변환은 대부분 예측 가능한 방식으로 일어남.

 

숫자형으로 변환

=> 수학과 관련된 함수와 표현식에서 자동 발생.

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

    ⌙  Number(value) 함수 사용, 주어진 값(value)을 숫자형으로 명시해서 변환.

=> 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN.

전달받은 값	형 변환 후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백 제거. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽음. 변환에 실패하면 NaN

불린형으로 변환

=> 논리 연산 수행 시 발생.

    ⌙  Boolean(value) 호출, 명시적으로 불리언으로의 형 변환 수행 가능.

불린형으로 변환 시 적용되는 규칙
전달받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

=> 비어 있지 않은 문자열은 언제나 true

 

숫자형으로 변환 시 undefined는 0이 아니라 NaN
문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true

 

---

==, ===

 

=	할당	어떤 변수에 값을 할당할 때
==	등차 (유형을 비교하지 않음)	변수 값을 기반으로 비교. 0 == "0" 은 true
===	등차 (유형도 비교)	엄격한 비교. 0 === "0" false

---

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

undefined와 null의 미세한 차이들을 비교해보세요.

 

단점/문제점

1. 클라이언트 보안 (Client-side Security)

2. 브라우저 지원 (Browser Support)

3. 디버깅 기능의 부족 (Lack of Debugging Facility)

4. 단일 상속 (Single Inheritance)

5. 느린 비트 함수 (Sluggish Bitwise Function)

6. 렌더링 중지 (Rendering Stopped)

7. 다른 OOP 언어와의 차이점 1 - 은닉화의 한계

8. 다른 OOP 언어와의 차이점 2 -추상화 기능 부재

 

(참고) Pros and Cons of JavaScript (자바스크립트의 장단점)

https://velog.io/@nittre/Pros-and-Cons-of-JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90

Pros and Cons of JavaScript (자바스크립트의 장단점)

 

undefined 와 null의 차이

 

=> null/undefined는 메서드가 없습니다.

=> null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.

==> null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때 주의! 

==> null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.

=> null과 undefined은 숫자형으로 변환 시 결과가 다르다는 점에 유의. null은 0이 되고 undefined는 NaN이 됩니다.

‘null’ 값

=> null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.

=> 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다름.

    - 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용.

    - 자바스크립트에서 null은 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용.

    - let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줌.

 

‘undefined’ 값

=> undefined 값도 null 값처럼 자신만의 자료형을 형성.

=> undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용.

=> 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동 할당.

let age;

alert(age); // 'undefined'가 출력됩니다.

개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능.

let age = 100;

// 값을 undefined로 바꿉니다.
age = undefined;

alert(age); // "undefined"

하지만 undefined를 직접 할당하는 걸 권장 X. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용. 

undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

---

🐤 JavaScript 객체와 불변성이란 ?

기본형 데이터와 참조형 데이터

 

자바스크립트 데이터 타입은 크게 기본형 또는 원시형(Primitive Type)과 참조형(Reference Type)으로 분리.

원시타입(Primitive type)의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장하며,

참조 타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입이다.

 

기본형(Primitive type) : 문자열이든 숫자든 한 가지만 표현, 값을 그대로 할당

 

기본형 종류

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용. 정수의 한계는 ±253
• bigint – 길이 제약 없이 정수를 나타낼 수 있다
• 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용. 단일 문자를 나타내는 별도의 자료형은 없다
• 불린형 – true, false를 나타낼 때 사용
• null – null 값만을 위한 독립 자료형. null은 알 수 없는 값
• undefined – undefined 값만을 위한 독립 자료형. undefined는 할당되지 않은 값
• 객체형 – 복잡한 데이터 구조를 표현할 때 사용
• 심볼형 – 객체의 고유 식별자를 만들 때 사용

참조형(Reference Type) : 값이 저장된 주소 값을 할당(참조)

 

=> 객체는 데이터 컬렉션이나 복잡한 개체(entity) 표현 가능.

=> 참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있음, 

==> ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가.

=> 참조형 데이터는 변수에 값을 직접 저장하지 않음.

==> 변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 `포인터`.

===> call-by-reference (참조에 의한 호출)로 전달.

 

참조형 종류

• Array
• Function
• RegExp
• Set / WeakSet
• Map / WeakMap

 

(참고) 

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC

[Java Script] 원시타입과 참조타입 👀

---

불변 객체를 만드는 방법

 

불변(Immutable) 객체: 객체 생성 이후에는 객체의 상태가 바뀌지 않는 객체. 

객체가 불변인 다양한 이유. 

⌙ 성능 향상하기(향후 객체의 변경에 대한 계획 없음)

⌙ 메모리 사용을 줄이기(전체 객체를 복제하는 대신 객체를 참조)

⌙ 스레드 안전성(여러 스레드가 서로 간섭하지 않고 동일한 객체 참조 가능)

 

불변 객체 만드는 법

 

원시 타입에서의 불변

원시 타입은 값을 그대로 외부로 내보내는 경우에도 내부 객체는 불변.

따라서 Setter ?를 생성하지 않는 것만으로 원시 타입으로 이루어진 객체는 불변으로 만들 수 있다.

변경이 불가능하다는 뜻은 메모리 영역에서의 변경이 불가능하다는 뜻. 재할당은 가능.

 

참조 타입에서의 불변

원시 타입이 아닌 참조 타입에서 불변은 조금 더 까다로움. 

참조하고 있는 객체에 대해서도 불변이 성립해야 불변이 성립.

배열은 객체이고 객체는 immutable value가 아닌 변경 가능한 값.

 

1. Object.assign(target, ...sources)

Object.assign은 타겟 객체로 소스 객체의 프로퍼티를 복사한다.

Object.assign을 사용해 기존 객체를 변경하지 않고 객체를 복사할 수 있다.

Object assign은 완전한 깊은 복사를 지원하지는 않는다. 객체 내부의 객체(Nested Object)는 얕은 복사가 된다.

ES6에서 추가된 메소드이며 Internet Explorer는 지원하지 않는다.

 

2.Object.freeze

Object.freeze()를 사용하면 불변(immutable)객체로 만들 수 있다.

하지만 객체 내부의 객체(Nested Object)는 변경가능하다.

내부 객체까지 변경 불가능하게 만들려면 Deep freeze를 하여야 한다.

 

3.Immutable.js 

Facebook이 제공하는 Immutable.js를 사용하는 방법.

Immutable.js는 List, Stack, Map, OrderedMap, Set, OrderedSet, Record와 같은 영구 불변 (Permit Immutable) 데이터 구조를 제공한다.

큰 객체에 사용.

 

(참고)

https://poiemaweb.com/js-immutability

Immutability | PoiemaWeb

https://tecoble.techcourse.co.kr/post/2020-05-18-immutable-object/

불변객체를 만드는 방법

 

---

얕은 복사와 깊은 복사

 

객체를 프로퍼티 값으로 갖는 객체의 경우,

얇은 복사(shallow copy)는 한 단계까지만 복사하는 것,

깊은 복사(Deep copy)는 객체에 중첩되어 있는 객체까지 모두 복사하는 것.

 

참고) 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 부르는 경우도 있다.

let animal1 = {
  name: '🐶',
};

let animal2 = {
  name: '🐶',
};

console.log(animal1 === animal2); // 1번 false
console.log(animal1.name === animal2.name); // 2번 true

 

---

🐤 호이스팅과 TDZ는 무엇일까 ?

스코프, 호이스팅, TDZ

 

스코프(Scope) = 유효 범위(함수 내부)

=> 사전적으로 '영역','범위' 라는 뜻

=> 해당 변수가 정의되어 있는 영역, 즉, 정의된 변수를 사용할 수 있는 소스코드의 집합

=> 스코프는 전역(global) 스코프와 지역(local) 스코프로 분류

     ⌙ var는 함수 스코프이고, let과 const는 블록 스코프!

블록 스코프에서 선언된 변수는 블록 내에서만 유효하며 외부에서는 접근할 수 없다. 즉, 블록 스코프는 지역변수이다. 여기서 말하는 코드 블록은 함수, if문, for문, while문, try-catch문 등을 의미한다. 반면에 함수 스코프는 함수 내에서 선언된 변수만 지역 스코프가 되는 것이다.

 

호이스팅(Hoisting)
=> 스코프 내부 어디서든 변수 선언이 최상위에 선언된 것처럼 행동하는,  변수가 끌어올려 지는 현상 .

=> hoist는 끌어올리다라는 뜻이 있음.

=> 호이스팅은 스코프 단위{}로 일어난다

==> 선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 현상. 즉, 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당. 덕분에 스크립트내에서 함수 선언의 위치는 중요하지 않게 됨. 스크립트 내에서 함수 호출을 함수 선언보다 먼저 해도 문제 없음.

 

=> var 변수는 어디에 있어도 최상위에 선언된 것처럼 전체를 포괄

==> let, const 도 호이스팅이 가능하나, TDZ(temporal dead zone) 영향을 받아 할당하기 전에 사용할 수 없음. 이는 코드를 예측가능하게 하고 잠재적 버그를 줄일 수 있게 함. 

 

 호이스팅 사용시 주의할 점

• 코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 하기.
  * 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지.
• var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있음. 그럼 왜 var와 호이스팅을 이해해야 하나? * ES6를 어디서는 쓸 수 있으려면 아직 시간이 더 필요. 그렇기 때문에 ES5로 컴파일을 해야 함.

TDZ(Temporal Dead Zone)

=> 스코프 시작지점부터 초기화 시작지점 사이의 구간을 의미.

=> 일시적인 사각 지대라는 뜻.

=> 선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간.

 

TDZ의 영향 받는 구문

 const 변수

-const 변수는 선언 및 초기화 전 줄까지 TDZ에 있다. const 변수는 선언한 후에 사용.

 let 변수

-let도 선언 전 줄 까지 TDZ의 영향을 받음.

 class 구문

-선언 전에는 class를 사용할 수 없다.

 constructor() 내부의 super()

-부모 클래스를 상속받았다면, 생성자 안에서 super()를 호출하기 전까지 this 바인딩은 TDZ에 있다.

-constructor() 안에서 super()가 호출되기 전까지 this를 사용할 수 없다.

-TDZ는 인스턴스를 초기화하기 위해 부모 클래스의 생성자를 호출할 것을 제안한다. 부모 클래스의 생성자를 호출하고 인스턴스가 준비되-면 자식 클래스에서 this 값을 변경할 수 있다.

 기본 함수 매개변수(Default Function Parameter)

-기본 매개변수는 글로벌과 함수 스코프 사이의 중간 스코프(intermidiate scope)에 위치한다. 기본 매개변수 또한 TDZ 제한이 있다.

 

(참고)

https://ui.toast.com/weekly-pick/ko_20191014

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/

---

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

 

자바스크립트에서 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려지나,

hoisted(); // logs "foo"

function hoisted() {
  console.log("foo");
}

 

함수 표현식은 끌어올려지지 않음.

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log("bar");
};

 

함수선언식:

function do_something() { ... }

함수 표현식:

let do_something = function [함수 이름]() { ... }

---

여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.

 

변수의 생성과정
var	1.선언 및 초기화 단계 2. 할당 단계 (초기화: undefined를 할당해주는 단계)
let	1. 선언 단계 2. 초기화 단계 3. 할당 단계
const	1. 선언+초기화+할당
* let과 var는 선언만 해두고 할당을 나중에 한다. let과 var는 값을 변경할 수 있기 때문!

 

var: 함수 단위. 블록 밖에서 접근 가능, scope 전체에서 살아 있음.  오래된 변수 선언 키워드

var는 구식 자바스크립트의 잔재. 오래된 스크립트에서 당신을 기다리고 있는 괴물 같은 존재.

var는 if, for 등의 코드 블록을 관통. 

함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됨.

let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있습니다.) 재할당 가능. 재선언 불가능. 모던한 변수 선언 키워드

const: block 단위(상수: 한번 선언한 값은 바꿀 수 없습니다.) 재할당 재선언 모두 불가능. 

변화하지 않는 변수를 선언할 땐, let 대신 const

변숫값이 절대 변경되지 않을 것이라 확신하면,

값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언하도록 합시다.

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근 
let cat = new Cat('perl');
cat.showName();
console.log(cat);

function: 어떤 코드의 묶음이고, function scope() { ... } 로 생겼고, scope()처럼 ()를 붙여주면 미리 만들어둔 코드 묶음이 실행.

  => 스코프(Scope)? 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위.

  => 내장 함수는 우리가 만들지 않아도 자바스크립트가 쓰기 편하라고 미리 만들어둔 코드 묶음들.

---

실행 컨텍스트와 콜 스택

 

실행 컨텍스트(Execution Context)

=> 실행 가능한 코드가 실행되기 위해 필요한 환경

==> 실행 가능한 코드?

        ⌙ 전역 코드(전역 영역에 존재하는 코드), Eval 코드(eval 함수로 실행되는 코드), 함수 코드(함수 내에 존재하는 코드)

=> scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리

==> 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리

 

글로벌 실행 컨텍스트(Global Execution Context)

=> 코드가 실행되기 전에 생성이 되며, 함수 내에 없는 코드는 모두 전역 실행 컨텍스트 안에 존재

=> 글로벌 실행 컨텍스트의 특징으로는 무조건 하나의 전역 실행 컨텍스트 만이 존재하며, 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지하는 것

 

함수 실행 컨텍스트(Functional Execution Context)

=> 전역 실행 컨텍스트가 생성된 후, 함수가 실행(ex 호출) 될 때마다 새로운 실행 컨텍스트가 작성

 

콜 스택

=> 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 하나의 콜 스택만 존재. 즉, 하나의 일만 처리할 수 있다.

=> 콜 스택은 여러 함수들을 호출하는 스크립트에서 해당 위치를 추적하는 엔진을 위한 매커니즘이며 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야 되는지를 제어한다.

 

콜 스택에 대한 설명

-스크립트가 함수를 호출하면 엔진은 이를 콜 스택에 추가하고 함수를 수행한다.

-해당 함수에 의해 호출되는 모든 함수들도 호출 스택에 추가되고 호출이 도달하는 위치에서 실행된다.

-메인함수가 끝나면 엔진은 스택을 제거하고 메인 코드 목록에서 중단된 실행을 다시 시작한다.

-스택에 할당된 공간보다 많은 공간을 차지하면 stack overflow 에러가 발생한다.

출처: 

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

https://ryuhojin.tistory.com/3

콜 스택(Call Stack)

---

스코프 체인, 변수 은닉화

 

스코프 체인(Scope Chain)

=> 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것

=> 자바스크립트가 변수 값을 얻으려고 할 때 스코프 체인에서 변수를 찾는다.

=> 리스트의 끝까지 탐색했는데도 그 변수가 없다면 reference error가 발생

=> 최상위 자바스크립트 코드(어떠한 함수에도 속하지 않는 코드)의 스코프 체인에는 하나의 객체만 있고, 그것이 전역 객체.

==> 중첩되지 않은 함수의 스코프 체인은 2개의 객체로 이루어짐. 1) 함수의 매개변수와 지역 변수를 정의하는 객체 2) 전역 객체

 

함수가 정의될 때, 함수는 스코프 체인을 저장.

함수가 호출될 때, 함수는 지역 변수를 보관하는 새로운 객체를 만들고 그 객체를 기존에 만들어둔 스코프 체인에 추가.

 

스코프 체인(scope chain)을 개발자 도구로 확인하기

스코프 체인(scope chain)은 함수의 감춰진 프로퍼티인 [[Scope]]로 참조할 수 있다.

 

변수 은닉화

=> 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것

=> 클로저를 사용하여 외부에서 직접적으로 변수에 접근할 수 있도록 캡슐화(은닉화)할 수 있다.

 

(참고)

https://ljtaek2.tistory.com/140

자바스크립트 - 스코프 체인(scope chain)란?

https://developer-alle.tistory.com/369

[JavaScript] 스코프, 스코프 체인, 클로저

---

🐤 실습 과제

• 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi () {

const a = 1;
let b = 100;
b++;

console.log(a,b);
}

//console.log(a);

console.log(b);

hi();

console.log(b);

let b = 1;

function hi () {

const a = 1;
let b = 100;
b++;

console.log(a,b);

}

//console.log(a);  
//↑ 주석을 풀 경우 => a is not defined. 함수 안에 있는 것과 별개로 a를 정의한 부분이 없어서 오류 발생. 
// 해결 => let a = 3; 과 같이 a 값 선언 후(단, 함수 밖에서) 콘솔에 찍어보기

console.log(b); //1 // 첫번째 줄의 b

hi(); //1, 101 // 함수 hi()안에서의 b (b++;은 숫자 1을 더한다는 뜻으로, 출력된 b값은 101이 됨.)

console.log(b); //1 // 첫번째 줄의 b

 

 

(전체적인 참고)

https://ko.javascript.info/

모던 JavaScript 튜토리얼

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#%EA%B0%9D%EC%B2%B4

JavaScript의 타입과 자료구조 - JavaScript | MDN