반복문(for , while)
일반적으로 반복 횟수가 정해져 있으면 for문 , 반복횟수가 없고 반복 조건이 있는 경우에 while문을 사용한다고
하지만 정해진 것은 아니고 모든 for문과 while문은 서로 바꿔서 작성 가능하다.
그리고 for문은 아래와 같이 작성도 가능하다
for( ; ; ){ } <-> while(){ }
for(;"이것은 무한 루프";){
// while문과 동일
}무한루프문을 작성시 항상 빠져나오는 종료 조건을 먼저 생각해야 한다!
아래 코드는 작동을 할까 안할까?
var i = 1;
for(;"이것은 무한 루프";){
if(i==5) continue; // ?? -> 무한루프i==5에서 for문 처음으로 다시 진입한다
i++;
if(i==10){
console.log("종료야");
break; // 종료
}
}
alert("i="+i); // 10!i값이 5이면 처음의 for문으로 다시 진입하고 for문이 반복될 때마다 i의 값을 1씩 증가시킨다
i의 값이 10이면 "종료야" 라는 문자열이 출력되고 break로 인해 반복문을 빠져나가야 하지만
i의 값을 증가시키면서 i값이 5가 되면 continue로 인해 다음 라인으로 진행하지 못하고,
i의 값이 5인채로 무한반복을 하게 된다
아래와 같이 i++의 위치를 바꿔보자
var i = 1;
for(;"이것은 무한 루프";){
i++;
if(i==5) continue; // ?? -> 무한루프i==5에서 for문 처음으로 다시 진입한다
if(i==10){
console.log("종료야");
break; // 종료
}
}
alert("i="+i); // 10!i의 값이 10 되면 반복문을 빠져나간다!
break vs return
break는 해당 반복문 만을 종료하고(빠져나가고) return의 경우에는 반복문을 빠져나가기도 하지만
메소드에서 사용시에는 메소드 자체를 종료시키는 역할도 한다
//연산자.html
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
var i = 10;
//var ck1 = i++;
var ck1 = i; // 10
i = i + 1; // 11
//var ck2 = ++i;
i = i + 1; // 12
var ck2 = i; // 12
alert("ck1 : " + ck1); // 10
alert("ck2 : " + ck2); // 12
// or -> || , and -> &&
// 성능상의 우위를 위해서 보통은 아래처럼 작성한다
// 참일 가능성이 높은 것 || 참일 가능성이 낮은 것(참이면 뒷부분을 실행하지 않기때문에)
// 거짓일 가능성이 높은 것 && 거짓일 가능성이 낮은 것
// 연산 우선 순위 외우는건 정신나간짓이니 ()를 잘 활용하자
// ||를 이용한 초기화
function fCk(pArg1 , pArg2){
var ck1 = pArg1 || "메롱"; // false 이면 메롱
var ck2 = pArg2 || "안메롱";// false 이면 안메롱
console.log("ck1" , ck1); // ?? -> undifined
console.log("ck2" , ck2); // ?? -> undifined
}
fCk(); // undifined -> false 메롱 , 안메롱
fCk("은진" , "재훈"); //
</script>
아래 위는 같은 결과
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// var i = 10;
// //var ck1 = i++;
// var ck1 = i; // 10
// i = i + 1; // 11
// //var ck2 = ++i;
// i = i + 1; // 12
// var ck2 = i; // 12
// alert("ck1 : " + ck1); // 10
// alert("ck2 : " + ck2); // 12
// or -> || , and -> &&
// 성능상의 우위를 위해서 보통은 아래처럼 작성한다
// 참일 가능성이 높은 것 || 참일 가능성이 낮은 것(참이면 뒷부분을 실행하지 않기때문에)
// 거짓일 가능성이 높은 것 && 거짓일 가능성이 낮은 것
// 연산 우선 순위 외우는건 정신나간짓이니 ()를 잘 활용하자
// ||를 이용한 초기화
function fCk(pArg1="메롱" , pArg2="안메롱"){ // 매개변수에 초기값 할당
console.log("pArg1" , pArg1); // ?? -> undifined
console.log("pArg2" , pArg2); // ?? -> undifined
}
fCk(); // undifined -> false 메롱 , 안메롱
fCk("은진" , "재훈"); //
</script>
연산자.html
한쪽은 진실만을 얘기하고 한쪽은 거짓만을 얘기할때
천국/지옥을 가는 두가지 길이 있다 이때 한번의 질문만으로 천국으로 가는 길을 찾기 위해선 어떻게 질문해야 하는가?
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수는 자바스크립트의 뿌리 같은 거라 , 중요도를 차마 이야기 할 수 없다!
// DRY(Do not Repeat Yourself) 원칙 , 반복적인건 함수를 만들어서 사용
// KISS(keep it simple stupid) 간단하게 해 바보야
// Single Responsibility
//
// 정식 함수 선언법
function 설국현(){
}
// 호출
설국현();
</script>
실행시 undifined가 뜨는 이유? 함수에 return값이 선언되지 않아서
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수는 자바스크립트의 뿌리 같은 거라 , 중요도를 차마 이야기 할 수 없다!
// DRY(Do not Repeat Yourself) 원칙 , 반복적인건 함수를 만들어서 사용
// KISS(keep it simple stupid) 간단하게 해 바보야
// Single Responsibility
// 정식 함수 선언법
var isJiwon = "지원";
function 설국현(){
/*
if(isJiwon=="지원"){
alert("나 지원");
} else {
alert("나 안지원");
}
*/
// return "양손 연주 달인 양연주"; // 생략되어있음!
// alert("보일까 안보일까?"); // 함수가 종료되어서 실행 되지 않는다
if(isJiwon=="지원"){
alert("나 지원");
return; // 함수 종료
}
alert("나 안지원");
}
// 호출
console.log("체크 : " , 설국현());
</script>
함수2.html
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 공식 함수 선언법
function roze(){
return "로제";
};
// expression(표현식)을 이용한 함수 선언(할당이라고 보는게 편리)
var jenni = function(){
return "제니";
};
// 아래처럼 작성하는걸 선호한다 왜? -> 있어보인다!
alert(roze())
alert(jenni());
</script>
아래처럼 작성시 뜨는 결과값과 그렇게 뜨는 이유는?
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
alert(roze()) // 성공!
alert(jenni()); // 실패!
// 공식 함수 선언문법
function roze(){
return "로제";
};
// expression(표현식)을 이용한 함수 선언(할당이라고 보는게 편리)
// 아래처럼 작성하는걸 선호한다 왜? -> 있어보인다!
var jenni = function(){
return "제니";
};
</script>
인터프리터 언어 -> 한줄해석 , 한줄 실행
컴파일 언어 -> 전체소스를 기계어로 해석 -> 한번에 실행
호이스팅(Hoisting)
-> 함수의 선언부만 가장 위로 끌어올려진것 같은 효과(최적화작업 , 변화된 인터프리터)
표현식과 공식선언법의 차이점은?
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
/*
function(){ // 경고 이유? 함수선언시에는 반드시 함수 식별자를 선언 해야한다!
alert("메롱");
}
*/
/*
(function(){ // 이렇게 작성가능 , 익명함수
alert("이런걸 즉각 실행함수라고 부른다");
})("매개변수도 똑같이 넘길 수 있다");
*/
// 즉각실행함수
// 라이브러리를 만들 때 사용되는데 , 초기화 작업 및 중요코드 블록화 , 메모리 절감등을 이유로 사용
(function(para){ // 이렇게 작성가능 , 익명함수
alert(para);
alert("이런걸 즉각 실행함수라고 부른다");
})("매개변수도 똑같이 넘길 수 있다");
/*
alert(roze()) // 성공! -> 왜?? 호이스팅(hoisting , 위로 올리기) , 단지 선언부만!(최적화)
alert(jenni()); // 실패!
// 공식 함수 선언문법
function roze(){
return "로제";
};
var geniusSomang = 1 + 3 + 6 - 9 * 3; // 연산의 결과가 1개로 최종 결정
// expression(표현식)을 이용한 함수 선언(할당이라고 보는게 편리)
// 해외에서는 아래처럼 작성하는걸 선호한다 왜? -> 있어보인다!
var jenni = function(){
return "제니";
};
*/
</script>
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
/*
function(){ // 경고 이유? 함수선언시에는 반드시 함수 식별자를 선언 해야한다!
alert("메롱");
}
*/
/*
(function(){ // 이렇게 작성가능 , 익명함수
alert("이런걸 즉각 실행함수라고 부른다");
})("매개변수도 똑같이 넘길 수 있다");
*/
// 즉각실행함수
// 라이브러리를 만들 때 사용되는데 , 초기화 작업 및 중요코드 블록화 , 메모리 절감등을 이유로 사용
// !와 ()로 사용하는것을 추천(+ , -도 가능하지만 사용하지 않는다)
!function(para){ // 이렇게도 작성가능 , 익명함수
alert(para);
alert("이런걸 즉각 실행함수라고 부른다");
}("매개변수도 똑같이 넘길 수 있다");
/*
alert(roze()) // 성공! -> 왜?? 호이스팅(hoisting , 위로 올리기) , 단지 선언부만!(최적화)
alert(jenni()); // 실패!
// 공식 함수 선언문법
function roze(){
return "로제";
};
var geniusSomang = 1 + 3 + 6 - 9 * 3; // 연산의 결과가 1개로 최종 결정
// expression(표현식)을 이용한 함수 선언(할당이라고 보는게 편리)
// 해외에서는 아래처럼 작성하는걸 선호한다 왜? -> 있어보인다!
var jenni = function(){
return "제니";
};
*/
</script>
함수3.html
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수의 매개변수는 타입에 제약사항이 있다? 없다!
// 함수의 return 하는 타입에 제약사항이 있다? 없다!
function fCk(pArg){
alert(typeof(pArg));
}
fCk(272);
fCk("메롱");
fCk(["화"],["이"],["팅"]);
fCk({name:"재형"});
</script>
Ajax의 success도 callback함수이다!
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수의 매개변수는 타입에 제약사항이 있다? 없다!
// 함수의 return 하는 타입에 제약사항이 있다? 없다!
// 콜백함수가 보통 비동기에서 결과 처리함수로 많이 사용되다보니
// 일부 사람들이 콜백함수를 비동기라고 하는데 , 콜백함수 자체는 비동기와 관련이 없다
function fCk(pArg){ // pArg = function(){ alert("나 함수야")};
// alert(typeof(pArg));
// callback 함수를 많이 헷갈려 한다 , 심지어 전공자도!(보통 최장 3일?)
pArg(); // ?? -> "나 함수야";
}
/*
fCk(272);
fCk("메롱");
fCk(["화"],["이"],["팅"]);
fCk({name:"재형"});
*/
fCk(function(){
// 실행시 결과?! fCk() -> pArg -> pArg() -> 단순히 뒤에 호출된다고 해서 callback!
alert("나 함수야");
})
</script>
콜백함수와 비동기처리는 관련 없다!
콜백함수에서 가장 많이 쓰이는 스타일?
콜백스타일.html 생성
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 간단한 배열 흉내내기
var junsukArr = {
length : 0,
push:function(pArg){
this[this.length] = pArg;
this.length++;
}
}
</script>
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 간단한 배열 흉내내기
var junsukArr = {
length : 0,
push:function(pArg){
this[this.length] = pArg;
this.length++;
}
}
junsukArr.forEach = function(pCallback){
for(var i=0 ; i < this.length ; i++){
// console.log("체크 : " , i ,this[i]);
// 개별처리 함수호출 , 상황에 따라 다른 함수가 오도록 , 그렇다면 매개변수 처리
pCallback(i , this[i]); // 매개변수로 받은 함수 호출
}
}
junsukArr.push("건석");
junsukArr.push("초원");
junsukArr.push("재형");
junsukArr.push("주희");
junsukArr.forEach(function(pIndex , pValue){
// console.log("index : " , pIndex , "값 : " , pValue);
if(pIndex == 1){
alert("index 1만 처리하고싶을때 그값 " + pValue);
}
});
junsukArr.forEach(function(pIndex , pValue){
// console.log("index : " , pIndex , "값 : " , pValue);
if(pValue == "주희"){
alert("안녕 " + pValue);
}
});
// console.log("체크 : " , junsukArr);
</script>
함수리턴.html 생성
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수의 return 타입에도 제약 사항이 없다
var cal = function(pOp){
if(pOp == "+"){
return function(p1, p2){
return p1 + p2;
}
}
if(pOp == "-"){
return function(p1, p2){
return p1 - p2;
}
}
}
//var minus = cal("-")(7,3);
alert(cal("+")(3,cal("-")(7,3)));
//->
var minus = cal("-")(7,3);
alert(cal("+")(3,minus));
</script>
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 함수의 return 타입에도 제약 사항이 없다
// 테스트
function fTest(){
return {
'+': function(p1, p2){ return p1+p2; },
'-': function(p1, p2){ return p1-p2; },
'*': function(p1, p2){ return p1*p2; },
'/': function(p1, p2){ return p1/p2; },
}
}
// 위 fTest함수의 리턴값을 이용해서 7 + 7을 표현하면?
console.log(fTest());
console.log(fTest()['-']);
console.log(fTest()['+'](7,7));
var cal = function(pOp){
if(pOp == "+"){
return function(p1, p2){
return p1 + p2;
}
}
if(pOp == "-"){
return function(p1, p2){
return p1 - p2;
}
}
}
var minus = cal("-")(7,3);
alert(cal("+")(3,minus));
</script>
화살표함수.html
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// Arrow function(화살표함수) , 나중에 추가됨
// 자바 람다와 관련없음! (의미가 다르다) , 겉모습만 비슷
// 별거없는데 별거 있음(this 관련해서만 주의!)
const somang = function(pName){
return pName + "안녕";
}
const somang2 = (pName) => {
return pName + "안녕2";
}
// 위 somang2는 매개변수가 1개라서 () 생략 가능 ↓↓
const somang3 = pName => {
return pName + " 하이";
}
// 최종모습 기억하기(요새 유행하는 스타일), 위 somang3는 return문이 1개라서 {} 생략 가능 ↓↓
const somamg4 = pName => pName + " 하이"; // 연봉 올리기?!
alert(somamg4("건석 건석"));
// alert(somang("소망"));
// alert(somang2("소망2"));
// 1개만 기억 , 매개변수가 1개면 () 생략 가능
// {} 안에 return문 1개밖에 없다면 {}도 생략 가능
</script>
this에대한고찰.html 생
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// this , 이것 사물대명사(가리키는거)
var merong = "의양 의기양양"; // 실제 window객체에 merong 속성을 추가하는 것과 같음
// alert(window.merong);
function fCheck(){ // 실제 window객체에 fCheck 함수(메소드)를 추가하는 것과 같음
console.log("this : " , this); // ?? -> window 객체의 속성값이 나온다
}
// fCheck(); //<- fCheck(); 앞에 window가 생략되어있다 -> window.fCheck();와 동일
var jhh = {name:"전 희한하지 않아요 희환해요"};
jhh.check = fCheck; // 문법적으로 문제가 있는가? -> 없다! 복사 or 참조? -> 참조(원시타입 아니면 전부 참조)
jhh.check(); // this -> jhh
// 요따구로 this가 바뀌는 것에 대해 기존 개발자들의 반발! 이해는 되나 매우 불편하다
// 술먹고 다음날엔 아예 안보인다
</script>
this제어.html
