자바 스크립트 기초 - 함수, 메서드, 객체

함수의 매개변수와 인수의 비교

function getArea(width, height) {

return width * height;

}

위 함수내에서 변수 이름과 동일하게 동작하는 (width, height) 가 매개 변수이다.

wallWidth = 3;

wallHeight = 5;

getArea(wallWidth, wallHeight);

위에서 함수가 호출될 때 전달되는 값이 바로 인수이다.

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

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, 3) [0];
var volumeOne = getSize(3, 2, 3) [1];

8행의 areaOne 변수는 3 * 2 의 연산결과인 사각형 면적을 저장하며, size 배열의 첫번째 값[0] 이다.

익명 함수와 함수 표현식

자바 스크립트 해석기가 표현식을 필요로 하는 곳에 함수를 전달하면, 이 함수는 표현식으로 처리된다. 

(var area = 3*5와 같은 선언이 아닌 함수를 대입하였다)

이런 함수를 함수 표현식이라고 하며, 함수 표현식을 사용할 때는 대부분 함수 이름을 생략한다.

var area = function (width, height) {
return width * height;
};
 
var size = area(3, 4);

위와 같이 함수의 선언과 함께, 변수에 저장할 때 함수 이름을 생략 가능하다. 

이처럼 이름이 없는 함수를 익명 함수(anonymous function)이라고 한다.

5행에서 이 익명 함수를 변수의 이름으로 호출하는 것을 볼 수 있다.

즉시 호출 함수 표현식 

IIFE(Immediately Invoked Function Expressions: “이피( Iffy )”라고 발음)

이름이 부여되지 않은 함수를 의미한다. 자바 스크립트 해석기가 함수 정의를 만났을 때 단 한번 실행된다.

var area = (function () { 
    var width = 3;
    var height = 2;
    return width * height;
} () );

위의 변수 area는 나중에 호출할 목적으로 함수를 저장하는 것이 아닌, 함수가 리턴한 값만 저장하게 된다.

초록색 괄호는 자바스크립트 해석기에게 함수가 즉시 호출되어야 함을 알린다.

빨간색 괄호는 그룹화 연산자 이며, 해석기가 전체 코드를 표현식처럼 취급하도록 하기 위해 둘러싼 괄호이다.

이러한 익명 함수와 즉시 호출 함수는 어떤 작업 내에서 단 한번만 실행될 필요가 있을 때 사용된다.

예를 들면 다음과 같다.

• 함수를 호출할 때 인수로 전달하기 위해(호출할 함수에 전달할 값을 계산하기 위해)
• 객체의 속성에 값을 대입하기 위해
• 동일한 변수 이름을 사용하는 두 스크립트 간의 이름 충돌을 방지하기 위해
• 이벤트 핸들러와 리스너 내부에서 이벤트가 발생했을 때 작업을 처리하기 위해

즉시 호출 함수는 주로 일련의 코드를 감싸기 위해 사용한다.

scope라는 개념 하에 익명 함수 내부에 선언된 모든 변수들은 스크립트의 다른 부분에 선언된 같은 이름의 변수로부터 보호된다.

변수의 범위 scope

함수내부에서 var 키워드를 이용해 함수 내부에 선언하면 해당 함수 내부에서만 사용할 수 있다. 

이를 지역 변수, 함수 수준 변수라고 하며, 지역 범위, 함수 수준 범위를 가지고 있다고 표현한다.

함수 바깥 부분에서 선언한 변수는 전역 변수이며, 전역 범위(global scope)를 가진다.

var 키워드를 사용하지 않아도 전역변수로 취급된다.

객체란?

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

객체의 일부로 선언된 변수는 속성(property)이라고 부른다.

객체의 일부로 선언된 함수는 메서드(method)라고 부른다.

다음은, 축약형 표기법을 이용해 객체 생성 

(app간에 데이터를 저장하거나 전송할 때 또는 페이지를 위한 정보를 설정하는 설정 객체나 전역 객체를 생성할 때 권장됨)

var hotel = {

  name : 'Quay',

  rooms : 40,

  booked : 25,

  checkAvailability : function() {

    return this.rooms - this.booked; 

  }

};

객체 내에서의 속성 이름을 key라고 부른다. 이 키를 통해 해당 값에 접근하기 때문에 중복은 불가하다.

: 왼쪽이 속성 이름이며, 오른쪽이 값이다. 여러 개의 속성을 선언할 때 쉼표로 구분한다.

객체에 접근할 때는 멤버 접근 연산자 . 을 통해 접근한다.

var hotelName = hotel.name;

또는 아래와 같이 대괄호 문법을 통해 접근 가능하다.

var hotelName = hotel['name'];

빈 객체를 축약형 표기법으로 생성

var hotelName = {};

객체 수정하기

hotel.name = 'Park';

대입 연산자를 통해 새로운 속성값을 대입하면 된다. 객체가 가지고 있지 않은 속성에 대입하려하면, 객체에 새 속성이 추가된다.

대괄호 문법으로도 속성값 변경이 가능하다.

hotel['name'] = 'Park';

속성 제거하기

다음과 같이 delete 키워드를 이용한다.

delete hotel.name;

속성 값만 제거하기

다음과 같이 빈 문자열을 대입한다.

hotel.name = '';

객체 생성자

function Hotel(name, rooms, booked) {

  this.name = name;

  this.rooms = rooms;

  this.booked = booked;

  

  this.checkAvailability = function() {

    return this.rooms - this.booked;

  }

}

위 함수는 호텔을 표현하는 새 객체를 만들기 위한 템플릿처럼 사용된다.

