프로그래밍 기초(JavaScript)

🟨JavaScript

---

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

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

JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능함.

let foo = 42 // foo가 숫자 foo = 'bar' // foo가 이제 문자열 foo = true // foo가 이제 불리언

프로그래밍 언어는 다른 유형의 개체 및 변수에 대한 명시적 사양이 필요하지 않은 경우 느슨한 유형 또는 약한 유형. 

약한 형식의 프로그래밍 언어에서 "느슨한" 형식 지정 규칙은 잘못되거나 예측할 수 없는 결과를 생성할 수 있음.

동적 측면만 있는 것이 아니라 거의 모든 것이 동적이기 때문에 동적 언어라고 함 . 모든 변수는 동적이며(유형 및 존재 모두) 코드도 동적. 

 

2. JavaScript 형변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 "형 변환(type conversion)"이라고 합니다.

alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것이나, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시입니다.

이 외에, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있습니다.

- 자동 형변환 / 명시적 형변환

 

String() 문자형으로 변환 : 문자형의 값이 필요할 때 일어남

 

Number() 숫자형으로 변환  / 숫자가아닐시 NaN: 수학과 관련된 함수와 표현식에서 자동으로 일어남

숫자형으로 변환 시 적용되는 규칙

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

Boolean() 불린형으로 변환: 논리 연산을 수행할 때 발생

불린형으로의 형 변환 규칙

전달받은 값형 변환 후	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

예외적인 경우

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

 

3. ==, ===

==	===
동등연산자	일치연산자
두 피연산자의 값이 서로 같으면 참(true)을 반환 두 피연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환	타입의 변환 없이 두 피연산자의 값이 같고,  타입도 같아야만 참(true)을 반환
피연산자들의 값만 비교	피연산자들의 값과 타입을 모두 비교
0과 false를 구별X	데이터타입의 동등여부까지 검사하기 때문에, 피연산자의 데이터타입이 다를 경우 false를 반환

 

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

문제점

- 실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있음

- 동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워 짐

보안방법

이러한 불편함을 해소하기 위해 TypeScipt나 Flow 등을 사용할 수 있음

 

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

null과 undefined 모두 '값이 없다'는 값이자, 데이터 타입을 나타냄
null은 값이지만 값으로서 의미없는 특별한 값이 등록되어 있는 것, 

undefined는 등록이 되어있지 않기 때문에 초기화도 정의되어 있지 않은 것

일치 연산자 ===를 사용하여 비교	동등 연산자 ==를 사용하여 비교	산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 비교
alert( null === undefined ); // false	alert( null == undefined ); // true	null과 undefined는 숫자형으로 변환  null은 0, undefined는 NaN으로 변환

---

🔻JavaScript 객체와 불변성이란 ?

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

기본형 데이터 Primitive Type (원시타입)	참조형 데이터 Reference Type (참조 타입)
string 문자열 타입	Object 객체 Array  배열 Function 함수
number 숫자타입
boolean 논리적 참과 거짓
undefined var 키워드로 선언된 변수에 암죽적으로 할당되는 값
null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값
symbol ES6에서 추가된 7번째 타입
- 변경 불가능한 값(immutable value) - 변수에 할당 될 때 메모리 상에 고정된 크기로 저장되고, 해당 변수가 원시 데이터 값을 보관 - 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근 - 변수에 새 값이 할당 될 때 변수에 할당 된 메모리 블럭에 저장된 값을 바로 변경	- 변경 가능한 값(mutable value) - 크기가 정해져 있지 않고 변수에 할당 될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장 - 변수의 값이 저장된 힙(heap) 메모리의 주소값을 저장 - 변수의 값이 저장된 메모리 블럭의 주소를 가지고 있고,  자바스트립트 엔진이 변수가 가지고 있는 메모리 주소를  이용해서 변수의 값에 접근

2.불변 객체를 만드는 방법

'불변 객체'란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.

자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데 const와 Object.freeze()를 사용하는 것이다.

 

const

자바스크립트 키워드 중 하나인 const이다. ES6문법부터 let과 const를 지원한다.

const 키워드는 변수를 상수로 선언할 수 있다, 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

그렇다면 상수로 선언한 객체는 불변 객체일까? 

