자바와 크게 다른 점이 없당!
▼ 빈배열 리터럴 생성
<script>
const city = [] // 빈배열 리터럴 생성
city[0] = "Seoul";
city[1] = "Busan";
city[2] = "Incheon";
function printArr(){
for(let i = 0; i<city.length; i++){
console.log(`city[${i}] = ${city[i]}`);
}
}// printArr
printArr();
</script>▼ 리터럴 배열 생성
<script>
const city = ["Seoul","Busan","Incheon"] // 리터럴
function printArr(){
for(let i = 0; i<city.length; i++){
console.log(`city[${i}] = ${city[i]}`);
}
}// printArr
printArr();
</script>
▼ 공백 리터럴이 들어갈 때 undefined
<script>
const city = ["Seoul", ,"Busan", ,"Incheon"] //사이사이 공백 리터럴
function printArr(){
for(let i = 0; i<city.length; i++){
console.log(`city[${i}] = ${city[i]}`);
}
}// printArr
printArr();
</script>
<!--
결과
city[0] = Seoul
city[1] = undefined
city[2] = Busan
city[3] = undefined
city[4] = Incheon
-->▼ NaN이란? 조금 이따가 설명 한다~ 값이 안나옴
<script>
const com=[95, 88, ,72 ,68, ,99 ,82 ,78, 85]; // 10명 중 8명의 점수만 입력
var getAvg;
function printAvg() {
let i, sum=0;
let n=com.length;
console.log(n , "명의 점수 입력");
for(i=0; i<com.length; i++) {
if(undefined===com[i]){
console.log(`${i}번째 학생 점수 미입력으로 제외합니다.`);
n-=1;
}else{sum+=com[i];}
}
return (sum/n); // 평균(mean)구하기 -과연 가능할까?
}
getAvg=printAvg(); // 함수 호출
console.log("평균 : <>" , getAvg );
/*
결과
10 '명의 점수 입력'
평균 : <> NaN
*/
</script>▼ founction을 만드는 법 그리고 trace레벨 보기
<script>
function printMsg(name, age){
console.clear();
console.trace(`printMsg(${name},${age})`);
//trace로 찍어주면 trace level을 보여준다.
}
printMsg(1,1);
</script>
<button onclick="printMsg(홍길동,12)" type="button"> 나이를 알고싶느냐?</button>▼ 함수와 함수표현식의 구분!?
<script>
var text1 = "함수 선언 전 호출 에러";
var text2 = "함수 선언 후 호출만 가능";
//"함수" 가 "함수표현식"으로 선언 및 대입 될 때에는,
// 이전에 가능했었던, 함수의 호이스팅 효과를 낼 수가 없음 (***)
// printMsg(text1); // 함수 선언 전 호출 에러 (Hoisting 불가)
//하나의 식을 표현하는 식을 함수표현식이라 함
//함수가 변수의 값으로 대입될 수 있다.
// 함수 표현식으로 변수에 대입 (******) => 이래서 1급 객체라고 함!!
let printMsg = function (msg){
console.debug(`printMsg(${msg} invoked.)`);
}// 익명 함수/함수표현식 -> 대입 -> 1급 객체
// 함수표현식 != 함수선언문
printMsg(text2); //함수 선언 후 호출 가능
</script>
▼ 함수와 함수표현식이름이 같을 때
<script>
// 얘가 호출된다
var printMsg = function(msg) { // 무명 함수 선언
console.log("무명 함수 : " , msg);
}
function printMsg(msg){ // 기본 함수 선언
console.log("기본 함수 : " , msg );
}
printMsg("호출되었습니다."); // 함수 호출
</script>
▼ 함수와 람다식이름이 같을 때
<script>
function printMsg(msg){
console.log("메롱",msg);
}
var printMsg = msg => console.log(msg); // 함수표현식은 얼마든지, ES6이상에서 소개된, 화살표 함수(arrow function)로
// 대체가능 ==> 이것이 곧 자바언어의 람다식과 동일
printMsg(1);
// 람다가 출력된다.
</script>
▼ 변수선언을 어떻게 하면 좋을지랑 해당 숫자까지의 합을 구하는 함수
<script>
// 전역변수는 var 변수로 명확하게 표현
var result; // undefined : 변수가 선언만 되고, 초기값이 없는 상태를 의미
function add(name, n){
console.log(`${name} 학생이 1부터 ${n} 까지 덧셈 수행`);
let sum = 0;
// 모든 변수를 거의 let과 const 위주로 씀
// 지역변수로 사용하기 때문에 let 변수 사용
for(let i=1; i<=n; i++){
sum += i;
} // classical for
return sum;
} //add
result=add('홍길동',10);
console.log(`${result} 결과요`);
result=add('홍영희',100);
console.log(`${result} 결과요`);
</script>
▼ 함수는 변수에 대입하는 R value 에 할당 가능
<script>
// 이름이 있는 함수
function add(x, y) { // 완벽한 함수 선언문 -> 1급객체 : 미리 메모리에 객체로 생성
return x+y;
} // add
// 함수의 1급 객체의성질: 함수를 변수에 대입 가능하다.
// 함수표현식 뿐만 아니라 정상적인 기본 함수도 가능!
const calSum=add; // 함수를 변수에 할당
const addUp=add; // 함수를 변수에 할당
document.write("결과 값 : " + calSum(5, 10) + "<br>");
document.write("결과 값 : " + addUp(3, 20) + "<br>");
</script>
▼ 함수의 오버로딩 방식에 대해 / 그리고 NaN에 대해
<script>
// 과연 JS언어도, 함수의 overloading 을 지원하는가!?
function add() {
let sum=1;
return sum;
}
function add(x) {
let sum=x+1;
return sum;
}
function add(x, y) {
let sum=x+y;
return sum;
}
function add(x, y, z) {
let sum=x+y+z;
return sum;
}
var r0=add(); //오버라이딩 된 메소드가 불러지면서 대입이 다 안되었다 값이 NaN
var r1=add(1); //오버라이딩 된 메소드가 불러지면서 대입이 다 안되었다 값이 NaN
var r2=add(2, 3); //오버라이딩 된 메소드가 불러지면서 대입이 다 안되었다 값이 NaN
var r3=add(4, 5 ,6); // 최종 불려진 메소드로 값이 형성
var r4=add(7, 8, 9, 10); // 7,8,9까지만 가지고 값이 형성
//단 코딩 할 시에 변수값이 많아 리턴이 되면 좋은 것일까?
// 나는 그렇지 않다고 생각한다.
// NaN = 값이 아예 없는 상태 / Not-A-Number(숫자가 아님)
document.write("함수 호출 인자 없음 : " + r0 + "<p/>");
document.write("함수 호출 인자 부족 : " + r1 + "<p/>");
document.write("함수 호출 인자 부족 : " + r2 + "<p/>");
document.write("정상적인 함수 호출 : " + r3 + "<p/>");
document.write("7, 8, 9만 인자값으로 적용 : " + r4 + "<p/>");
</script>▼ 매개변수는 넘치면 선언된 자리까지만 읽어서 반응
<script>
function add(x, y, z) {
var num;
if(x===undefined){
sum = 0;
} else if (y===undefined){
sum = x;
} else if (z===undefined) {
sum = x+y;
} else{
sum = x+y+z;
}
return sum;
} // add
var r0=add();
var r1=add(1);
var r2=add(2, 3);
var r3=add(4, 5 ,6);
var r4=add(7, 8, 9, 10);
document.write("함수 호출 인자 없음 : " + r0 + "<p/>");
document.write("함수 호출 인자 부족 : " + r1 + "<p/>");
document.write("함수 호출 인자 부족 : " + r2 + "<p/>");
document.write("정상적인 함수 호출 : " + r3 + "<p/>");
document.write("7, 8, 9만 인자값으로 적용 : " + r4 + "<p/>");
</script>
<script>
function add(x,y,z){
// JS 함수 블록 내에서만 사용가능한 특수한 키워드가 있음: arguments (전달인자)
// arguments 는 배열이다!
console.log(arguments);
let sum=0;
// arguments = Arraylike (배열과 비슷하지만 배열은 아닌)개체라 forEach를 사용불가
// arguments.forEach(e=> sum+=e);
// for in 은 인덱스를 반환 / for of 는 값을 반환
for(let e of arguments){
sum+=e;
}
console.log(sum);
return sum;
}// add
add();
var r0=add();
var r1=add(1);
var r2=add(1, 2);
var r3=add(1, 2 ,3);
var r4=add(1, 2, 3, 4);
</script>
자바랑 다른점은 크게 없구나
일단 흐자