Array는 [], Object는 {}

* 공부한 내용을 다시 기억하고 정리하기 위해 쓰는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사합니다.

---

배열 array는 [],  객체 object는 {} 이런 형태가 100%는 아니지만... 대부분은 맞다고 하니까 우선 이렇게 외워야겠다ㅎ(머쓱)

 

배열 array

• 변수 하나에 여러 자료를 순차적으로 저장 할 수 있음.
• var 변수 = [자료1, 자료2, 자료3, ...];

var coffee = ['아메리카노', 'ice', 4000];


// 배열에서 원하는 자료를 꺼내려면 변수 뒤에 인덱싱을 하면 됨
coffee[2]; // return 4000


// 배열의 자료 추가/수정 하는 방법
coffee[0] = "카라멜마끼아또";


// 배열의 갯수
coffee.length; // 3

(왼) 콘솔로 찍어보면 coffee 라는 변수에 담긴 자료 확인 가능 (우) 자료 추가/수정 함 아메리카노 → 카라멜마끼아또

 

// 문자 → 배열
// split(',');를 사용하면 문자를 콤마로 구분해줌
var coffee = '아메리카노,라떼,카라멜마끼아또,카페라떼,카페모카';
var coffeeArray = coffee.split(',');
coffeeArray; // '아메리카노', '라떼', '카라멜마끼아또', '카페라떼', '카페모카'


// 1. 배열 → 문자
// join(',');을 사용하면 배열형태의 자료를 다시 문자로 만듦 (단, 매개변수 필요O)
var coffeeAgainString = coffeeArray.join(',');
coffeeAgainString; // '아메리카노,라떼,카라멜마끼아또,카페라떼,카페모카'

var coffeeAgainString = coffeeArray.join('+');
coffeeAgainString; // '아메리카노+라떼+카라멜마끼아또+카페라떼+카페모카'


// 2. 배열 → 문자
// toString(); 매개변수 필요X (단, 항상 콤마를 사용함)
coffeeArray.toString(); // '아메리카노,라떼,카라멜마끼아또,카페라떼,카페모카'

 

 

🌵 배열에서 요소 제거하기(pop, shift, splice)

// 배열의 마지막 요소 제거
const target = ['가', '나', '다', '라', '마'];
tarset.pop();
console.log(target); // ['가', '나', '다', '라'];


// 배열의 첫번째 요소 제거
const target2 = ['가', '나', '다', '라', '마'];
tarset2.shift();
console.log(target2); // ['나', '다', '라', '마'];


// 배열의 중간 요소 제거
const target3 = ['가', '나', '다', '라', '마'];
tarset3.splice(3,2);  // 3번째 요소의 자리에서부터 2개 삭제한다는 뜻
console.log(target3); // ['가', '나', '다'];

 

 

🌵 배열에서 요소 찾기(includes와 indexOf, lastIndexOf)

// 배열에서 특정 요소가 있는지 찾는 법(일종의 검색 기능)


// 배열.includes(찾을 데이터);
// 값이 있냐? 없냐?
const target = ['가', '나', '다', '라', '마'];
const result = target.includes('다');  // true
const result2 = target.includes('카'); // false


// 배열에서 검색하고자 하는 값이 몇 번째 인덱스에 위치하는지 찾는 법
// 몇번째에 있냐?
// 배열.indexOf(찾을 데이터);      → 찾고자 하는 값을 앞에서 부터 찾음
// 배열.lastIndexOf(찾을 데이터);  → 찾고자 하는 값을 뒤에서 부터 찾음
const target = ['라', '나', '다', '라', '다'];
const result = target.indexOf('다');  // 2
const result2 = target.lastIndexOf('라'); // 3
const result3 = target.indexOf('가'); // -1

 

 

 

 

object

• array 자료형과 마찬가지로 변수 하나에 여러 자료를 저장 할 수 있음.
• 근데 object는 자료에 이름을 붙여서 저장 할 수 있음.
• var 변수 = {이름1: 자료1, 이름2: 자료2, ... };
  var 변수 = {key: value} 형태다.
  (key는 실제 자료 아님. 그냥 자료의 이름일 뿐, value가 실제 object에 저장된 자료(값)임)

var coffee = {coffeeType: '아메리카노', price: 4000, hotOrIce: ice};

// 객체에서 원하는 자료를 꺼내려면 변수 뒤에 이름(key) 붙이면 됨.
coffee['coffeeType']; // return '아메리카노' → 변수 넣기 O
coffee.coffeeType;    // return '아메리카노' → 변수 넣기 X



// 객체의 자료 추가/수정 하는 방법
coffee.coffeeType; = "카라멜마끼아또";
coffee; // {coffeeType: '카라멜마끼아또', price: 4000}

 

 

객체에 있는 데이터 몽땅 가져올 땐

for ... in 문을 이용한다.

 

 

 

 

 

 

 

 

 

이론만 보고서 적용을 직접 안해보니 머릿속에 잘 안들어오는 것 같다😅
(이러니 코테 문제를 하나또 못 풀..읍읍)

 

 

 

 

 

 

 

📚 참고 자료

✔ mdn

✔ 코딩애플

✔ Let's Get It 자바스크립트 프로그래밍(제로초)