JS Basics #3 - Array(배열), Object(객체) 그리고 함수(Function)

배열

배열(Array)은 많은 데이터를 순번을 가지고 저장할 때 사용됩니다.

배열에는 원소라는 index 번호를 할당받은 저장소가 있으며, 배열의 원소에 index 로 접근하여 할당된 값을 읽어 올 수 있습니다.

많은 양의 데이터를 보관해야 할 때 배열을 사용하면 효율적으로 데이터를 관리할 수 있습니다.

• 하나의 변수에 여러 개의 데이터를 담을 수 있는 그릇 or 여러 개의 변수를 한꺼번에 다룰 수 있는 자료
• 대괄호[]를 사용해 생성하고 안에 쉼표로 구분해 자료를 입력
• 여러 개의 변수를 인덱스 번호로 관리

배열 생성하기

배열은 다음과 같이 [] 또는 new Array() 두 가지 방법으로 생성할 수 있습니다.

javascript

var arr1 = [];
var arr2 = new Array();

배열 원소에 값을 할당하기

배열 원소의 index 를 통해서 값을 할당해 주거나 배열을 생성하면서 동시에 값을 할당하는 것이 가능합니다.

다음은 배열을 생성한 후에 원소에 값을 할당하는 방법입니다.

javascript

var array = []; // 배열 생성
array[0] = 데이터 1; // 데이터 요소 추가
array[1] = 데이터 2;
array[2] = 데이터 3;

var fruits = [];
fruits[0] = '사과';
fruits[1] = '배';
fruits[2] = '바나나';

[]배열을 생성시킨 후 변수 fruits 에 할당합니다. 그리고 변수 fruits 를 통해서 배열의 원소 0~2 index 에 값을 할당한 것입니다.

배열의 인덱스는 0부터 시작하기 때문에 사과를 index 0에 값을 할당한 것입니다.

배열을 생성과 동시에 원소에 값을 할당하는 방법은 다음과 같습니다.

javascript

var fruits = ["사과", "배", "바나나"];

배열인 []을 생성한 후에 원소 3곳에 값을 차례대로 넣어 주었습니다. 그리고 변수 fruits 에 배열을 할당한 것입니다.

배열 원소의 값을 읽어오기

배열 원소에 index 로 값을 할당했다면, 이와는 반대로 배열 뒤 []안에 index 를 넣어 원소에 접근해서 값을 읽어 올 수 있습니다.

javascript

