Java Script :: 입문(2)
📝 배열
💡 객체 배열
const actors = [{ name: '김고은' }, { name: '고윤정' }];
console.log(actors); // Array[Object, Object]
console.log(actors[0]); // Object {name:"김고은"}
console.log(actors[1]); // Object {name:"고윤정"}
💡 push : 배열에 항목 추가
actors.push({ name: '신세경' });
💡 length : 배열의 크기
📝 반복문
💡 for...of
💬 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문
⚠ 잘 안씀
let numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
console.log(number); // 10 20 30 40 50
}
💡 for...in
const singer = {
name: '박채영',
group: 'BLACKPINK',
age: 24
};
//Object 함수 사용
console.log(Object.entries(singer)); // [["name", "박채영"], ["group", "BLACKPINK"], ["age" , 24]]
console.log(Object.keys(doggy)); // ["name", "group", "age" ]
console.log(Object.values(doggy)); // ["박채영", "BLACKPINK", 24]
Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
Object.keys: [키, 키, 키] 형태의 배열로 변환
Object.values: [값, 값, 값] 형태의 배열로 변환
// for...in 사용
for (let key in singer) {
console.log(`${key}: ${singer[key]}`);
// name: 박채영
// group: BLACKPINK
// age: 24
}
📝 배열 내장함수
💡 forEach
💬 파라미터는 각 원소에 대하여 처리하고 싶은 코드를 함수로 입력
💬 이 함수의 파라미터는 각 원소를 가르킴
const actors = ['김고은', '고윤정', '신세경', '한소희'];
// for 반복문 사용
for (let i = 0; i < actors.length; i++) {
console.log(actors[i]);
}
// forEach 사용
actors.forEach(actor => {
console.log(actor);
});
// 결과 동일
위 코드의 파라미터 actor는 각 원소를 가리킴
➕ 콜백함수 : 함수형태의 파라미터를 전달하는 것
💡 map
💬 배열 안의 각 원소를 변환할 때 사용, 이 과정에서 새로운 배열 생성
💬 파라미터는 변화를 주는 함수(변화함수)를 전달
const array = [1, 2, 3, 4, 5, 6, 7, 8];
// 제곱해서 새로운 배열 생성
const squared = []; // 변화함수
// for 반복문 사용
for (let i = 0; i < array.length; i++) {
squared.push(array[i] * array[i]);
}
// forEach 사용
array.forEach(n => {
squared.push(n * n);
});
// map 사용 1
const square = n => n * n; // 변화함수 이름 선언
const squared = array.map(square); // 변화함수 전달
// map 사용 2
const squared = array.map(n => n * n); // 변화함수 이름 선언 X
// 결과 동일
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64];
💡 indexOf
💬 원하는 항목이 몇번째 원소인지 찾아주는 함수
⚠ 값이 객체 또는 배열이라면 찾을 수 없음
const actors = ['김고은', '고윤정', '신세경', '한소희'];
const index = actors.indexOf('신세경');
console.log(index); // 2
💡 findIndex
💬 배열 안에 있는 값 중 찾고자하는 항목이 몇번째 원소인지 알아내는 함수
const todos = [
{
id: 1,
text: '변수',
done: true
},
{
id: 2,
text: '함수',
done: true
},
{
id: 3,
text: '반복문',
done: true
},
{
id: 4,
text: '배열 내장함수',
done: false
}
];
const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 2
💡 find
💬 배열 안에 있는 값 중 찾아낸 값 자체를 반환
...
const todo = todos.find(todo => todo.id === 3);
console.log(todo);
// {id: 3, text: "반복문", done: true}
💡 filter
💬 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 생성
💬 파라미터는 조건을 검사하는 함수를 넣음
💬 함수의 파라미터로 각 원소의 값을 받아옴
...
const tasksNotDone = todos.filter(todo => todo.done === false);
// const tasksNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);
// [
{
id: 4,
text: '배열 내장 함수',
done: false
}
];
💡 splice
💬 배열에서 특정 항목을 제거할 때 사용
💬 첫번째 파라미터 : 어떤 인덱스부터 지울 지, 두번째 파라미터 : 그 인덱스부터 몇 개를 지울 지
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers); // [10, 20, 40]
💡 slice
💬 배열을 잘라낼 때 사용하지만, 기존의 배열을 건들이지 않음
💬 첫번째 파라미터 : 어디서부터 자를지, 두번째 파라미터 : 어디까지 자를 지
⚠ 두번째 파라미터는 포함 X
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지
console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]
💡 shift 와 pop
💬 shift : 첫번째 원소를 배열에서 추출
⚠ 추출하는 과정에서 배열에서 해당 원소는 사라짐
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value); // 10
console.log(numbers); // [20, 30, 40]
💬 pop : 맨 마지막 항목을 배열에서 추출
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value); // 40
console.log(numbers); // [10, 20, 30]
💡 unshift
💬 배열의 맨 앞에 새 원소를 추가
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); // [5, 10, 20, 30, 40]
💡 concat
💬 여러 개의 배열을 하나의 배열로 합침
⚠ arr1 과 arr2 에 변화를 주지 않음
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated); // [1, 2, 3, 4, 5, 6]
💡 join
💬 배열 안의 값들을 문자열 형태로 합침
const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5
💡 reduce
💬 배열 안의 값들을 문자열 형태로 합침
const numbers = [1, 2, 3, 4, 5];
// forEach 사용
let sum = 0;
numbers.forEach(n => {
sum += n;
});
// reduce 사용
const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);
첫번째 파라미터 : accumulator 와 current를 가져와 결과 반환(콜백함수), 두번째 파라미터 : reduce 함수에서 사용할 초깃값
accumulator : 누적된 값
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
console.log({ accumulator, current });
// Object {accumulator: 0, current: 1} // 초깃값 0이기 때문에 accumulator: 0
// Object {accumulator: 1, current: 2} // accumulator: 0 + 1 = 1
// Object {accumulator: 3, current: 3} // accumulator: 1 + 2 = 3
// Object {accumulator: 6, current: 4}
// Object {accumulator: 10, current: 5}
return accumulator + current;
}, 0);
console.log(sum); // 15
let average = numbers.reduce((accumulator, current, index, array) => {
if (index === array.length - 1) {
return (accumulator + current) / array.length;
}
return accumulator + current;
}, 0);
console.log(average); // 3
➕ index : 현재 처리하고 있는 항목이 몇번 째인지
➕ array : 현재 처리하고 있는 배열 자신을 의미
📝 프로토타입과 클래스
💡 객체 생성자
💬 함수를 통해 새로운 객체를 만들고, 안에 넣고 싶은 값 또는 함수들을 구현 할 수 있도록 함
💬 new 키워드 : 새로운 객체 생성 시 사용
⚠ 보통 함수의 이름을 대문자로 시작
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
this.say = function() {
console.log(this.sound);
};
}
const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌이', '야옹');
dog.say(); // 멍멍
cat.say(); // 야옹
💡 프로토타입
💬 같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있도록 함.
💬 .prototype.[원하는키] = 코드
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
Animal.prototype.say = function() { // 프로토타입
console.log(this.sound);
};
Animal.prototype.sharedValue = 1; // 프로토타입
const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌', '야옹');
dog.say(); // 멍멍
cat.say(); // 야옹
console.log(dog.sharedValue); // 1
console.log(cat.sharedValue); // 1
💡 객체 생성자 상속
💬 객체 생성자들 사이에서 함수의 기능을 재사용 시
💬 첫번째 인자 : this, 그 이후 인자들 : 객체 생성자 함수에서 필요로 하는 파라미터들
Animal.prototype.say = function() {
console.log(this.sound);
};
Animal.prototype.sharedValue = 1;
function Dog(name, sound) {
Animal.call(this, '개', name, sound); // Animal.call 호출
}
Dog.prototype = Animal.prototype; // 상속
function Cat(name, sound) {
Animal.call(this, '고양이', name, sound); // Animal.call 호출
}
Cat.prototype = Animal.prototype; // 상속
const dog = new Dog('산체', '멍멍');
const cat = new Cat('벌', '야옹');
dog.say();
cat.say();
prototype을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype값을 Animal.prototype으로 설정
💡 클래스
💬 생성자 생성 시, constructor 사용
💬 메서드 : 클래스 내부의 함수, 자동으로 프로토타입으로 등록
class Animal {
constructor(type, name, sound) { // constructor 사용
this.type = type;
this.name = name;
this.sound = sound;
}
say() { // 메서드
console.log(this.sound);
}
}
const dog = new Animal('개', '산체', '멍멍');
const cat = new Animal('고양이', '벌', '야옹');
dog.say(); // 멍멍
cat.say(); // 야옹
💬 상속 : extends 키워드 사용, constructor에서 사용하는 super()함수가 상속받은 클래스의 생성자를 가르킴.
class Animal {
constructor(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
say() {
console.log(this.sound);
}
}
class Dog extends Animal { // 상속, extends 키워드 사용
constructor(name, sound) {
super('개', name, sound); // super() 함수 사용
}
}
class Cat extends Animal {
constructor(name, sound) {
super('고양이', name, sound);
}
}
const dog = new Dog('산체', '멍멍');
const dog2 = new Dog('죽은체', '왈왈');
const cat = new Cat('벌', '야옹');
const cat2 = new Cat('나비', '냐옹');
dog.say(); // 멍멍
dog2.say(); // 왈왈
cat.say(); // 야옹
cat2.say(); // 냐옹
Reference
벨로퍼트와 함께하는 모던 자바스크립트
Author And Source
이 문제에 관하여(Java Script :: 입문(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ro_sie/Java-Script-입문2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)