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

벨로퍼트와 함께하는 모던 자바스크립트