JS - 함수 / 함수 사용 본문
함수 사용 - 함수를 호출하는 방법, 함수 선언 종류
따로 js 파일을 생성하지 않고, <head> 태그 내에 <script>태그를 생성하여 작성해도 작동 가능
명령어 return
함수를 종료 / 함수를 반환하는 역할을 함 (함수 안에 갖혀 있는 것을 꺼내온다고 생각하면 편함)
const sum = function () {
let result = 10 + 10;
return result
console.log("함수 종료")
}예를 들어 위와 같은 함수를 실행시켰다고 가정한 경우, 함수는 result 값만 반환한 후에, "함수 종료"는 출력하지 않고 종료됨
함수의 선언 방식
함수 표현식
const sum = function () {
let result = 10 + 10;
return result
}
함수 선언문
function sum() {
let result = 10 + 10;
}
화살표 함수
const sum = () => {
let result = 10 + 10;
}
호이스팅
'함수 선언문'에서는 호이스팅이 발생하는데, 함수 발생 이전에 해당 함수가 스크립트 맨 위로 끌어올려진 것 같은 효과를 냄
그말인즉슨, 이는 스크립트 내에서 예상하지 못하는 동작을 할 가능성이 높기 때문에 사용을 지양하는 것이 좋음
추가적으로 var 역시 호이스팅이 발생함
스코프
let / const , var 사이의 가장 큰 차이점 중 하나는 스코프와 관련이 있음
let / const 는 '블록 스코프, 함수 스코프'라는 특징을 가지고 있는데,
블록 스코프는, 함수 안에서 선언된 let / const 의 경우 함수 안에서만 처리될 수 있다는 의미를 지니고 있음
반대로 var는 '함수 스코프'라는 특징만을 가지고 있기 때문에 호이스팅이 발생할 수 있는 것임
따라서, 예측 가능한 코드 작성을 위해서는 let / const 를 통해 변수를 선언하거나 함수 선언문을 통해 선언하는 것이 더 적절함
localhost === 127.0.0.1
localhost = 도메인 주소
127.0.0.1 == IP 주소
원시 타입, 참조 타입
원시 타입 : 불변성, 임시 메모리에 저장(데이터 주소값을 가짐) ex) String, Number, Boolean 등
참조 타입 : 가변성, 새로운 주소값을 가짐 ex) 원시 타입을 제외한 모든 것
조건문
if문
if (조건문) {
조건이 성립되었을 때 실행할 코드}논리 연산자
&& === 양쪽에 위치한 조건을 모두 만족하는 경우 true
|| === 양쪽에 위치한 조건 중 하나라도 만족하는 경우 true
JS 활용 가능 메서드
innerText == 눈에 보이지 않는 요소를 제외한 Text를 가져와 HTML에 표현
textContent == 태그를 포함한 모든 요소를 가져와 HTML에 표현
innerHTML == 태그를 포함한 요소를 가져와 표현
디데이 카운트다운 만들기 2일차
new Date / 현재 시간을 가져와 줌
new Date().setHours(0, 0, 0, 0) / 추가되어있는 시차를 초기화 시킴여기서 new Date() 안에는 날짜 형식의 값이 들어갈 수 있음
그렇게 되면, 유닉스 시간(1970년 1월 1일 자정을 기준)으로 지정된 시간까지 흐른 시간을 ms 단위까지 표현해줌
따라서, 이를 활용하기 위해서는 아래와 같은 방식 사용
let nowDate = new Date
let targetDate = new Date(inputDate).setHours(0, 0, 0, 0)
let remainingDate = (targetDate - nowDate)/1000
// 나누기 1000을 활용하여 ms단위에서 s단위로 바꿔줌
// 여기서 나오진 않았지만, inputDate는 input되어진 값임이후, 각각의 일, 시, 분, 초를 원하는 타입으로 가공하여 활용할 수 있음
remainingObj = {
remainingDays : Math.floor((remainingDate / 3600) / 24),
remainingHours : Math.floor((remainingDate / 3600) % 24),
remainingMins : Math.floor((remainingDate / 60) % 60),
remainingSecs : Math.floor(remainingDate % 60)
}
'개발 > JavaScript' 카테고리의 다른 글
| JS - 배열 안 객체 활용하기 (1) | 2022.12.29 |
|---|---|
| JS - 반복문(for, while) / 객체활용 for문 / for in / for out (0) | 2022.12.28 |
| JS - 데이터, 배열, 객체 (2) | 2022.12.26 |
| JS - setInterval / focus() (0) | 2022.12.21 |
| JS - clearInterval (1) | 2022.12.21 |
