앞서 배운 함수를 사용해서 실습을 해보았다.
실습.01 성인이면 자기소개~
나이 18세 미만이면 18세 미만 문구가 뜨고 그 이상이라면 이름, 나이, 좋아하는 색깔이 뜨는 코드를 만들어보았다.
function userInfo(name, age, favoriteColor) {
if (age < 18) {
return `${name}님은 18세 미만입니다.`;
} else if (age >= 18) {
return `안녕하세요, ${name}님! 당신은 ${age}살이고, 좋아하는 색상은 ${favoriteColor}입니다.`;
}
}
function testUserInfo() {
// 테스트 케이스 1: 나이가 18세 미만
const result1 = userInfo('Alice', 17, 'blue');
console.log(
result1 === 'Alice님은 18세 미만입니다.' ? '테스트 1 통과' : '테스트 1 실패'
);
// 테스트 케이스 2: 나이가 18세 이상
const result2 = userInfo('Bob', 25, 'green');
const expected2 =
'안녕하세요, Bob님! 당신은 25살이고, 좋아하는 색상은 green입니다.';
console.log(result2 === expected2 ? '테스트 2 통과' : '테스트 2 실패');
// 추가 테스트 케이스: 정확한 메시지 출력 검증
const result3 = userInfo('Charlie', 18, 'red');
const expected3 =
'안녕하세요, Charlie님! 당신은 18살이고, 좋아하는 색상은 red입니다.';
console.log(result3 === expected3 ? '테스트 3 통과' : '테스트 3 실패');
}
// 테스트 함수 실행
testUserInfo();- 이름, 나이, 좋아하는 색상을 매개변수로 받는 userInfo함수 안에 18살 미만, 18살 이상일 경우의 if문을 만들었다.
- 템플릿 리터럴안에 매개변수를 써서 들어오는 매개변수에 맞춰 return되는 문장이 달라지게 했다.
- 만든 코드를 테스트하는 3가지 코드에서는 userInfo에 인수를 넣는 변수를 만들고 그 변수가 예상값과 같을 경우 '통과' 다를 경우 '실패'문구가 뜬다.
실습.02 문자열 갯수에 맞춘 색상별 div
주어진 문자열의 문자 갯수에 맞춰 div를 만들어내는 함수를 만들고, 각각 text와 배경값 넣는 실습을 진행했다.
let str = '0123456';
const body = document.querySelector('body');
function createDiv(content, backgroundColor) {
const div = document.createElement('div');
div.className = `div1`;
div.textContent = content;
div.style.padding = '10px 20px';
div.style.margin = '5px 2px 3px 8px';
div.style.color = '#ffffff';
div.style.backgroundColor = backgroundColor;
return body.appendChild(div);
}
for (let i = 0; i < str.length; i++) {
createDiv(`${str[i]}번째 div`, `#${i * 10}${i * 25}${i * 30}`);
}- str문자열을 지정했다.
- body 엘리먼트를 대입한 변수를 선언했다.
- div를 만드는 createDiv 함수를 만들고 content와 backgroundColor를 매개변수로 받게 했다.
- div 변수를 선언하고 속성값들을 지정하고 return 했다. (전 페이지에서 말했던 헷갈렸던 부분. 해당 함수에서는 appendChild명령문이 있기 때문에 return이 없어도 함수가 실행된다.)
- 반복문을 통해 str 문자 갯수에 따라 텍스트와 색상이 바뀌게 했다.
회고: 반복문과 함수를 응용해서 신선했다. 좋은 복습이 된 것 같고 hex색상메소드에 반복문을 합쳐서 색상을 다 다르게 코드를 만들어 본 좋은 경험이었다.
hyohyo