function commentDel(cidx) { // 버튼을 눌렀을때 삭제 기능
let ans = confirm("삭제하시겠습니까?");
if(ans == true) {
$.ajax({ // ajax 형식
type : "get", //전송방식 겟방식
url : "<%=request.getContextPath()%>/comment/"+cidx+"/commentDeleteAction.aws",
dataType : "json", // json타입은 문서에서 {"키값" : "value값","키값2" : "value값2"}
success : function(result){ //결과가 넘어와서 성공했을 때 받는 영역
//alert("전송 성공 테스트");
//alert(+result.value);
$.boardCommentList();
},
error : function() { // 결과가 실패했을 때 받는 영역
alert("전송 실패1");
}
});
}
return;
}이 함수는 function이 앞에 있는데
$.boardCommentList = function(){ // 보드코멘트리스트 라는 이름의 함수다.
let block = $("#block").val();
$.ajax({ // ajax 형식
type : "get", //전송방식 겟방식
url : "<%=request.getContextPath()%>/comment/<%=bv.getBidx()%>/"+block+"/commentList.aws",
dataType : "json", // json타입은 문서에서 {"키값" : "value값","키값2" : "value값2"}
success : function(result){ //결과가 넘어와서 성공했을 때 받는 영역
var strTr = "";왜 이 함수의 function은 뒤에 있는거야?
이 질문에서 언급한 두 가지 함수는 둘 다 JavaScript에서 함수 선언의 다른 형태를 사용하고 있습니다. 기본적으로 두 방식은 함수 선언 방식이 다를 뿐, 실행 결과는 비슷합니다.
- 기존 방식: 일반 함수 선언
function commentDel(cidx) { // 버튼을 눌렀을 때 삭제 기능
let ans = confirm("삭제하시겠습니까?");
if (ans == true) {
$.ajax({
type: "get",
url: "<%=request.getContextPath()%>/comment/" + cidx + "/commentDeleteAction.aws",
dataType: "json",
success: function(result) {
$.boardCommentList();
},
error: function() {
alert("전송 실패1");
}
});
}
return;
}이 방식은 일반적인 함수 선언 방식입니다. function commentDel(cidx)처럼 함수 이름을 먼저 정의한 후, 함수 내부의 구현을 작성합니다. 이 방식은 호이스팅(hoisting)이 적용되어 함수 선언이 스크립트의 최상단으로 끌어올려지는 특성을 가집니다. 즉, 이 함수는 코드 내에서 정의되기 전에 호출이 가능하게 됩니다.
- jQuery 스타일의 함수 정의 (익명 함수)
$.boardCommentList = function() { // 보드코멘트리스트 라는 이름의 함수다.
let block = $("#block").val();
$.ajax({
type: "get",
url: "<%=request.getContextPath()%>/comment/<%=bv.getBidx()%>/" + block + "/commentList.aws",
dataType: "json",
success: function(result) {
var strTr = "";
}
});
};이 방식은 익명 함수 표현식(anonymous function expression)을 사용한 방법입니다. $.boardCommentList는 함수 이름이 아닌 변수처럼 사용됩니다. 여기서 $.boardCommentList는 사실 익명 함수를 할당하는 것입니다. 즉, 이 함수는 선언되지 않은 익명 함수이기 때문에 호이스팅이 적용되지 않으며, 함수 호출은 해당 선언 이후에만 가능합니다.
요약
일반 함수 선언 (function name() {}): 함수가 선언되자마자 실행 가능한 상태가 되며, 호이스팅 때문에 함수 정의 전에 호출해도 동작합니다.
익명 함수 표현식 (var name = function() {}): 변수처럼 함수가 선언되고 할당되며, 함수가 할당된 이후에만 호출이 가능합니다. 호이스팅되지 않습니다.
따라서 $.boardCommentList는 익명 함수 표현식으로 정의된 함수이고, commentDel은 기본적인 함수 선언입니다.
호이스팅(hoisting)
이게 뭔데?
호이스팅(Hoisting)은 자바스크립트에서 변수와 함수의 선언이 코드 실행 전에 자동으로 끌어올려지는 현상입니다. 이 개념을 이해하기 위해, 자바스크립트에서 코드가 실행되는 방식과 호이스팅이 어떻게 적용되는지 살펴볼 필요가 있습니다.
호이스팅의 동작 방식
변수 호이스팅:
자바스크립트에서는 var로 선언된 변수들이 함수나 코드 블록의 맨 위로 끌어올려집니다.
그러나 변수의 값은 끌어올려지지 않고 선언만 끌어올려집니다.
예를 들어:
console.log(a); // undefined
var a = 5;
console.log(a); // 5위 코드에서 a는 선언만 끌어올려지고, 값은 그대로 실행 시점에 할당됩니다. 그래서 첫 번째 console.log(a)는 undefined를 출력하고, 두 번째 console.log(a)는 5를 출력합니다.
함수 호이스팅:
일반 함수 선언(function으로 정의된 함수)은 선언과 정의가 모두 끌어올려집니다.
즉, 함수가 선언되기 전에 호출이 가능합니다.
예를 들어:
greet(); // "Hello!"
function greet() {
console.log("Hello!");
}여기서 greet() 함수는 코드에서 선언되기 전에 호출되었지만, 정상적으로 작동합니다. 이는 함수 선언이 호이스팅되기 때문입니다.
함수 표현식 (익명 함수):
반면, 함수 표현식(var나 let, const로 변수를 선언하고 그 변수에 함수를 할당하는 방식)에서는 함수 선언만 호이스팅되고, 함수 정의는 호이스팅되지 않습니다.
그래서 해당 변수에 함수를 할당하기 전에 호출하면 에러가 발생합니다.
예를 들어:
myFunction(); // TypeError: myFunction is not a function
var myFunction = function() {
console.log("Hello!");
};이 코드에서는 myFunction()을 선언 전에 호출하려고 했지만, 호이스팅의 특성 때문에 변수만 끌어올려지고, 함수는 아직 정의되지 않아서 TypeError가 발생합니다.
요약
변수 호이스팅: var로 선언한 변수는 선언이 끌어올려지지만, 값은 끌어올려지지 않습니다.
함수 호이스팅: function으로 선언한 함수는 선언과 정의가 모두 끌어올려져 함수 호출이 가능합니다.
함수 표현식 호이스팅: 함수 표현식으로 정의된 함수는 변수 선언만 호이스팅되고, 함수 정의는 실행 시점에서 할당되므로 그 전에 호출할 수 없습니다.
호이스팅은 자바스크립트에서 중요한 개념이며, 이를 이해하면 코드의 흐름을 더 잘 파악할 수 있습니다.
함수 선언이 스크립트의 최상단으로 끌어올려지는 특성을 가집니다
이 부분이 이해가 잘 안돼
함수 선언이 스크립트의 최상단으로 끌어올려지는 특성을 이해하려면, 자바스크립트가 코드를 실행하는 방식과 호이스팅의 작동 원리를 알아야 합니다.
자바스크립트는 인터프리터 언어이기 때문에, 코드를 순차적으로 실행합니다. 하지만 함수 선언의 경우, 실행 전에 선언된 모든 함수를 미리 기억해두고 실행하는 방식으로 작동합니다. 이렇게 함으로써, 함수가 실제로 선언되기 전에 호출해도 실행할 수 있게 됩니다.
예시를 통해 이해하기
greet(); // "Hello!"
function greet() {
console.log("Hello!");
}위 코드에서 greet() 함수를 호출하기 전에 함수가 선언되어 있지 않지만, 자바스크립트는 이를 정상적으로 처리합니다. 이 이유는 함수 선언이 호이스팅되어 스크립트의 최상단으로 끌어올려지기 때문입니다.
자바스크립트가 코드를 실행하는 과정은 크게 두 단계로 나눠집니다:
컴파일 단계: 자바스크립트 엔진은 코드에서 함수 선언(function greet() {...})을 미리 인식하고, 해당 함수가 어디서든 호출될 수 있도록 내부적으로 준비합니다.
실행 단계: 실제로 코드가 실행될 때, greet() 함수가 정상적으로 실행됩니다.
따라서 함수 선언은 스크립트의 최상단으로 끌어올려지기 때문에, 함수가 호출되기 전에 선언된 위치에 상관없이 실행할 수 있습니다.
함수 표현식과의 차이점
하지만, 함수 표현식(var greet = function() {...})은 호이스팅되지만, 함수 정의는 끌어올려지지 않습니다. 이 경우, 변수의 선언만 호이스팅되며, 변수에 함수가 할당되는 시점은 실제 코드 실행 시입니다. 그래서 변수에 함수가 할당되기 전에 호출하면 오류가 발생합니다.
greet(); // TypeError: greet is not a function
var greet = function() {
console.log("Hello!");
};요약
함수 선언 (function greet() {...})은 호이스팅되어, 함수가 선언되기 전에 호출할 수 있습니다.
함수 표현식 (var greet = function() {...})은 변수의 선언만 호이스팅되고, 함수 할당은 호이스팅되지 않아서 선언 전에 호출하면 오류가 발생합니다.
따라서 호이스팅은 함수 선언이 스크립트 최상단으로 끌어올려져 함수가 호출되는 위치와 관계없이 실행될 수 있게 해주는 특성입니다.
이 방식은 익명 함수 표현식(anonymous function expression)을 사용한 방법입니다. $.boardCommentList는 함수 이름이 아닌 변수처럼 사용됩니다. 여기서 $.boardCommentList는 사실 익명 함수를 할당하는 것입니다. 즉, 이 함수는 선언되지 않은 익명 함수이기 때문에 호이스팅이 적용되지 않으며, 함수 호출은 해당 선언 이후에만 가능합니다.
이해가 잘 되지 않아ㅠㅠ
이 부분을 조금 더 쉽게 설명해볼게요!
기본적으로 자바스크립트에서 함수 선언과 함수 표현식이 다르게 동작합니다.
함수 선언 (Function Declaration):
function myFunction() {
console.log("Hello!");
}이렇게 정해진 이름을 가진 함수는 자바스크립트가 호이스팅(hoisting) 덕분에 위로 끌어올려져 코드 어디서든 호출할 수 있습니다. 즉, myFunction()을 함수가 선언되기 전에 호출해도 오류가 나지 않습니다.
함수 표현식 (Function Expression):
var myFunction = function() {
console.log("Hello!");
};하지만 이렇게 함수 표현식으로 함수를 정의할 때는 호이스팅이 다르게 동작합니다. 변수 선언만 끌어올려지고, 함수의 실제 내용(익명 함수)은 끌어올려지지 않기 때문에, 그 함수가 할당되기 전에 호출하면 오류가 발생합니다.
$.boardCommentList에서의 상황
$.boardCommentList = function() {
// 함수 내용
};이 방식은 함수 표현식을 사용한 것입니다. 즉, $.boardCommentList는 함수 이름이 아닌 변수처럼 사용되고, 그 변수에 익명 함수가 할당되는 방식입니다. 자바스크립트에서는 이 함수 표현식이 실행되는 시점까지 $.boardCommentList를 함수로 사용할 수 없기 때문에, 이 함수가 정의된 후에만 호출할 수 있습니다.
핵심 차이점
함수 선언은 호이스팅에 의해 어디서든 호출 가능합니다.
함수 표현식은 호이스팅이 되지 않아서 할당된 후에만 사용할 수 있습니다.
따라서, $.boardCommentList처럼 함수 표현식을 사용하면 이 함수는 선언 전에 호출할 수 없다는 점을 이해하면 됩니다.
이 방식은 함수 표현식을 사용한 것입니다. 즉, $.boardCommentList는 함수 이름이 아닌 변수처럼 사용되고, 그 변수에 익명 함수가 할당되는 방식입니다. 자바스크립트에서는 이 함수 표현식이 실행되는 시점까지 $.boardCommentList를 함수로 사용할 수 없기 때문에, 이 함수가 정의된 후에만 호출할 수 있습니다.
이해가 어느정도 가! 하지만 나는 boardCommentList = function()앞에 let이나 var,const를 작성하지 않았는데도 이게 변수처럼 사용이 되는거야 ?
아, 좋은 질문이에요!
자바스크립트에서 let, var, const를 사용하지 않아도, 함수가 객체의 속성으로 할당되는 경우가 있습니다. 예를 들어, $.boardCommentList는 $ 객체의 속성으로 정의된 함수입니다. $.boardCommentList는 사실 객체 프로퍼티(object property)로 할당된 함수 표현식입니다.
어떻게 가능한가?
$.boardCommentList = function() {} 이 부분에서 $.boardCommentList는 변수처럼 사용되지만, 사실 $ 객체의 속성으로 설정됩니다. 자바스크립트에서는 객체에 프로퍼티를 추가할 때, 그 프로퍼티에 함수를 할당할 수 있기 때문에 $.boardCommentList는 $ 객체의 메서드처럼 동작합니다.
예시:
var $ = {}; // 빈 객체 선언
$.boardCommentList = function() {
console.log("Hello!");
};
$.boardCommentList(); // "Hello!" 출력위 코드에서 $.boardCommentList는 사실 boardCommentList라는 $ 객체의 메서드입니다. let, var, const 없이도 객체에 직접 함수를 할당할 수 있기 때문에, $.boardCommentList는 변수처럼 사용되며 함수로 호출됩니다.
let, var, const 없이 사용하는 이유:
$.boardCommentList는 단순히 $라는 전역 객체에 메서드로 할당된 것이기 때문에, 객체를 통해 boardCommentList를 정의하는 것입니다. 이때는 객체의 속성으로 함수를 추가하고 있기 때문에 별도의 변수 선언 없이도 사용이 가능합니다.
이 방식은 메서드 정의 방식의 일종으로, $ 객체의 속성으로 함수를 저장하는 형태로 사용할 수 있게 되는 것입니다.
결론적으로:
$.boardCommentList는 객체 속성으로 함수 표현식을 할당한 것이라, let, var, const 없이도 함수처럼 호출할 수 있습니다.
나의 말:
block 변수는 요청할 댓글 페이지의 위치를 의미합니다.
근데 왜 경로값에 block을 넣어야해?
block 변수는 댓글을 페이지별로 나누어 보여주기 위한 페이징 기능을 구현할 때 사용됩니다. 이 값은 사용자가 요청한 현재 페이지 번호를 나타냅니다.
왜 block이 필요한가?
웹 페이지에서 게시글이나 댓글을 한 번에 모두 표시하지 않고, 일정한 수의 항목만 표시하는 방식으로 페이지 나누기 (페이징) 기능을 구현합니다. 이때 각 페이지에 어떤 댓글들이 보여져야 할지를 결정하는 값이 바로 block입니다.
예시: 페이징
block은 현재 페이지를 나타내며, 예를 들어 block=1이면 첫 번째 페이지, block=2이면 두 번째 페이지의 댓글을 요청하는 값이 됩니다.
서버에서는 block 값에 따라 어떤 페이지의 댓글을 반환해야 하는지 계산하여 클라이언트에게 전달합니다. 예를 들어 한 페이지에 15개의 댓글을 표시하고, block=1이면 첫 번째 15개의 댓글을, block=2이면 16번째부터 30번째까지의 댓글을 반환합니다.
실제 코드에서의 사용:
let block = $("#block").val(); // 현재 페이지 값
$.ajax({
type: "get", // 전송방식 GET
url: "<%=request.getContextPath()%>/comment/<%=bv.getBidx()%>/" + block + "/commentList.aws",
dataType: "json",
success: function(result) {
// 성공 시 댓글 목록을 처리
},
error: function() {
alert("전송 실패");
}
});위의 코드에서, block은 현재 페이지 번호로 사용됩니다. block 값은 URL의 일부분으로 사용되어, 서버에서 해당 페이지에 해당하는 댓글을 조회하는데 필요합니다. 예를 들어, block=1이면 첫 번째 페이지에 해당하는 댓글들을 조회하고, block=2이면 두 번째 페이지에 해당하는 댓글들을 조회하는 방식입니다.
결론:
block 값은 페이지를 나누어 댓글을 불러오는 데 필요한 값으로, 클라이언트와 서버 간에 현재 페이지를 공유하여 올바른 데이터를 요청하고 표시할 수 있게 합니다.
