Javascript/GMA(2302~)
23.04.13 자바스크립트 공부내용 정리 (기초-2)
hyerin1201
2023. 4. 13. 23:39
1. for ( of ) 문
for ( of )문 : 문자열 혹은 배열객체에서 반복가능한 반복문
for ( in ) 과 for ( of ) 차이 : for ( in ) : 일반객체에서 객체의 값을 가져와서 반복처리, for ( of ) : 배열객체에서 각각의 변수값을 가져와서 반복처리할때 (=forEach)
const students = ["park", "kim", "kang", "lee"];
for(let student of students) {
document.write(`${student}.`);
}
2. while / do while
while : 조건이 참인 경우 문장을 반복.
while(조건) {
실행할 명령
}
do while : 참 거짓 여부와 관계없이 무조건 1회 실행후 조건식 참고.
do {
실행할 명령
} while (조건)
let stars = parseInt(prompt("별의 갯수"));
while(stars > 0) {
document.write("*")
stars--;
}
do {
document.write("*");
stars--;
} while(stars > 0)
3. break / continue
break : 반복문을 강제 종료
continue : 특정조건에 해당되는 값을 만났을때 실행하던 반복 문장을 건너뛴다.
3-1. 사용자로부터 값을 받아, 그 값이 소수인지 아닌지 판별하는 코드를 짜보자.
//소수: 1과 자기자신으로 밖에 나눌 수 있는 수.
const number = parseInt(prompt("숫자를 입력하세요"));
let isPrime;
if(number === 1) {
document.write(`${number}은 소수도 합성수도 아닙니다.`);
} else if(number === 2) {
isPrime = true;
} else {
for(let i = 2; i < number; i++) {
if(number % i === 0) {
isPrime = false;
break;
} else {
isPrime = true;
}
}
};
if(isPrime) {
document.write(`${number}는 소수입니다.`);
} else {
document.write(`${number}는 소수가 아닙니다.`);
};
3-2. 사용자로 부터 값을 받아, 그 값보다 작은 수들 중에서 짝수들의 합을 구하는 코드를 짜보자.
const number = parseInt(prompt("1보다 큰 숫자를 입력하세요"));
let a = 0;
if(number != null) { //값이 입력된다면
for(let i = 2; i <= number; i++){ // i는 2부터 입력받은 값보다 작은수까지 반복 2,3,4,5,6
if(i % 2 == 0) { // 그 i값이 짝수라면. 2,4,6
a += i; // a의 변수에 i값을 더한다.
}
}
}
document.write(`입력한 값보다 작은 짝수들의 합은 ${a} 입니다`);
3-3. 3-2의 정답
let n = parseInt(prompt("1보다 큰 숫자를 입력하세요."));
let sum = 0;
if(n !== null && n > 1) {
for(let i = 1; i <= n; i++) {
if(i % 2 == 1) {
continue; // 홀수일경우엔 컨티뉴로 뛰어넘음.
} sum += i; //짝수일때 더함.
document.write(`${i}------${sum} <br/>`)
}
}
4. 함수
function 함수명(매개변수) {
실행명령문
} => 함수선언
함수명(매개변수) => 함수호출
4-1. 1부터 10까지 더하는 함수를 만들어 보자.
function calcSum() {
let sum = 0;
for(let i = 0; i <= 10; i++){
sum += i
}
console.log(`1부터 10까지 더하면 ${sum}`);
}
calcSum();
4-2. 매개변수 : 사용자로부터 특정 값을 받아서 실행하고 싶다면 매개 변수가 필요하다. (가변함수)
매개변수에 전달되는 값을 인수 또는 인자값이라 한다.
let a = parseInt(prompt("첫번째 값"));
let b = parseInt(prompt("두번째 값"));
function sum(a,b) {
let result = a + b;
alert(`두 수의 합: ${result}`);
}
sum(a,b);
let n = parseInt(prompt("값을 입력하세요"));
function calcSum(n){
let sum = 0;
for(let i = 0; i <= n; i++){
sum += i
}
console.log(`1부터 ${n}까지의 더하면 ${sum}입니다.`);
}
calcSum(n);
function calcSum(n) {
let sum = 0;
for(let i = 1; i <= n; i++){
sum += i; //반환값을 정의해줘야함. :함수를 호출했을때 어떤 값을 불러올 것인지.
}
return sum; //함수를 호출했을때 sum의 값을 가지고온다.
}
let num = parseInt(prompt("몇까지 더할까요?"));
document.write(`1부터 ${num}까지 더하면 : ${calcSum(num)}`); //함수호출 : sum 값을 보여줌.
let num1 = parseInt(prompt("첫번째 값을 입력하세요"));
let num2 = parseInt(prompt("두번째 값을 입력하세요"));
function calcSum(a, b) {
return a * b;
}
document.write(`${num1} 곱하기 ${num2}(은)는 ${calcSum(num1, num2)}입니다.`);
4-3. 매개변수의 기본값 설정가능.
function multiple(a, b = 5, c = 10){ //매개변수의 기본값.지정.
return a * b + c;
}
console.log(multiple(2,5,10));
console.log(multiple(10, 20));
console.log(multiple(10)); //사용자가 값을 지정하지 않았다면 함수에서 매개변수의 기본값을 가져옴.
5. 함수스코프 = 적용범위 => 함수가 영향을 미칠수 있는 범위를 말한다. (지역스코프(로컬), 전역스코프(글로벌))
전역변수 사용방법
1코드를 작성할때 가장 최상단에 변수선언, 값 할당
2 함수안에 변수를 작성할때 변수를 정의하는 키워드 = 예약어를 생략한다.
const factor = 5;
function clac(num) {
return num * factor;
}
{
let result = clac(10); // 블록 스코프
document.write(`result : ${result}`)
}
변수 var let const 의 차이점?
바는 브라우저 객체 모델에도 영향을 미칠수있는 전역변수로 영향을 미칠 수 있으므로 불필요한 메모리 공간을 사용할 수 잇음..
렛 콘스트는 스크립트 스코프임 = 스크립트에만 영향을 줄 수잇음.
6. 익명함수란? 함수명을 정의하지 않은것을 말한다.
let sum = function(a, b) { //변수의 이름이 함수의이름을 대체하게 된다. 이 변수의 이름을 참조변수라 한다.
}
7. 즉시실행함수란? 함수 정의와 동시에 실행하는 함수를 말한다.
(function(매개변수) { }, 인자값)
(function(a,b) {
let sum = a + b;
console.log(`함수 실행 결과 ${sum}`);
}(100, 200));
8. 화살표함수. 코드를 좀 더 간략하게 작성할 수 있다.
// 1. 매개변수가 없을때 화살표 함수 사용법
let hi = function() {
return '안녕하세요'
}
let hi = () => {return '안녕하세요'}
let hi = () => '안녕하세요'
// 2 매개변수가 하나일때 화살표 함수 사용법
let hi = user => console.log(`${user}, 안녕하세요`)
// 3. 매개변수 두개일떄 화살표 함수 사용법.
let sum = (a, b) => a + b;
sum(10, 20);
9. 콜백함수. 함수의 인수가 되는 또다른 함수
function display() {
alert("클릭했습니다.");
}
btn.addEventListener("click", display);
//display = 콜백함수
//이벤트 함수 한에 들어가는 인자값으로, 콜백함수
10. 더 간단하게 작성하는 방법.
btn.addEventListener("click", () => {
alert("클릭했습니다.");
});
let a = parseInt(prompt("첫번째 값"));
let b = parseInt(prompt("두번째 값"));
let sum = (a, b) => a * b;
console.log(sum(a, b));
function showData(name, age){
alert(`안녕하세요 ${name}님, 나이가 ${age}살 이군요`);
}
function getData(callback) {
let userName = prompt("이름을 입력하세요");
let userAge = parseInt(prompt("나이를 입력하세요"));
callback(userName, userAge);
}
//===> 이해안됨..
getData(showData);
11. 배열객체의 값만 불러오고 싶을때?
fruits = ["사과", "배", "오렌지"];
(3) ['사과', '배', '오렌지']
console.log(...fruits); ==> 값만 보고 싶을때.
==> 사과 배 오렌지
12. 인자값..설정?
function displayFavotites(first,...favs){ //다른 인자값도 받긴 받아줌
let str = `가장 좋아하는 과일은${first}군요`;
return str;
}
console.log(displayFavotites("사과", "포도", "토마토"));
1 가장 좋아하는 과일은사과군요
13. setInteval( 콜백함수 , 시간 ) : 시간동안 함수를 반복해서 실행
13-1. 콘솔에 안녕하세요가 2초 간격으로 출력되는 함수가 5번 실행된 후 종료하는 코드를 짜보자.
let counter = 0;
let timer = setInterval(()=> {
console.log('안녕하세요')
counter++; //변수가 같이 증가. 근데 5가되면.
if(counter == 5) {
clearInterval(timer); // setInterval 함수 종료
}
}, 2000);
14. setTimeout( 콜백함수, 시간 ) : 시간만큼 딜레이 이후 콜백함수 실행.
15.
사용자에게 숫자를 받아서 해당 숫자를 함수로 넘겨준 뒤, 해당 함수에서는 숫자가 양수 인지, 음수인지, 또는 0 인지 판단해서, 알림창을 통해 알려주는 프로그램
1. 숫자를 받는다.
2. 숫자일 경우에만 함수 실행.
3. 숫자가 양수, 음수, 0 조건에 따라 메세지를 다르게 출력한다.
inNan(매개변수) : 매개변수가 숫자인지 아닌지를 검사하는 함수.
const number = parseInt(prompt('숫자를 입력하세요'));
if(!isNaN(number)) { //숫자라면
isPositive(number);
}
function isPositive(number) {
if(number > 0) {
alert(`${number}는 양수입니다.`);
} else if (number < 0) {
alert(`${number}는 음수입니다.`);
} else {
alert(`${number}은 0입니다.`)
}
}