[JS] Type(배열, 객체)

* 프로퍼티란? : 키-값 쌍

* method란? : 객체의 프로퍼티에 함수가 할당될 때 그 함수를 method라고 함.

ex) 객체 obj의 메서드는 doSomething이다.

[공부 내용 정리]

Type

JS의 타입은 한국말로 자료형으로 해석되기도 함. 변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해서 사용함.

• 원시타입 : 단순한 데이터를 저장.
• 참조타입 : 객체로서 저장.

원시타입(Primitive Types)

값이 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 함.

→ 이런 원시타입 값을 변수에 저장할 때는 값이 복사되어 저장된다.

→ 원본 데이터를 넣는게 아니고 복제품을 집어넣는 것임.

<<<따라서 값을 복사해서 변수에 저장되기 때문에 원본이 바뀌어도 그 전에 복사한 변수의 값은 변하지 않음!!>>>

let str1 = 'hello';
let str2 = str1;
console.log(str2); // 'hello'

str1 = 'world';
console.log(str2); // str2에 할당된 값은 여전히 'hello' 입니다.

string, number, bigint, boolean, undefined, symbol, null이 원시타입에 속함.

원시타입은 str2입장에서 str1의 값을 바꿀 수는 없음. 참조타입은 str2입장에서 str1의 값을 바꿀 수 있음.

 

객체타입(Object Types)

값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨.

<<<따라서 객체타입은 값의 위치가 저장되기 때문에 원본이 바뀌면 그 전에 복사한 변수의 값도 바뀜!!>>>

let arr1 = [1, 2, 3];
let arr2 = arr1;
console.log(arr2);

arr1[0] = 10;
// arr1 = [10, 20];
console.log(arr2);

&rarr; arr1를 arr2에 저장해주고 arr1을 바꿨을 때 arr2를 출력하면 값이 변해있음!

객체타입 중 배열(Array)

1. 배열(Array)

// 배열을 만드는 방법 
const myArr = [1, 2, 3, 4, 5];

 

배열의 특징

1. 배열은 빈 배열로 생성하거나 요소가 포함된 배열로 생성할 수 있음.

const arr2 = new Array(4, 5, 6);
const arr2 = new Array(3);

 

2. 배열은 숫자를 사용하여 값에 접근할 수 있음. 이때 숫자는 값의 순서를 의미하며, 이 순서를 인덱스(index), 그리고 배열안에 존재하는 값을 원소(elements)라고 부름.

const arr = [1, 2, 3];
// 배열 안의 원소에 접근하기 위해서는 인덱스 번호를 이용함. 
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // 존재하지 않는 것도 부르기는 가능.

 

3. 배열은 가지고 있는 원소의 길이를 나타내는 length 프로퍼티를 가지고 있음.

const myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 출력은 5

 

4. 배열은 배열 안에 다른 배열을 포함할 수 있음. -> 다차원 배열

const arr2 = [
  [1, 2],
  [3, 4],
  [5, 6]
];
console.log(arr[0][0]);
console.log(arr[2][1]);

-> 2차원 배열은 행렬 즉, 매트릭스라고 불림. 위 코드를 응용해 3차원 배열도 만들어 볼 수 있음.

 

배열의 메소드

 

1. push() 와 pop()

• push() : 배열에 끝에 요소를 추가하고 길이를 반환함.
• pop() : 배열의 마지막 요소를 꺼내어 반환함. 반환된 요소는 배열에서 제외.

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
arr.pop();
console.log(arr); // [1, 2, 3]

 

 

2. shift()와 unshift()

• shift() : 배열에서 첫 번째 요소를 꺼내고 반환함.
• unshift() : 배열의 첫 번째 요소로 새로운 요소를 추가함.

const myArray = ["사과", "바나나", "수박"];
myArray.shift();
console.log(myArray); 
myArray.unshift("오이", "배");
console.log(myArray);

 

 

3. splice()

• splice() 메소드는 배열의 요소를 추가, 제거 또는 교체함.

const arr = [1, 2, 3];
arr.splice(1, 0, 4);
console.log(arr); // [1, 4, 2, 3]
// 삭제할 요소의 개수가 0일때는 시작할 인덱스 앞에 추가하기

arr.splice(2, 1, 5);
console.log(arr); // [1, 4, 5, 3]

• 첫 번째 인자는 삭제나 추가를 시작할 인덱스.
• 두 번째 인자는 삭제할 요소의 개수.
• 세 번째 인자 부터는 추가할 요소들. 추가할 요소가 없다면 생략할 수 있으며 이때는 요소를 삭제만 함.

splice 퀴즈)

const fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리']; // 1. splice 를 이용해 코끼리를 제거해보세요 // 2. 참치 다음에 다금바리를 추가해보세요 // 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요

 

const fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리'];
// 1. splice 를 이용해 코끼리를 제거해보세요
fish.splice(5, 1);
console.log(fish);
// 2. 참치 다음에 다금바리를 추가해보세요
fish.splice(4, 0, '다금바리');
console.log(fish);
// 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요
fish.splice(2, 1, '옥돔', '갈치');
console.log(fish);

 

 

