[JavaScript] 함수선언와 객체생성 (4)

자바스크립트에서도 함수선언과 객체를 생성할 수 있다 해당 게시물에서는 다음과 같은 내용을 다루어보겠다.

 

[함수선언]

 

1. 선언적 함수 선언

function f01() {
	console.log("test01 called...");
}
f01();

 

함수를 선언할 때는 function 키워드를 달아서 선언할 수 있다. 함수명(파라미터) {실행문} 과 같은 형식으로

함수를 실행하려고 할떄는 f01(파라미터); 와 같은 형식으로 실행하면 된다.

 

2. 익명 함수와 화살표 함수 (자주사용)

const f01 = function() {
	console.log("anonymous function called...");
}

//또는 화살표 함수
const f01 = () => {
	console.log("anonymous function called...");
}

document.querySelector("bnt01").addEventListner("click", function() {
	console.log("ㅎㅇㅎㅇ");
});
//또는 화살표 함수
document.querySelector("bnt01").addEventListner("click", () => {
	console.log("ㅎㅇㅎㅇ");
});

 

다음 함수는 익명 함수이다. 말 그대로 함수명이 존재하지 않으며, 자바스크립트에서 함수는 변수에 할당할 수 있다.

위에는 함수를 선언하고 바로 변수 f01에 할당해서 f01()로 실행할 수 있다.

 

아래는 addEventListner (나중에 다룰 내용) 메서드를 통해서 어떤 노드에 대해서 이벤트가 클릭 이벤트가 발생한 경우에 2번째 인자로 받고있는 함수를 실행하는데 파라미터 에서 바로 함수를 익명함수로 선언할 수 있다. 

 

화살표 함수는 익명함수라고 볼 수 있는데, (파라미터) => {실행문}과 같은 형식으로  function(파라미터) {실행문} 기능을 할 수 있다. 선언할 때의 둘의 차이는 없지만 나중에 이벤트 객체에 다룰 때 차이가 있긴하다.

 

3. 매개변수 및 반환 값을 가지는 함수

function f53(a,b,c) {
    console.log("f02 called...");
    console.log(arguments[0]);
    console.log(a,b,c);
}

f53(10,40);

const fxx = () => {
        console.log("화살표 함수입니다.");
        return "짜장면";
}

const food = fxx();
console.log(food);

위에 코드를 확인해보면 f53 메서드에서는 파라미터로 a,b,c를 받으며, return으로 arguments[0]를 반환 하고있다. 여기서 arguments는 해당 함수에서 사용된 파라미터에 대해서 가지고있는 배열로 arguments[n]을 통해서 값을 참조할 수 있다.

 

 파라미터에 대해서 설명하자면 자바스크립트에서는 매개변수가 부족하더라도 실행된다. f53(10, 40)을 통해서 실행 해보면 비어있는 파라미터에 대해서는 undefined로 출력되게 된다.

fxx() 함수에 대해서는 문자열 반환에 대해서 간단하게 선언한 화살표 함수이다. 반환으로 문자열 짜장면을 반환하게 하고 console.log를 통해서 food 변수를 통해서 출력해보면 다음과 같이 출력문이 나온다.  

 

 

 

[객체]

 

자바스크립트에서도 자바와 동일하게 객체를 생성할 수 있다. 다음 예제를 살펴보자.

const f03 = () => {
    //객체 생성
    const x = {};
    //속성 추가
    x.title = "어린왕자";
    x.price = 50000;

    //속성접근 for in 을통해서 
    // i: 속성 명 참조 , x[i]: 값 참조
    for(i in x) {
        console.log(x[i]);
    }
}

f03();

 

 f01에 대해서 먼저 살펴보자. 해당 함수는 x라는 객체를 생성한다. 객체명 = {} 또는 객체명 = new Object(); 와 같은 형식으로 객체를 생성할 수 있으며, 생성과 동시에 객체 필드 및 필드값을 할당할 수도 있다. for in을 통해서 객체 x에서 속성명을 i로 가져와서 x[i]를 통해 console.log로 출력해보았다.

다음과 같은 결과를 출력할 수 있다. 단순히 객체를 확인하기 위한 용도라면 그냥 객체 자체를 console.log(x)로 실행해도 된다.

 

 

[객체와 관련된 함수]

const obj1 = new Object();

obj1.title = "aasdasd";
obj1.price = 123234;

const result = obj1 instanceof Object;
console.log(result);

//해당 필드가 있는지?
const result2 = obj1.hasOwnProperty("title");
console.log(result2);

//Number
console.log("========= NUMBER ========")
const result3 = new Number(3.14);
console.log(result3 instanceof Number);

//문자열.bold();
//문자열.italics();
//문자열.fontcolor();
//문자열.link();

//Date
console.log("=========== DATE =============");
const date1 = new Date('2020-12-31T18:30:15');
console.log(date1.getMonth());

해당 코드에서는 obj1 이라는 객체를 하나 생성하고 title과 price 라는 필드에 값을 할당한다.

 

그리고 instanceof Object라는 키워드를 통해서 obj1 이 Object의 객체인지 확인한다. 해당 키워드를 통해서 나오는 

return형태는 boolean이다.

 

그리고 해당 객체에 어떤 필드가 있는지 확인하는 메서드로 .hasOwnProperty() 메서드가 있다. 해당 메서드도 마찬가지로

true 또는 false를 반환하는 boolean 형태이다.