[JavaScript] 배열과 객체

배열 Array

• 배열은 순서(index)가 있는 값이며, index는 0부터 번호를 매김
  [ 대괄호 ] 를 이용해 배열을 만들고 각각의 element는 쉼표 , 로 구분
• index를 이용해 값(요소(element))에 접근 가능
• 없는 인덱스 조회시 undefined
• 배열 안에 배열 중첩 가능 : 이차원 배열 등등
• console.table(arr) : 인덱스와 값을 테이블로 보여줌
• [ ] === [ ] → false
  구조상으론 같은 배열로 보여도 주소가  다른 두 개의 빈배열

let myNumber = [1, 2, 3, 4, 5, 6]; //각각의 엘리먼트는 쉼표로 구분
myNumber[3]; //4
myNumber[2] = 8 //2번 인덱스의 값인 3이 8로 바뀜 [1, 2, 8, 4, 5, 6]
myNumber[10]; //undefined

 

이차원 배열	0	1
0	1	2
1	3	4
2	5	6

let myNumber = [
  [1,2],  //0
  [3,4],  //1
  [5,6]   //2
]; //이차원 배열
myNumber[1] //[3,4]
myNumber[1][0] //3
//상단의 표를 참고!

 

배열의 반복

• i = 0 → 배열은 항상 0부터 시작 (index)
• i < myNumber.length → 배열의 길이보다 작을 때까지 반복

let myNumber = [1, 2, 3, 4, 5, 6];
for(let n = 0; n < myNumber.length; n++){
 console.log(myNumber[n]); //1 2 3 4 5 6
}

let myNumber = [1, 2, 3, 4, 5, 6];
for(let n = 1; n < myNumber.length; n++){
 console.log(myNumber[n]); //2 3 4 5 6
}

let myNum = [10, 20, 30, 40]
let sum = 0 //초기값을 입력해주지 않으면 undefined가 되어 NaN 출력
for (let i = 0 ; i < myNum.length; i++){
  sum = sum + myNum[i]
}
console.log(sum) //100

 

 

배열의 기초 메소드

1. arr.length

• 길이 알아내기
• 배열이 빈 배열인지 확인하려면 arr.length === 0

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.length; //6
//온점 . (dot)을 이용해서 관련된 명령(method)을 실행

//index는 0부터 시작이지만
//length는 문자열의 갯수를 나타내므로 1부터 시작함
//length가 0일 경우 빈배열 []

 

2. Array.isArray()

• 배열인지 아닌지 확인
• typeof 사용 시 object가 나와 객체인지 배열인지 알 수 없음
• true / false

let myNumber = [1, 2, 3, 4, 5, 6];
Array.isArray(myNumber); //true

typeof myNumber //object
typeof [1, 2, 3] //object

let fuck = { a:1 } //객체
typeof fuck //object

 

3. arr.push() & arr.pop()

• 배열 맨 뒤 요소 추가 및 삭제

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.push(7); //7 => 총 length(길이) 출력
//[1, 2, 3, 4, 5, 6, 7]

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.pop(); //6 => 삭제된 요소 출력
//[1, 2, 3, 4, 5]

 

4. arr.shift() & arr.unshift()

• 배열 맨 앞 요소 추가 및 삭제

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.shift(); //1 => 삭제된 요소 출력
//[2, 3, 4, 5, 6]

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.unshift(7); //7 => 총 length 출력
//[7, 1, 2, 3, 4, 5, 6]

 

5. arr.indexOf & arr.lastIndexOf

• 배열 요소 포함 여부 확인
• 첫번째 값만 반환하고 끝

let myNumber = [1, 2, 3, 4, 5, 1, 2];
myNumber.indexOf(2); //1 : 해당 요소가 위치한 인덱스
myNumber.indexOf(8); //-1 : 없는 요소일 경우 -1을 출력
myNumber.indexOf(2, 2); //6 : 2부터 2를 탐색하므로 뒤에 있는 2의 인덱스

