JS 배열 & 객체 기초

---

chpahter -배열기초

---

0.배열이란?

디양한 데이터(값)를 순서가존재하게 저장할 수 있는 데이터타입을 말한다.
참조 자료형이다.

01.배열의 구조

let myNumber = [73,98,86,61,96]

각 데이터(값)를 요소(element)라고하고, 순서(index)를통해 가르킨다

myNUmber[0] ===73

02.배열의 특징

• 인덱스를 벗어나면 undefined가 호출된다
• 이차원배열 -배열안에 배열을 넣을 수 있다
  [][]를통해 접근할 수 있다

  mtNumber[2][1]

03.배열의 반복문

1) for..of 반복

const array1 = ['a', 'b', 'c'];
for (const element of array1) {
  console.log(element);
}

배열의 기초메소드

01.배열의 길이조회

array.length
인덱스와 다르니 주의해야함

02. 배열에 요소추가하기

1)push()
array.push(elelment)

• 배열의 맨끝에 요소를 추가해줌
• 추가된 배열의 길이를 리턴해줌**
• 배열의 원본을 수정함

2)unshift()
array.unshifth(elelment)

• 배열의 맨처음에 요소를 추가해줌
• 추가된 배열의 길이를 리턴해줌
• 배열의 원본을 수정함

03. 배열의 요소 제거하기

1)Pop()
array.pop()

• 배열의 맨끝 요소를 제거함
• **제거한 요소를 리턴함
• 빈배열에 메서드를 사용시 undefinedf리턴**
• 배열의 원본을 수정함

2) shift()
array.shift()

• 배열의 맨앞 요소를 제거함
• 제거한 요소를 리턴함
• 빈배열에 메서드 사용시 undefined리턴**
• 배열의 원본을 수정함

04.배열 잘라내기

1) slice()

• 원본을 바꾸지않음
• 잘라낸 부분을 리턴함
• 예시

  const animals = ['ant', 'bison', 'camel', 'duck',  'elephant'];
  console.log(animals.slice(2));
  // expected output: Array ["camel", "duck", "elephant"]
  console.log(animals.slice(2, 4));
  // expected output: Array ["camel", "duck"]
  console.log(animals.slice(1, 5));
  // expected output: Array ["bison", "camel", "duck",  "elephant"]
  console.log(animals.slice(-2));
  // expected output: Array ["duck", "elephant"]
  console.log(animals.slice(2, -1));
  // expected output: Array ["camel", "duck"]

  arr.slice(i) // i번째 인덱스부터끝까지
  arr.slice(i,j)// i번째 인덱스부터 j번째인덱스전까지
  arr.slice(i,-j)// i번째 인덱스부터 끝에서시작한인덱스까지 

2) splice()

• 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경(원본변형)
• 삭제된요소를 배열로리턴
• 예시

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

• 해설
  arr.splice(i,j)
  // i번째인덱스부터 j개만큼 삭제//삭제된요소들을 배열로리턴
  arr.splice(i,j,k,l,m)
  //i번쨰 인덱스부터 j개만큼 삭제 후 k,l,m추가
  //삭제된 요소들을 배열로 리턴

05.배열합치기

1)concat()

• arr.concat(arr2,arr3)
• 기존배열과 요소배열을 합쳐서 새배열을 반환
• 원본에 영향x

  let arr= [1,2];
  arr.concat([3,4]);//[1,2,3,4]
  arr.concat([3,4],[5,6]); //[1,2,3,4,5,6,]
  arr.concat([3,4],5,6); //[1,2,3,4,5,6]

06.배열을 문자열로 바꾸기

1)join()

• 배열의 모든 요소를 연결해 하나의 문자열로 만듦, 문자열 리턴
• 원본은 바꾸지 않음
• 예시

  const elements = ['Fire', 'Air', 'Water'];
  console.log(elements.join());
  // expected output: "Fire,Air,Water"
  console.log(elements.join(''));
  // expected output: "FireAirWater"
  console.log(elements.join('-'));
  // expected output: "Fire-Air-Water"
  console.log(elements.join(' '));
  // expected output: "Fire Air Water"

  elements.join() // ,로 연결
  elements.join('') // 그냥연결
  elements.join('-') //-로연결
  elements.join(' ') // ' '로연결

7. 배열인지 아닌지 확인하기

1) typeof()

• 배열인지 객체인지 구분할 수 없다

  let array =[] ;
  console.log(typeof array) //"object"

2) Array.isArray()

• 불리언 값을 반환
• 배열인지 객체인지 확인할 때 유용

  let array =[] ;
  console.log(Array.isarray(array)) ;//true

8. 빈 배열인지 확인하기

1)shith나 pop을이용해 undefined가 리턴되면 빈배열임

let array =[]
 console.log(array.shift()) //undefined	
 console.log(array.pop()) //undefined 

2)배열의길이확인

console.log(array.length ===0) //true 

9.배열 요소 포함 여부 확인하기

1)indexOf(element)

let words= ['book','water','phone'];
words.indexOf('book')// 0
words.indexOf('water')//1
words.indexOf('없는단어')//-1

• 배열안에 요소가 있으면 요소의 index를 리턴
• 배열안에 없으면 -1 리턴

2)includes()

let words= ['book','water','phone'];
words.incloudes('book');//true
words.incloudes('water');//true
words.incloudes('없는단어');//flas

• 배열안에 요소가 있으면 true ,없으면 flase 리턴해줌
• 브라우저호환성에 약함

---

chpater -객체기초

---

0.객체란?

다양한 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 참조형 데이터 타입이다.

1.객체의 구조

let user ={
  firstName:'Hwang',
  lastName: 'jiwoong',
  phone : '010'
 };

1)중괄호를 이용해 객체를 생성한다
2)키(이름)와 값(value)의 쌍으로 이루진 속성(property)으로 이루어져있다
3)쉼표로 구분해준다
4)key는 문자열이다 / 값(value)는 어느데이터형태든 올 수 있다

02.객체의값에 접근하기

1)Dot notation -변수접근 불가능
2)Bracket notation -변수접근 가능

let user ={
firstName:'Hwang',
lastName: 'jiwoong',
phone : '010'
};
user.firstName ; //'Hwang'
user.['firstName']; //Hwang
const word1= 'firstName';
user.word1 ;//Dot notation은 변수의접근 불가
user[word1] ;//'Hwang'

03. 객체에 값 추가하거나 삭제하기

1)추가하기

let user ={
firstName:'Hwang',
lastName: 'jiwoong',
phone : '010'
};
user.age =26;
user['city'] =busan;

2)삭제하기

delete user.phone // 이름이 phone인 property삭제

04.객체에서만 사용가능한 in연산자

1)불리언값을 리턴함

let user ={
  firstName:'Hwang',
  lastName: 'jiwoong',
  phone : '010'
};
'firstName' in user; //true
'Name' in user ;//false

2)for ..in 반복문

• 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복
• 예제

const object = { a: 1, b: 2, c: 3 };
for (const key in object) {
  console.log(`${key}: ${object[key]}`);
}
// expected output:
// "a: 1"
// "b: 2"
// "c: 3"