const test = {};
test.name = "mingyo";

console.log(test);  // {"mingyo"}

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는, 즉 test변수가 상수가 되기 때문에 const 키워드로 선언된 test변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

재할당이 불가능 한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 test변수는 재할당이 불가능한 것이고

객체의 속성이 변경가능 한 이유는 실제 객체가 변경은 되지만 ( {} -> name : "mingyo" ) 객체와 변수(test)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능한 것이다. 

때문에 비록 재할당은 불가능하지만 객체의 속성을 변경함으로 인해 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 하기는 힘들다. 따라서 Object.freeze()라는 JS내장메소드도 살펴보도록 하겠다.

 

Object.freeze()

자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드이다. 공식 문서에서는 "객체를 동결하기 위한 메소드" 라고 적혀있다.

그렇다면 이 메소드를 사용하면 불변 객체를 만들 수 있을까?먼저 이 메소드의 사용법부터 알아보면,

let test = {
    name : 'kim'
}

Object.freeze(test);

사용법은 간단하다. test 변수에 key value를 가진 객체를 바인딩 후 Object.freeze(test)를 사용해 바인딩된 변수를 동결 객체로 만들었다. 때문에 test 객체는 객체의 속성을 변경하는 시도는 불가능하다.

test.name = 'Jung';
console.log(test) // {name: 'kim'}

위와 같이 객체의 속성을 변경하는 시도는 무시된다.

그러나 Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하다. 

test = {
    age : 15
};
console.log(test); // {age: 15}

위와 같이 객체의 재할당은 가능하다. 때문에 Object.freeze()도 불변 객체라고 할 수는 없을 것 같다.

그럼 결국 불변 객체는 어떻게 만들 수 있냐면..

const와 Object.freeze()를 조합하여 만들 수 있다. (const의 재할당불가 + Object.freeze()의 객체속성 변경불가)

그렇다면 아래 코드와 같이 사용하면 된다.

const test = {
    'name' : 'jung'
};

Object.freeze(test);

먼저 const키워드로 바인딩 된 변수를 상수화 시킨 다음, Object.freeze()로 해당 변수를 동결 객체를 만들면

객체의 재할당과 객체의 속성 둘 다 변경불가능한 불변 객체가 된다.

3.얕은 복사와 깊은 복사

얕은 복사(Shallow Copy)	깊은 복사(Deep Copy)
얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.	깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다. 복사를 하는 목적은 기존 객체의 값만 복사본으로 가져와 별도로 활용하기 위함이 대부분이다. 기존 객체까지 건드린다면 이것은 복사를 하는 목적에 벗어난다.
객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성한다. 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조한다. 따라서, 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.	객체를 복사 할 때, 해당 객체와 인스턴스 변수까지 복사한다. 전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다. 객체가 참조 타입의 멤버를 포함할 경우 참조값의 복사가 아닌 참조된 객체 자체가 복사되는 것을 의미한다. 원본의 참조는 더 이상 하지 않는다.

 

 

---

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

1.스코프, 호이스팅, TDZ

스코프(Scope)

스코프란 프로그램의 실행 컨텍스트 (Execution Context)에서 보거나 접근할 수 있는 식별자를 말한다.

전역 스코프 - 변수가 함수 바깥에 선언되어 있거나, 변수 선언 시 var 키워드를 사용하지 않으면 변수는 전역 스코프에 포함된다. 프로그램의 전체에서 접근 가능 함수 스코프 - 변수가 함수 내에서 선언되면 이 변수는 함수 스코프 내에 존재하게 된다. 함수 내부에서만 접근 가능

호이스팅 (hoisting)

자바스크립트에서 변수 선언은 실행시 자바스크립트 코드의 가장 상단으로 끌어올려지기 때문이다. 다시 말해서 변수는 코드의 중간에 선언하더라도 맨 앞에 선언한 것과 같아지며, 이를 변수 끌어올림, 호이스팅 (hoisting) 이라한다. 호이스팅이 발생하는 이유는 자바스크립트 해석기의 동작 방식 때문이다. 1. 자바스크립트는 코드가 실행되면 코드를 파싱한다. 2. 전역 컨텍스트에 전역 변수 및 함수를 등록하게 된다. 3. 코드를 해석해 변수 및 함수 선언문을 코드의 상단으로 끌어올리는 효과가 발생하게 된다. 3. 각각의 함수를 호출하고 함수 내부의 코드를 파싱해서 함수 컨텍스트에 함수 스코프를 가지는 변수를 등록하고 실행하는 작업을 거치게 된다.

