Today I Learn📖
- 변수, 상수, 자료형, 메모리 (강의)
- 표현식, 연산자, 흐름 제어 (강의)
- 배열, 객체, 스코프, 클로저 (강의)
- 호이스팅 (추가 학습)
렌더링
- 렌더링: 돔(DOM)이라 부르는 객체를 화면에 그리는 것
- 돔(DOM): 통신을 통해 받은 HTML을 브라우저가 읽어서 트리구조로 생성됨
브라우저 동작 원리의 설명 추천 글 ⬇️
변수와 상수
- 변수
var: 호이스팅 동작 때문에 권장하지 않음let: ES6 이후 등장 -> 권장함let name = songhee; 키워드 주소(gps값) 건물 변수명 -> 메모리 주소 가리킴 -> 그곳엔 변수 값이 있음
- 상수: 변하지 않는 값, 변수의 일종
종류는var와const가 있지만, const 사용 권장
자료형 (8가지)
Number: 숫자 => NaN, Infinity도 숫자 타입 !
String: 문자
Boolean: 참 / 거짓
Object: 객체, 여러 값과 여러 자료형을 key를 통해 가질 수 있음
array: 배열, 여러 값, 인덱스를 이용해 값을 찾음
function: 함수, 변수로 선언해 사용 가능(값이기 때문)
undefined: 변수나 상수가 선언되었지만 아무 값도 정의되지 않은 상태 => 기본값
null: 값에 null을 넣은 것 => 빈 값을 표현하기 위해 사용자가 의도적으로 넣음
메모리
-
변수 생성 과정
1. 변수에 고유 식별자 생성(= 변수명)
2. 메모리에 주소 할당 (변수는 값이 아닌 메모리의 주소를 바라보고 있는 것)
3. 생성한 주소에 값 넣기
-
기존 변수의 값 변경시 메모리도 새로 할당됨
-> 원시타입은 변경이 불가능하기 때문 !
let a = 116;
let b = a; // b는 a의 메모리 주소를 바라보는 것
a += 1 // a는 새로운 메모리 주소를 바라보게 됨, 하지만 b는 여전히 이전 a의 주소 보는중 (b값은 변하지 않았으니까)
b += 1 // 이것도 또 다른 메모리 주소를 할당 받음자바스크립트 엔진은
가상머신으로 구현되어 있음
1. Heap 영역 (참조 타입이 들어감 -> 동적으로 값 변화 가능)
2. Call Stack 영역 (원시 타입이 들어감)
배열은 객체이므로 참조 타입
-> Call Stack에 생성된 배열 변수는 Heap에서 생성된 배열 변수의 메모리 주소를 참조하게 됨- 배열에 값 추가시 Heap 영역에 그대로 할당됨
-> Call Stack에 할당한 메모리 변경이 아닌 Heap 메모리 변경이기 때문에, 배열을 const로 선언했는데도 값 변경 가능
Garbage Collector: 자바스크립트 엔진이 사용하지 않는 메모리 정리(해제)해주는 것
-> 현대 브라우저는Mark and Sweeep알고리즘으로 정리
-> 개발자가 직접 메모리 관리 안 해도 됨 (최적화 하고싶으면 따로 더 신경써야 하긴 함)
Mark and Sweeep 알고리즘: 최상위 계층인 window에서 시작해서 쭉쭉 내려가다가, 닿을 수 없는 주소는 더 이상 필요없는 주소로 정의하고 지우는 알고리즘
표현식과 연산자
-
표현식: 결과가 계산되는 값
ex) const a = 10 + 3; const b = "String" + 3; -
연산자 (9가지)
할당 연산자:=복합 할당 연산자:+=,-=비교 연산자: 좌_우 값을 비교, 참 / 거짓 반환,==,!=산술 연산자: 사칙연산 -> Number 반환비트 연산자: 비트 직접 조작 (잘 안 쓰이지만, 코테 문제에 사용되는 경우 있음)논리 연산자: true / false삼항 연산자:조건 ? 참 : 거짓형태로 사용관계 연산자: 객체에 해당 속성이 있는지 확인하는 것,inlet obj = { name: songhee; age: 25; } "name" in obj // 관계 연산자, true타입 연산자:typeof
흐름 제어
control flow(조건문, 반복문)data flow(함수형 프로그래밍)
-
조건문
if문&switch문 -
반복문
for문&while문,do-while문
false값(6개):
false,undefined,null,0,NaN,""(빈 문자열)
배열
연관된 데이터를 연속적 형태로 저장하는 복합 타입, 인덱스 번호 존재
- 배열 생성 방법
const 빈_배열 = new Array(); // 빈 배열 -> []
const zero_배열 = new Array(5).fill(0) // [0, 0, 0, 0, 0]
const 숫자배열_1 = new Array(5).fill().map((v, idx) => {
return idx + 1;
}); // [1, 2, 3, 4, 5]
const 숫자배열_2 = Array.from(Array(5), function(v, idx) {
return idx + 1;
}); // [1, 2, 3, 4, 5]- 배열에 자주 쓰는 편의성 함수
- arr
.join(): 배열 -> 문자열로 변환, ()에는 원하는 구분자 들어감 - arr
.reverse(): 배열 뒤집기 -> 원본 배열 자체가 바뀜 - 합칠arr1
.concat(합칠arr2): 배열 합치기
- arr
-
배열 요소 추가, 삭제
-
.push(): 배열 끝에 요소 추가, 한꺼번에 여러 개 추가 가능, console.log(배열.push()) 찍으면 배열 개수 나옴 -
.pop(): 배열 가장 마지막 요소 1개 삭제, console.log(배열.pop()) 찍으면 삭제된 요소 나옴 -
.unshift(): 첫 번째 인덱스에 요소 추가 -
.shift(): 첫 번째 인덱스 요소 삭제=> 위 4개 메소드들은 원본 배열 바뀜 -> 배열 제어 가능
-
- 배열 중간 값 삭제 & 추가
.slice(시작 요소, 끝 요소): 시작 요소부터 끝 요소의 직전까지 잘림, 원본 배열에 변화 없음.splice(시작 요소, 삭제할 개수): 원본 배열 바뀜
- 배열 순회
for문&for of(직관적임, 권장)const arr = [1, 2, 3, 4, 5] for (const item of arr) { console.log(item) } // 1, 2, 3, 4, 5
-
배열 요소 속 객체 (정상적인 방법 아니므로 사용 비추천)
const arr = [1, 2, 3]; arr["key"] = "value"; // ➡️ 배열 요소로 객체 값 넣기 가능 console.log(arr) // [1, 2, 3, key: "value"] console.log(arr.length) // 3 ➡️ 배열에는 객체 값이 생기지만, 길이는 안 바뀜
객체
여러 값을 키-값 형태로 결합시킨 복합 타입
ex) 사물함의 각 칸들 (사람이름-내용물)
- 객체 생성 방법
const obj_1 = new Object() // {} const obj_2 = {} // {} const obj_3 = {name: "songhee", age: 25} // {name: "songhee", age: 25}
-
객체 요소 추가, 삭제
[] 표기법&.(점) 표기법으로 요소 추가 가능
const obj = {name: "songhee", age: 25} // {name: "songhee", age: 25} // [] 표기법 이용 obj["gender"] = "female" // {name: "songhee", age: 25, gender: "female"} // . 표기법 이용 obj.phone = "01012345678" // {name: "songhee", age: 25, gender: "female", phone: "01012345678"}delete이용해 요소 삭제 가능
delete obj.phone // {name: "songhee", age: 25, gender: "female"}
-
해당 요소 존재 확인
const obj = {name: "songhee", age: 25} // {name: "songhee", age: 25} console.log("name" in obj); // true console.log("email" in obj); // false console.log(Object.keys(obj)) //["name", "age"] console.log(Object.values(obj)) // ["songhee", 25] ➡️ key값들 또는 value값들이 배열로 나옴
-
객체 순회
for in이용
const obj = {name: "songhee", age: 25} for (const key in obj) { console.log(key); // (name, age) console.log(obj[key]); // (songhee, 25) } // name, songhee, age, 25
스코프
변수의 유효 범위, 변수가 참조되는 범위 (전역 / Global, 지역 / Local)
- 지역 변수에
var사용하면 안 됨
-> var는 함수 수준 스코프이기 때문에, 호이스팅 되어 변수 선언이 최상단으로 올라감
-> 변수 선언 전에 접근할 경우undefined가 뜨거나 예상치 못한 값이 할당되어 있을 수 있음
클로저
함수가 선언된 환경의 스코프를 기억해서, 함수가 스코프 밖에서 실행되도 기억한 스코프에 접근할 수 있게 만드는 문법
-
클로저를 통해서만
더이상 외부에서 접근 불가능한 영역(지역 스코프로 만든 변수, 상수, ...)에 접근 가능 -
버그 수정을 잘 하기 위해서 사용 !
function sentence(name) {
const greeting = "Hi, ";
return function () {
console.log(greeting + name);
};
}
const world = sentence("world"); // 클로저를 통해서만 접근 가능
const songhee = sentence("songhee");
sentence(wonpil); // undifined
world(); // Hi, world
songhee(); // Hi, songhee은닉화
클로저를 이용해 내부 변수, 함수를 숨기는 것
->Counter()안의 값은 외부에서는 접근 불가, 반환된 값으로만 값을 조작할 수 있음
호이스팅 (Hoisting)
변수나 함수의 선언을 코드에서 선언된 위치와 상관없이 해당 스코프의 최상단으로 끌어올리는 행위
-> 자바스크립트가 코드를 실행하기 전, 변수 & 함수 선언들을 메모리에 저장하기 때문
자바스크립트에서의 선언 & 초기화
선언: 메모리에 공간 할당초기화: 초기값으로 설정
변수 호이스팅
-
var로 선언된 변수는 호이스팅을 통해 선언이 스코프의 최상단으로 끌어올려짐
-> 선언과 함께undefined로 초기화됨
-> 값이 들어가는 건 실제 코드가 작성된 위치에서 됨
=> 선언 전에var 변수에 접근하면undefined발생 -
let혹은const로 선언된 변수도 호이스팅은 됨, 초기화는 X
-> 선언은 되지만, 해당 위치에 오기 전까지는 초기화 X
=> 그 사이의 구간을TDZ라고 부르고, 선언 이전에 접근하면 이 구간이기 때문에참조 에러(ReferenceError)발생
TDZ(Temporal Dead Zone, 일시적 사각지대)변수가 선언된 위치부터 실제 코드 실행 가능 구간까지에서의 접근 불가 상태 또는 그 구간
-> 여기서 변수를 참조하려고 해도, 자바스크립트 엔진은 아직 변수가 존재하지 않는다고 간주하므로참조 에러발생
- 변수의 안전성을 높이기 위해 사용 (
var로 인한 호이스팅 문제 예방, 코드 예측 가능)
함수 호이스팅
-
함수 선언식: 호이스팅 되어 스코프의 최상단으로 끌어올려짐
-> 함수 선언 전에도 해당 함수 호출 가능
=> 코드의 어느 곳에서든 호출 가능 -
함수 표현식: 함수 자체는 호이스팅 되지 않음 (함수가 할당된 변수, 함수 속에 선언된 변수들은 호이스팅 됨)
-> 선언 전에 호출하면 타입 에러 발생
함수 선언식(Function Declarations): 이름이 주어진 함수를 선언하는 것함수 표현식(Function Expressions): 함수를 변수에 할당하는 것 ex) 화살표함수// 함수 선언식 function Declarations() { console.log(“함수 선언식); }; ⠀ // 함수 표현식 var Expressions = function() { console.log(“함수 표현식”); };
😊오늘의 느낀점😊
오늘자 강의를 들으며 내가 '자바스크립트 기초에 대해 깊게 공부한 적도, 생각해본 적도 없다'는 것을 알게되었다.
냅다 선언하고 쓰기만 했었는데, 기초에 대해 이해 없이 사용하는 건 기능을 반밖에 사용하지 못하는 것이라는 생각이 들었다.
나는 빈 도화지다, 라는 마음가짐으로 처음부터 꼼꼼히 학습하겠다는 계획을 세웠다 !