var fruits = ["사과", "배", "바나나"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

배열 기호 안에 들어간 숫자를 ‘인덱스’라고 부릅니다.

배열의 원소 갯수 얻기(배열 길이 체크)

배열은 추가된 원소의 갯수를 length 프로퍼티를 통해서 얻어 낼 수 있습니다.

javascript

var fruits = ["사과", "배", "바나나"];

var len = fruits.length;
console.log(len); // 원소의 총 갯수는 3개

배열의 원소에는 다양한 타입을 정의할 수 있습니다.

javascript

var array = [273, "String", true, function() {}, {}, [273, 103]];
console.log(array); 

배열의 메서드

배열은 수많은 원소를 가질 수 있기 때문에 많은 수량의 원소를 관리해 주기 위한 수단이 필요합니다.

그 수단으로 배열은 여러 가지 메서드들이 정의되어 있습니다.

• join – 문자열로 리턴 (원본 변경 X)
• reverse – 거꾸로 변경
• sort – 배열 정렬
• concat – 배열 이어 붙임 (원본 변경 X)
• slice – 부분 배열 반환 (원본 변경 X)
• splice – 삭제/추가
• push, pop – 맨뒤 추가/삭제
• shift, unshift – 맨앞 추가/삭제

객체(Object)

자바스크립트는 객체(Object) 기반 언어입니다.

객체는 기능 또는 속성을 가지고 있습니다.

예를 들어, TV 에는 켜다, 끄다, 음소거하다, 볼륨을 높이다, 볼륨을 낮추다 등의 기능이 있습니다.

이렇게 TV 라는 객체에는 각각 다양한 기능이 있으며 현실 세계의 모든 사물들을 객체라고 합니다.

이 현실세계의 객체를 프로그래밍적으로 접근하여 접목시킨 것을 프로그래밍 언어에서도 객체라고 표현합니다.

그래서 자바스크립트는 객체 지향언어로서 다양한 객체가 존재하고 배열 또한 객체에 해당합니다.

그리고 자바스크립트에는 TV 를 켜다와 같은 여러 다양한 기능들이 있는데 이러한 기능들을 메서드(Method)라고 합니다.

TV 객체

• 메서드(Method) : 켜다();, 끄다();, 볼륨을 높이다();, 볼륨을 줄이다();
• 속성(Property) : 너비;, 높이; 색상; 무게;

객체란 변수와 함수가 모여 만든 하나의 꾸러미라고 볼 수 있습니다.

빈 객체를 생성하여 변수와 함수를 그 안에 추가할 수 있습니다.

이때 선언된 변수를 "프로퍼티" 라고 부르고, 함수는 "메서드" 라고 합니다.

일반적으로 객체 자체는 프로퍼티와 메서드를 갖는 역할을 합니다.

배열과 매우 비슷하지만, 훨씬 구체적이고 상세합니다.

객체 생성하기

객체는 new Object() 또는 {} 두 가지 방법으로 생성할 수 있습니다.

javascript

var obj = new Object();

var obj = {}; // 객체 생성
// obj.a = 데이터 1; // 데이터 요소 추가
// obj.b = 데이터 2;
// obj.c = 데이터 3;

객체에 프로퍼티 추가하고 읽어오기

객체는 순서와 상관없이 프로퍼티 또는 메서드를 추가시킬 수 있습니다.

프로퍼티와 메서드명은 사용자가 지정해 주는 것이기 때문에 변수와 같다고 보면 됩니다.

객체의 프로퍼티 생성 또는 접근 시 "." 연산자를 사용합니다.

javascript

var person = {};
person.age = 30;
person.sex = '남자';
person.birthday = "12월 25일";

console.log(person.age); // 프로퍼티 이름을 통해서 해당 프로퍼티의 값을 읽어 올 수 있다.
console.log(person.sex);
console.log(person.birthday);

객체는 생성과 동시에 프로퍼티를 추가시키는 것도 가능합니다.

javascript

var person = {
    age : 30,
    sex : "남자",
    birthday : "12월 25일"
};

console.log(person.age); // 프로퍼티 이름을 통해서 해당 프로퍼티의 값을 읽어 올 수 있다.
console.log(person.sex);
console.log(person.birthday);

person 객체를 생성하면서 동시에 프로퍼티를 추가시켜 주었으며 객체를 생성하면서 {} 안에 프로퍼티를 넣습니다.

그리고 프로퍼티는 콤마(,)로 나뉘어 사용합니다.

객체에 메서드를 추가하고 호출하기

객체에 메서드를 추가하는 방법은 프로퍼티와 유사합니다.

javascript

var person = {
    age : 30,
    sex : "남자",
    birthday : "12월 25일",
    getAge : function () {
        return this.age;
    }
};

var age = person.getAge();
console.log(age);

값으로 함수(function) 선언합니다.

여기서 주의깊게 봐야할 사항인 this 입니다. 여기서 this 는 person 객체를 가리킵니다.

메서드를 호출하면 this 를 통해서 메서드를 가지고 있는 객체가 넘어오게 됩니다.

그렇기 때문에 this 에서 age 프로퍼티의 값을 읽어서반환(return)해 준 것입니다.

이러한 개발 패턴은 jQuery 나 자바스크립트 개발에서 자주 사용되는 형태입니다.

함수(Function)

함수(function)란 미리 만들어진 구문을 불러서 사용 또는 재사용하는 형태입니다.

주로 반복적으로 사용되는 구문을 미리 작성해 두고 필요할 때 호출하여 사용함으로써 반복적인 작업을 줄여 주므로 개발 효율과 코드의 양을 줄여 주는데 많은 도움이 됩니다.

함수는 값을 반혼하거나 객체를 만들거나 간단한 코드를 실행할 용도로 사용될 수 있습니다.

자바스크립트에서는 함수를 여러 용도로 사용하지만, 가장 기본적으로 함수란 문장을 실행할 수 있는 고유한 스코프(scope)를 가지고 있습니다.

함수 선언 및 호출

함수는 다음과 같은 방법으로 선언할 수 있습니다.

javascript

function send() {
    console.log('전송');
}
send();

위 코드에서 function 은 함수를 사용하겠다는 선언부를 의미합니다.

send 는 함수의 이름이자 사용자가 정의할 수 있습니다. 변수의 이름과 같은 의미로 생각할 수 있습니다.

함수의 이름 뒤에는 () 가 들어가도 옆에 {} 가 오며 실행문으로서 그 안에 구문을 작성합니다.

그리고 함수가 호출되었을 때 그 실행문이 실행됩니다.

CSS 의 .blind, .a11y 를 목적으로 정의한 스타일을 생각해 보세요.

해당 클래스를 HTML 에 작성하는 것은 함수를 호출하는 형태와 비슷하다고 볼 수 있습니다.

인자값(argument), 매개변수(parameter)

함수를 선언하면서 () 안에 매개 변수를 설정할 수 있습니다.

선언된 함수의 () 안에 인자값을 넘겨 매개변수를 통해서 함수안의 구문에 값을 전달할 수 있습니다.

javascript

var a = 10;
var b = 20;

function add(v1, v2) {
    var sum = v1 + v2;
    return sum;
}

var sum = add(a, b);
console.log(sum);

함수 add() 가 선언되었고, 함수 () 안에 매개변수 v1, v2 를 넘겨받습니다.

그리고 add() 함수를 호출하면서 변수 a, b 의 값을 인자값으로 넘겨줍니다.

함수가 호출되면 넘겨받은 인자의 값을 매개변수에서 받아서 처리하게 됩니다.

반환값(return)

함수가 호출되면 함수를 호출한 구문으로 값을 반대로 보내줄 수 있습니다.

그 역할을 해 주는 것이 반환(return)입니다.

반환값을 이용하면 프로그램을 유연하게 개발할 수 있습니다.

함수는 항상 값을 반환한다.

값을 반환하지 않고 단순히 코드만 실행하도록 함수를 만들 수도 있으나 함수가 값을 반환하는 것은 지극히 당연한 일이다.

함수 내부에서 반환할 값을 설정하지 않으면 undefined 가 반환된다.

jQuery 란?

자바스크립트의 함수는 일련의 실행문을 함수 내에 정의했다가 필요할 때마다 호출하여 사용하는 것입니다.

제이쿼리는 이러한 다양한 함수들을 사용자에게 제공함으로써 자바스크립트에서 몇 가지 불편하고 까다로웠던 점들을 더 간편하게 사용할 수 있도록 개선한 자바스크립트의 라이브러리입니다.

다음은 제이쿼리에서 개선된 사항들입니다.

• 호환성 문제점 해결

자바스크립트는 호환성(크로스브라우징)이 떨어지는데 이러한 호환성을 위해 제이쿼리는 브라우저사마다 제각각 달리 구현되었던 사항들을 일관성있게 사용할 수 있도록 도와줍니다.

• 쉽고 편리한 애니메이션 효과 기능 구현

자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는데도 많은 시간이 들었습니다.

하지만 제이쿼리는 애니메이션을 쉽게 구현할 수 있고, 다양한 효과(Effect)를 지원하는 메서드를 제공하고 있습니다.

• 보다 쉬운 탐색

jQuery Selector 는 CSS 의 selector 를 그대로 가져와서 반영해 줌으로서 CSS 문법이 익숙한 사용자가 손쉽게 사용할 수 있습니다.

CSS 를 접해보지 않더라도 손쉽게 빠르게 접근,사용할 수 있을 만큼 편리한 API입니다.

이벤트(Event) 다루기

이벤트란 사용자의 특정 행위쪽에 대해 반응을 보이는 것이라 정의할 수 있습니다.

예를 들면 웹 사이트에서 마우스로 특정 요소를 클릭하거나 마우스를 올리는 행위, 키보드를 눌렀을 때의 행위, 브라우저의 창크기를 변경했을 때 등의 여러 행위에 대한 반응을 보이는 것을 이벤트라고 합니다.

그리고 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 합니다.

즉, 이벤트가 발생할 시 자바스크립트 코드가 실행됩니다.

Jaehee's WebClub