👶 기초 JavaScript 간단 요약
📌 변수, 상수, 자료형
🔷 변수의 생성 단계
1) 선언 단계
- 변수를 실행 컨텍스트의 변수 객체에 등록한다.
2) 초기화 단계
- 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화 되지만 let을 이용하여 선언한 변수는 초기화되지 않은 상태로 저장되기 때문에 호이스팅이 발생했을 때 참조할 값이 없다는 점이 var와 다르다.
3) 할당 단계
- 초기화된 변수에 실제 값을 할당한다.
🌟 호이스팅(Hoisting)?
- 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.) 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다. 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 그런데 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다.
🔷 상수
- 한번 초기화 되면 값을 변화시킬 수 없다.
- const를 사용해 선언한다.
// 변수 선언 및 초기화
var a = 1;
let b = "Hello World!";
// 상수 선언 및 초기화
const d =1;🔷 자료형
1) Number
- 정수, 실수, NaN(Not-A-Number), Infinity가 포함된 자료형
2) String
- 큰 따옴표나 작은 따옴표로 감싸진 문자열
- 백틱(`)을 이용하여 문자열 내에 변수를 넣을 수 있다.
3) Boolean
- true, false (참, 거짓) 만을 값으로 가지는 자료형
4) Object
- 객체
- 키와 값을 통해 표현
- 키는 무조건 문자열이다.
5) Array
- 배열
- index를 통해 값을 찾는다.
6) Function
- 함수
7) undefined
- 상수 혹은 변수가 선언되었지만 아무런 값도 정의되지 않은 것을 의미한다.
8) null
- 해당 변수가 비어있음을 사용자가 의도적으로 null이라는 값으로 표현한다.
📌 메모리
🔷 할당
- heap 메모리엔 참조타입이, call stack메모리(스택)엔 원시타입이 들어간다.
- 식별자를 통해 메모리 주소의 위치를 나타낸다.
- 배열은 Heap 메모리 영역에 저장된다.
🔷 사용
- 값이 저장된 메모리 주소를 찾아 해당 주소에 저장된 값을 꺼내 사용할 수 있다.
- 원시타입의 값이 변하면 새로운 메모리 주소에 값을 저장한다.
🔷 해제
- 자바스크립트의 가비지 콜렉터가 사용하지 않는 메모리를 자동으로 해제해준다.
- 고로 우린 메모리 해제에 과몰입할 필요가 없다.
🌟 원시 타입(primitive type)과 참조 타입(reference type)?
- 원시 타입: 할당될 때 변수에 값 자체가 담기는 자료형
ex) string, number, bigint, boolean, undefined, symbol- 참조 타입: 원시 타입외의 모든 타입, 할당될 때 보관함의 주소가 담기는 자료형
ex) Object, Array, Function
📌 표현식과 연산자
🔷 표현식
- 어떠한 결과 값으로 평가되는 식
- 숫자, 문자열, 논리값 같은 원시 값을 포함하여 변수, 상수, 함수 호출 등으로 조합할 수 있다.
🔷 연산자
- 다양한 연산자:
- 할당 연산자: =
- 비교 연산자: !=, ==, >, < 등
- 산술 연산자: +, -, *, /, % 등
- 비트 연산자: &, << 등
- 논리 연산자: &&, || 등
- 삼항 연산자: (조건) ? x : y
- 관계 연산자: in
- typeof: 피연산자의 타입 반환
📌 흐름 제어
🔷 흐름 제어?
- 조건이나 반복을 통해 상태를 제어하는 것
- Control Flow: 조건, 반복 등으로 진행
- Data Flow: 함수형 프로그래밍에서 사용
🔷 조건문
- 조건이 맞을 때만 실행되는 문장 문법 (if, switch)
- false뿐만 아니라 undefined, null, 0, NaN, "" 도 거짓이 될 수 있다
// if문
if(false) {
console.log("이 구문은 실행되지 않습니다.");
}
else if(false) {
console.log("이 구문은 실행되지 않습니다.");
}
else {
console.log("이 구문은 실행됩니다.");
}🔷 반복문
- 반복적인 작업을 지시하는 문법 (for, while, do-while)
// for문
for(var i=0; i<property_list.length;i++) {
var proName = property_list[i];
console.log("\t", proName, ": ", obj[proName]);
}📌 배열과 객체
🔷 배열
- 연관된 데이터를 연속적인 형태로 저장하는 복합 타입
- 배열에 포함된 원소는 순서대로 index가 붙는다.
// 다양한 배열 선언 및 초기화
const arr1 = new Array();
const arr2 = [];
const arr3 = [1,2,3,4,5];
const arr4 = new Array(5);
const arr5 = new Array(5).fill(5);
const arr6 = Array.from(Array(5), function (v, k) {
return k+1;
})
// 배열 길이는 직접 수정이 가능하다 (but, 권장하지 않는다)
arr3.length = 10;
// 배열 요소를 하나로 합치기
console.log(arr5.join(", "));
// 배열을 거꾸로 반환, 한 번 사용하면 원래 있던 배열에도 영향이 감
console.log(arr3.reverse());
// 배열 합치기
console.log(arr3.concat(arr5));
// 배열 끝부분에 요소 추가하고 삭제하기
arr1.push(7);
arr1.pop();
// 배열 첫부분에 요소 삭제하고 추가하기
arr1.shift();
arr1.unshift(10);
// 배열 자르기
arr3.slice(2,7); // 원본 변화 없음
arr3.splice(2,2); // 원본 변화
// 배열의 순회 (기존)
for(let i=0; i <8; i++) {
console.log(arr3[i]);
}
// 배열의 순회 (for of)
for(const item of arr3) {
console.log(item);
}
// 객체처럼 사용하는 배열
arr1["key"] = "value";
console.log(arr1.length); // 길이에는 변화가 없다🔷 객체
- 여러 값을 키-값 형태로 결합시킨 복합 타입
- 배열은 객체타입이다.
// 다양한 객체 생성
const obj1 = new Object();
const obj2 = {};
const obj3 = { name: "박영규", age: 26};
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 객체에 키와 값 추가하기
obj3["email"] = "dudrb5260@naver.com";
obj3.phone = "01012345678"
console.log(obj3);
// 요소 삭제하기
delete obj3.phone;
console.log(obj3);
// 키 존재 여부 확인하기
console.log("email" in obj3);
console.log("phone" in obj3);
// 키 혹은 값만 배열의 형태로 나타내기
console.log(Object.keys(obj3));
console.log(Object.values(obj3));
// 객체 순회
for(const key in obj3) {
console.log(key, obj3[key]);
}📌 스코프와 클로저
🔷 스코프
- 변수가 어느 범위까지 참조되는 지를 뜻한다.
- 전역(Global Scope)과 지역(Local Scope)으로 구분한다.
var num = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
var num = 2;
console.log(a);
}
print(); // 2 출력, 함수 안의 num 값이 함수 안에서만 적용됨
console.log(a); // 1 출력, 함수 바깥의 num값이 적용됨🔷 클로저
- 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법
- 클로저를 이용하여 내부 변수와 함수를 숨기는 것을 은닉화라고 한다.
❗ 클로저는 복잡한 개념이니 추후 자세히 설명한다.
Hodie mihi, Cras tibi