4. slice()

• slice() : 배열에서 요소들을 추출하여 새로운 배열로 반환함.

const myArray = ["apple", "banana", "cherry", "durian", "elderberry"];
console.log(myArray.slice(1, 4)); 
console.log(myArray.slice()); 
console.log(myArray.slice(0, 10));

• 첫 번째 인자는 추출을 시작할 인덱스.
• 두 번째 인자는 추출을 끝낼 인덱스.
• 추출할 요소는 첫 번째 인자에서 시작하여, 두 번째 인자에서 바로 이전 요소까지.
• 두 번째 인자는 생략 가능하며, 생략하거나 배열의 길이보다 큰 값을 전달하면 배열의 끝까지 추출함.
• 새로운 배열로 반환할 때 본연의 값이 변경되는 것은 아님. 일시적으로 출력만 해줌.

5. sort()

• sort() : 배열의 요소를 정렬함.

메소드를 호출하면 배열을 변경하며, 정렬된 배열을 반환함.

const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
console.log(avengers.sort());

  → [ '스파이더맨', '아이언맨', '토르', '헐크' ]

 

그럼 원소의 값을 숫자형으로 바꾼다면?

const nums = [3, 1, 8, 6];
console.log(nums.sort());

const nums2 = [23, 5, 1000, 42];
console.log(nums2.sort());

숫자형 데이터 정렬의 단점 : 숫자를 정렬하려고 하면 원소를 문자열로 전환한 후에 유니코드 포인트 순서대로 반환함.

→ 원하지 않는 모습으 정렬될 수 있음.

그래서 비교함수(compareFunction) 사용함!

• 비교함수 : a, b 두 인자를 비교해서(즉, 빼서) 음수가 나오면 a를 앞으로 위치. 양수가 나오면 b를 앞으로 위치. 0이 나오면 위치를 변경하지 않음.
• =Tim sort 알고리즘 : JavaScript의 sort메소드가 원소를 정렬하는 방법.

const num3 = [13, 9, 10];

num3.sort(function (a, b) {
  console.log('a: ' + a, 'b: ' + b);
  return a - b;
});
/**
"a: 9"
"b: 13" // a - b는 음수임으로 a를 앞으로 => [9, 13, 10]

"a: 10"
"b: 9" // a - b는 양수임으로 b를 앞으로 => [9, 13, 10]

"a: 10"
"b: 13" // a - b는 음수임으로 a를 앞으로 => [9, 10, 13]

"a: 10"
"b: 9" // a - b 는 양수임으로 b를 앞으로 => [9, 10, 13]
*/

 

 

6. forEach()

• forEach() : 배열의 각 요소에 대해 주어진 함수를 실행.
• 배열의 각 요소에 대해 특정 작업을 수행할 때 사용됨.
• 함수는 인자로 배열 요소, 인덱스를 받음.
• 배열의 요소를 순환하면서 해당 요소를 함수로 전달하고, 이 함수가 각 요소에 대해 실행됨.

const arr = ['참외', '키위', '감귤'];
arr.forEach(function(item, index) {
	console.log(item, index);
	arr[index] = index;
});

// 결과
// 참외 0
// 키위 1
// 감귤 2

 

예를 들어, 배열의 각 요소를 이용하여 다른 배열을 만들거나, 요소를 삭제하거나, 값을 변경하는 등의 작업을 수행할 수 있음.

const avengers = ['spiderman', 'ironman', 'hulk', 'thor'];

const newAvengers = [];
avengers.forEach(function (item) {
    newAvengers.push('💖' + item + '💖');
});

실행결과. item 양 끝에 하트가 push됨.

 

7. map()

• map() : 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환함.
• 첫 번째 인자로는 배열의 각 요소를 처리할 함수. 두 번째 인자로는 요소의 인덱스를 전달함.
• 배열의 각 요소를 매개변수로 받아 처리한 후, 그 결과를 반환함.

 

아래처럼 배열 안에 객체에서 데이터를 뽑는 형태로도 사용함.

const data = [
    {
        "_id": "642ba3980785cecff3f39a8d",
        "index": 0,
        "age": 28,
        "eyeColor": "green",
        "name": "Annette Middleton",
        "gender": "female",
        "company": "KINETICA"
    },
    {
        "_id": "642ba398d0fed6e17f2f50c9",
        "index": 1,
        "age": 37,
        "eyeColor": "green",
        "name": "Kidd Roman",
        "gender": "male",
        "company": "AUSTECH"
    },
    {
        "_id": "642ba39827d809511d00dd8d",
        "index": 2,
        "age": 39,
        "eyeColor": "brown",
        "name": "Best Ratliff",
        "gender": "male",
        "company": "PRISMATIC"
    }
];

const ages = data.map((item) => item.age);

실행 결과. data의 age 값들을 추출함.

 

* forEach() 와 map()의 차이점은?

