javascript 함수 기초

블로그를 매일 쓰는 거는 정말 힘든 일...

그래도 힘내서 가보자구~!

 

오늘은 함수 기초에 대해 배웠고 정리해보겠다.

코딩 독학할 때 함수 이해가 정말 어려웠다.

 

특히 '=>' 이 녀석

function도 없고 ㅠ 정체성 뭐냐구~ 했는데 오늘 몇번 써보니까 이제 좀 친숙해졌다.

 

함수

자바스크립트에 함수를 만들 떄는 funciont을 써준다.

funciont 함수이름(매개변수){
	명령문
}

여기까지는 좋다. 

근데 함수를 만드는 방법이 2개가 더 있단다.

// 1. 함수 선언식
function hello(name){
	alert(name + "님 안녕하세요")
}
// 2. 함수 표현식
const hello = function(name){
	alert(name + "님 안녕하세요")
}
// 3. 화살표 함수
const hello =(name) => {
	alert(name + "님 안녕하세요")
}

 

개발자 종족 특징은 게으르다는 것.

점점 사용하기 편한 형태로 진화한 것으로 보인다.

 

함수 선언식에 따른 중요한 차이점!

//함수 선언식 : 함수 선언이 어디에 있던 작동함
sum ()

function sum() {
	let result = 10+10
}

//함수 표현식 : 함수 실행보다 선언이 아래 있으면 에러남
sum()

const sum = function () {
	let result = 10+10
}

함수 선언식으로 함수를 작성하면 코드 순서와 상관없이 어디서든 함수를 실행할 수 있다.

이럴 경우 다양한 변수에 대응할 수가 없게 된다. 그렇기 때문에 함수 표현식을 애용해야 한다는 것!

 

---

함수 사용 연습!

함수를 배웠으니 써봐야한다.

 

1번 과제는

"인증번호 전송" 버튼을 누르면 6자리 숫자가 랜덤하게 설정되며,
보너스로 버튼을 누를 때 마다 숫자 컬러가 변경되도록 하는 것.

구글링 해가며 아래와 같이 함수를 짰다.

let Onclick = () => {
    let number = document.getElementById('number')
    let random = Math.floor(Math.random() * 0xffffff).toString(16);
    // random 변수 강의 예제 요거 => String(Math.floor(Math.random() * 1000000) ).padStart(6,"0")
    number.innerText = random;
    number.style.color = "#" + random;
}

우선 구글링으로 컬러 코드 랜덤으로 바꾸는 함수를 사용하긴 했는데

toString에 16은 뭐고(16비트로 표현할 수 있는 스트링을 표현한다는 뜻인가..?),

0xffffff는  또 뭔지... 추가적으로 공부해봐야겠다.

 

 

다음 과제는

버튼을 누르는 순간 3분의 시간 제한을 표시하는 것과 인증번호 전송 버튼의 비활성화

대충 이렇게 하니까 작동은 했었다.

let time =180
// time 변수 땜에 한참 헤맸다.
function clock() {
    if (time >= 0){
        let min = Math.floor(time / 60);
        let sec = String(time % 60).padStart(2, "0");
        time = time - 1
        document.getElementById("time").innerText = `${min} : ${sec}`;
        document.getElementById("btn").style.color = "#c4c4c4"
    } else {
            document.getElementById("btn2").disabled = true
    }
}
// 화살표 함수 한번 써봤닷
let Onclick = () => {
    let number = document.getElementById('number')
    let random = String(Math.floor(Math.random() * 1000000) ).padStart(6,"0")
    
    number.innerText = random;
    number.style.color = "#" + random;

    setInterval(clock, 1000);
}

내가 헤맸던 곳은 "let time = 180"

time 변수를 clock 함수 안에 선언 해두고 왜 작동하지 않지하며 애꿎은 코드만 계속 수정했다.

 

근데 강의를 다시 보니 time 변수가 함수 밖에 있는 것!

 

전역변수 지역변수 개념인데,

time 180을 함수 내에 선언하니까 함수가 실행되는 1초마다 계속 초기화가 된 것이었다.

함수 밖에 선언함으로써 180이 초기화 되지 않게 하니까 잘 해결되었다.

---

그밖에 싸이월드 홈피 만들기 프로젝트를 진행 중이다.

페어 프로그래밍을 통해 같읕 팀원 3명과 함께 진행하는데

3명 모두 정답이 다르다는 점이 인상적이다.

 

역시 코딩은 답이 없는 것

 

 

오늘 싸이월드 표 하나 만드는데도 4시간이 걸렸다.

아래 처럼 표를 만들면 되는 것.

그리드도 만들어보고, 테이블로도 만들어보고, 표를 만들 수 있다고 하는 것들은 다 시도 해보다가

결국 div로 짜집기해서 만들었다