220810 - 자바스크립트 - 문법

자바스크립트 문법

• try, catch

•  

try {
    let num=20;
    printMessage(num);
    console.log('수행완료');
} catch (e) {
    console.log(e.name);
    console.log(e.message);
}
console.log('프로그램 종료');

//
ReferenceError
printMessage is not defined
프로그램 종료

 

=> 자바와 달리 예외 종류가 구체적으로 정의돼있지 않음

 

 

 

• 함수

•  

//선언적 함수
function message(data){
    console.log(data,'코로나 조심합니다');
}

//표현식 함수
const corona=function(){
    console.log('오늘의 코로나 발생 현황 1111');
}

//화살표 함수
const message2=(data)=>{
    console.log('금요일부터 %s까지 쉽니다',data);
}

corona();
message('모두');
message2('일요일');

//
오늘의 코로나 발생 현황 1111
모두 코로나 조심합니다
금요일부터 일요일까지 쉽니다

 

 

• 리턴값 있는 함수

function sum(a,b){
    const result=a+b;
    return result;
}
const value=sum(2,4);
console.log(value);

 

• 함수를 변수에 전달하기

function message(data){
    console.log(data,'코로나 조심합니다');
}
const msg=message;   //함수를 변수에 전달 (message 뒤 괄호 없으므로 함수 호출 X)

console.log(msg);  //[Function: message]
msg('아자아자');  //아자아자 코로나 조심합니다

 

 

• 문제 : forEach, bactic 이용해 학생들 점수에 따른 등급 출력

const students=[
    {name:'김철수',score:80},
    {name:'이영희',score:90},
    {name:'홍길동',score:60},
    {name:'박찬호',score:89},
    {name:'손흥민',score:46}
];

//등급 구하는 함수
const getDegree=(score)=>{
    switch(Math.floor(score/10)){
        case 10, 9:
            return 'A';
            break;
        case 8:
            return 'B';
            break;
        case 7:
            return 'C';
            break;
        case 6:
            return 'D';
            break;
        default:
            return 'F';
    }
}

//모든 학생들의 등급 출력
students.forEach((student)=>{
    const result=`${student.name} 성적 : ${getDegree(student.score)}`;
    console.log(result);
})

//
김철수 성적 : B
이영희 성적 : A
홍길동 성적 : D
박찬호 성적 : B
손흥민 성적 : F

 

 

 

• 화살표 함수

•  

const hello=()=> console.log('안녕하세요'); //중괄호 생략

const sum=(a,b)=> a+b; //return 생략

const hello2=name=>console.log(`${name}님 안녕하세요`); //파라미터 괄호 생략

 

 

• 문제 : 화살표 함수 이용해 이름, 총점 출력

=> 내답변

const students=[
    {name:'김철수',kor:80,eng:70,mat:87},
    {name:'이영희',kor:100,eng:98,mat:90},
    {name:'홍길동',kor:90,eng:56,mat:70}  
];

//총점 구하는 함수
const total = student => student.kor+student.eng+student.mat

//forEach 이용해 이름, 총점 출력
students.forEach((student) => {
    console.log(`${student.name} 점수 총합 : ${total(student)}`);
    }
);


=>예시답변

const students=[
    {name:'김철수',kor:80,eng:70,mat:87},
    {name:'이영희',kor:100,eng:98,mat:90},
    {name:'홍길동',kor:90,eng:56,mat:70}  
];

//총점 구하는 함수
const total = (k,e,m) => k+e+m;

//forEach 이용해 이름, 총점 출력
students.forEach((student) => {
    console.log(`${student.name} 점수 총합 : ${total(student.kor,student.eng,student.mat)}`);
    }
);

 

• callback 함수 : 다른 함수의 파라미터로 전달되어, 특정 이벤트 발생 시 호출되는 함수

const plus=(num1,num2)=>{
    return num1+num2;
}

const minus=(num1,num2)=>{
    return num1-num2;
}

const calc=(num1,num2,func)=>{ //파라미터로 함수 전달
    return func(num1,num2);
}

let p=plus;

console.log('plus 타입은 :',typeof plus);
console.log('p 타입은 :',typeof p);
console.log('두 수의 합=%d',p(20,30));
console.log('두 수의 합=%d',calc(40,30,minus)); //minus가 callback함수로 사용됨

//
plus 타입은 : function
p 타입은 : function
두 수의 합=50
두 수의 합=10

 

 

