[자바스크립트 기초]함수 메서드 객체

함수와 메서드

함수는 특정 작업을 수행하기 위해 필요한 일련의 구문으로 구성된다. 메서드는 함수와 동일하지만 객체 내에 만들어진다는 점이 다르다.

 

객체

실제 세계를 모델화하기 위해 객체를 사용한다.

객체는 속성과 메서드로 구성된다.

 

내장객체

브라우저는 인터랙티브한 웹 페이지를 개발하기 위한 도구의 역할을 수행하는 다양한 종류의 객체들을 제공한다.

 

함수란 무엇인가?

함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재사용할 수 있다.

 

기본적인 함수

var msg = '안녕하세요';

 

//함수 생성

function updateMessage() {

var el = document.getElementById('message');

el.textContent = msg;

}

//함수 호출

updateMessage();

 

함수선언하기

함수를 생성하기 위해서는 이름을 지정한 후 중괄호 안에 필요한 작업을 수행할 구문들을 작성해야 한다.

이러한 과정을 함수 선언 이라고 한다.

 

function sayHello(){ document.write(‘안녕하세요’);

}

 

function : 함수는 function 키워드를 이용하여 선언한다.

sayHello : 함수에 이름을 부여하고 괄호를 덧붙인다.

{ } : 실제 작업을 실행할 구문은 코드 블록안에 작성한다.

 

 

함수 호출

sayHello();

 

추가 정보가 필요한 함수의 선언

간혹 함수는 자신의 작업을 수행하기 위해 추가적인 정보가 필요할 수도 있다.

이런 경우에는 함수를 선언할 때 매개변수를 전달하면 된다.

매개변수는 함수 내에서는 변수와 동일하게 작동한다.

 

//매개변수는 함수내에서 변수처럼 사용된다.

function getArea(width, heigth){

 

return width ＊ height ;

}

 

추가 정부가 필요한 함수의 호출

매개변수를 가진 함수를 호출할 때는 함수 이름 다음의 괄호 안에 값을 명시하면 된다.

이 값들은 인수라고 하며 이를 통해 값이나 변수를 전달할 수 있다.

 

값을 인수로 전달하기

getArea(3,5);

변수를 인수로 전달하기

wallWidth = 3;

wallHeight = 5;

getArea(wallWidth,wallHeight);

 

함수로부터 단일 값 전달받기

일부함수는 자신을 호출한 코드에게 정보를 돌려주기도 한다.

예를 들어, 함수가 어떤 계산을 수행한다면 그 결과를 리턴한다.

 

function calualteArea(width,height){

 

var area = width *　height;

return area;

}

 

var wallOne = calculateArea(3,5);

var wallTwo = calculateArea(8,5);

자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한다. 그런후 함수를 호출한 코드로 되돌아간다.

 

함수로부터 여러값 전달 받기

함수는 배열을 이용해 한 번에 여러개의 값을 리턴할 수 있다.

 

function getSize(width, height, depth){

 

var area = width*height;

var volume = width * height * depth;

var sizes = [area, volume];

return sizes;

}

var areaOne = getSize(3,2,4)[0];

var volumOne = getSize(3,2,3)[1];

 

익명함수와 함수 표현식

표현식은 값을 생산한다. 이들은 값을 사용하고자 하는 곳에 사용할 수 있다.

나중에 호출하기 위한 함수를 선언하려면 반드시 이름을 부여해야하기 때문에 이런 함수들을 명명된 함수라고 부른다.

 

function calualteArea(width,height){

 

var area = width *　height;

return area;

}

 

var wallOne = calculateArea(3,5);

 

함수표현식

자바스크립트 해석기가 표현식을 필요로 하는 곳에 함수를 전달하면 이 함수는 표현식으로 처리되며, 이런 함수를 함수 표현식이라고 한다. 함수 표현식을 사용할 때는 대부분 함수 이름을 생략하며, 이처럼 이름이 없는 함수를 익명 함수라고 한다.

 

var calualteArea=function (width,height){

 

return width *　height;

};

 

var wallOne = calualteArea(3,5);

 

변수의 범위

변수를 사용할 수 있는 코드는 변수가 선언된 위치에 따라 달라진다.

