속성과 메소드 / 배열

1. 속성과 메소드

2. 배열

---

1. 속성과 메소드

배열 내부에 있는 값은 요소(element)라고 부르고, 객체 내부에 있는 값은 속성(property)이라고 부른다.

배열의 요소처럼 객체의 속성도 모든 형태의 자료형을 가질 수 있다.

객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 부른다.

 

자바스크립트 - 객체, 속성, 메소드 비교

구분	객체	속성	메소드
원어	object	property	method
특징	프로그램의 대상이 되는 모든 것	객체의 속성, 성격, 특징	객체의 기능, 성능, 역할
예	창, 문서	색깔, 크기, 모양	저장, 닫기

 

속성과 메소드의 차이를 쉽게 생각하면, 속성 뒤에는 ()가 붙지 않고, 메소드 뒤에는 ()가 붙는다. 이는 메소드가 함수 자료형이기 때문에 값을 삽입해주어야 하기 때문이다.

 

let obj = {};
obj = {name: "henry"};
console.log(obj); // name: "henry"
console.log(obj["name"]); // henry
console.log(obj.name); // henry

 

위의 코드블럭 마지막의 console.log(obj.name); 은 obj라는 배열의 name이라는 속성에 대한 속성값을 출력하라는 뜻이다.

 

obj = {
    name: "henry",
    create: function() { // 익명함수
        console.log('함수생성');
    },
    block:{
        index:1,
        nonce:1023,
    },
    list:[10, 20, 30]
}
console.log(obj);
obj.create(); // 메소드

console.log(obj.block.nonce); // 1023
console.log(obj.list[1]); // 20

 

create로 익명함수를 선언하면 obj.create()와 같이 메소드를 사용할 수 있다.

 

 

2. 배열

[그림 1] 배열의 구성

 

배열(array)은 같은 타입의 변수들로 이루어진 유한 집합으로 정의된다. (자바스크립트에서는 다른 타입의 변수들도 가능하다.)

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자는 인덱스(index)라고 한다.

 

let arr = [];
console.log(arr); // []

arr = [10];
console.log(arr); // [10]
console.log(typeof arr); // object

console.log(arr.length); // 1
console.log(typeof arr.length); // number

 

위의 코드를 분석해보겠다. 처음에 let arr = []; 로 arr라는 배열을 선언했고, arr = [10]; 로 배열의 값을 할당해주었다.

 

typeof는 변수의 데이터 타입을 반환하는 연산자이다.

typeof variable 또는 typeof(variable)의 문법으로 사용하고, variable에는 데이터 또는 변수가 들어간다.typeof를 썼을 때 반환되는 값은 다음과 같다.

• undefined : 변수가 정의되지 않았거나 값이 없을 때
• number : 데이터 타입이 숫자일 때
• string : 데이터 타입이 문자열일 때
• boolean : 데이터 타입이 불리언일 때
• object : 데이터 타입이 함수, 배열 등 객체일 때
• function : 변수의 값이 함수일 때
• symbol : 데이터 타입이 심볼일 때

 

arr = [10, 20, 30];
console.log(arr); // [10, 20, 30]
console.log(arr[2]); // 30
let key = arr.length - 1;
console.log(arr[key]); // 30

 

배열 arr을 [10, 20, 30]으로 재할당했다. arr[n]을 콘솔로그로 n번째 인덱스 값을 도출할 수 있다.

 

만약, 배열의 값이 몇 개인지 모를 때 마지막 인덱스 값을 출력하고 싶으면 어떻게 할까?

새로운 변수 key를 만들어서 arr.length - 1로 정의한 다음 arr[]의 대괄호 안에 key를 넣으면 된다.

arr.length가 아닌 arr.length - 1을 대입하는 이유는 인덱스는 0부터 시작하기 때문이다.

 

그렇다면 아래와 같이 배열의 모든 요소를 출력하는 반복문은 어떻게 작성하면 될까?

[그림 2] 배열의 모든 요소 출력