TDZ(Temporal Dead Zone)

TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미한다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이다.

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

함수 선언식(function declartion)	함수 표현식(function Expression)
함수명이 정의되어 있고, 별도의 할당 명령이 없는 것	정의한 function을 별도의 변수에 할당하는 것
함수 전체를 호이스팅  정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것	별도의 변수에 할당 변수는 선언부와 할당부를 나누어 호이스팅 선언부만 호이스팅

3.let, const, var, function 이 어떤 원리로 실행되는지

var		const	let	function
한번 선언된 변수를 다시 선언할 수 있음 선언하기 전에 사용할 수 있음 1. 선언 및 초기화 단계 2. 할당 단계 function scope		1.선언 + 초기화 + 할당   Block scope Immutable	1. 선언 2.초기화 3.할당 Block scope Mutable	선언문 표현시 호이스팅으로 우선적으로 적용

 

	재선언	재할당
var	O	O
let	X	O
const	X	X

3.실행 컨텍스트와 콜 스택

실행 컨텍스트(execution context)	콜 스택(call stack)
자바 스크립트 코드가 실행되는 환경	코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료 구조
1. Global Execution context 자바스크립트 엔진이 처음 코드를 실행할 때Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object (Node는 Global) 를 생성하고 this가 Window 객체를 가리키도록 한다. 2. Function Execution context 자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성한다. 모든 함수는 호출되는 시점에 자신만의 Execution Context를 가진다.	엔진이 처음 script를 실행할 때, Global Execution Context를 생성하고 이를 Call Stack에 push한다. 그 후 엔진이 함수를 호출할 때 마다 함수를 위한 Execution Context를 생성하고 이를 Call Stack에 push 한다.

4.

스코프 체인(Scope Chain)

• JavaScript 엔진은 스코프를 사용하여 변수의 정확한 위치나 접근성을 찾아내고 그 특정 프로세스를 스코프 체인(Scope Chain)이라고 한다.
• 범위 체인이란 한 변수에 범위(글로벌 또는 로컬/함수 또는 블록 범위일 수 있음)가 있고 다른 범위(글로벌 또는 로컬/함수 또는 블록 범위일 수 있음)가 있는 다른 변수 또는 함수에서 사용됨을 의미한다.
• 이 완전한 체인 형성은 사용자가 요구 사항에 따라 계속되고, 중지하기를 원할 때  중지됩니다.

변수 은닉화(variable shadowing)

특정 범위(결정 블록, 메서드 또는 내부 클래스) 내에서 선언된 변수가 외부 범위에서 선언된 변수와 동일한 이름을 가질 때 발생 

let블록 범위 지정 과 함께 ECMAScript6 도입으로 const가변 섀도잉이 가능함.

function myFunc() {
    let my_var = 'test';
    if (true) {
        let my_var = 'new test';
        console.log(my_var); // new test
    }
    console.log(my_var); // test
}
myFunc();

---

🔻실습 과제

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

let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b);// a=1,b=101; } // b는 전역스코프이기 때문에자신의 지역 스코프와 하위 지역 스코프에서만 유효한 지역 스코프인 b가 아닌 전역 스코프가 출력되었다. //console.log(a); a=undifend console.log(b); // b=1; hi(); console.log(b); //b=1; //let와 const는 지역 내에서만 호출이 가능하다 함수 밖에서 a를 출력하려면 전역에 둬야한다.

---

🔻출처 및 참고자료

https://devuna.tistory.com/82

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

https://ko.javascript.info/type-conversions

https://yorr.tistory.com/21

https://intrepidgeeks.com/tutorial/javascript-light-copy-and-deep-copy

https://tutorialpost.apptilus.com/code/posts/js/js19-scope/

https://funveloper.tistory.com/25

https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79

https://en.wikipedia.org/wiki/Variable_shadowing