만일 변수를 함수 내에 선언했으면 그 변수는 함수 내에서만 사용이 가능하다.

이렇게 변수가 사용 가능한 영역을 변수의 범위라고 한다.

 

지역 변수

변수를 var 키워드를 이용하여 함수 내부에 선언하면 이 변수는 해당 함수 내부에서만 사용할 수 있다. 이런 변수를 지역 변수 라고 한다.

함수가 두 번 실행되면 지역 변수들은 매번 다른 값을 갖게 된다.

두 개의 서로 다른 함수는 어떤 종류의 이름 충돌 없이 동일한 이름의 변수를 사용할 수 있다.

 

전역 변수

만일 함수의 바깥 부분에서 변수를 선언하면 이 변수는 스크립트의 어느 곳에서도 사용이 가능하다. 이러한 변수를 전역 변수라고 한다.

function calualteArea(width,height){

//지역변수

var area = width *　height;

return area;

}

// 전역변수

var wallOne = calculateArea(3,5);

 

메모리와 변수의 동작 원리

전역 변수는 더 많은 메모리를 사용한다.

브라우저는 페이지를 로드하고 있는 동안에는 전역변수를 계속 메모리에 보관한다.

지역 변수는 함수가 실행 중인 동안에만 메모리에 존재한다.

 

 

객체란 무엇인가?

객체란 현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화한 것을 말한다.

객체와 함수는 객체 내에서 새로운 이름으로 불린다.

 

객체 내에서 변수는 속성이라고 부른다.

속성은 자동차의 이름이나 속도 등 객체에 대한 정보를 제공한다. 각각의 자동차들은 이름도 서로 다르고 속도도 다르다.

 

객체 내에서 함수는 메서드라고 부른다.

예를 들어 차와 관련된 정보를 연산해서 구할 수 있다.

 

var car = {

name: ‘sonata’,

heightSpeed: 200,

lowSpeed: 100,

sunroof : true,

type:　[소형, 중형, 대형],

 

check : function(){

return this.heightSpeed- this.lowSpeed;

}

 

};

 

위에서 보듯 car 변수는 객체를 담고 있으며 , 이 객체는 키/값 쌍을 가지고 있다.

객체 생성하기: 축약식 표기법

축약식 표기법은 객체를 생성하는 가장 쉬우면서도 대중적인 방법이다.

var car = {

name: ‘sonata’,

heightSpeed: 200,

lowSpeed: 100,

sunroof : true,

type:　[소형, 중형, 대형],

 

check : function(){

return this.heightSpeed- this.lowSpeed;

}

 

};

 

객체에 접근하는 방법과 마침표 표기법

마침표 표기법을 이용하면 객체의 속성이나 메서드에 접근이 가능하다.

또한 대괄호를 이용해도 속성에 접근할 수 있다.

var carNmae=car.name;

var sunRoof =car.check();

var varName = var[‘name’];

 

일반적인 표기법을 이용하여 객체생성하기

var hotel = {

name : 'Quay',

rooms : 40,

booked : 25,

checkAvailability : function() {

return this.rooms - this.booked;

}

};

// UHTML 수정

var elName = document.getElementById('hotelName'); // 요소 구하기

elName.textContent = hotel.name; // 속성값 변경

var elRooms = document.getElementById('rooms'); // 요소 구하기

elRooms.textContent = hotel.checkAvailability(); // 속성값 변경

 

 

객체생성하기: 생성자 표기법

new 와 객체 생성자는 빈 객체를 생성한다.

그런 후에 객체에 속성과 메서드를 추가할 수 있다.

// 객체 생성

var hotel = new Object();

 

//속성

hotel.name = 'Park';

hotel.rooms = 120;

hotel.booked = 77;

 

//메서드

hotel.checkAvailability = function() {

return this.rooms - this.booked;

};

var elName = document.getElementById('hotelName'); // 요소 생성

elName.textContent = hotel.name;

var elRooms = document.getElementById('rooms'); // 요소 생성

elRooms.textContent = hotel.checkAvailability();

 

객체 생성자 표기법을 이용하여 객체 여러개 생성하기

