42서울에서 하나의 언어라도 깊이 있게 탐색하는게 중요하다는 것을 배웠어서
JS를 그냥 유튜브를 보고 단순 공부하는게 아닌 모던 JS 공식페이지를 보며 정리를 하고 있다!
js란?
웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어다!
JS로 만든 프로그램을 스크립트라고 부른다
=> script는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지 불러올때 스크립트가 자동 실행된다!
js가 서버에서도 가능?
js 엔진이라는 프로그램이 들어있으면 서버에서도 실행이 가능하다! -> Nodejs
순서
1. 엔진이 스크립트를 읽는다(파싱)
2. 읽어들인 스크립트를 기계어로 번역(컴파일)
3. 기계어로 전환된 코드가 실행 -> 이때 실행 속도 빠름!!
js의 기본 특징
JS는 추정을 많이 한다!
alert (3 +
1 +2); // 이렇게 적어도 6이 나옴 +가 불완전해서 + 뒤에 바로 세미콜론을 붙이지는 않는다!그래서 그런지 js는 이게 왜 동작하지? 라는 문제들이 발생할 수도 있다
해결방법
코드 맨 위에 "use strict"; 를 적게 되면
엄격모드가 활성화 되어 이상하게 적었을때 동작하는걸 방지해준다!
브라우저와 상호작용하는 방법
alert("hello") -> 모달창이라고 하는 것이 뜨고 확인 누를때까지 떠있는다!
let result = prompt(title, "~"); // 함수가 실행되면 텍스트 메세지와 입력필드가 나타난다!!
그래서 문자열을 result에 저장!
js에서 객체란(Object)
객체는 다양한 데이터를 담을 수가 있다 (ex) key : value )
let user = new Object(); // 객체 생성자 문법
let user2 = {}; // 객체 리터럴 문법 -> 이거 훨씬 많이 씀!
const user3 = {
name : 'j",
age : 30
};
user3.name = "h";
console.log(user3.name);
console/log(user3[age]);둘 다 객체를 만들지만 {}를 사용한 방식이 편리해서 더 많이 사용된다!
const로 객체를 만들면 객체 내부 값을 수정 할 수 있을까?
정답은 가능하다! 이다 => 이유는 const는 user3값을 고정하지만 그 내용을 고정하지는 않는다!!!
객체에 추가로 프로퍼티 넣기 + 계산된 프로퍼티
user["like birds"] = true; // 프로퍼티 추가
console.log(user["likes birds"]);위에 처럼 user[key] : value; 해주면 user객체에는 저 키와 값이 쌍으로 들어간다!
let fruit = prompt("어떤 과일 구매", "apple");
let bag = {
[fruit] : 5,
};
console.log(bag.apple); // 5계산된 프로퍼티는 위에처럼 동적으로 프로퍼티 이름을 받아오는걸 의미한다!
객체를 원시형으로 변형하기
차고로 객체는 원시형으로 왠만하면 자동 형병환이 가능하다!
obj1 + obj2 를 하면 자동 형변환! , 주로 문자형이나 숫자형으로 변한다
// { toString() - 문자형으로 변환, valueOf() - 객체 자신을 돌아봄 } 로 구식 변형도 가능
let user2 = {
name : 'j",
money : 1000,
toString () {
return `{name : "${this.name}"}`;
},
valueOf () {
return this.money;
}
}
console.log(user2);
console.log(+user2);
console.log(user2.toString());
console.log(user2 + 500);결과
js에서 GC는 어떻게 돌아가고 메모리를 관리할까?
js에서 GC는 눈에 띄지 않게 메모리를 관리한다!!
js는 브라우저에서 사용하기 때문에 우리가 직접 메모리 할당을 해주고 GC를 해줄 일일 없긴함
js는 항상 참조를 하는지 감시한다!
let user = {
name : "john"
};저렇게 되어있으면 user라는 객체가 name을 참조하기 때문에 메모리가 할당되어있는거다!!!
name = null;하지만 우리가 저렇게 null로 적어버리면 더는 참조 안하므로 { name : "john" } 은 메모리에서 삭제!
mark and sweep -> js에서 메모리 관리 알고리즘
- GC는 루트정보를 수집하고 이를 mark(기억)함
- 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 mark한다!
- 한번 방문 객체는 mark해서 두번 방문 안한다!
- mark 안된 객체는 참조 안되고 있다는 것이므로 메모리에서 삭제!!
js관련 앞으로의 계획
일단 이번주내로 모던 js를 한바퀴 다 돌릴 예정이다!
그리고 다음주부터는 js로 한개씩 토이프로젝트를 만들고 정리하고 + React 공식문서를 봐보려고한다!
