⚱️ 1. function
1.1 함수의 정의
add라는 이름을 가진 함수이며 해당 함수가 어떤 동작을 하게 될지를 정의하는 것.
a,b는 매개변수(parameter)이다.
function add(a,b){ let sum = a + b; return sum; }
합계를 return 해준다.
1.2 함수의 실행
parameter안에 들어갈 1,2를 argument(인자)라고 한다
함수명(); 을 작성하면 함수를 실행할 수 있다.
add(1,2);
- 만약 함수에 return을 하지 않으면 undefined로 반환이 되며 없다고 함수가 실행되지 않는 것은 아니다.
📝 2. 비교연산자
🦞2.1 엄격한 비교연산자(===)
양쪽의 type(string, number ...) 이 동일하며 그 안의 값 또한 동일한 경우 true가 출력 됨.
console.log("3" === 3) / false
console.log(3 === 3) / true
🐖2.1 느슨한 비교연산자(==)
양쪽의 type이 다르더라도 그안의 값이 동일하면 true가 출력된다.
console.log("3" == 3) /trueconsole.log(3 == 3) /true
3.🕵️♂️여러인자 받을 시 주의점
여러 인자가 하나의 함수에 존재할 때 걔중 하나의 인자를 입력하지 않으며
입력한 인자만 출력받고 싶을 때는 조건문 및 undefined의 기능을 사용하여
문제를 해결하면 된다.
아래는 년, 월 , 일이 입력 되었을 때 만약 월과 일이 입력되지 않거나
일이 입력되지 않을 때 그에 따라서 출력방식을 변경하는 문제였다.
초기에는 null을 사용하였으나(null은 아무것도 아닌 빈 객체를 가리키고 있는 것, undefined는 정의되지않은 변수를 의미) undefined로 정의 되지 않은값이라는 의미로 처리하는게 알맞다는것을 검색을 통해 알게되었다.
까먹지말자
function meetAt(y,m,d){ if (m === undefined && d === undefined){ result =`${y}년` } else if(d === undefined){ result = `${y}년 ${m}월` } else{ result = `${y}/${m}/${d}` } return result } meetAt(2022)
4.✖️Array 및 배열조작
하나의 변수에 다량의 데이터를 가지고 싶을 때 사용한다.(=python 의 list와 비슷함)
ex) cities 라는 변수명, 서울 대전은 요소(Element), 서울은 index 0
var cities =[["서울",123],"대전"];
아래와 같이 필요한 요소만 뽑아낼 수 있으며 str number등에 연산자와 함께도 활용가능하다..
console.log(cities[0][0])
/ 서울
alert(cities[1]+"에 오신것을 환영합니다.")아래 처럼 범위를 벗어나는 곳에 요소를 지정하면 undefined로 지정된다.
cities[4] = "대구"
console.log(cities)
/["서울",123],"대전",undefined, "대구"]또한 push(뒤에서 추가), unshift(앞에서 추가)를 사용하여 활용할 수도 있으며 pop()를 통해 마지막요소의 값을 제거하고 반환할 수도 있다.
cities.push(2)
console.log(cities)
/["서울",123],"대전",undefined, "대구",2]
5. 🦯 String
string에서도 array와 같이 index값을 통해 하나씩 추출 해낼 수 있으며 string에 내장된 함수를 통해
소문자를 대문자로 대문자를 소문자로 변경할 수 있다.
5.1 👽 대문자,소문자
let lastName = 'Lee';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();5.2 indexing, slicing, indexOf, "!==-1"
만일 조건문에서 문자를 슬라이싱 할때 어떤문자의 존재유무를 알고 싶다면
indexOf를 쓰며 필요문자의 첫번째 글자 인덱스 숫자를 유추해내고
!==-1을 통해 존재유무를 판단하여(없지 않다면 - > 있음)
해당문구를 범위를 지정해 슬라이싱 해낼 수 있다.
let pro = "재미있을걸 프로그래밍은"
let firstchar = info.indexOf("프로그래밍")
if(firstChar ! == -1){
console.log(pro.slice(0, firstchar-1))
}
/"재미있을걸"6. 📅 날짜와 시간
프론트 개발을 하다보면 날짜를 받을 일이 많은데 이 떄 날짜객체를 호출하여 쉽게 시간과 날짜를 얻을 수 있다.
getWesternAge함수는 만나이를 계산하는 함수이다.
-
먼저 bd 변수 설정을 통해 입력받는 날짜를 Date형식으로 만들고 (2019-02-18T00:45:06.562Z
이런형식이다.) today변수는 오늘 날짜에 해당하는 위 형식의 값을 얻는것. -
getFullYear()을 이용하여 제일 앞에 기입된 년도만 받아낸 뒤 그 차이를 age변수에 저장
-
ageM은 각 달의 수만 뽑아내어 그 차이를 저장한다
-
만 나이를 계산하므로 이때 달의 차이(ageM)가 음수이거나 동일한 달인데 생일의 날짜가 더 크다면 한살을 빼주는 식이다.
이렇게 조건식과 날짜 시간과 관련된 메소드를 이용하는 법을 공부해봤다. 어렵다.
처음 활용해보는 것이라 이렇게라도 기억해봐야겠다. 😅
function getWesternAge(birthday) {
let bd = new Date(birthday)
let today = new Date()
let age = today.getFullYear() - bd.getFullYear()
let ageM = today.getMonth() - bd.getMonth()
if(ageM < 0 || (ageM === 0 && today.getDate() < bd.getDate())){
age = age -1
}
return age
}
getWesternAge(birthday)7. ⛑️Object(객체)
plan1이라는 변수명을 가진 object(객체)는 각 각 name, price등의 프로퍼티 를 가지며
각 개체의 값은 "Basic" , 3.99 등을 가진다.
해당 객체의 프로퍼티에 접근하고 싶으면 '객체이름.프로퍼티이름' 을 하면된다.
let plan1 = {
name: "Basic",
price: 3.99,
space: 100,
transfer: 1000,
pages: 10
};
let propertyName = "name";
console.log(plan1[propertyName]) / "Basic"
console.log(plan1.name) / "Basic"8. 🚬간단한 용어의 정리
- scope: 변수가 쓰일 수 있는 범위
- block: 조건문 등에 있어 괄호로 감싸진 것
- global scope: block의 외부영역
- global variable: block의 외부영역(global scope)에서 만든 변수
- block scope: block의 내부영역
- local variable: 지역변수를 의미하며 해당 블록범위안에서만 사용가능
- global namespace: global 변수를 사용할 수 있는 범위(해당프로그램 어디에서나 사용 사용가능)
- scope pollution: global 변수의 값을 local 변수에서 동일한 변수명을 통해 변경시킨 것.
9. ▪️ switch
switch 함수는 experssion의 값과 case 에 설정된 (x, y etc..) 값이 같을 시 해당 값이 같은 code block에 존재하는 코드를 실행하고 전체 switch 코드를 빠져나간다. 만약 매치되지 않을 시 default 로 코드블락을 빠져나간다.
switch(expression) { case x: // code block break; case y: // code block break; default: // code block }
