오전 이론 강의
변수(식별자): 하나의 값을 저장하기 위해 확보한 메모리 공간에 붙인 이름
변수 선언: 변수를 생성하는 것 -> 선언단계와 초기화 단계에 걸쳐 수행(초기화 단계는 값을 할당해주는것!)
값: 값은 식(표현식)이 평가되어 생성된 결과
리터럴: 값을 생성하는 표기법
표현식: 값으로 평가될 수 있는 문
문: 프로그램을 구성하는 최소 실행 단위
JS 엔진은 변수 선언을 2단계에 걸쳐 실행한다.
평가 과정에서 var가 끌어올려지고
선언이 평가과정에 포함됨.
Call Stack과 Heap
자바스크립트 메모리 구조
JS[메모리 힙][콜 스택]
메모리 -heap과 stack으로 구성됨
heap과 Stack: 두 개 모두 메모리 영역. 프로세스가 할당받은 메모리 중 메모리의 사용 용도/목적에 따라 개념적으로 나눈 것. heap 용도로 사용하려면 heap 메모리를 할당. stack용로도 사용하려면 stack용도로 할당
Queue: 줄서는 방식 First In First Out. 터널(가장 먼저 들어간 차가 가장 먼저 나감)
Stack: 쌓는 방식. Last In First Out. 선입선출,프링글스(위에서부터 먹음), 가장 늦게 들어간 것이 가장 먼저 나감
var a=10; a와 10 모두 stack.
a=20; stack에 20을 할당하고 주소값을 연결
List:연결형 방식
Tree: 통사론 할때 그렸던 트리, 족보
Call stack
원시타입(숫자) 값. 실행 컨텍스트(프로그램이 실행될때 필요한 전체적 내용)를 저장하는 메모리 영역.
Stack 메모리가 1100부터 할당되어있을 경우, 1100 이전에는 전역변수, foo(),bar()가 지정해있다. 1101에 var x=1;, 1102에 console.log(foo)가 저장되고 function foo,function bar는 1100 이전에 저장되어있음.
1107:bar() ->1출력. 실행 후 삭제됨(1)
1106:console.log(x)
1105:10 x값
1104:x
1103:foo() ->foo함수 전체 삭제됨(2)
1102:console.log(foo())
1101: 1(전역변수x 의 값)
여기서 console.log(x)
console.log(foo());는 가장 위에 들어감. 1110에 저장된 마지막 코드가 가장 먼저 실행되고 첫 코드인 var x=1;이 1100에서 실행되면 됨
Memory Heap
참조타입(객체,배열,함수)저장. 동적 할당(직접 메모리 크기를 지정해 할당)이 가능한 영역. 배열, 객체같은 것은 계속 추가/삭제할 수 있으니 heap 메모리가 더 적절하다.var arr=[1,2,3,4,5]; //주소값 arr:1012 , [1,2,3,4,5]:4321
var num=7; //주소값 num=1102, 7은 111.변수 arr
배열은 참조타입이므로 메모리 힙에 저장된다.
배열이 저장된 메모리 힙의 주소값은 콜스택에 저장된다.
변수 num
7이라는 값이 원시타입이기 때문에 콜 스택에 저장된다.(111)
변수 num에는 7이 저장된 콜 스택 메모리의 주소값(1102)이 저장된다.
*변수 식별자인 num은 콜스택 상의 '실행 컨텍스트(Execution Context)의 렉시컬 환경(Lexical Environment)'이라는 곳에 저장된다.
Let (it go X)
지역변수로 사용하고, 값의 메모리 주소 (메모리의 객실 호수라 생각하면 좀 쉽게 이해할 수 있다)를 바꿀 수 있는 블록스코프 변수 타입let a=[5,6,7];
console.log(a);//5,6,7 주소값: 1055
a.push(8);
console.log(a) //5,6,7,8 주소값 :1080
//heap에 [5,6,7,8]이 생성되고 그 주소값을 참조하게 됨
//const를 사용하면 메모리 주소가 새로 만들어지지 않는데 let은 낭비됨const(상수. 홍상수 X)
값의 메모리 주소를 바꿀 수 없음.
const a=5;
//stack에 a를 5라는 값의 주소(ex:1005)에 연결시켰기 때문.
a=10; (주소:1010) //에러
const arr=[1,2,3];
console.log(arr) //1,2,3
arr.push(4)
console.log(arr) //1,2,3,4
//이렇게 출력되는 이유: arr은 스택에 저장되어있고
//배열인 [1,2,3]은 heap에 저장되어있기 때문이다.Garbage Collection
var a=10; //a와 10 모두 stack.
a=20; //stack에 20을 할당하고 주소값을 연결여기서 10에는 더 이상 참조하는 변수가 없다.10은 더 이상 참조되지 않는 값이다. 10을 메모리에서 해제하는 것을 Garbage Collection이라고 한다. 10이 해제 된 이후에 다른 값(15)이 10이 있던 자리에 다시 할당될 수 있다.
구조 분해
var arr=[1,2,3,4,5];
var one=arr[0];
var two=arr[1];
//벌써 귀찮다
var [1,2,3,4,5]=arr;
객체도 적용이 가능하다
var person{name:'elice',age:24};
이런 식으로도 변수에 값을 할당할 수 있다.
비교 연산자
노르웨이숲==코숏 둘 다 고양이라는 종
노르웨이숲!===코숏 둘 다 고양이지만 종은 다르니까
var a=10;
var b=5;
var c;
c=a++ + ++b; //c는 16
//a++: 연산이 끝나고 a에 +1해줌. a++ +시점에서 a에 1이 더해짐
//++b:는 b에 1을 더해주고 b에 그 값을 저장함
Class
Object 생성 템플릿 첫 글자는 대문자로 사용하는 게 좋다. 그래야 클래스인 걸 알아보기 쉬우니까!class Cat{
//모든 고양이가 동일하게 갖고 있고 변하지 않는 값
todo='Cute';
// ※주의※: class에 프로퍼티 할당은 =고, object에 프로퍼티 할당은 :다!!
#status;
//고양이의 지위는 소중하니 #을 달아주자.
constructor(name, color,age,status) {
this.name = name;
this.color = color;
this.age = age;
this.#status = status;
}
}
//constructor에 빠진 부분이 없는지 확인!
//
tid(todo) {
return "What to do Today: "+todo;
}
}
//Cat Class 선언 끝!
let Samsaek = new Cat(
"Samsaek",
"Three-Colors",
6,
"GangYakYakGang"
);
console.log(Samsaek.name); // Samsaek
console.log(Samsaek.color); // Three-Colors
console.log(Samsaek.status); // undefined 외부접근불가값
console.log(Samsaek.#status);고양이라는 Class에서 Samsaek은 Object.
프로그램이 실행되어 메모리에 올라갔을 때, 실제로 존재하는 오브젝트를 인스턴스라고 함.
Class:object를 생성하기 위한 템플릿, 틀 Cat
Property: class 내부에 선언된 변수. todo,#status
class 밖에 선언된 변수. 전역변수. Samsaek!
Method: class 내부에 선언된 함수. tid.
Samsaek.tid('꾹꾹이');//'What to do Today: '꾹꾹이'constructor(): class 생성시 자동으로 호출되는 메서드 생성자.
인스턴스 사용시 값을 초기화하기 위함.let Sasaek=new Cat()을 하면 자동으로 실행되고 이름,색상,나이,지위 프로퍼티에 값이 들어감
#를 쓰는 이유: 외부에서 바꾸면 안 되는 값이기 때문에 외부에서 접근할 수 없게 함.
크롬에서 #(private static)을 사용한 경우에는 에러가 발생하지 않고 undefined가 표시된다.
관련한 깃헙링크
#로 에러가 발생하게 하기 위해서는 html파일에 js파일을 연결해 콘솔창을 열어야 한다.
new: 클래스로 새로운 인스턴스를 생성하겠다는것.
extends: class의 상속에 사용되는 키워드
a[a.length-1] > 배열의 길이를 모를 때 마지막 요소 확인하는 방법
a.length[:-1]와 헷갈리지 말자!