myNumber.indexOf(2) !== -1  //요소의 존재여부를 확인하기 위해선 -1만 아니면 됨
true
myNumber.indexOf(10) !== -1
false

myNumber.lastIndexOf(2); //6
myNumber.lastIndexOf(8); //-1

 

6. arr.includes()

• 배열 요소 포함 여부를 불린형(true/false)으로 확인
• Internet Explorer에서 사용 불가(에러 발생)

let myNumber = [1, 2, 3, 4, 5, 6];
myNumber.includes(3); //true
myNumber.includes(8); //false

 

7. arr.splice()

• 배열의 특정 요소를 지울 수 있음
• arr.splice(n, m) : n번째 요소부터 m개를 지워라
• arr.splice(n, m, x) : n번째 요소부터 m개를 지우고 x를 뒤에 추가
• mutable method : 원본 배열을 변경
• 삭제된 요소를 반환

let myNumber = [1, 2, 3, 4, 5];
myNumber.splice(1,2); //[2, 3]
//1번 인덱스부터 2개를 지워라

console.log(myNumber)
//[1,4,5]

let myNumber = [1, 2, 3, 4, 5];
myNumber.splice(1,3,10,20); //[2, 3, 4]
//1번 인덱스부터 3개를 지우고 10, 20을 넣어라

console.log(myNumber)
//[1,10,20,5]

let myArr = ['우끼끼', '침팬지', '입니다'];
myArr.splice(1, 0, '무지성', '디스페어'); //[]
//아무것도 지우지 않고 0과 1 사이에 추가

console.log(myArr)
//['우끼끼', '무지성', '침팬지', '디스페어', '입니다']

 

8. arr.slice()

• arr.slice(n, m) : n번째 요소부터 m의 바로 앞까지 반환
• m번째 인덱스는 포함하지 않음
• m을 적지 않을 경우 배열 끝까지 반환
• n > m인 경우 []을 리턴
• 괄호 안에 아무것도 적지 않거나 0을 적으면 전체 배열이 새로운 주소로 복사됨
• arr의 길이와 같거나 큰 수 입력시 []을 리턴
• immutable method : 원본 배열을 수정하지 않음

let myNumber = [1, 2, 3, 4, 5];
myNumber.slice(1,4); //[2,3,4]
//1번 인덱스부터 4번 인덱스의 바로 앞인 3까지
console.log(myNumber)//[ 1, 2, 3, 4, 5 ]

let myNumber2 = myNumber.slice()//[1, 2, 3, 4, 5];
let myNumber3 = myNumber.slice(0)//[1, 2, 3, 4, 5];
//원본 배열을 수정하지 않고 배열을 복사

 

9. arr.concat()

• 합쳐서 새 배열 반환
• immutable method : 원본 배열을 수정하지 않음

let myNumber = [1, 2];
let myNumber2 = [3, 4, 5];

myNumber.concat([3, 4]) //[1, 2, 3, 4]
myNumber.concat([3, 4], [5, 6]) //[1,2,3,4,5,6]
myNumber.concat([3, 4], 5, 6) //[1, 2, 3, 4, 5, 6]
myNumber.concat(myNumber2) //[1, 2, 3, 4, 5]

console.log(myNumber); //[1, 2]

 

10. arr.forEach(fn)

• 배열 반복
• 3개의 매개변수를 가진 함수를 인수로 받음
• 3개의 매개변수 : 해당 요소, 인덱스, 해당 배열 자체
  - 해당 요소 : Despair,  Monkey / 해당 배열 : users
• 보통 해당 요소, 인덱스만 사용

let users = ['Despair', 'Monkey'];
users.forEach((name, index) => {
  console.log(name)//'Despair' 'Monkey'
  console.log(`${index+1}. ${name}`)//'1. Despair' '2. Monkey'
});

 

11. arr.find(fn) / arr.findIndex(fn)