[그림 2]의 경우는 10부터 90까지 배열의 요소가 총 9개 있고, 앞에 n번째 배열값 : 이라는 문구가 같이 출력되는 형태이다.

 

for (i = 0; i < arr.length; i++) {
    console.log((i+1)+"번째 배열값 : "+arr[i]);
}

 

위와 같이 for 문을 이용하여 console.log로 찍어낼 수 있다. i < arr.length; 를 쓰면 배열의 요소가 몇 개인지 모를 때에도 모든 요소를 출력할 수 있다.

 

이제 배열의 다양한 메소드를 살펴보고자 한다.

• isArray() : 인자로 전달받은 객체가 배열이면 true, 그렇지 않으면 false를 리턴하여 해당 객체가 배열인지 확인

Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false

이 메소드는 Array 메소드이기 때문에 isArray() 앞에는 임의의 배열의 이름이 아닌 Array가 와야 한다.

 

• push() : 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• pop() : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환
• unshift() : 배열의 첫 번째 자리에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• shift() : 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환

let arr = [1, 2, 3];

// 배열 끝에 새로운 요소 추가, 배열의 크기 리턴
arr.push("new"); // 
console.log(arr); // [1, 2, 3, 'new']

// 배열의 마지막 요소 제거, 제거된 요소 리턴
arr.pop(); // new
console.log(arr); // [1, 2, 3]

// 배열의 앞에 새로운 요소 추가, 배열의 크기 리턴
arr.unshift("new"); // 3
console.log(arr); // ['new', 1, 2, 3]

// 배열의 첫 번째 요소 제거, 제거된 요소 리턴
arr.shift(); // new

 

• splice() : 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용, 리턴값은 삭제한 배열 요소이며 삭제한 요소가 없더라도 빈 배열을 반환

/* 배열 임의의 위치에 요소 추가, 제거 */
// start - 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소 갯수, 제거하지 않을 경우 0
// el - 배열에 추가될 요소
arr.splice(start, deleteCount, el);

let arr = [1, 5, 6, 7];
arr.splice(1, 0, 2, 3, 4); // [], arr: [1, 2, 3, 4, 5, 6, 7]
arr.splice(0, 2); // [1, 2], arr: [3, 4, 5, 6, 7]

 

• reverse() : 배열 요소의 순서를 거꾸로 뒤집음

let arr = [1, 2, 3, 4];
arr.reverse(); // [4, 3, 2, 1]

 

• sort() : 배열 내부의 요소를 정렬하는데 사용, 기본적으로 배열의 요소를 문자열로 변환한 후 오름차순으로 정렬

let arr = [11, 1, 115, 42, 12]
arr.sort(); // [1, 11, 115, 12, 42]

 

간혹 위 예제처럼 sort()를 썼을 때 의도하지 않은 결과를 도출하는 경우가 있다. 이는 내부적으로 숫자를 문자열로 변환한 후 값을 비교하기 때문이다. 따라서 대부분의 경우 sort 함수의 인자값으로 비교 함수를 전달하여 정렬하게 된다.

 

let arr = [11, 1, 115, 42, 12];
arr.sort(function(a, b) { return a - b; }); // [1, 11, 12, 42, 115]

 

비교함수는 2개의 인자 (a, b)를 받으며 각각 비교할 첫 번째, 두 번째 요소가 된다. 비교함수는 배열 요소의 가장 처음 두 요소부터 순차적으로 비교해가며 정렬을 실행한다.

 

비교함수 function(a, b) {}의 반환값에 따라 정렬 규칙은 다음과 같다.

• 결과값이 0보다 작으면 a가 낮은 인덱스로 정렬된다.
• 결과값이 0이면 a와 b의 순서를 바꾸지 않는다.
• 결과값이 0보다 크면 b가 낮은 인덱스로 정렬된다.

위의 예시에서 11과 1을 비교할 경우 a - b = 10 > 0 이므로 1이 11의 앞으로 이동하게 된다.