반응형
함수
선언적 함수
functioin키워드를 사용하여 함수를 정의
function func01(){
console.log("선언적 함수");
func01_2();
}
function func01_2(val1,val2){
console.log(val1+val2);
}- 다른 객체에서 호출이 가능
- 파라미터의 개수가 달라도 해당 파라미터를 사용하지 않을 경우 정상 작동함
- 코드의 가독성이 높고 재사용하기 쉬움
익명함수
이름이 없는 함수
- 함수를 변수에 할당할 때
var add = function(a, b) { return a + b; }; var result = add(2, 3); console.log(result); // 5- 다른 함수의 매개변수로 전달 할 때
function calculate(func) { var result = func(2, 3); console.log(result); } calculate(add); // 5- 객체 내부에서 사용되고 종료 (이름이 없기 때문에 다른 객체에서 호출불가)
- 변수에 저장해서 변수이름으로 호출가능 : 변수명()
- 파라미터로 기능을 전달할 때 익명함수로 가능
- 화살표 함수 사용가능
setInterval(function(){
console.log(i++);
},2000);
//화살표함수
setInterval(()=>{
console.log(i++);
},2000);- 함수를 동적으로 생성가능
- 다른함수의 매개변수로 전달하여 사용가능
- 가독성이 떨어지므로 가능한 선언적 함수사용하는 것이 좋음
onload 이벤트
- 문서가 로드될 때 발생하는 이벤트
- HTML문서의 body태그나 img태그와 같은 요소에서 사용가능(이벤트 발생시 지정함수 호출)
//html
<body onload="loadImage()">
<img src="example.jpg" id="myImage">
</body>
//javascript
function loadImage() {
var img = document.getElementById("myImage");
console.log("이미지가 로드되었습니다.");
}
myImage라는 id를 가진 객체요소를 생성하고 콘솔창에 메세지를 출력
객체를 만드는 방법
- 객체 리터럴 방식 : 중괄호를 사용하여 객체를 생성
var jobj={
subject:"javascript",
credit:1,
printout:()=>{
return joobj.subject+","+jobj.credit+"학점";
}장점
- 코드가 간결하고 가독성이 좋습니다.
- 객체를 간편하게 생성할 수 있습니다.
- 단점
- 객체를 생성하는 데 있어서 유연성이 떨어집니다.
- 생성된 객체들이 동일한 구조를 갖게 됩니다.
- 생성자 함수 방식: 함수를 사용하여 객체를 생성
function Info(){
var subject="html";
this.subject2="javascript";
this.credit=2;
this.printout=function(){
return this.subject2+','+this.credit+'학점';
}
this.getSubject=subject;
}
var info=new Info();장점
- 생성된 객체들이 동일한 구조를 갖지 않습니다.
- 객체를 생성하는 데 있어서 유연성이 높습니다.
- 단점
- 코드의 중복이 발생할 수 있습니다.
- 생성자 함수를 정의하고 사용하는 방법이 복잡할 수 있습니다.
- 클래스 방식(ES6이상) : 클래스를 사용하여 객체를 생성
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
sayHello(){
console.log(this.name+ " "+ this.age);
}
}
let person1=new Person("aaaa",20);장점
- 객체를 생성하는 데 있어서 유연성이 높습니다.
- 코드가 간결하고 가독성이 좋습니다.
- 단점
- ES6 이상에서만 지원되기 때문에 구 버전의 브라우저에서는 사용할 수 없습니다.
- 클래스를 정의하고 사용하는 방법이 생성자 함수 방식과 다를 수 있습니다.
반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM -appendChild,insertBefore (0) | 2023.03.03 |
|---|---|
| (JavaScript)DOM탐색 속성 (0) | 2023.03.02 |
| (JavaScript)window객체-open,close (0) | 2023.02.28 |
| (JavaScript)날짜 객체 (0) | 2023.02.27 |
| (JavaScript)로또 (0) | 2023.02.27 |