JavaScript 특징 & Array Function

Array Function

Array.slice Vs Array.splice

1. Array.slice()

   Array.slice(start, end) : 어떤 배열의 특정 부분(begin부터 end까지)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

   원본 배열은 바뀌지 않습니다.

   begin 부터 end 인자 전까지를 반환합니다.

   const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
   
   console.log(animals.slice(2, 4));
   // expected output: Array ["camel", "duck"]
   // animals[2]부터 animals[4] 전까지 반환
   
   console.log(animals.slice(2, -1));
   // expected output: Array ["camel", "duck"]
   // animals[2]부터 animals[animals.length - 1] 전까지 반환

2. Array.splice()

   array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

   start : 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 시작 인덱스는 배열의 길이로, 음수인 경우 배열의 끝에서부터 요소를 세어 설정됩니다.

   deleteCount : 배열에서 제거할 요소의 수 입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. 0 이하일 경우 어떤 요소도 제거하지 않습니다.

   item1, item2, ... Optional : 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

   const months = ['Jan', 'March', 'April', 'June'];
   
   months.splice(1, 0, 'Feb');
   // expected output: Array ["Jan", "Feb", "March", "April", "June"]
   
   months.splice(4, 1, 'May');
   // replaces 1 element at index 4
   // expected output: Array ["Jan", "Feb", "March", "April", "May"]

   특이사항 : 배열도 객체이기 때문에 delete 연산자를 사용할 수 있습니다. 하지만 공백으로 표시 되어버리기 때문에 splice를 사용하는 것이 일반적입니다.

Array function

1. Array.sort()

   arr.sort([compareFunction]) : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.

   array.sort()는 값의 타입을 알 수 없기 때문에 사용자가 원하는 대로 정렬되지 않을 수 있습니다. (배열에 숫자값을 넣어도 문자열처럼 정렬)

   -> compareFunction에 알맞은 함수를 정해줘야 함

   const array1 = [1, 30, 4, 21, 100000];
   array1.sort();
   // expected output: Array [1, 100000, 21, 30, 4]
   // 숫자 크기가 아닌 문자열을 기준으로 정렬된다.

2. Array.join()

   array.join([separator]) : 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

   separator Optional: 배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환되고 생략할 경우 배열의 요소들이 쉼표로 구분됩니다.

   separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.

   const elements = ['Fire', 'Air', 'Water'];
   
   console.log(elements.join());
   // expected output: "Fire,Air,Water"
   // separator 생략으로 쉼표로 구분
   
   console.log(elements.join(''));
   // expected output: "FireAirWater"
   // separator가 빈 문자열이므로 아무 문자없이 연결

   만약 많은 수의 문자열을 하나로 합쳐야 한다면 각각의 문자열을 배열에 담은 후 join 메소드를 사용하는 것이 +연산자로 연결하는 것 보다 빠릅니다.

JavaScript 특징

JavaScript의 특징은 다음과 같습니다.

1. 1급 객체인 함수 : 함수는 어휘적 유효범위를 갖는 람다입니다.

2. 프로토타입으로 상속을 하는 동적 객체 : 객체는 클래스가 필요 없고 단순히 할당하는 식으로 새로운 구성요소를 추가할 수 있습니다.

3. 객체 리터럴과 배열 리터럴 : 새로운 객체와 배열을 생성하는 매우 편리한 표기법 입니다.

1급 객체란

일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.

JavaScript는 함수가 1급 객체이기 때문에 다음과 같은 특징을 가집니다.

1. 함수 할당

   const a = function() {
   //function body...
   };

2. 함수의 매개변수 가능

   // parameter로 들어갈 함수
   const parameterFunc = () => {
     console.log('function!');
   }
   
   // 함수 표현식으로 exFunc함수 생성
   const exFunc = function(parameterFunc) {
     parameterFunc();
   };

3. 반환 값으로 함수가 사용 될 수 있음

   // 반환값으로 사용 될 함수
   const returnFunc = (num) => {
     return num * num;
   
   const exFunc = function(x, y) {
     return returnFunc(x + y);
   };

함수가 1급객체로 사용된다는 특징은 콜백 함수의 사용에서 가장 특징적으로 드러납니다.

```javascript
//버튼이 클릭 되었을 시 실행되는 콜백 함수
const clickFunc = () => {
  console.log('Click Function!');
}

<button onClick = {() => clickFunc()} />
```