Array_Methods & Object

1. 배열

배열은 순서 (index) 가 있고, 값 (element) 으로 구성되어 있다.

이를 통해 배열을 조회 또는 변경이 가능한데, 배열 안에 배열이 있는 '이중 배열'인 경우에도, 동일 방법으로 할 수 있다.

 

아래의 예시를 보자.

 

이중배열과 배열 안 요소 조회 방법

1 - 1. 배열의 기초 메소드

 

배열에서 사용되는 용어들은 기본적으로 이런 것들이 있다.

• index :
  • 문자열에서 사용했던 것과 비슷하게, 배열의 인덱스를 조회 또는 가져올 수가 있다. Ex., arr[i], arr[0]
• element : 배열 안의 것들을 요소 (element) 라고 부른다.
• length : 문자열에서의 사용법과 비슷하게 배열의 길이를 조회하는데 사용된다.
• push, pop
  • push(el) 는 배열의 맨 마지막에 'el' 이라는 요소를 추가할 때 사용한다.
  • pop() 을 통해서 배열의 맨 마지막 요소를 제거할 수도 있다.
• unshift, shift
  • unshift(el) 는 배열의 맨 앞에 'el' 이라는 요소를 추가할 때 사용된다.
  • shift() 는 반대로, 배열 맨 앞의 요소를 제거할 때 사용된다.
• slice, splice
  • slice(startIndex, endIndex) 를 통해 배열의 일부를 원하는 만큼 가져올 수가 있다.
  • 배열의 beginIndex부터 endIndex까지 (end 미포함) 얕은 복사를 한 후 새로운 배열 객체로 반환합니다.
  • 원본 배열은 바뀌지 않습니다. (IMMUTABLE)
  • splice(start, deleteCount, item1) 메소드는 배열의 기존 요소를 삭제/교체 또는 새 요소를 추가하여 배열의 내용을 변경한다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// output: Array ["Jan", "Feb", "March", "April", "June"]

 

• Array.isArray
  
  • 배열은 다른 'number', 'boolean', 'string' 타입들과 다르게 typeof 를 통해 그 타입 구분이 어렵다.
  • 따라서, Array.isArray 와 같은 메소드로 해당 배열이 배열이 맞는지 검사를 할 수 있다.

배열은 typeof를 통해 타입 확인이 어렵다.

• indexOf, includes
  • 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1 을 반환한다.
  • 해당 메소드를 통해 특정 값이 배열에 포함되어 있는지 확인할 수가 있다.
  • 두 가지 모두 사용은 동일하나, 호환성 문제로, indexOf 가 더 많이 사용된다.
  • includes 는 Internet Explorer 호환불가한 문제가 있음.

2. 객체

 

객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.

Ex. 객체의 속성을 조회하는 방법들 : dot notation, bracket notation.

let user = {
firstName: Gona,
lastName: Lee,
city: Seoul,
isMale: true
}

user.firstName; // Gona => dot notation
user['city']; // Seoul => bracket notation

 

obj.a = "hello" 와 같은 객체 할당 방식을 통해 객체를 더 쉽게 다룰 수가 있다.

user.isMarried = true; // 새로운 속성 추가

 

객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다. Ex. delete user.city;

 

in 연산자를 통해 해당하는 키가 있는지 확인 가능. Ex. 'content' in tweet; // true

객체를 위한 for문 for ... in 문도 존재한다.

 

번외로, 오늘 문제를 풀다가, 객체 속성의 갯수를 구하는 방법이 일반적인 길이 구하는 방법과 조금 다르다는 것을 알았다.

* Object 의 key 갯수 (length) 를 리턴시키라는 문제가 있다 : return Object.key(obj).length;

---

화살표 함수

 

1. 화살표 함수 (Arrow function) (=>) 는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.

 

2. 화살표 함수는 익명 함수로만 사용할 수 있다.

화살표 함수는 익명 함수

3. 콜백 함수 사용법은 아래와 같다.

필자는 이러한 사용법으로 화살표 함수를 제일 많이 사용했다.

 

화살표 함수의 콜백 함수 사용법

화살표 함수가 편리한 부분은 물론 있지만 그렇다고 너무 자주 사용하는 것은 오히려 혼란을 불러오기도 한다.

자세한 내용은 화살표 함수가 잘 정리된 참조 원문에서 살펴보도록 하자.