중첩함수란?
-
함수안에 함수가 포함되는 형태
-
함수 안에 함수가 다시 포함되어 , 감추고 싶은 기능을 구현한다•
-
Javascript 에는 접근 제한자가 없기 때문에 기능을 감추고 싶다면 ,함수 안의 함수로 구현해야 한다
함수정의 방식
//함수 정의 방법
function print(name){
console.log(name, "님, 안녕하세요?")
}
print("자바스크립트")
//함수 정의 방법 2(함수표현식)
//함수표현식은 변수의 이름이 함수의 이름이다
var print2=function (name){
console.log(name,"안녕하세요? 이문장은 익명하수로 호출되었습니다.")
}
print2("html")
// 함수 정의방법 3(함수 표현식 + 일반함수)
// var print3 = function hello(name){
// console.log(name+"님, 안녕하세요? 이문장은 재귀 호출되었습니다.")
// }
// print3("css")
//함수 정의방법4(즉시실행 함수)
// 즉시 실행 함수는 이전 명령어에 ;이 붙어있어야 한다.
;(function(name){
console.log(name+ "님, 안녕하세요? 즉시실행 함수 입니다.")
})("React")함수 - 콜백
처리 후 작업
- 함수에서 특정 작업이 완료되었을 때 , 추가로 실행해야 하는 작업을 기술한 함수
- 함수가 종료되는 시점이 불분명할 때 , 콜백을 사용한다
- 예 > Ajax 와 같은 Network 작업
- 함수가 파라미터로 전달된다
function printsum(startNum,
endNum,
callbackFunction){
var sum=0;
for(var i=startNum; i<endNum +1; i++){
sum+=i;
}
console.log(sum)
callbackFunction();
}
var completeCalc = function(){
console.log("계산이 완료되었습니다.")
}
printsum(1, 1000, completeCalc)
----------------------------------------
<script type="text/javascript">
function getCalcResult(start, end, calcCallback){
console.log("계산을 시작합니다.")
var calcResult=calcCallback(start, end)
console.log("계산이 완료되었습니다.")
return calcResult
}
var sumAll = function(start,end){
var sum=0
for(var i= start; i<=end; i++){
sum+=i
}
return sum
}
var mulAll = function(start,end){
var mul=1
for(var i=start; i<=end; i++){
mul*=i
}
return mul
}
var result=getCalcResult(1,100, sumAll)
console.log(result)
var result2 = getCalcResult(1,100,mulAll)
console.log(result2)
</script>
------------------------------------
콜백3 - 실무형 코드
<title>콜백3-실무코드</title>
<script type="text/javascript">
var getCalcResult= function (start, end, calcCallback){
console.log("계산을 시작합니다.")
var calcResult=calcCallback(start, end)
console.log("계산이 완료되었습니다.")
return calcResult
}
var result=getCalcResult(1,100, function(start,end){
var sum=0
for(var i= start; i<=end; i++){
sum+=i
}
return sum
}
)
console.log(result)
var result2 = getCalcResult(1,100,function(start,end){
var mul=1
for(var i=start; i<=end; i++){
mul*=i
}
return mul}
)
console.log(result2)
</script>
--------------------------------
클릭했을때 경고창 나오게 하기
//브라우저에 html 문서의 로딩이 다 끝나면 할당된 함수를 실행한다.
window.onload = function(){
//ID가 click_btn 인 것을 클릭하면 경고창을 띄워주는 코드
//1.html 문서에서 ID가 click_btn인 것을 조회해서 가져온다.
// 브라우저에 노출되는 문서의 객체 = document
var btn=document.querySelector("#click_btn")
console.log(btn)
//2. 버튼 객체세 click 이벤트를 callback으로 전달한다.
btn.addEventListener("click", function(){
alert("클릭했습니다!")
})
//3. 버튼을 클릭해본다.
btn.click()
}
</script>
변수의 영역
다른 언어에서 변수의 영역
Javascript 에서 변수의 영역
- Javascript 는 function 기반의 영역을 사용함
- function 내부에서 선언된 변수는 function 의 모든 영역에서 사용가능하다
내장함수
w스쿨에 있는 자바 내장함수
alert, confirm은 디버깅할때 말고 잘 안쓴다
<script type="text/javascript">
// 브라우저에 html 문서의 로딩이 다 끝났다면 할당된 함수를 실행
window.onload = function(){
var alertBtn=document.querySelector("#alert_btn")
var conFirmBtn=document.querySelector("#confirm_btn")
var contentDiv=document.querySelector("#content")
alertBtn.addEventListener("click",function(){
alert("클릭했습니다. 경고창입니다.")
})
conFirmBtn.addEventListener("click",function(){
var isConfirm= confirm("#content에 데이터를 추가할까요?")
if(isConfirm){
// 확인버튼을 클릭
// contentDiv.innerText="확인창을 클릭"
contentDiv.innerHTML="<h1>확인클릭</h1>"
}
else{
// 취소버튼을 클릭
contentDiv.innerText="취소를 클릭"
contentDiv.innerHTML="<h1>취소클릭</h1>"
}
})
}
</script>
</head>
<body>
<button id ="alert_btn">경고창</button>
<button id="confirm_btn">확인창</button>
<div id="content">
</div>객체 - 리터럴
Javascript 에서 가장 기본적인 객체 생성 방법
var object = {}; // 객체 생성
object.name = “Jang Min Chang”; // object 객체에 name field 추가
object.job = “ Developer”; // object 객체에 job field 추가
Javascript 에서 가장 기본적인 객체 생성 방법
- 멤버변수 / 함수를 선언할 수 있다
객체 리터럴1
<title>객체 리터럴</title>
<script type="text/javascript">
//객체를 생성.
var member ={} // 비어있는 객체
//객체에 변수명 및 값을 할당.
member.id= "gwang"
member.email="dnjs@dns"
member.hello=function(){
alert("안녕하세요?")
}
member.login=function(){
alert(member.id)
}
member.part=["Common Part", "Backend Part"
,"DB Part", "Front Part"]
member.address ={
city:"부산",
gu:"남구"
}
console.log(member)
console.dir(member)
member.hello()
member.login()
</script>객체 - 리터럴2
⭐진짜진짜 많이씀⭐
<title>객체 - 리터럴</title>
<script type="text/javascript">
var member={
id: "Gwang",
email:"dnjs@snjs",
hello:function(){
alert("Hi")
},
login:function(){
alert(member.id)
},
part:["Common", "backend", "DB","Front"],
address:{
city:"Busan",
gu:"남구"
},
item:[{
name:"Notebook",
brand:"HANSUNG"
},{
name:"keyboard",
brand:"COX"
},{
name:"Vertical Mouse",
brand:"Logitec"
}]
}
console.log(member.id)
console.log(member.email)
console.log(member.part)
console.log(member.part[0])
console.log(member.part[2])
console.log(member.address)
console.log(member.address.city)
console.log(member.address.gu)
console.log(member.item)
console.log(member.item[1])
console.log(member.item[1].name)
console.log(member.item[1].brand)
</script>객체 리터럴 파라미터
<title>객체 - 리터럴 함수 파라미터</title>
<script type="text/javascript">
//일반 파라미터
function calc(numOne, numTwo,oper){
if(oper =="+"){
return numOne +numTwo
}else if(oper =="-"){
return numOne - numTwo
}else if(oper =="*"){
return numOne * numTwo
}else{
return numOne / numTwo
}
}
//객체 파라미터
//2번째 방법이 더 좋은이유
// 1.각 파라미터가 뭔지 알 수 있어서 더 좋다
// 2.파라미터의 순서가 나도 모르게 바뀔수 있어서
function calcObject(parms){
if(parms.oper =="+"){
return parms.numOne +parms.numTwo
}else if(parms.oper =="-"){
return parms.numOne - parms.numTwo
}else if(parms.oper =="*"){
return parms.numOne * parms.numTwo
}else{
return parms.numOne / parms.numTwo
}
}
var result1=calc(1,2,"+")
console.log(result1)
var result2 = calcObject({
numOne: 10,
numTwo: 20,
oper: "*"
})
console.log(result2)
</script>객체 -리터럴 - 반환
<title>객체 -리터럴 - 반환</title>
<script type="text/javascript">
//숫자 두개를 주면 모든 사칙연산의 결과를 반환하는 함수
function getCalcResult(numOne,numTwo){
return{
add:numOne+numTwo,
sub:numOne-numTwo,
mul:numOne*numTwo,
div:numOne/numTwo,
mod:numOne%numTwo
}
}
var result= getCalcResult(10,20)
console.log(result)
//add만 출력하고 싶으면
console.log(result.add)
var result= getCalcResult(10,20)
console.log(result)
// 객체나 함수는 alert로 사용할 수 없다.
//[object Object] 이런식으로 나온다.
alert(result)
</script>
