[JavaScript] 05-1. 참조타입

< 프론트엔드 개발자를 위한 자바스크립트> (2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.

* 단원간 파트가 길어짐에 따라 단원을 분리하여 정리할 생각입니다.

이 장에서 다루는 내용

- 객체로 작업하기

- 배열 생성하고 조작하기

- 자바스크립트의 데이터 타입 이해

- 원시 데이터 및 원시 래퍼로 작업하기

- 참조 값(객체)란 특정 '참조 타입'의 인스턴스

- ECMAScript에서 참조 타입은 데이터 기능을 그룹으로 묶는 구조

- 참조 타입은 객체가 가져야 할 프로퍼티와 매서드를 정의한다는 점 때문에 '객체 정의' 라고도 불린다.

- 객체를 생성할 때는 new 연산자 뒤에 '생성자'를 사용 (생성자는 객체를 생성하는 함수)

5.1 Object 타입

- Object 타입은 ECMAScript에서 가장 많이 쓰이는 타입

- Object의 인스턴스에 많은 기능이 들어 있지 않지만 애플리케이션에 사용할 데이터를 저장하고 전송하는 목적에 안성맞춤

5.2 Array 타입

- Object 타입 다음으로 많이 쓰이는 Array 타입

- ECMAScript의 배열은 다른 프로그래밍 언어의 배열과 매우 다른데 데이터의 순서 있는 목록이라는 점은 다른 언어의 배열과 마찬가지지만 ECMAScript의 배열 슬롯에는 어떤 타입의 데이터라도 넣을 수 있다. (ex 배열의 첫 슬롯에 문자열, 두번째에는 숫자, 세번째에는 객체를 넣는 식으로도 사용 가능)

- ECMAScript의 배열은 동적으로 크기를 조절하므로 데이터를 추가하면 자동으로 커진다.

- Array 생성자를 사용할 때에는 new 연산자 생략 가능 [ ex : var colors = Array(3); = var colors = new Array(3); ]

- '배열 리터럴',  [] 안에 쉼표로 구분해 사용하는 방법 (ex : var colors = ["red", "blue", "yellow"]; )

5.2.1 배열 감지

- ECMAScript 5에서는 Array.isArray() 메서드를 제공

- Array.isArray() 메서드의 목적은 주어진 값이 배열인지 아닌지를 생성된 실행 컨텍스트와 무관하게 명확히 알고자 하는 것이다.

5.2.2 변환 메서드

- 객체에는 toLocaleStrint(), toString(), vlaueOf() 메서드가 있는데 배열에서 호출했을 때는 toString()과 valueOf() 메서드는 같은 값을 반환한다.

- 두 메서드가 반환하는 값은 쉼표로 분리된 문자열인데, 각 문자열은 배열의 해당 슬롯과 동등한 문자열, 즉 각 슬롯에서 toString()메서드를 호출한 결과와 같다.

5.2.3 스택 메서드

- ECMAScript 배열에서 배열이 다른 데이터 구조인 듯 동작하게 하는 메서드가 존재한다.

- 배열 객체는 데이터 삽입과 제거에 제한이 있는 데이터 구조인 스택처럼 동작할 수 있다.

- 스택은 LIFO (Last-in-first-out) 구조로 불리는데 이 말의 의미는 데이터를 삭제할 때는 마지막에 추가된 데이터가 제일 먼저 삭제된다는 뜻이다.

- 스택에서 데이터 '삽입'(push)과 '제거'(pop)하는 스택의 맨 위 단 한 지점에서만 발생한다. ECMAScript 배열에서는 push(), pop()  매서드가 있어 마치 스택처럼 동작할 수 있다.

5.2.4 큐 메서드

- 스택이 데이터 입출력을 LIFO로 제한하는 구조라면 큐는 데이터 입출력을 FIFO(First-in-first-out)로 제한하는 데이터 구조이다.

- 큐는 목록 마지막에 데이터를 추가하며 목록 맨 앞에서 데이터를 꺼낸다.

- push() 메서드는 배열 마지막에 데이터를 추가하므로 배열이 큐처럼 동작하게 하려면 배열의 첫 번째 데이터를 꺼내는 메서드만 있으면 된다.

- 배열에는 이런 기능을 하는 shift() 메서드가 존재한다. 이 메서드는 배열의 첫 번째 데이터를 꺼내서 반환하며 배열 길이는 1만큼 줄어들게 한다.

- shift(), push() 메서드를 사용하면 배열이 큐처럼 동작하게 할 수 있다.

- unshift() 메서드도 존재하는데 shift() 메서드와 반대로 동작한다. 매개변수로 넘겨받은 데이터를 배열의 처음에 추가하며 그에 맞게 변한 배열 길이를 반환한다.

-unshift() , pop()을 조합하면 큐의 반대, 배열 마지막에 데이터를 추가하고 앞에서 꺼내는 방식으로 사용가능하다.

5.2.5 정렬 메서드

- 배열 순서를 직접 조작하는 메서드에는 reverse(), sort() 두 가지가 존재한다.

- reverse() 메서드는 배열값의 순서를 뒤집고 sort() 메서드는 배열의 가장 작은 값이 첫 번째에 오고 가장 큰 값이 마지막에 오도록 정렬한다. sort() 메서드는 이를 위해 이면에서 String() 함수를 호출해 데이터를 문자열로 변환한 후 이를 비교하여 순서를 판단.

5.2.6 조작 메서드

- 배열에 들어 있는 데이터를 조작하는 메서드도 다양하다.

- concat() 메서드는 현재 배열 데이터를 기반으로 새로운 배열을 생성한다.

- slice() 메서드는 매개변수를 두 개 받는데 각 매개변수는 원래 배열에서 가져올 데이터 범위의 시작과 끝을 나타낸다. 매개변수 하나만 넘기면 해당 인덱스에서 끝까지 모든 데이터를 가져오고 매개변수 2개를 가져오면 첫 번째 매개변수에 해당하는 인덱스부터 두 번째 매개변수에 해당하는 인덱스 바로 앞까지 가져온다. slice() 메서드는 원래 배열은 전혀 건드리지 않는다.

- 배열 메서드 중 가장 강력한 메서드는 splice()일 것이다. splice()의 주요 목적은 배열 중간에 데이터를 삽입하는 것인데 이 메서드는 세 가지 방법으로 사용한다.

- 삭제 - splice 메서드를 이용해 숫자 배열 데이터를 원하는 만큼 삭제 가능

- 삽입 - 매개변수를 세 개 이상 넘기면 배열에 데이터를 삽입가능하다.

- 대체 - 삽입과 삭제를 조합하면 언하는 데이터를 다른 데이터로 대체 가능하다.

5.2.7 위치 메서드

- ECMAScript 5에서는 배열에 indexOf()와 lastIndexOf() 두 위치 메서드가 추가되었다.

- 이 메서드는 매개변수를 두 개 받는데 첫 번째 매개변수는 검색할 데이터이며 옵션인 두 번째 매개변수는 검색을 시작할 인덱스이다.

- 이 두 메서드를 사용하면 배열에서 특정 데이터의 위치를 쉽게 찾을수 있다.

5.2.8 반복 메서드

- ECMAScript 5에서는 배열에 다섯 가지 반복 메서드를 추가하였다.

- 이 메서드는 모두 매개변수를 두 개 받는데 하나는 배열의 각 데이터에서 실행할 함수이며 다른 하나는 함수를 실행할 스코프 객체이다.

- 스코프는 this 값에 영향을 미치며 콜백 함수는 모두 데이터, 데이터의 인덱스, 배열 자체의 세가지 매개변수를 받는다

- 콜백 함수를 실행했을 때 메서드의 반환 값에 어떤 영향을 미치는지는 메서드에 따라 다르다.

5.2.9 감소 메서드

- ECMAScript 5에서는 배열의 감소 메서드 reduce() 와 reduceRight()도 도입하였다.

- 두 메서드는 모두 배열을 순회하며 콜백 함수를 실행하고 값을 하나 만들어 반환한다.

- reduce() 메서드는 배열의 숫자를 모두 더하는 것 같은 작업에 활용 가능하다.

* 정리후기

- 정리하면서 스택, 큐와 같은 자료구조 내용이 나와서 놀랬다. 시험때문에 자료구조 공부했었는데 덕분에 이해하기가 한결 수월하였다. 공부하는 속도나 체감 난이도도 오히려 시험전보다 낮아진것같아 좋다. 그런데 5장은 많이 길어서 약간 머리 아프기도.. 예제도 이해는 가지만 다음에 볼때 각 메서드 부분들의 특징들이 떠오를지 장담할수가 없다. 프로그래밍 공부는 외우는게 아니라 대략적으로 알고 필요할때 검색하자 라는 주의라 달달 외우지는 않았다.