✔️ 객체
자바스크립트에서 원시 타입을 제외한 모든 값들은 모두 객체라고 할 수 있다.
/* 객체는 key와 value로 구성된 프로퍼티(property)의 집합이다.
property값이 함수일 경우 method라 부른다. */
const person = {
name: 'jiseong', // property
gender: 'male', // property
sayHello: function () { //method
console.log('Hi! My name is ' + this.name);
}
};
console.log(person.name); //jiseong
console.log(person.gender); // male
person.sayHello(); // Hi! My name is jiseong❓ 참조
자바스크립트는 프로토타입 기반 객체지향언어로클래스라는 개념없이 객체 리터럴 {...} 방식이나 Obejct 생성자함수를 이용하여 객체를 생성한다.
클래스 기반 객체지향언어에 익숙한 개발자들을 위해서
ECMAScript 6에서 새롭게 클래스가 도입되었다. 하지만 새로운 객체지향 모델을 제공하는 것이 아니고 기존의 프로토타입 기반 패턴의 syntactic sugar라고 한다.
키에 해당하는 부분은 공백이 없어야한다. 만약, 공백이 있어야 하는 상황이라면 이를 따옴표로 감싸서 문자열로 넣어준다.
const sample = {
'key with space': true
};객체 비구조화 할당
아래 방식을 이용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있다.
const person = {
name: 'jiseong', // property
gender: 'male', // property
};
function print(obj) {
const {name, gender} = obj; /* 비구조화 할당 */
console.log(`해당 객체의 이름은 ${name}이고 성별은 ${gender}입니다.`);
}
print(person);객체에 새로운 property( key: value ) 추가
let person = {
name: 'jiseong'
};
console.log(person.name); // jiseong
console.log(person.gender); // undefined (존재하지 않는 key/value)
// 추가
person.gender = 'male'; // 혹은 person['gender'] = 'male';
console.log(person.gender); // male객체에 property( key: value ) 수정
let person = {
name: 'jiseong',
gender: 'male'
};
console.log(person.name); // jiseong
console.log(person.gender); // male
// 수정
person.gender = 'female';
console.log(person.gender); // female객체에 property( key: value ) 삭제
let person = {
name: 'jiseong',
gender: 'male'
};
console.log(person.name); // jiseong
console.log(person.gender); // male
// 삭제
delete person.gender;
console.log(person.gender); // undefined (존재하지 않는 key/value)✔️ 배열
대부분의 프로그래밍 언어에서 배열의 요소들은 모두 같은 데이터 타입이어야 하지만, 자바스크립트에서는 어떤 데이터 타입의 조합이라도 포함할 수 있다.
const arr = [1, 2, 3, 4, 5];
const person = [{name: 'jiseong'}, {name: 'jimin'}];
const mix = [{example: 'hi'}, 'string', 5];
console.log(arr[1]); // 2push
배열의 마지막에 요소 추가
const arr = [1, 2];
arr.push(3);
console.log(arr); // [1, 2, 3]
// 배열의 길이를 알고 싶을 때 length이용
console.log(arr.length); // 3
pop
배열의 마지막 요소 삭제
const arr = [1, 2];
arr.pop();
console.log(arr); // [1]unshift
배열의 맨앞에 요소를 추가
const arr = [1, 2];
arr.unshift(0);
console.log(arr); // [0, 1, 2]shift
배열의 맨앞의 요소를 삭제
const arr = [1, 2];
arr.shift();
console.log(arr); // [2]splice
배열의 특정위치에 요소를 추가하거나 삭제
splice(start, deleteCount, item1, item2, itemN)
const months = ['Jan', 'March'];
months.splice(1, 0, 'Feb'); // index1에서 부터 추가
console.log(months); // ["Jan", "Feb", "March"]
months.splice(1, 1); // index1에서 부터 한개의 요소제거
console.log(months); // ["Jan", "March"]slice
배열의 일부를 추출하여 새로운 배열 객체로 반환
slice(start, end)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // ["camel", "duck"]map
배열의 각 요소에 대해 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환
map((element, index, array) => { ... } )
let numbers = [1, 4, 9];
let roots = numbers.map((num) => {
return Math.sqrt(num); // 숫자의 제곱근을 반환
});
console.log(numbers); // [1, 4, 9]
console.log(roots); // [1, 2, 3]filter
배열의 각 요소에 대해 지정된 함수의 결과 값을 만족하는 요소들로만 구성하여 별도의 새로운 배열로 반환
filter((element, index, array) => { ... } )
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
const result = words.filter(word => word.length > 6);
console.log(result); // ["exuberant", "destruction"]reduce ❗❗
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환
reduce((accumulator, currentValue, index, array) => { ... }, initialValue)
/* 해당 코드는 초기값을 객체 리터럴 {}으로 하여 후보자들의 투표 수를 카운트하는 코드이다 */
const votes = ["candidate1", "candidate3", "candidate2",
"candidate3", "candidate2", "candidate2", "candidate3"];
const result = votes.reduce( (acc, value, index, array) => {
if(acc.hasOwnProperty(value)){
acc[value] = acc[value] + 1;
} else {
acc[value] = 1;
}
return acc;
},{});
console.log(result);
// { candidate1: 1, candidate3: 3, candidate2: 3 }
indexOf
배열에서 인수로 전달된 요소를 검색하여 첫 인덱스를 반환
- 해당하는 요소가 없는 경우, -1을 반환한다.
indexOf(searchElement, fromIndex)
const arr = [1, 2, 2, 3];
arr.indexOf(2); // -> 1
// 배열 arr에서 요소 4가 없으므로 -1을 반환
arr.indexOf(4); // -1
// 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // 2findIndex
배열의 각 요소별로 지정된 함수의 결과 값을 만족하는 첫 인덱스를 반환
- 해당하는 요소가 없는 경우, -1을 반환한다.
findIndex((element, index, array) => { ... } )
const arr = [5, 12, 8, 130, 44];
const found = arr.findIndex((element) => element > 13);
console.log(found)// 3find
배열의 각 요소에 대해 지정된 함수의 결과 값을 만족하는 첫 요소를 반환
- 해당하는 요소가 없는 경우, undefined을 반환한다.
find((element, index, array) => { ... } )
const arr = [5, 12, 8, 130, 44];
const found = arr.find((element) => element > 13);
console.log(found)// 130❓ 참조
그 밖에 여러가지 Methods들이 존재한다.
✔️ 반복문
for문
while문
for...in문
주로 객체의 key를 순회하기 위해 사용된다.
let obj = {
a: 1,
b: 2,
c: 3
};
for (let key in obj) {
console.log(key, obj[key]); // a 1, b 2, c 3
}for...of문
반복가능한 객체(Array, Map, Set, TypedArray, etc.)를 순회하기 위해 사용된다.
let arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 10, 20, 30
}