개발일지
베이스 캠프 12일차 본문
1주 차에 배운 함수에 대해서 좀 더 배운 하루가 되었다
함수
어떤 기능을 수행 할수 있는 도구 원하는 기능을 만들어서 필요한 곳에 사용할 수 있다
이런 도구를 활용하기 위해서는 함수를 호출하여 사용 하는 방법이 있다.
함수 호출
function SayHi(){
console.log("안녕하세요 여러분")
}
SayHi()
// 함수를 사용하기위한 호출
// 호출 할때 괄호를 꼭 써야함함수의 리턴
함수 내부에 존재하는 데이터는 밖으로 내보낼수내보낼 수 없지만 return을 통해서 외부로 연산의 결과나 데이터를 내보낼 수 있음
return은 바로 뒤에 오는 데이터를 함수를 호출했던 위치로 전달해준다
어떤 함수가 return 해주는 데이터를 지정해주면
위의 이미지처럼 해당 반환값을 특정 변수에 담아줄 수 있다. 함수를 호출했던 위치로 리턴되는 데이터가 전달되기 때문에
return의 역할은 반환말고 다른 역할도 있다 함수를 종료시키는 역할도 있다
onclick
html 태그에 부여 할수 있는 속성 중 하나로 클릭을 하였을 때 할당되어 있는 수식이나 혹은 코드를 실행해준다
버튼 속성이 있는 태그에 주로 쓰인다
<head>
<script>
const btnFunc = function() {
console.log("버튼이 눌렸어요!")
}
</script>
</head>
<body>
<button onclick="btnFunc()">버튼</button>
</body>
// 이 코드는 버튼 태그를 눌렀을 때, 콘솔 창에 "버튼이 눌렸어요!"라는 메세지가 출력되는 코드입니다
querySelector
querySelector을 사용하면 javascript 내에서 html의 요소를 참조할 수 있고 태그 그 자체를 참조할 수 있습니다.
input처럼 값이 입력받을 수 있는 태그라면 입력받은 데이터를 참조해 올 수 있습니다.
querySelector를 활용할때는 태그명을 이용할 수 있지만 중복되는 경우가 많아서 클래스명이나 아이디명을 써주는 게 좋습니다
이때 클래스명 앞에는 . 을 아이디명 앞에는 # 을 써줘야 합니다.
<script>
const dateFormMaker= function(){
const inputYear = document.querySelector('#target-year-input').value
const inputMonth = document.querySelector('#target-month-input').value
const inputDate = document.querySelector('#target-date-input').value
//value를 써주면 입력된 값만 가져오는 것 같다
console.log(inputYear, inputMonth, inputDate)
}
</script>
</head>
<body>
<input id="target-year-input" class="target-input">
<input id="target-month-input" class="target-input">
<input id="target-date-input" class="target-input">
<button onclick="dateFormMaker()">버튼</button>
</body>
</html>
new Date()
자바스크립트에서 날짜 데이터는 일종의 객체로 관리가 된다 newDate를 통해 가져올 수 있다
사용자의 컴퓨터 시간을 기준으로 현재 날짜를 가져온다
new Date("2022-09-09")
날짜를 가져와서 그 날짜를 이용해서 남은 날짜를 구해서 타이머 만들기
//html
<input type="text" id="year">
<input type="text" id="month">
<input type="text" id="day">
//js
const dateFormMaker = () => {
const inputYear = document.querySelector('#year');
const inputMonth = document.querySelector('#month');
const inputDay = document.querySelector('#day');
const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`;
return dateFormat;
}
const counterMaker = () => {
const targetDateInput = dateFormMaker();
const nowDate = new Date();
const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
const remaining = (targetDate - nowDate) / 1000;
const remainingDate = Math.floor(remaining / 3600 / 24);
const remainingHour = Math.floor(remaining / 3600) % 24;
const remainingMin = Math.floor(remaining / 60) % 60;
const remainingSec = Math.floor(remaining) % 60;
함수 선언 종류
함수의 표현식
변수에 함수를 할당하는 방식 이 방법을 권장
const 함수이름 = function(매개변수 ){
// ...code here 코드작성
return 결과값
}
함수 선언문
function 함수이름(매개변수){
// ...code here 코드작성 부분
return 결과값
}
//호이스팅의 영향 받은 호이스팅은 끌어올려지는걸 말함
호이스팅
위로 끌어올려지는 걸 뜻함
자바스크립트는 코드를 위에서 아래로 한 줄씩 읽어 내려간다고 했었는데 아래 예시를 보면 선언문으로 작성된 함수를 보면 원래 선언된 위치가 아니라 위쪽으로 끌어올려지면서 작동한다 표현식은 불가능
sum() 함수가 정의되지 않았음에도 자바스크립트를 해석하는 과정에서는 자동으로 오른쪽에 있는 것처럼 함수가 이미 선언된 것 처럼 작동한다
선언문의 경우 예측이 어려운 동작들을 함 안전하지 않아서 표현식이나 화살표 함수를 권장
화살표 함수
const 함수이름 = ( 매개변수 )=>{
// ...code here 코드 작성 부분
return 결과값
}
메서드 내에 함수를 써야 할 때 주로 사용
매개변수(parameter)와 return 값은 필수가 아닙니다.→ 매개변수와 리턴 값은 있어도 되고 없어도 되는 값이기 때문에 반드시 적어주실 필요는 없습니다. 상황에 따라 필요하실 때 적절히 적어주시면 됩니다.
비교 연산자
느긋한 비교 연산자
데이터 값은 비교하지만 타입은 비교하지 않아서 숫자열 1과 문자열 1이 true 가 나옴 그래서 실무에서는 쓰지 않음
1 == '1'
// true
엄격한 비교 연산자
서로 같지 않으면 false를 반환
1 === '1'
// false
엄격한 비교 연산자는 는 값과 타입을 비교하는 것이 아닌, 데이터의 메모리 주소를 비교해 해 두 데이터가 완벽히 일치하는지 판단합니다. 따라서 두 데이터가 눈으로 보기엔 완벽히 일치해도 컴퓨터 내부에서 저장된 메모리 주소가 다르다면 두 데이터는 다른 데이터가 되는 것입니다. 이런 과정을 완벽히 이해하고 엄격한 비교 연산자를 “잘” 사용하려면, 자바스크립트의 원시 데이터 타입과 과 참조 데이터 타입에 에 대해 아는 것이 중요합니다.
원시 타입과 참조 타입
원시타입
- String
- Number
- Boolean
- Bigint
- undefined
- Symbol
- null
참조 타입
위의 7종류를 제외한 나머지 참조 타입은 객체 타입이다라고 봐도 무방합니다
원시 타입의 특징
원시 타입은 불변성이란 특징을 가지고 있습니다 말 그대로 데이터가 변하지 않는 속성
box라는 변수에 ‘abc’라는 문자열을 할당하면 이 문자열은 101이라는 주소를 가진 메모리에 저장이 됩니다.
위의 사진처럼 데이터를 재할당하면 "def"가 담긴 주소 값이 box에 재할당 되어서 101 주소에 있는 "abc"는 사라지지 않고 그대로 있어서
원시 타입에는 불변성이란 특징이 있다
참조 타입의 특징
원시 타입과 반대로 가변성을 가지고 있음
414 주소를 가진 메모리에 객체의 정보가 저장되어있습니다. 이 메모리의 값은 참조 타입의 특징 가변성을 가지고 있습니다. 즉, 이 메모리의 주소는 참조만 해올뿐 주소가 할당되는 것이 아닙니다. 따라서 변화가 가능한 것입니다. 하지만, 414번 주소를 할당한 201번 주소를 가진 메모리는 불변성을 지니고 있습니다. 201번 주소를 가진 메모리는 원시 타입의 메모리 주소와 같은 원리를 가집니다.
쉽게 생각해서 객체의 껍데기를 주머니(201번 메모리),
객체의 안에 있는 데이터(property)들을 공(객체데이터가 있는 414번 메모리)이라고 하면
주머니(201번)는 바꿀 수 없지만 , 주머니 안의 공(414번 데이터)은 바꿀 수 있으며 심지어 삭제와 추가도 가능합니다
원시 타입과 참조타입의 독특한 차이점이 있는데 값을 복사하는 과정에서 차이점이 발생
//값의 복사
let origin = 'hi';
let copy = origin;
//origin 안에 hi 란 값을 담아주고
//copy 변수에 origin 변수 자체를 담아주는 것으로 값이 복사가 됩니다
let origin = "hi";
let copy = origin;
origin = "bye"
console.log(copy)
//. "hi"
//원시타입 데이터이기 때문에 origin에 bye 라는 값을 재할당을 해주어도 복사된 값에 영향을 주지 않음
//값의 복사 (참조 타입의 복사)
let origin = [1, 2, 3];
let copy = origin;
origin.pop();
console.log(copy); console.log(origin);
[ 1, 2 ] [ 1, 2 ]
// origin이란 변수에 배열을 담아주고 copy란 변수에 origin배열을 복사해주었습니다
//origin 변수에 pop메소드를 사용하는데 pop 메소드는 배열의 마지막 요소를 제거하는 메소드
// 그러므로 origin 배열의 3이란 요소가 삭제가 되겠죠 이렇게 원본 배열에 영향을 주었을때
//참조 타입의 경우에는 복사된 데이터에까지 영향을 줍니다
//origin 배열에만 pop메소드를 사용 하였는데 copy 배열까지 영향을 받음 반대로 copy에 영향을 줘도
// origin에 영향이감 복사인데 이부분은 참조타입의 특징으로 설명이 가능하다
원시타입 값의 복사
원시 타입의 경우 데이터가 담긴 주 솟값을 복사를 해주는 식이고 재할당이나 어떤 동작을 해주어고 다른 주소 값에 담긴 데이터에 영향을 주지 않아서 불변의 특징이 있습니다.
참조 타입 값의 복사
아래 이미지처럼 origin에는 배열이 담긴 주소 값을 가지는게 아니라 배열이 담긴 주소값이 주소값을 origin 변수에 담겨져 있습니다 이러한 구조 떄문에 참조 타입은 복사를 시도했을때 이 배열과 연결되는 560이라는 직접적인 주소값이 아니라 이 주소값을 담고 있는 201번이라는 주소값을 공유하게 됩니다.
origin과 copy는 같은 주소값을 가지게 되는데 그러므로 원본 배열에 pop() 메서드로 변화가 생겼을 때 똑같이 복사된 배열도 영향을 받게 됩니다.
참조 타입은 불변성이란 특징을 가지고 있지 않기 때문에 변화하게 되어서 저장되어 있는 배열에 변화가 생기고 그 영향으로 똑같은 주소 값을 가진 두 배열에도 똑같이 영향을 받게 됩니다.
데이터가 복사된 게 아니라 데이터가 담긴 주소의 주소 값을 복사하였기 때문에 이런 값이 복사가 일어났습니다
원시 타입의 경우 데이터가 담긴 주소값을 복사를 해주는 식이고 재할당이나 어떤 동작을 해주어고 다른 주소 값에 담긴 데이터에 영향을 주지 않아서 불변의 특징이 있습니다.