• 함수를 인자로 받아 포함 여부 확인
• 짝수 찾기, 성인 찾기 등이 가능
• arr.find(fn) : 첫번째 true값만 반환, 없으면 undefined 반환
• arr.findIndex(fn) : 해당 인덱스를 반환, 없으면 -1을 반환

let myNumber = [1, 2, 3, 4, 5];
const result = myNumber.find((num) => {
  return num % 2 === 0;
});

console.log(result)//2

let userList = [
  {name : 'Despair', age : 20},
  {name : 'Fucking', age : 25},
  {name : 'Monkey', age : 2},
];
const result = userList.find((user) => {
  if(user.age > 19){
    return true;
  }
  return false;
});

console.log(result)//{ name: 'Despair', age: 20 }

let userList = [
  {name : 'Despair', age : 20},
  {name : 'Fucking', age : 25},
  {name : 'Monkey', age : 2},
];

const result1 = userList.findIndex(user => user.age < 19);
console.log(result1)//0

const result2 = userList.findIndex(user => user.age > 19);
console.log(result2)//2

const result3 = userList.findIndex(user => user.age > 40);
console.log(result3)//-1

 

12. arr.filter(fn)

• 만족하는 모든 요소를 배열로 반환

let myNumber = [1, 2, 3, 4, 5];
const result = myNumber.filter((num) => {
  return num % 2 === 0;
});

console.log(result)//[ 2, 4 ]

let userList = [
  {name : 'Despair', age : 20},
  {name : 'Fucking', age : 25},
  {name : 'Monkey', age : 2},
];
const result = userList.filter((user) => {
  if(user.age > 19){
    return true;
  }
  return false;
});

console.log(result)
//[
//  {name : 'Despair', age : 20},
//  {name : 'Fucking', age : 25}
//]

 

13. arr.reverse()

• 역순으로 재정렬
• 최근에 달린 댓글 순으로 보여주고자 할 때 사용

let myNumber = [1, 2, 3, 4, 5];
myNumber.reverse(); //[5, 4, 3, 2, 1]

 

14. arr.map(fn)

• 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
• immutable method : 원본 배열을 수정하지 않음

let userList = [
  {name : 'Despair', age : 20},
  {name : 'Fucking', age : 25},
  {name : 'Monkey', age : 2},
];
let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id : index + 1,
    isAdult : user.age > 19,
  });
});

console.log(newUserList)
//[
//   { name: 'Despair', age: 20, id: 1, isAdult: true },
//   {
//     name: 'Fucking',
//     age: 25,
//     id: 2,
//     isAdult: true
//   },
//   { name: 'Monkey', age: 2, id: 3, isAdult: false }
// ]

console.log(userList)
//[
//   { name : 'Despair', age : 20 },
//   { name : 'Fucking', age : 25 },
//   { name : 'Monkey', age : 2 },
// ]

 

15. arr.join()

• 배열의 요소들을 합쳐 문자열을 만들 때 사용
• 괄호 안에 아무것도 적지 않으면 쉼표로 구분되어 나옴

let myArr = ['나는', '침팬지', '입니다'];
let result = myArr.join(' ') //공백으로 구분
console.log(result);
//'나는 침팬지 입니다'

 

16. arr.split()

• 문자열을 나눠서 배열로 만들어줌
• 괄호 안엔 어떤 것을 기준으로 나눌 지 정해줌

const users = 'Despair', 'Fucking', 'Monkey';
const result = users.split(',') //,를 기준으로 나눔
console.log(result);
//[ 'Despair', 'Fucking', 'Monkey' ]

 

17. arr.sort()

• 배열 재정렬
• 정렬시 배열의 요소를 문자열로 취급
• 문자열도 알파벳 숫서대로 정렬
• 함수를 인수로 받음
  * Lodash 라이브러리 활용하여 원하는 기준으로 정렬 가능
• mutable method : 원본 배열을 변경