const sum=(num1,num2)=>num1+num2;
const print = result => console.log(`결과는 ${result}입니다`);

const sumAndPrint=(result,callback)=>{ //(값,함수)
    callback(result);
}

sumAndPrint(sum(20,30),print);  //print: callback 함수

//
결과는 50입니다

 

 

• 함수의 유효 범위 (scope)

• 전역 변수

let resultSubtract;
const subtract=(a,b)=>resultSubtract=a-b;
subtract(200,100);
console.log(resultSubtract); //100

함수 외부에 변수가 선언돼있으므로(전역변수) 함수 내부에서 계산된 결과가 전역변수로 전달됨

 

 

• 지역 변수

const multiply=(a,b)=>{
    let result=a*b;
    return result; //지역변수를 바깥으로 리턴하므로 오류 X
}
const r=multiply(10,10);
console.log(r) //100

const sum=(a,b)=>{let resultSum=a+b;} //리턴 없는 지역변수
sum(20,30);
console.log(resultSum); //오류

 

 

• 내장 객체

• Math.random

const dice=()=>Math.floor(Math.random()*6)+1;
console.log('주사위값 :',dice()); //1~6

//const makeRandom=()=>Math.floor(Math.random()*11)+30;
//console.log('30~40 난수값 :',makeRandom());

const makeRandom=(start,end)=>Math.floor(Math.random()*(end-start+1))+start;
console.log('30~40 난수값 :',makeRandom(30,40));  //30~40

 

 

※ Math 클래스 메소드
round (반올림)
ceil (올림)
floor (내림)
truc (버림)
pow (지수승)
sqrt (제곱근)
cbrt (세제곱근)
sign (사인값) => 양수 입력시 1 출력, 음수 입력시 -1 출력

 

 

• replace, split

const str='comffter';
const repStr=str.replace('ff','pu');  //replace(a,b) : a를 b로 대체
console.log(repStr);  //computer

const str2='(hello)';
const repStr2=str2.replace('(','{').replace(')','}');
console.log(repStr2);  //{hello}

const names='홍길동,이영희,김철수';
const na=names.split(',');  //split(a) : a 기준으로 나눠 배열화
console.log(na[0]);  //홍길동

const dateString='2022-08-10T19:36:20';
const today=dateString.split('T');
console.log('오늘 날짜: %s',today[0]);
console.log('현재 시간: %s',today[1]);

 

 

• Number : 문자열 -> 숫자

문자열 전체가 숫자로 구성되어야 함

 

cf. Integer.parse : 문자->정수 / 문자열 안에 숫자+문자 -> 숫자 부분만 따로 가져옴

 

const products=[
    {no:1, name:'티셔츠',price:'30000'},
    {no:2, name:'청바지',price:'40000'},
    {no:3, name:'반바지',price:'25000'},
    {no:4, name:'신발',price:'120000'},
    {no:5, name:'팔찌',price:'14000'},
];

//매출 총판매액
let total=0;
products.forEach(product => {
    total+=Number(product.price);  //문자열->숫자 변환
});

console.log(total);

 

 

 

• 정규 표현식

참고:

https://hamait.tistory.com/342

정규표현식 (Regex) 정리

 

 

const str="<h1>안녕하세요</h1>";
const result=str.replace(/<h1>/g,'').replace(/<\/h1>/g,'');  //슬래쉬 안 문자 선택 //g: 전역검색
console.log(result);  //안녕하세요

const str2='<h1>특별가 - </h1><h2>55,000원</h2>';
const result2=str2.replace(/<..>/g,'').replace(/<...>/g,'');  //문자 2개 //문자 3개
console.log(result2); //특별가 - 55,000원

const str3='<div>특별가 - <h2>55,000원</h2></div>';
const result3=str3.replace(/<.{0,4}>/g,'');  //문자 0~4개
console.log(result3);  //특별가 - 55,000원

const str4='/정상가/- 4000원 (특별,할인가- 2300원)';
const result4=str4.replace(/[\/()\-]/g,'');  // / or ( or ) or - 선택
console.log(result4); //정상가 4000원 특별,할인가 2300원

const text='hello my name is gildong';
const matched=text.match(/[a-i]{1,2}/g); 
//match() : 파라미터와 일치하는 문자열 추출 (두 개 이상 시 배열화) //a~i 사이 1~2글자 문자 선택
console.log(matched);  
//[
  'he', 'a',  'e',
  'i',  'gi', 'd',
  'g'
]