🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어
JavaScript의 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입의 값으로 재할당이 가능하다.
소스가 빌딩 될 때 값을 정하는 것이 아닌, 실행할때 값이 할당되는 과정에서 자동으로 자료형이 결정된다. 따라서 같은 변수에 여러 자료형의 값을 대입할 수 있다.
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요
데이터 값을 자유롭게 할당할 수 있어 편리하지만, 사용자가 의도하지 않은 데이터 타입의 변환이 일어날 수 있음.
고정으로 사용할 변수에는 const()를 사용하여 할당하는 등 변수의 변화가 일어나지 않게 고정하는 것이 필요.
- JavaScript 형변환
1. 암시적 변환
number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
string * number // number
string * string // number
number * number // number
string * boolean // number
number * boolean // number
2.명시적 변환
-Number() : 정수, 실수형으로 변환
-parselng() : 정수형으로 변환
-String() : 문자열로 변환
-toString() : 문자열로 변환
-Boolean() : 불리언 타입으로 변환
- ==, === 차이
==의 경우, 두 값이 일치한다면 true 일치하지 않으면 false가 나타나게 되는 기능
===의 경우, 두 값이 일치하더라도 자료형이 다르다면 false를 반환.
- undefined와 null의 비교
둘다 값이 없음을 나타내는데,
null 은 값은 값이지만 값으로써 의미없는 특별한 값이 등록되어 있는 것, 의도적으로 비어있는 것을 의미하고,
undefined 는 등록이 되어있지 않기 때문에 초기화도, 정의되지도 않은 것이라는 차이가 있다.
type of()를 사용하여 자료형을 띄워줄때, null은 object(객체)로 나타나고, undefined는 undefined로 나타난다.
undefined 부여 상황
1. 선언은 되었지만 값이 할당된 적 없는 변수에 접근할 때
2. 존재하지 않는 객체 프로퍼티에 접근할 때
3. return이 없거나 호출되지 않는 함수를 실행 했을 때
🐤 JavaScript 객체와 불변성이란 ?
- 기본형 데이터와 참조형 데이터
데이터 타입(data type)이란, 프로그래밍 언어에서 변수(variable)에 값(value)을 할당할 때, 그 값이 어떤 타입인지를 구분해 놓은 분류(classification)를 말한다.
불변값: 메모리의 값을 저장할 때 데이터의 영역은 지워지지 않는다. 이것을 불변값이라고 한다.'
가변값: 메모리의 값을 저장할 때 변수 영역의 데이터는 바뀔 수 있다. 이것을 가변값이라고 한다.
기본형 데이터는 불변성을 가지고 (새로운 변수 할당시 데이터 변경 없이 주소만 바뀌는 것)
참조형 데이터는 가변성을 가진다.(변수 영역이 변하게 되어 참조 데이터가 가변값을 가지는 것)
- 불변 객체를 만드는 방법
불변객체란,일반적으로 참조형 데이터 타입인 객체는 가변값을 가지기 때문에 객체를 복사하면 같은 주소값을 서로 가리키고 복사된 객체의 프로퍼티 값을 변경하면 여전히 같은 주소값을 참조하게 됨으로 원본의 데이터도 변경이 된다. 전달 받은 객체를 변경하더라도 원본 데이터를 그대로 유지하기 위해 불변 객체를 만들 필요성이 존재한다.
-spread operator: 배열 또는 객체의 요소 하나하나를 개별적으로 복사하는 방법.(얕은 복사만 가능)
-Object.assign(target, sources)(대상객체, 출처객체들) : 하나 이상의 출처객체들로부터 대상객체로 속성을 복사할 때 사용. (동일한 key가 존재하면, 대상 객체 < 출처 객체 로 덮어씌어지고, 출처 객체 중에서도 key값이 중복되면 가장 마지막에 들어온 인자의 값으로 덮어 씌어진다, 얕은 복사만 가능)
-사용자 정의 함수
- 얕은 복사와 깊은 복사
깊은 복사(deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법
얕은 복사(shallow copy): 바로 아래 단계의 값만 복사하는 방법
(복사는, 새로운 객체를 생성해서 재할당 하는 것을 의미한다.)
🐤 호이스팅과 TDZ는 무엇일까 ?
- 스코프, 호이스팅, TDZ
-스코프: 변수가 영향을 미치는 범위(변수의 유효 범위)
전역스코프: 어디서든 참조가 가능하고 사용가능한 변수
지역스코프: 선언된 지역 내에서만 사용이 가능한 변수
.블록스코프: {}로 감싸진 범위
.함수 스코프: function의 {}로 감싸진 범위. 함수 외부의 var 변수는 전역변수
-호이스팅: 코드를 실행하기 전 변수 및 함수 선언이 스코프의 최상단으로 끌어 올려지는 현상.
var 변수를 사용해서 나타나는 현상. (같은 이름의 var 변수 함수선언에서 변수선언이 함수선언보다 위에 올려지고,
값이 할당되어 있지 않은 변수의 경우, 함수선언문이 변수를 덮어쓴다.)
-TDZ(Temporal Death Zone): 변수가 할당이나 초기화 되기 전에 잠시 죽어 있는 공간.
- 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
함수선언문
name('함수선언문')
function name(x){
return x;
}
name('함수선언문2')-반드시 함수명이 정의되어 있는, 함수명으로 호출가능한 형태
-호이스팅이 일어남. 로직에 혼선을 줄 수 있음.
함수 표현식
name('함수표현식');
var name = funtcion(X){
return x:
}
name('함수표현식2');-변수에 할당하여 생성하는 방식의 함수표현식, 변수 명으로 함수 호출 가능
-호이스팅이 발생하지 않음.
- let, const, var의 차이
변수를 선언할 때 사용하는 키워드.
| var | let | const | |
| 재할당 여부 | 재할당 가능 | 재할당 가능 | 재할당 불가능 |
| 재선언 여부 | 다시 선언 가능 | 다시 선언 불가능 | 다시 선언 불가능 |
| 변수의 범위 | 함수 범위 | 블록{} 범위 | 블록{} 범위 |
-다시 선언 재할당이 필요없는 부분에는 const를 사용하고, 이외에는 let을 사용하자.
- 실행 컨텍스트와 콜 스택
컨텍스트(=문맥) /실행 컨텍스트는 메모리 생성단계에서 모든 변수와 함수(선언문)에 메모리를 할당하고, 코드 실행단계로 넘어간다. 이미 함수는 전체함수로 저장되었기 때문에 코드 실행단계에서는 함수 부분은 건너뛰며 실행된다.
콜스택은 모든 실행 컨텍스트를 추적하기 위한 데이터구조의 이름. 선입선출의 원칙에 따라 작동.
- 스코프 체인, 변수 은닉화
스코프 체인은 해당 코드의 유효 범위 안에 있는 변수를 정의하는 객체의 체인, 리스트
글로벌 실행 컨텍스트가 실행되고, 다음은 함수 호출 순으로 실행되는데, 마지막에 실행된 함수안에서 변수를 탐색하지 못하면, 그 상위 함수에서 다시 변수를 탐색하고, 그 함수안에 변수가 존재한다면 그것을 참조하고, 아니면 마지막으로 전역객체를 참조하게 된다. 만약 전역객체에서도 변수를 찾지 못하면, 참조할 변수를 찾지 못했다는 의미의 Uncaught ReferenceError: 변수 is not defined 가 나타나게 된다.
이런 과정을 스코프 체인이라고 한다.
변수 은닉화: 외부 객체로부터 '속성 값'을 감추는 특성.
🐤 실습 과제
let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}
//console.log(a); // 오류발생, a는 함수 hi 안에서 선언된 지역변수인데,
console.log를 함수 밖에서 찍고 있음 const a = 1;를 함수 밖으로 빼서 전역변수로 할당
console.log(b); // 1 전역변수
hi(); // 1 101
console.log(b); // 1 전역변수'자료 > 하나로 정리!' 카테고리의 다른 글
| map 함수 사용해보기! (0) | 2022.08.29 |
|---|---|
| GET과 POST의 차이 (0) | 2022.07.22 |