객체 생성자 함수의 이름은 주로 대문자로 시작한다. (일반적으로 함수 이름은 소문자로 시작한다)

객체 생성자에서 각각의 구문은 새로운 속성이나 메소드를 대입하는 것이므로 semi-colon으로 끝을 맺는다.

new 키워드를 이용한 객체 생성

quayHotel과 parkHotel 객체 생성,  Hotel('Quay', 40, 25)는 생성자 함수이다.

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

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

아래 예제에서는 생성자 함수를 이용해 hotel 이란 이름의 빈 객체를 생성한다.

객체 생성후엔 속성과 메소드를 대입하는데, 이미 가지고 있는 속성이 있다면 값을 덮어 쓰게 된다.

// Set up the object

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'); // Get element

elName.textContent = hotel.name;                   // Update HTML with property of the object

var elRooms = document.getElementById('rooms');    // Get element

elRooms.textContent = hotel.checkAvailability();   // Update HTML with result of method

객체 생성자 표기법을 이용해 객체 생성 및 사용하기

// 호텔 객체를 위한 생성자 함수 템플릿을 정의

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);

// 이미 존재하는 변수에 += 연산자를 사용해 다른 데이터를 덧붙인다.

var details1 = quayHotel.name + ' 남은 방: ';

    details1 += quayHotel.checkAvailability();

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

elHotel1.textContent = details1;

var details2 = parkHotel.name + ' 남은 방: ';

    details2 += parkHotel.checkAvailability();

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

elHotel2.textContent = details2;

한글 때문에 html의 글자가 깨진다면 html 소스에 다음 코드를 추가한다.

<meta charset="utf-8">

속성을  추가하거나 제거하기

이미 hotel 객체의 인스턴스를 생성한 후에도 속성을 추가하거나 제거할 수 있다.

var hotel = {

  name : 'Park',

  rooms : 120,

  booked : 77

};

// gym, pool 속성을 추가하고 boolean 값을 대입 후 booked 속성을 제거

hotel.gym = true;

hotel.pool = false;

delete hotel.booked;

this 키워드

var shape = {

  width: 600,

  height: 400,

  getArea: function() {

    return this.width * this.height;

  }

}

이 키워드는 항상 단 하나의 객체를 참조하며, 함수를 실행하고 있는 객체를 가리킨다.

바꿔 말해, 함수 내부에서 this 키워드가 사용될 때, this 키워드는 함수를 감싸는 함수가 소속된 객체를 가리킨다는 것이다.

한 함수가 다른 함수 내에 중첩되어 있는 경우에는, 첫번째 함수 내의 변수에 this 키워드의 값을 저장해두고, 

중첩된 함수내에서 이 변수를 this 키워드 대신 사용하는 것이 권장된다.

function windowSize() {

  var width = this.innerWidth;

  var height = this.innerHeight;

  return [height, width];

}

스크립트의 최상위 수준 (다른 객체나 함수 내부가 아닌 곳)에 함수를 선언하면, 이 함수는 global scope 혹은 global context에 포함된다.

이 global context에 속한 객체는 window 객체이므로 this 키워드를 사용하면 window 객체를 가리키게 된다.

아래 예제에서는 축약형 표기로 객체를 생성했다. 하지만 전역 범위에 선언된 showWidth() 함수는 객체의 멤버가 아니므로,

이 경우 전역 변수 width 를 가리킨다.

var width = 600;

var shape = {

    width: 300

};

var showWidth = function() {

  document.write(this.width);

};

showWidth();

메서드로서의 함수 표현식

아래 예제의 11행은 익명 함수가 shape 객체의 메서드로 사용될 것이며, 그 이름이 getWidth() 함수가 될 것임을 표현한 것이다.

getWidth() 함수를 호출하면, 실제로 showWidth() 함수가 호출된다. 

이 때는 그 함수가 속한 객체가 shape이므로 shape 객체의 속성 width의 값 300을 가리키게 된다.

var width = 600;
 
var shape = {
    width: 300
};
 
var showWidth = function() {
  document.write(this.width);
};
 
shape.getWidth = showWidth;
shape.getWidth();

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

결과

window 
o2

6행에서는 함수를 호출한 것이므로 함수에서의 this는 그 함수가 속한 객체, 여기서는 window 객체를 가리킨다.

11행에서는 new 키워드를 통해 생성자를 통해 만들어진 객체에서의 this 는 그 만들어진 객체 자신을 가리킨다.

배열도 객체이다

호텔 방의 가격을 객체로 표현한 경우

costs = {

  room1: 420,

  room2: 460,

  room3: 230,

};

이 경우 room1~3 속성과 각각의 값을 가진다.

호텔 방의 가격을 배열로 표현한 경우

costs = [420, 460, 230];

이 경우 index 0~2 와 각각의 값을 가진다.

객체 내에 배열을 가지거나 배열 내에 객체를 가질 수 있다.

객체 내의 배열

costs.room1.items[0];

배열 내의 객체

costs[2].phone;

배열의 2번째 index  { accom: 620, phone: 60 }

내장 객체

브라우저 객체 모델, 문서 객체 모델, 전역 자바스크립트 객체

브라우저 객체 모델

window.screen.width;

문서 객체 모델

documnet.getElementById('one');

전역 자바스크립트 객체

hotel.toUpperCase();    

: string 객체가 전역 객체로 제공되며 문자열 자체가 마치 String 객체인 것처럼 동작하기 때문에 wrapper object라고도 함

예약된 데이터 타입

단순혹은 기본 데이터 타입인 String, Number, Boolean, Undefined, Null

복합데이터 타입인 Object

배열이 객체라는 것은 .length라는 속성을 통해 확인할 수 있다.