자바스크립트로 하는 자료구조와 알고리즘 - 5~6장

5장. 자바스크립트 배열

배열

• 삽입

새로운 항목을 자료 구조 내에 추가하는것. .push(element)메소드를 사용해 배열 삽입을 구현할 수 있다.

var arr = [1, 2, 3, 4]
arr.push(5); // arr = [1, 2, 3, 4, 5]
arr.push(8); // arr = [1, 2, 3, 4, 5, 8]

// 시간복잡도: O(1)

• 삭제

.pop()메소드를 사용해 배열 삭제를 구현할 수 있다. 해당 메소드는 제거된 항목을 반환한다.

var arr = [1, 2, 3, 4]
arr.pop(); // return 4, arr = [1, 2, 3]

// 시간복잡도: O(1)

arr.shift(); // return 1, arr = [2, 3]
// shift()는 첫번째 항목을 제거한 다음 해당 항목을 반환한다.

• 접근

특정 인덱스의 배열에 접근하는 연산은 인덱스를 이용해서(0부터 시작) 메모리의 주소로부터 직접 값을 얻기 때문에 시간 복잡도가 O(1)이다.

var arr = [1, 2, 3, 4]
arr[1] // return 2
arr[3] // return 4

반복

반복은 어떤 자료구조 내에 담긴 항목들을 하나씩 접근하는 과정이며 모두 O(n)의 시간복잡도를 가진다.

for (변수; 조건; 수정)

for은 변수 i를 초기화하고 코드 실행 전 조건이 거짓인지 확인한다. 만약 거짓이라면 변수를 수정

하며 동작한다.

• for

for (var i=0, len=arr.length; i<len; i++) {
	console.log(arr[i])
}

• while

var counter = 0;
while(counter<arr.length){
	// ~
    counter++
} //while은 counter가 루프의 바깥에서 초기화되어야 한다.

• 무한 루프

while(true){
	if(breakCondition) {
   		break;
	}
}

for(;;) {
	if(breakCondition) {
   		break;
	}
} //조건을 설정하지 않음으로써 무한루프를 구현할 수 있다.

• for (in)

인덱스를 하나씩 호출하는 배열을 반복 접근하기위한 방법으로, in 앞에 지정된 변수는 배열의 인덱스이다.

var arr = ['a', 'b', 'c', 'd']

for (var index in arr) {
	console.log(index)
} // 0, 1, 2, 3

• for (of)

of 앞에 지정된 변수는 배열의 항목(값)이다.

var arr = ['a', 'b', 'c', 'd']

for (var element of arr) {
	console.log(element)
} // a, b, c, d

• forEach()

forEach는 반복 중 바깥으로 빠져나오거나 배열 내의 특정 항목을 건너뛸 수 없다. 따라서 반복 접근한다는 의미에 있어 조금 더 명시적이라 할 수 있다.

var arr = ['a', 'b', 'c', 'd']

arr.forEach( function (element, index) {
	console.log(element, index)
} // a 0, b 1, c 2, d 3

도움 함수

.slice(begin, end)

기존 배열을 수정하지 않고 해당 배열의 일부를 반환하며, 시작과 끝 인덱스를 매개변수로 받는다.

var arr = [1, 2, 3, 4];
arr.slice(0, 2) // return [1, 2]
arr.slice(1) // return [2, 3, 4]
arr.slice() // return [1, 2, 3, 4]

.slice()는 배열 전체의 복사본을 반환하기 때문에 배열을 복사하는데 유용하다. 배열에 신규변수를 할당하면 기존변수를 '참조'하기때문에  신규변수를 변경하면 기존변수에도 변경점이 의도치않게 적용될 수 있다. 새로운 배열을 만드려면 .from()이나 .slice()등을 이용해야 한다.

var arr1 = [1, 2, 3], arr2 = arr1;

arr2[0] = 5;
console.log(arr1) // [5, 2, 3]
console.log(arr2) // [5, 2, 3]
// arr2는 arr1을 참조한다.

var arr3 = [1, 2, 3];
var arr4 = Array.from(arr3);
var arr5 = arr3.slice();
// arr4와 arr5는 새로운 배열로 생성된다.

.splice(begin, size, element1, element2, ...)

.splice()는 기존 항목을 제거하거나 신규 항목을 추가함으로써 배열의 내용을 반환하고 변경한다.

-> .splice(시작 인덱스, 제거할 항목의 크기, 추가할 신규항목들...)

var arr = [1,2,3,4];
arr.splice(); // return [], arr = [1,2,3,4]
arr.splice(1, 2); // return [2, 3], arr = [1, 4]
arr.splice(1, 2, 7, 7, 7) // return [2, 3], arr = [1,7,7,7,4]
arr.splice(1, 2, { 'ss': 1 }) // return [2, 3], arr = [1, { 'ss': 1 }, 4]

.concat()

신규 항목을 배열의 맨 뒤에 추가한 다음 해당 배열을 반환한다.

var arr = [1,2,3,4];
arr.concat() // return [1,2,3,4], arr = [1,2,3,4]
arr.concat([6, 6, 6]) // return [1,2,3,4,6,6,6], arr = [1,2,3,4]
// concat은 기존 배열은 바꾸지 않음

.length 속성

배열의 크기로 반환한다. 배열을 더 작은 크기로 변경하면 배열에서 항목들이 제거된다.

var arr = [1,2,3,4];
console.log(arr.length) // 4
arr.length = 3; // arr = [1,2,3]

전개(spread) 연산자

점 3개(...)로 표현하며 인자를 확장하는데 사용한다.

var arr = [1,2,3,4];
function addFourNums(a, b, c, d) {
	return a+b+c+d;
}
console.log(addFourNums(...arr)); // 10

Math.max와 Math.min

두 함수 모두 무한개의 매개변수를 받을수 있으며 spread연산자를 사용하면 배열의 최댓값과 최솟값을 찾을 수 있다.

var arr = [3, 2, -123, 1234, 12];
Math.max(...arr); // 1234
Math.min(...arr); // -123

6장. 자바스크립트 객체

자바스크립트 객체 속성

자바스크립트에서는 객체 상수 {} 또는 new Object(); 구문을 통해 객체를 생성할 수 있다.

속성을 추가하거나 접근하기 위해서는 objcet.propertyName 또는 object['propertyName']을 사용할 수 있다.

var jsObj = {};
var arr = [1,2,3,4];
jsObj.array = arr;
console.log(jsObj); // {array: [1,2,3,4]}

jsObj['title'] = 'Algorithms';
console.log(jsObj); // {array: [1,2,3,4], title: 'Algorithms'}

프로토타입 활용 상속

자바스크립트에서는 함수가 클래스의 자바스크립트 Object속성으로 추가되어야 한다.

function ExampleClass() {
	this.name = "js";
    this.sayName = function() {
		console.log(this.name);
}

var example1 = new ExampleClass();
example1.sayName(); // "js"

위 코드의 class는 생성자에서 sayName함수를 동적으로 추가하는데, 이러한 패턴을 프로토타입 활용 상속이라고 한다. 이 상속은 자바스크립트에서 유일한 상속 방법이며 클래스에 함수를 추가하기 위해서는 .prototype 속성을 사용한 후 함수의 이름을 지정하기만 하면 된다.

function ExampleClass() {
	this.arr = [1,2,3];
    this.name = "js";
}

var example1 = new ExampleClass();

ExampleClass.prototype.sayName = function() {
	console.log(this.name);
}
example1.sayName(); // "js"

-> 함수를 클래스에 동적으로 추가하는 방식이 자바스크립트가 프로토타입 활용 상속을 구현하는 방식이다.