-> 둘 다 배열의 각 요소에 대해 주어진 함수를 실행함. 하지만 forEach 메소드는 반환값이 없지만 map 메소드는 새로운 배열을 반환함.

 

8. filter()

• filter() : 기존의 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 만듦.
• 배열에서 특정한 숫자나 날짜 등의 필요한 정보를 가진 원소만 추출할 때 매우 유용함.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArr = arr.filter(function(el) {
  return el % 2 === 0;
});

console.log(newArr);

const arr11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newArr = arr11.filter(el => el % 2 === 0);

console.log(newArr);

 

9. includes

• 요소가 포함이 되어 있으면 true 아니면 false를 반환함.

const arr1 = ['hello', 'world', 'hojun']
arr1.includes('world')

const arr1 = ['hello', 'world', 'hojun']
arr1.includes('leehojun')

const arr1 = ['hello', 'world', 'hojun']
arr1.includes('jun')

 

객체타입 중 객체(Object)

• 여러개의 데이터를 한 변수에 저장할 수 있는 자료형.
• 차이점은 배열이 값에 접근하기 위해서는 배열 생성시 자동으로 부여되는 인덱스 번호를 이용해야 했지만, 객체는 특별한 키(key)를 통해 원하는 값(value)에 접근 할 수 있는 키-값 쌍으로 이루어져 있음.

객체의 특징

 

1) 객체의 리터럴 표현은 중괄호{ }를 사용해서 생성함. 객체는 key-value 쌍으로 이루어져 있으며, 각 key와 value는 콜론 : 으로 구분됨.  

→ 이러한 키 값 쌍을 합쳐서 자산(properties)이라 표현함. 만약 프로퍼티 값이 함수인 경우에는 method 라고 부름.

const babaYaga = {
  name: "John Wick",
  age: 53,
  from: "벨라루스",
	askingHim: function(){
		console.log("Yeah, I'm thinking I'm back!");
	}
};

 

또한 최신 문법을 사용하면 function 키워드 없이 메소드를 등록할 수 있음.

const babaYaga = {
  name: "John Wick",
  age: 53,
  from: "벨라루스",
	askingHim(){
		console.log("Yeah, I'm thinking I'm back!");
	}
};

 

2) 객체의 속성값에 접근하기 위해서 객체 이름 + 점 연산자 + 접근하고자 하는 값의 key를 입력함. 객체의 속성 이름이 변수명 규칙을 지켰다면, 대괄호([])를 사용하여 속성에 접근할 수도 있음!

console.log(`${babaYaga.name} from ${babaYaga.from}`);

// 대괄호를 사용하여 속성에 접근.
console.log(`${babaYaga['name']} from ${babaYaga['from']}`);

 

3) 객체에 속성을 추가하기 위해서는 객체 이름 뒤에 점(.)과 새로운 속성 이름(key)을 입력하고, 새로운 값(value)을 할당하면 데이터가 추가됨.

babaYaga.job = "Killer";

 

4) 객체에서 속성을 삭제하려면 delete 키워드를 사용.

delete babaYaga.job;

 

5) in 연산자를 이용해 특정 프로퍼티가 객체안에 존재하는지 알 수 있음.

console.log('age' in babaYaga);
console.log('mercy' in babaYaga);

 

객체의 method(메소드)

1) hasOwnProperty()

• hasOwnProperty() : 객체가 특정 프로퍼티를 가지고 있는 지를 나타내는 불리안 값을 반환함.

const aespa = {
  members: ['카리나', '윈터', '지젤', '닝닝'],
  from: '광야',
	sing: function(){
		return "적대적인 고난과 슬픔은 널 더 popping 진화시켜!"
	}
};

console.log(aespa.hasOwnProperty('itzy'));
console.log(aespa.hasOwnProperty('from'));

 

2) for … in

• 객체의 반복을 위해 만들어진 기능.
• 주로 객체 안의 프로퍼티들에 접근하여 값을 살펴보고 싶거나, 조건에 따라 값을 수정해야할 경우 사용함.

for (const variable in object) {
	// ...
}

 

in 앞의 값에는 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정됨.

in 뒤의 값에는 반복작업을 수행할 객체를 지정함.

 

ex) in 앞의 값에는 key값, in 뒤의 값에는 반복작업을 수행한 객체인 person값.

const person = {
  name: '재현',
  age: 20,
  gender: 'male'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

실행 결과

 

* for … in 문 안에서 처리되는 프로퍼티들은 반드시 순서대로 반복되지는 않음! 만약 처리 과정에 순서가 중요하다면 일반적인 반복문을 이용해 처리하는것을 권장 ~

 

3) keys(), values()

• Object.keys() 메소드는 객체의 속성 이름(key)들을, Object.values() 메소드는 객체의 속성 값(value)들을 배열로 반환함.
• keys 메소드는 IE9 버전부터 지원하며, values 메소드는 IE를 지원하지 않음.

console.log(Object.keys(aespa));
console.log(Object.values(aespa));

실행 결과