191203_TIL_(JavaScript-object/array)

jotang·2019년 12월 3일
0

개발로그

목록 보기
11/18

1. Object

  • object 역시 array 처럼 순회가 가능하다. 단지 array와 다르게 명확하게 정해진 순서가 없기 때문에 어떤 순서에 따라 object의 key에 접근하게 될 지는 알 수 없다. ('순서가 보장되지 않은 순회')

1.1 Object.keys()

  • 개체의 고유 속성의 이름을 array로 반환한다.
    cosnt object {
    	 name: jotang,
     	age: 31,
     	city: busan
     	phone: 0101234567
    };
    Object.keys(object) // ['name', 'age', 'city', 'phone']
 * Object.values() / Object.entries()
  * Object.values() : object의 key가 아닌 value로 이루이어진 array 를 return 한다.
  * Object.entries() : object의 key와 value로 이루어진 array를 array로 reuturn 한다.
  ```javascript
Object.values(object) // ['jotang', 31, 'busan', 0101234567]
Object.entries(object) 
// [['name', 'jotang'], ['age', 31], ['city', 'busan'], ['phone', 0101234567]]

1.2 for - in

  • ES6에서 object와 array를 위해 특별히 추가된 문법이다.
  • object 외에도 일반적인 array에도 굉장히 유용하다.
// array에서의 for-in
const name = ['jotang', 'dongtak', 'dama', 'health']
for (let i in name) {
  	console.log(i) //index value
  	console.log(name[i]) // 'jotang', 'dongtak' 등 각 요소 반환
}
// object에서의 for-in
cosnt object {
 	 name: jotang,
  	age: 31,
  	city: busan
  	phone: 0101234567
};
for (let i in object) {
  	console.log(i) // 해당 object의 key // 'name', 'age', 'city', 'phone'
	  console.log(object[i]) //object의 value // 'jotang',31,'busan',0101234567
}

2. Array

2.1 Array

  • object와 같이 앞서 array에 대해서 정리하였지만 한번 더 학습하도록 한다.
  • array란 여러개의 항목들이 들어있는 리스트와 같다.
const array = [1, 2, 3, 4, 5];
array[0] = 1;
array[1] = 2;
//객체 배열
const objects = [{name: '멍멍이'}, {name: '야옹이'}]
object[0] = {name: '멍멍이'}
object[1] = {name: '야옹이'}

2.2 array의 내장함수

  1. push() / unshift() / pop() / shift()
  • push() : 배열의 맨 뒤에 추가
  • unshift() : 배열의 맨 앞에 추가
  • pop() : 배열의 마지막 요소를 추출, 마지막 요소의 값을 반환한다.
  • shift() : 배열의 제일 앞 요소를 추출, 제일 앞 요소의 값을 반환한다.
  • pop() / shift() : 추출하는 과정에서 기존 array에서 해당 요소는 사라진다)
  1. forEach()
  • for문을 대체 할 수 있다. 배열의 각 요소별로 지정된 함수를 실행한다.
    const superheroes = ['아이언맨', '토르', '헐크', '스파이더맨']
    //for문 사용
    for(let i = 0; i < superheroes.length; i++) {
     		console.log(superheroes[i);
    }
    // forEach()
    superheroes.forEach(hero => {
     		console.log(hero);
    });
 * 함수형태의 parameter를 전달하는 것을 callback 함수라고 부른다. 


3. map() 
 * forEach()와 같이 array를 반복해주고, array안의 각 요소를 변환 할 때 사용한다. 
 * callback 함수에서 return한 값으로 각각의 요소를 수정하고 수정된 값으로 다시 새로운 array를 만든다. 쉽게 말해서 array의 각 요소별로 지정된 함수를 실행하고 그 결과로 구성된 새로운 array를 반환하게 된다.
 ```javascript
const array = [1, 2, 3, 4, 5, 6, 7, 8];
// 위 array를 제곱하여 새로운 array를 만들고 싶다면??
// for 문
const array2 = [];
for(let i = 0; i < array.length; i++) {
 		 array2.push(array[i] * array[i]);
}
const array2 = [];
//forEach()
array.forEach(n => {
  		array2.push(n * n);
}
//map()
const array2 = n => n * n
const array3 = array.map(array2)

https://www.robinwieruch.de/javascript-map-array/

  1. indexOf()
  • 내가 찾고자 하는 항목의 index를 찾아주는 함수이다.
  • array 안의 값이 number, string, boolean 일 때
    const superheroes = ['아이언맨', '토르', '헐크', '스파이더맨'];
    const index = superheroes.indexOf('헐크');
    console.log(index) // 2

5. findIndex() / find()
 * array안의 값이 object이거나 array 일 때
 ```javascript
const todos = [
  {
    	id: 1,
    	text: '자바스크립트 입문',
    	done: true
  },
  {
    	id: 2,
    	text: '함수 배우기',
    	done: true
  },
  {
    	id: 3,
    	text: '객체와 배열 배우기',
    	done: true
  }];
const index = todos.findIndex(todo => todo.id === 2);
console.log(index) // 1
  • findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다.
  • find() 함수는 findIndex()와 비슷하지만, find()는 찾아낸 값 자체를 반환한다.
    const index2 = todos.find(todo => todo.id === 1);
    console.log(index2) // {id: 1, text: '자바스크립트 입문', done: true}

6. splice() / slice()
*  splice()
 * array에서 특정 요소를 제거할 때 사용하는 함수이다.
 * index를 알아내고, 이를 splice()를 통해서 지울수 있따.
 ```javascript
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers); // [10, 20, 40]
// splice(제거할 index, 몇개를 지울지를 의미, 그 자리에 추가될 요소)
  • slice()
  • array을 잘라낼 때 사용하지만, 기존의 array는 건드리지 않는다.
    const numbers = [10, 20, 30, 40];
    const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지
    console.log(sliced); // [10, 20]
    console.log(numbers); // [10, 20, 30, 40]
    // slice(어디서부터 자를지, 어디까지 자를지)

7. concat() / join()
* concat() 
 * 여러개의 array를 하나의 array로 합쳐준다.
 ```javascript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated); // [1, 2, 3, 4, 5, 6];
// arr1과 arr2에는 변화를 주지 않는다.
  • join()
  • array안의 값들을 문자열 형태로 합쳐준다.
    const array = [1, 2, 3, 4, 5];
    console.log(array.join()); // 1,2,3,4,5
    console.log(array.join(' ')); // 1 2 3 4 5
    console.log(array.join(', ')); // 1, 2, 3, 4, 5

8. reduce()
 * 주어진 array의 총 합을 구하는데 유용하게 사용할 수 있다.
 ```javascript
const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);
  • reduce()는 2개의 parameter를 전달한다.
    • accmulator와 current를 parameter로 가져와서 결과를 반환하는 callback 함수
    • 2번째 parameter는 reduce함수에서 사용할 초기 값
    • accmulator는 누적된 값을 의미한다.

https://learnjs.vlpt.us/basics/09-array-functions.html
http://blog.302chanwoo.com/2017/08/javascript-array-method/

profile
Jotang's velog

0개의 댓글