let myNumber = [1, 3, 5, 2, 4];
myNumber.sort();
console.log(myNumber)
//[ 1, 2, 3, 4, 5 ]

let myNumber = [3, 13, 5, 27, 4];
myNumber.sort();
console.log(myNumber)
//[ 13, 27, 3, 4, 5 ] //1과 2로 시작하는 13과 27이 앞에 위치

let myNumber = [3, 13, 5, 27, 4];
function fn(a, b){
  return a - b; //a와 b를 비교하여 작은 수를 앞으로 보냄
}
myNumber.sort(fn);
console.log(myNumber)
//[ 3, 4, 5, 13, 27 ]

let myNumber = [3, 13, 5, 27, 4];
myNumber.sort((a,b) => a - b)
console.log(myNumber)
//[ 3, 4, 5, 13, 27 ]

 

18. arr.reduce()

• 함수를 인수로 받음
• 배열을 순환하며 원하는 작업을 한 후 하나의 결과값 반환
• arr.reduceRight() : 배열 우측부터 연산을 수행

let arr = [1, 2, 3, 4, 5];
let result = 0;
arr.forEach((num) => { //forEach를 활용해 베열을 순환하며 더함
  result += num;
});
console.log(result); //15

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((prev, cur) => { //누적 계산값과 현재값
  return prev + cur; //누적값에 현재값을 더해줌
}, 0); //초기값은 0
console.log(result); //15

let userList = [
  {name : 'Despair', age : 20},
  {name : 'Fucking', age : 25},
  {name : 'Monkey', age : 2},
];
let result = userList.reduce((prev, cur) => {
  if(cur.age > 19){
    prev.push(cur.name)
  }
  return prev
}, [])
console.log(result); //[ 'Despair', 'Fucking' ]

 

 

객체 Object

• 중괄호를 이용해 객체를 만듦
• property → 키와 값의 쌍
• 키와 값의 쌍은 서로 쉼표로 구분
• 키와 값 사이는 콜론 (:) 으로 구분
• 객체 안엔 함수가 들어갈 수 있음
  user대신 this 사용, 화살표함수에선 this 사용 불가 (메소드 호출 방식을 이용할 때에는 화살표 함수 사용 불가)

let user = {
  firstName: 'Despair', //(키 => firstName, 값 => Despair) => 프로퍼티
  lastName: 'Nightmarish',
  city: 'Hell',
  sayHello(){
    console.log(`Hello, i'm ${this.firstName}`)
  }
}

//1. Dot notation
user.sayHello() //Hello, i'm Despair

//2. Bracket notation
user['sayHello()'] //undefined

 

1. 객체의 값을 사용하는 방법

1-1. Dot notation

• '.' 을 사용하여 접근
• 없는 property에 접근시 undefined

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}
  
user.firstName; //'Despair'

 

1-2. Bracket notation

• '[]'를 사용하여 접근
• 대괄호 안에 키가 문자열로 들어감
• 문자열 형식이 아닐 경우 변수로 취급
  변수로 선언된게 없으면 레퍼런스 에러 발생
• 없는 property에 접근시 undefined

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}
  
user['firstName']; //'Despair'
user['address']; //'undefined'

 

1-3. Dot notation VS Bracket notation

• Dot notation : 정해진 키만 사용 가능(변수 불가능)
• Bracket notation : 키가 변수(동적인 값)일 경우에도 사용 가능
  - 대괄호 안에 '' 사용 X

fuction getProperty(obj, propertyName) {
  return obj.propertyName//propertyName이라는 키가 있을 때만 가능
  return obj[propertyName]//''없이 매개변수를 그대로 담아줌

 

 

객체 속성의 추가, 조회, 변경, 삭제

1. 값을 추가하기

• Dot notation, Bracket notation을 이용해 추가 가능

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}
  
user['isAdult'] = true; 
user.job = 'Monkey';

