Javascript를 공부하며 새로 알게된 것들, 혹은 알았지만 까먹은 것을 정리한다.
약속어 (Reserved Words)
자바스크립트에서 이미 정의된 단어들
예) alert, console 등 → 함부로 alert라는 함수를 내가 정의해선 안됨
자바스크립트의 역사와 현재
자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)
-
Babel : JS Transcompiler → 최신의 ECMAScript를 이전 버젼에서도 호환되도록 해줌
-
React, Angular, Vue 등은 SPA를 더 쉽게 만들기 위해서 만들어진 프레임워크
-
node.js : 백엔드
-
React Native : 모바일
-
Electron : 데스크탑 어플리케이션
-
Web Assembly : JS 외의 다양한 언어들로 웹 어플리케이션을 만들수 있도록 해줌
return이 없는 함수
return을 통한 반환값이 없는 함수도 있음.
하지만 이 경우에도 함수는 undefined라는 값을 반환함.
++ 연산자의 특징 (변수 할당 처리 순서)
let num = 1;
let newNum = num++;
console.log(num);
console.log(newNum);
// Result : 2 1let newNum = num++;가 처리되는 방식
- newNum 에 1이 할당됨
- 그 이후 num++이 실행됨 → num의 값은 2
- 로그 값은 2와 1이 도출됨
newNum에 2를 할당하려면 let newNum = ++num 으로!
근데 솔직히 가장 정상적인 방법은 그냥...
let num = 1;
let newNum = num + 1;
// result: 1 2다들 이렇게 하지 않나요...? 원래 변수를 변경시키지도 않고 직관적인뎅...
falsy를 사용하여 인자를 못받은 경우를 나타내기
function meetAt(year, month, date) {
if (year && !month && !date) {
return year+'년'
}
if (year && month && date) {
return year+'/'+month+'/'+date
}
if (year && month && !date) {
return year+'년 '+month+'월'
}
}인자를 입력하지 않은 경우, undefined가 됨
undefined는 falsy한 값 (== false) → if 문에서 false가 되어버림.
for loop을 이용하여 smallest element of an array 찾기
Find the smallest number in array JavaScript for loop | Example code
function findSmallestElement(arr) {
if (arr.length === 0) {
return 0;
} else {
let smallest = arr[0];
for(let i = 1; i < arr.length; i++) {
if (arr[i] < smallest) {
smallest = arr[i];
}
}
return smallest;
}
}Math.min 쓰거나 .sort 쓰는 것만 알았지 for loop으로 만들라고 하니까 당황...
첫 요소를 smallest로 잡아놓고, 계속 훑으면서 크기 비교를 하면 된다.
typeof null
을 하면 object가 나오는지 처음 알았다. undefined 같이 null도 한 type 이라고 생각했었는데...
null은 빈 객체를 참조하고 있는 것 이어서 그렇다고 한다.
에어비앤비 코딩 컨벤션
https://github.com/airbnb/javascript
🔥 날짜와 시간 : Date 생성자
현재 date를 가져오는 생성자 (date는 object)
let rightNow = new Date();
console.log(rightNow);
// 2021-12-29T08:05:25.860Z그리고 사용할 수 있는 메서드들
let year = rightNow.getFullYear(); // 2021
let month = rightNow.getMonth()+1; // 12
let date = rightNow.getDate(); // 29
let day = rightNow.getDay(); // 3
let currentHour = rightNow.getHours(); // 18
let currentMin = rightNow.getMinutes(); // 2💡 getMonth 메서드는 0에서 시작
.getTime() 메서드
let time = rightNow.getTime();1970년 1월 1일로부터 몇 밀리초가 지났는지 표현
→ 두 날짜 비교에 활용하기 좋음
Date 생성자의 parameter
let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);특정 날짜를 넘겨주면 그 날짜의 date 객체를 반환
만나이 구하는 함수
function getWesternAge(birthday) {
let today = new Date();
let thisYear = today.getFullYear();
let thisMonth = today.getMonth();
let thisDate = today.getDate();
let age = thisYear - birthday.getFullYear();
if (thisMonth < birthday.getMonth() || (thisMonth === birthday.getMonth() && thisDate < birthday.getDate())) {
age--
}
return age;
}일단 년도 빼서 년도 구하고, 만약 생일 안지난 경우를 찾아 -1 해준다
scope
scope
'변수가 어디까지 쓰일 수 있는지'의 범위
block
중괄호({} , curly brace)로 감싸진 것
global scope
block에 들어있지 않은 영역
global variable
block밖인 global scope에서 만든 변수
block scope
block에 들어있는 영역
local variable
block안의 local scope에서 만든 변수
global namespace
해당프로그램의 어디에서나 사용할 수 있는 변수 이름 범위
✨ *namespace*라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.scope pollution
global 변수가 계속 살아있어서 변수를 트래킹하기도 어렵고 문제를 일으키는 상황
