JAVASCRIPT
JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어
- javascript의 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입의 값으로 할당 및 재할당이 가능하다.
8개의 기본 자료형이 있고 숫자형, 문자형, bigint, 불린 형, null, undefined, 객체와 심볼, typeof 연산자가 있다.
1. 숫자형
-정수 및 부동소수점을 나타내고 * (곱하기), / (나누기), + (더하기), - (빼기),
%(나눈 나머지의 값), **(제곱근) 등 이 있다.
-Infinity 무한대를 나타낸다.
-어떤 숫자든 0으로 나누면 무한대가 된다.(Infinity)
console.log( 2 / 0 );
-NAN은 에러가 발생했다는 뜻
console.log("문자" / 2);
-Bigint 길이의 상관없이 정수를 나타낼 수 있다.(정수 끝에 n을 붙여서 만들 수 있다.)
Bigint와 일반 숫자는 섞어서는 쓸 수 없다. 쓸 때는 Bigint(), Number()로 형태 변환을 해줘야 한다.
const Bigint = 31531n;
2. 문자형
-문자는 기본적으로 문자를 따옴표로 묶어서 사용한다.
-따옴표는 기본적으로 3가지로 구성된다.
"안녕", '안녕', `안녕`
-javascript는 " ", ' ' 에 차이를 두지 않는다.
- ${...}를 사용할 때는 `` 빽틱을 사용하여 감싸준다.
let a = "저는";
console.log(`안녕하세요,${a} `) //안녕하세요,저는 라는 값이 출력된다.
3. 불린형(boolean)
-불린형은 기본 적으로 true , false 값을 가진다. 즉 yes, no, 참, 거짓 등으로 사용한다.
4.null
-null 값은 존재하지 않는 값, 비어있는 값, 알 수 없는 나타 내는 데 사용한다.
5. undefind
-undefined는 값이 할당되지 않은 상태를 나타낸다.
let age;
console.log(age); // 즉 age라는 변수에 값이 할당되지 않아서 undefined라고 출력된다.
6. 객체와 심볼
-객체형은 특수한 자료형이다.
-심볼은 객체의 고유한 식별자를 만들 때 사용된다.
7. typeof 연산자
- 처리방식을 다르게 사용할 때 사용 하거나 변수가 어떤 자료형인지를 알아낼 때 사용된다.
console.log(typeof 1); // 1은 숫자형이기 때문에 number가 출력된다.
console.log(typeof true); // true는 불린형이기 때문에 boolean이 출력된다.
console.log(typeof "안녕"); // "안녕"은 문자형이기 때문에 string 이 출력된다.
- JavaScript 형 변환
- 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 변환되는데 이런 과정을 나타낸다.(대문자에 주의하자)
1.문자형을 숫자형으로 변환
let a = 1;
String(a) // 숫자 1을 '1'이라는 자료형으로 바꿔준다.
2.문자형을 숫자형으로 변환
let a = '1';
Number(1) // 문자 '1'을 1이라는 숫자형으로 바꿔준다.
3.문자열을 숫자형으로 변환
let a = '안녕하세요';
Number(a); //문자열은 숫자형으로 변환을 할 수가 없어서 NaN이라는 에러가 뜬다.
4.불린형으로 변환
Boolean(1) // 숫자 1(true)
Boolean(0) // 숫자 0(false)
Boolean("hello")// 문자열(true)
Boolean("") // 빈 문자열(false)
Boolean("0") // 문자열로 작성된 숫자는(ture)
Boolean(" ") // 비어 있지 않은 문자열은 (true)
- ==, ===
- 일치 연산자로 쓰인다
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에
코드가 길고 복잡해질 경우 에러를 찾기가 어려워 진다.
- undefined와 null의 미세한 차이들을 비교해보세요.
1. null
-null 값은 존재하지 않는 값, 비어있는 값, 알 수 없는 나타 내는 데 사용한다.
2. undefind
-undefined는 값이 할당되지 않은 상태를 나타낸다.
let age;
console.log(age); // 즉 age라는 변수에 값이 할당되지 않아서 undefined라고 출력된다.
JavaScript 객체와 불변성이란?
- 기본형 데이터와 참조형 데이터
1. 기본형
기본형 데이터는 값을 그대로 할당하는 것.
메모리 내에 고정된 크기로 저장되면서, 원시 데이터 값 자체를 보관, 불변적
기본적으로 데이터는 하나의 메모리를 사용한다.
2. 참조형
Array(배열) : const 로 선언된 변수 배열에 Array.push를 적용할 수 있는 이유는
배열은 참조 타입이기 때문에 데이터의 주소를 대입할 수 있기 때문이다.
function(함수) / RegExp(정규표현식) : 문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴이다.
Map
Math
- JavaScript 형 변환
문자를 숫자로 변환 숫자를 문자로 변환하는 것이다
- 불변 객체를 만드는 방법
1.const
기본적으로 한번 값을 할당하게 되면 재할당이 불가능 하다.
2.object (object.freeze() )
object.freeze()는 객체를 동결하기 위한 메소드 이다.
동결을 하게 되면 재할당이 불가능 하다.
- 얕은 복사와 깊은 복사
1. 얕은 복사
얕은 복사는 아주 최소한만 복사를 한다.
값을 복사한다 하더라도, 인스턴스가 메모리에 새로 생성되지 않는다.
값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가리키기 때문이다
2.깊은복사
각 객체의 실제 값을 복사한다.
호이스팅과 TDZ는 무엇일까?
- 스코프, 호이스팅, TDZ
1.스코프
변수나 함수에 접근할 수 있는 위치를 말한다.
자바스크립트의 스코프는 함수 레벨 스코프를 따른다.
같은 함수 레벨에 존재하면 값을 참조할 수 있다는 뜻
전역 스코프
- 어디서든 참조 가능
전역 변수
- 전역 스코프를 갖는 전역 변수
- 어디서든 참조 가능
지역 스코프
- 함수 자신과 하위 함수에서만 참조 가능
지역 변수
- 지역 스코프를 갖는 지역 변수
- 함수 내에서 선언된 변수로 해당 함수와 해당 함수의 하위 함수에서 참조 가능
암묵적 전역 변수
- 선언하지 않은 변수에 값을 할당하면 전역 객체의 프로퍼티가 되어 전역 변수처럼 동작한다.
2.호이스팅
함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것을 말한다.
함수의 코드를 실행하기 전에 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
초기화를 제외한 선언만 호이스팅.
그렇기 때문에 선언, 정의된 코드보다 호출하는 코드를 먼저 배치할 수 있다.
변수의 선언과 초기화를 분리.
변수의 선언을 코드의 최상단으로 끌어올린다.
console.log(num1) //호출 X
let num1 = 1
즉 변수를 선언하기 전에 호출을 할 수 없다 라는 뜻 같다.
하지만 function을 사용 하면 위치와 무관하게 호출을 할 수 있다.
a = ("고양이"); //나의 이름은 고양이 입니다.
function b (){
console.log(`나의 이름은 ${a}입니다.`)
}
a = ("고양이"); //나의 이름은 고양이 입니다.
b();
둘중 하나를 주석 처리 하더라도 동일한 결과 값이 나온다.
TDZ(Temporal Dead Zone, 일시적 사각지대)
- TDZ의 영항을 받는 구문 const, let, class
- 변수 스코프의 맨 위에서부터 ~ 변수의 초기화 완료 시점까지의 변수는 TDZ에 들어간 변수
- 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성
- 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
1. 함수 선언식 (function declartion)
함수명이 정의되어 있고, 별도의 할당 명령이 없는 것
function sum(a,b) {
return a + b;
}
2.함수 표현식 (function Expression)
정의한 function을 별도의 변수에 할당하는 것
const sum = function(a,b) {
return a + b;
}
- 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
var,let,const 를 구분하는 가장 중요한 점을 요약하면
1.값 변경 가능 유무
2.스코프 범위
3.호이스팅 가능 유무
우선 순위는 const -> let -> var 이라고 하니 최대한 우선순위에 맞춰서 써야합니다.
1.값 변경 가능 유무
var와 let을 값이 선언된 이후에도 값을 변경할 수 있지만, const는 생성할 때 선언된 초기값을 변경할 수 없습니다.
2.함수스코프 vs 블록스코프
var은 함수스코프를 가지지만,
let과 const 변수는 블록 스코프를 가지게 됩니다.
블록스코프란 변수가 선언된 {블록}이 해당 변수를 사용할 수 있는 영역(스코프)이라는 뜻입니다.
3.호이스팅 가능 유무
var는 호이스팅이 가능하지만,
let과 const는 호이스팅이 불가능합니다.
function(){}()은 익명 함수를 즉시 실행시키기 위해 엔진의 원리를 이용해 만든 편법입니다.
- 실행 컨텍스트와 콜 스택
자바스크립트 코드가 실행되는 환경을 의미한다.
Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object (Node는 Global) 를 생성하고 this가 Window 객체를 가리키도록 한다.
Function Execution context
자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성한다.
모든 함수는 호출되는 시점에 자신만의 Execution Context를 가진다.
call stack
코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조
- 스코프 체인, 변수 은닉화
1. 스코프 체인
-스코프는 함수의 중첩에 의해 계층적 구조를 가진다.
-변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스--코프로 이동하면서 선언된 변수를 검색한다.
-스코프 체인은 outerEnvironmentReference와 밀접한 관계를 가진다.
함수내의 공간 이라는 느낌인거 같다
2. 변수 은닉화
여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 검색된 식별자에만 접근이 가능하다.
function hello(name) {
let _name = name; //고정이라는 뜻 인거 같다.
return function () {
console.log('Hello, ' + _name);
};
}
let a = new hello('영서');
let b = new hello('아름');
a() //Hello, 영서
b() //Hello, 아름