console.log(user)
//{
//    firstName : 'Despair',
//    lastName : 'Nightmarish',
//    city : 'Hell',
//    isAdult : true,
//    job : 'Monkey'
//}

 

2. 값을 변경하기

• Dot notation, Bracket notation을 이용해 변경 가능

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}
  
user['city'] = 'Heaven'; 
user.firstName = 'Hope';

console.log(user)
//{
//  firstName: 'Hope',
//  lastName: 'Nightmarish',
//  city: 'Heaven'
//}

 

3. delete : 값을 삭제하기

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell',
  isAdult : true,
  job : 'Monkey'
}
  
delete user['isAdult']; 
delete user.job;

console.log(user)
//let user = {
//    firstName : 'Despair',
//    lastName : 'Nightmarish',
//    city : 'Hell',
//}

 

4. in 연산자 : 키가 있는지 확인하기

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}

'city' in user; // true
'address' in user; //false

 

5. for in 구문

• 객체의 모든 키에 접근하고 출력할 수 있음
• 객체를 순회함
  * for of : string과 array, 유사배열 등에서 사용(객체에는 사용되지 않음)

let user = {
  firstName : 'Despair',
  lastName : 'Nightmarish',
  city : 'Hell'
}

for (let key in user) {
  console.log(key)
//'firstName'
//'lastName'
//'city'
  console.log(user[key])//키가 동적인 값 Bracket notation
//'Despair'
//'Nightmarish'
//'Hell'
}

 

6. 빈 객체

let obj = {}

Object.keys(obj).length === 0

 

 

객체의 기초 메소드

1. Object.assign()

• 객체 복제

let user = {
  name : 'Despair',
  age : 20
}

const newUser = Object.assign({}, user);//{} : 초기값
//빈 객체에 user 객체가 병합되어 복제
//newUser의 이름을 바꾸어도 user는 변화 X

const newUser = Object.assign({city : 'Hell'}, user);
console.log(newUser)
//{ city: 'Hell', name: 'Despair', age: 20 }

const newUser = Object.assign({name : 'Nightmarish'}, user);//name 덮어짐
console.log(newUser)
//{ name: 'Nightmarish', age: 20 }

let user = {
  name : 'Despair'
}
let info1 = {
  age : 20
}
let info2 = {
  city : 'Hell'
}

const newUser = Object.assign(user, info1, info2);
console.log(newUser)
//{ name: 'Despair', age: 20, city: 'Hell' }

 

2. Object.keys()

• 객체의 키를 배열로 반환
• object.length는 사용 불가능하기에 Object.keys()를 활용해 유사 배열로 만들어줌
• 배열에 사용할 경우 index가 배열의 형태로 반환

let user = {
  name : 'Despair',
  age : 20,
  city: 'Hell'
}
Object.keys(user)
//[ 'name', 'age', 'city' ]

console.log(user.length) //undefined
console.log(Object.keys(user).length) //3

 

3. Object.values()

• 객체의 값을 배열로 반환
• 배열에도 사용 가능

let user = {
  name : 'Despair',
  age : 20,
  city: 'Hell'
}
Object.values(user)
//[ 'Despair', 20, 'Hell' ]

 

4. Object.entries()

• 키와 값을 모두 배열로 반환
• 키와 값이 쌍으로 묶여 배열이 됨
• 배열 안에 배열

let user = {
  name : 'Despair',
  age : 20,
  city: 'Hell'
}
Object.entries(user)
// [
//   [ 'name', 'Despair' ],
//   [ 'age', 20 ],
//   [ 'city', 'Hell' ]
// ]

 

5. Object.fromEntries()

• 키와 값을 배열을 객체로 반환

let user = 
[
    [ 'name', 'Despair' ],
    [ 'age', 20 ],
    [ 'city', 'Hell' ]
]
Object.fromEntries(user)
//{ name: 'Despair', age: 20, city: 'Hell' }

 

 

Reference

mutator method
배열 메소드1
배열 메소드2

객체 메소드1
객체 메소드2