JavaScript
String <-> Number 변환
number()
문자열을 숫자로 바꾸는 함수입니다.
let year = "2022"; // "string" 타입의 "2022"
console.log(number(year)); // "number" 타입의 2022toString()
숫자를 문자열로 바꾸는 함수입니다.
let year = 2022; // "number" 타입의 2022
console.log(year.toString()); // "string" 타입의 "2022"날짜와 시간
Date() 객체
var rightNow = new Date();
console.log(rightNow); // 2022-05-16T05:12:58.658ZDate() 객체를 이용해서 날짜와 시간을 얻을 수 있습니다.
현재의 날짜와 시간을 출력합니다.
let rightNow = new Date();
let year = rightNow.getFullYear(); // 2022
let month = rightNow.getMonth()+1; // 5
let date = rightNow.getDate(); // 16
let day = rightNow.getDay(); // 1
let currentHour = rightNow.getHours(); // 14
let currentMin = rightNow.getMinutes(); // 17Date() 객체의 함수들로 여러가지 값을 가져올 수 있습니다.
🚨주의사항
getMonth 함수는 현재 달보다 1 작은 값을 반환합니다.
rightNow에 담긴 날짜와 시간은 시계처럼 1분 1초가 흐르는 것이 아니라,
코드가 실행되는 순간의 시간이 답깁니다.
getTime()
getTime 함수는 날짜의 밀리초 표현을 반환합니다.
getTime 값을 출력하게 되면 1970년 1월 1일을 기준으로 얼마의 밀리초가 지났는지를 출력합니다.
이렇게 getTime 함수로 반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단할 수 있습니다.
값이 더 작으면 과거입니다.
특정 날짜의 Date
특정 날짜를 매개변수로 넘겨주면, 해당 날짜의 Date를 반환 받을 수 있습니다.
let date1 = new Date('December 17, 2019 03:24:00'); //Tue Dec 17 2019 03:24:00 GMT+0900
let date2 = new Date('2019-12-17T03:24:00'); //Tue Dec 17 2019 03:24:00 GMT+0900
let date3 = new Date(2019, 5, 1); //Sat Jun 01 2019 00:00:00 GMT+0900세 번째 줄처럼 number로 넣어주게 되면 month 와 day of the week는 + 1의 값이 반환됩니다.
그 이유는 month 와 day of the week는 배열의 index처럼 0부터 시작하기 때문입니다.
Math
round()
round()는 반올림 메서드입니다.
ceil()
ceil()는 올림 메서드입니다.
floor()
floor()는 내림 메서드입니다.
random()
random()는 랜덤 메서드입니다.
JavaScript내에서 이미 만들어진 랜덤함수로 랜덤 숫자를 출력합니다.
0.0000000000에서 0.9999999999 사이의 값에서 랜덤수를 제공합니다.
그렇기 때문에 우리가 랜덤의 수를 쓰기 위해서는 다음처럼 많이 사용합니다.
var randomNumber = Math.random();
console.log(Math.floor(randomNumber*10)); // ex)9.324510040283이렇게 사용하면 정수로 바꿔서 사용할 수 있습니다.
Object
Object 선언
객체는 {}(중괄호)로 감싸져 있고,
콜론으로 구분된 이름 / 값 의쌍 들이, 쉼표로 분리된 목록의 형태입니다.
property 이름은 중복될 수 없다.
property이름과 property값 사이에 : (콜론)으로 구분한다.
property를 추가할 때는 , (쉼표)를 붙여준다.
property 값에는 어느 type이나 가능하다(string, number, array, object, function..)
Object 접근
마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽에 위치합니다.
대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성합니다.
대괄호 안에는 변수가 들어갈 수 있습니다.
Scope
Scope
변수가 선언되고 사용할 수 있는 공간입니다.
scope 외부(block 밖)에서는 특정 scope의 변수에 접근할 수가 없습니다.
Block
function, if문, for문 등을 감싸고 있는 {}(중괄호)를 block이라고 합니다.
{}(block)내부에서 변수가 정의되면 변수는 오로지 {}(block)내부에서만 사용할 수 있습니다.
Local Variable
{}(block)내부에서 선언된 변수를 지역 변수(local variable)라고 합니다.
Global Variable
{}(block) 밖인 global scope에서 만든 변수를 전역 변수(global variable)라고 합니다.
좋은 scoping 습관
지역 변수와 로컬 변수를 적재적소에 올바르게 사용해야 하는데,
여러가지 상황들로 인해서 똑같은 이름의 변수가 여러번 사용되거나,
scope의 혼동으로 오류가 발생할 수 있고, 메모리를 효율적으로 사용하기 위해서는
변수들은 block scope로 최대한 나눠놔야 합니다.
- 타이트한 scope(tightly scoping)의 변수는 코드 품질을 올려줍니다!
- 코드가 block 으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
- 코드가 한줄 한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
- 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
- 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.
따라서, 전역 변수의 사용을 줄이고 지역 변수의 사용을 잘 하여야 합니다.
Class
Class
클래스는 객체지향 프로그래밍의 핵심입니다.
객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법입니다.
Class는 객체를 생성하기 위한 템플릿입니다.
클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다.
class Car {
constructor(name, price) { // 생성자(Constructor)
this.name = name;
this.price = price;
}
applyDiscount(discount) { // 메서드(Methods)
return this.price * discount;
}
addSales() { // 메서드(Methods)
this.salesAmount++;
}
}클래스는 위와 같은 구조를 갖습니다.
생성자(Constructor)
객체(object)의 설계도인 클래스(class)는 문법이 비슷합니다.
둘의 가장 큰 차이는 constructor 라는 생성자 함수입니다.
class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출합니다.
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}인스턴스는 Class 이름에 new 를 붙여서 생성합니다.
클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor 에서 필요한 정보를 인자로 넘겨줍니다.
Car클래스의 instance를 morning 이라는 변수에 저장했습니다.
다시 한 번! Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 return해줍니다.
'Morning'이라는 String과 2000000 이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었습니다.
Car는class이름입니다. 항상 대문자로 시작하고,CamelCase로 작성해야 합니다.Car class의instance를 생성할때마다constructor메서드가 호출됩니다.constructor()메서드는name,price2개의argument(인자)를 받습니다.constructor()메서드에this키워드를 사용했습니다.class의 실행범위(context)에서this는 해당instance를 의미합니다.constructor()에서 인자로 넘어오는name과price를 사용해Car instance의name,price프로퍼티에 값을 할당했습니다.- 이렇게 클래스 내에서
name,price와 같이 변경 가능한 상태값이자class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다. - 멤버 변수는
this키워드로 접근합니다.
인스턴스(Instance)
class를 통해 생성된 객체를 인스턴스 라고 부릅니다.
인스턴스는 class의 property이름과 method를 갖는 객체입니다.
인스턴스 마다 모두 다른 프로퍼티 값을 갖고 있습니다.
const morning = new Car('Morning', 20000000);- 인스턴스는
Class이름에new를 붙여서 생성합니다. - 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는
constructor에서 필요한 정보를 인자로 넘겨줍니다. Car클래스의instance를morning이라는 변수에 저장했습니다.- 다시 한 번!
Car클래스의 새로운instance를 생성하려면new키워드가 필요합니다.new키워드는constructor()메서드를 호출하고 새로운instance를 return해줍니다. - 'Morning'이라는
String과 2000000 이라는Number를Car생성자에 넘겨주었고,name,price프로퍼티에 각자의 값이 할당되었습니다.
메서드(Methods)
메서드는 함수입니다.
그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부릅니다.
Class의 method는 Object(객체)의 문법과 똑같습니다.
다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 했지만, 클래스는 그렇지 않습니다.
