개발일기
[새싹 프론트앤드] 함수 실습 다시 풀기 본문
문제 1.
브라우저 화면과 같이 출력되도록 <script>태그 내에 함수를 작성하세요.
<결과>
<body>
<script>
//big 함수를 작성하세요.
function big(n1, n2) {
if (n1 > n2) return n1;
else if (n1 < n2) return n2;
else return " 두 수는 같습니다.";
}
</script>
<script>
var b = big("625", "555");
document.write("큰수 = " + b);
</script>
</body>2개의 매개변수 중 큰수를 반환하는 함수를 만드는 것이었는데,
if문안에 바로 리턴값으로 매개변수를 줬고, 두 값이 똑같을 경우 '두 수는 같습니다'라는 문구를 출력하도록 했다.
다른 풀이 방법으로는 리턴할 값을 저장할 변수를 선언하고,
if문 실행문에는 그 변수에 큰 값을 저장하도록 했다. 그리고 if문 밖에서 return 변수명; 을 지정했다.
문제 2.
브라우저 화면과 같이 출력되도록 <script>태그 내에 함수를 작성하세요.
<결과>
<body>
<script>
// pr 함수를 작성하세요.
function pr(a, b) {
for (let i = 0; i < b; i++) {
document.write(a);
//i값이 0부터 b-1까지 1씩 증가할때마다 a를 출력한다 = a를 b만큰 출력한다.
}
}
</script>
<script>
pr("%", 5);
</script>
</body>매개변수 1이 매개변수 2의 수만큼 출력하라는 문제였는데, 어이없는 실수를 두가지 했다.
1. let을 int로 작성
2. pdf에서 문제를 복붙해왔는데 p("%", 5); 이부분의 "" (큰따옴표)가 이상했다.
저렇게 복사되었는데 저 기호는 우리가 일반적으로 쓰는 큰따옴표가 아니였다..!
예전 수업에서 들어본것같은데 생각도 못하고, 왜 안되지 이러면서 거의 30분을 날려먹었다.
그리고 착각했던것 하나가 있었는데
매개변수는 함수실행문에서 모두 사용되어야 하는게 맞지만
let i로 준 i는 반복문을 위한 초기값, 조건식, 반복후 작업에만 사용되는 변수이기때문에 실행문에 들어가지 않아도 된다.
그런데 i도 함수 실행문에 들어가야되는거 아닌가 하는 의문을 가졌던것...
문제 3.
Math 객체를 이용하여 랜던한 구구단 문제를 출력하고 답을 입력 받아 정답이면 다음과 같이 출력하고,
틀렸으면 ‘아니오’를 출력하는 웹 페이지를 작성하세요.
<결과>
<body>
<script>
//구구단 a*b 변수 선언
let a = Math.floor(Math.random() * 9) + 1;
let b = Math.floor(Math.random() * 9) + 1;
//정답 입력받기
let input = parseInt(prompt(`${a}*${b} 값은 얼마입니까?`));
//결과값 변수 선언
let result;
(a * b === input) ? result = "정답!" : result = "아니요!";
document.write(`${result} ${a}*${b}=${a * b}입니다.`);
</script>
</body>함수로 풀어야 하는 문제를 함수빼고 풀어버리기ㅎㅎ
선생님코드 보고 함수를 이용해서 다시 풀었다.
<body>
<script>
//랜덤 숫자를 함수로 지정
let randomNum = () => Math.floor(Math.random() * 9) + 1;
//구구단 식 설정
let gugudan = randomNum() + "*" + randomNum();
//출력하면 '랜덤숫자*랜덤숫자' -> 문자열
let input = parseInt(prompt(`${gugudan} 값은 얼마입니까?`));
if (input === null) {
//최소버튼이 클릭된 경우
document.write(`구구단 연습을 종료합니다.`);
} else {
//구구단 정답
let ans = eval(gugudan);
if (ans === input) document.write(`정답! `);
else document.write(`아니요! `);
document.write(`${gugudan}=${ans}입니다.`)
}
</script>
</body>여기서는 랜덤 숫자를 함수로 만들고, 구구단 식에서 각각의 숫자를 함수 호출해서 받는 식으로 풀었다.
그리고 구구단 정답을 따로 변수 설정해두고, eval() 함수를 이용해서 풀었다.
* eval() : 식을 계산하고 결과를 리턴하는 함수
헷갈렸던 부분 2가지
1. 구구단 식 설정하는 부분에서 함수를 두번 호출하고 그 사이에 +로 문자열 "*"를 넣었는데,
문자+숫자는 문자열로 변환되는걸 헷갈려해서 이게 맞나 싶었다.
2. 화살표함수를 사용했는데, 이때 예약어로 function이 아니라 let을 사용했다.
그래서 순간 함수를 호출할 때 ()를 붙여주는게 맞나 고민했는데, 붙여줘야 한다. 함수이니까!
문제 4.
함수를 이용해서 아래와 같이 출력하기
<결과>
<body>
<script>
var names = ["wonsun", "jaemoonlee", "kitae", "gracehwang"];
//1. 배열의 각 이름 출력
let printName = (a) => a.join(" ");
//2. 가장 긴 이름 출력
let longest = names[0];
for (i = 1; i < names.length; i++) {
//longest에 인덱스 0번이 이미 들어있으므로 i는 1부터
if (names[i].length > longest.length) {
longest = names[i];
//longest의 글자수와 names[i]의 글자수를 비교해서 names[i]가 더 크면 longest에 저장
}
}
//3. 증가순으로 출력
function sort(a) {
let newArr = a.sort();
//sort()는 알파벳순으로 재정렬하는 함수로 재정렬한 배열을 변수 newArr에 저장
for (let i = 0; i < newArr.length; i++) {
document.write(newArr[i] + " ");
//배열 출력
}
//1. 왜 출력 이상하게 될까?
//2. for대신 printName(newArr);는 왜 안될까?
}
document.write(`이름 : ${printName(names)}<br>`);
document.write(`가장 긴 이름 : ${longest}<br>`);
document.write(`증가순 이름 : ${sort(names)}`);
</script>
</body>이 문제는 사실 제대로 못풀었는데, 증가순 이름이 제대로 출력이 안됐다.
이 코드대로 출력하면 아래와 같이 나온다.
이렇게 배열이 출력되고, '증가순 이름'이 나오고 다음에 undefined가 나온다.
(1) 다큐먼트 라이트를 지우고 출력하면 아예 안나오는데, 왜 생뚱맞게 중간에 증가순 이름이 나올까?
그리고 뒤에 undefined는 뭐지?
(2) 또 for문 대신 printName(newArr) 함수를 쓰려고 했는데 이것도 안된다 왤까
내일 강사님한테 물어봐야겠다..
1. 함수 안의 document.write는 함수의 for문이 실행되면서 화면에 뿌려주기 때문에 배열이 먼저 출력됐다.
그 후, 함수 실행이 끝나고 '증가순 이름' 이 출력되고, 리턴값이 출력되는데,
여기서는 리턴 값 지정을 안해줬으므로 undefinded가 나왔다.
for문을 이용해서 제대로 출력하기 위해서는 결과값을 저장할 변수를 선언하고 for문에 변수를 초기화 시킨다.
그리고 for문 밖에서 'return 변수명'을 해야한다.
2. printName(newArr) 함수를 이용하려면 앞에 retrun을 붙여야 정상적으로 작동된다.
return은 함수호출 후 수행이 된 다음 마지막에 값을 불러와준다.
가장 긴 이름을 출력할 때 조금 헷갈렸는데
선생님 코드를 보니 새로운 변수 longest를 선언하고 거기에 배열의 0번 인덱스 값을 저장했다.
그리고 for문을 이용해서 다음 인덱스 값의 길이가 더 크면 longest에 저장하는 방법으로 풀었다.
이해는 했는데 또 혼자 코드를 치려고 하면 못한다...
ㅎㅎㅎ열심히 하자
정리
별거 아닌 실수가 잦다. 그런데 별거 아닌거 치고는 너무 시간을 많이 잡아 먹는다.
다 작성하고 출력하지 말고 중간중간 출력하면서 확인해보고, 잘못된 부분 있으면 바로 잡아내려고 하기.
그리고 소소한 이론들이 조금씩 헷갈리는데 이렇게 블로그에 기록하니까 다시 개념 정리가 되어 좋은것 같다.
실습문제가 점점 어려워서 이제는 6시까지 못푸는 경우가 많긴한데 그래도 지치지말자..!
아 그리고 건강관리 잘하기.
일주일내내 골골거렸더니 건강이 제일 중요하다는걸 확실히 깨달았다😇
다음주도 화이팅!
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅
'JavaScript' 카테고리의 다른 글
| [새싹 프론트앤드] JSON 데이터 통신 (0) | 2022.11.15 |
|---|---|
| [코딩 알려주는 누나] api통신, 뉴스타임즈 만들기 - 1 (0) | 2022.11.14 |
| [새싹 프론트엔드] 반복문 조건문 배열 실습 문제 다시풀기 (0) | 2022.11.06 |
| [udemy] 한입 리액트 : 객체 (0) | 2022.10.20 |
| [udemy] 한입 리액트 : 호이스팅 / 화살표함수 / 콜백함수 (0) | 2022.10.19 |