생성자 함수를 사용하면 객체의 인스턴스를 생성할 수 있다. 그러려면 new 키워드 다음에 새로운 객체를 생성하는 함수를 호출하면 된다.

각 객체의 속성 값은 함수의 인수로 전달된다.

function Hotel(name, rooms, booked) {

this.name = name;

this.rooms = rooms;

this.booked = booked;

 

this.checkAvailability = function() {

return this.rooms - this.booked;

};

}// 객체 두 개 만들기

var quayHotel = new Hotel('Quay', 40, 25);

var parkHotel = new Hotel('Park', 120, 77);

 

// HTML 페이지 수정

var details1 = quayHotel.name + ' rooms: ';

details1 += quayHotel.checkAvailability();

var elHotel1 = document.getElementById('hotel1');

elHotel1.textContent = details1;

 

//두번째 객체

var details2 = parkHotel.name + ' rooms: ';

details2 += parkHotel.checkAvailability();

var elHotel2 = document.getElementById('hotel2');

elHotel2.textContent = details2;

 

복습: 객체를 생성하는 여러방법들

객체를 생성한 후 속성과 메서드를 추가하는 방법

축약형 표기법

var hotel = {}

 

hotel.name= ‘abc’

hotel.rooms = 40;

hotel.booked = 10;

 

hotel.check = function(){

return this.rooms – this.booked;

};

 

객체 생성자 표기법

var hotel = new Object();

hotel.name= ‘abc’

hotel.rooms = 40;

hotel.booked = 10;

 

hotel.check = function(){

return this.rooms – this.booked;

}

 

속성과 메서드를 사전에 정의하여 객체 생성하기

축약형 표기법

var hotel = {

name : 'Quay',

rooms : 40,

booked : 25,

checkAvailability : function() {

return this.rooms - this.booked;

}

};

 

객체 생성자 표기법

function Hotel(name, rooms, booked) {

this.name = name;

this.rooms = rooms;

this.booked = booked;

 

this.checkAvailability = function() {

return this.rooms - this.booked;

};

}// 객체 두 개 만들기

var quayHotel = new Hotel('Quay', 40, 25);

var parkHotel = new Hotel('Park', 120, 77);

 

객체응용

<!DOCTYPE html>

 

<html lang="ko">

 

    <head>

 

        <meta charset="utf-8">

 

                <title>문자</title>

        <script>

//자바스크립트 객체 선언

 

        //변수명:값

        var myCar = {make:"BMW",model:"X5", year:2013};

 

        

 

        var txt="";    

 

 

    document.write(myCar["make"]+"<br>");

 

    document.write(myCar["model"]+"<br>");

 

    document.write(myCar["year"]+"<br>");

    document.write(myCar.make+"<br>");

 

    document.write(myCar.model+"<br>");

 

    document.write(myCar.year+"<br>");

    for(var x in myCar){

 

        txt += myCar[x]+" ";

    }

    document.write(txt);

        </script>

    </head>

    <body>

    </body>

</html>    

배열도 객체다

배열은 실제로 특별한 형식의 객체다. 배열은 객체와 마찬가지로 사로 관련있는 키/값 쌍의 집합을 저장하지만 각 값의 키로는 인덱스 번호가 사용된다.

 

객체로 표현하는 경우

객체의 속성을 이용하여 방과 방의 가격을 표현한다.

 

costs={room1: 420, room2: 460};

 

배열로 표현하는 경우

이 경우 각 값들은 속성 이름 대신 인덱스 번호를 갖게 된다.

costs = [420, 460];

 

객체의 배열과 배열내의 객체

복잡한 데이터 구조를 표현하기 위해서는 배열과 객체를 혼합하여 사용할 수도 있다.

배열은 일련의 객체를 저장할 수 있다.

물론, 객체 역시 배열을 저장할 수도 있다.

 

객체 내의 배열

속성 : 값 room1 : items [420,40,10]

costs.room1.items[0];

 

배열 내의 객체

배열 내의 각 요소는 객체를 그 값으로 저장할 수 있다.

번호 : 값 2 {accom: 420, food:40, phone:10}

costs[2].phone;

 

내장각체

자바스크립트 문서 객체

자바스크립트 브라우저 객체