Javascript 알아두면 좋은 개념 요약

드림코딩 엘리 강좌를 보며 유용한 것들에 대해 정리한 내용입니다.

API or Document를 읽고 보는 습관을 만들기 👍🏻

1. read API

// Ex
// 2개의 파라미터 (첫번째 callback 함수, thisArg? -> ?는 파라미터를 선택적으로 지정 가능)
// 이해가 잘 안될땐 console.log로 파라미터 확인하기
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg ?: any): void;

2. parameters

Premitive parameters : passed by value

Object parameters : passed by reference

default parameters : undefined

rest parameters

function _onChange(obj, obj2) {
    obj.power = 'on';
  console.log(obj2) // => undefined
}
const desktop = {power : "off"};
_onChange(desktop);

console.log(desktop); //power on

//rest parameters
is_print(1,2,3);
function is_print(...args) {
  for(arg of args) {
    console.log(arg) //1 2 3
  }
}

3. early return & arrow function

//early return
function updatePost(post) {
  //해당 조건이 아닐 때에는 return을 하여 종료 후 다음 로직을 실행하도록 하는 것이 더욱 효과적
    if(post.like < 100) {
    return;
    }
  //do Something..
}

//arrow function (함수 선언 방법중 하나)
const check_console = () => console.log("done");
// return 생략 가능
const sum = (a, b) => a + b;

4. for-loop

const fruits = ['apple', 'banana', 'orange']

for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

for(let fruit of fruits) {
    console.log(fruit)
}

fruits.forEach(function(fruit, index) {
  console.log(fruit)
});

//forEach arrow로 변경하기 (한줄 작성시 {} 생략가능)
fruits.forEach((fruit) => console.log(fruit));

5. add, delete, copy

5-1. push : 아이템을 맨 끝에 추가

const fruits = ['apple', 'banana', 'orange']
fruits.push('melon') 
console.log(fruits) //[ 'apple', 'banana', 'orange', 'melon' ]

5-2. pop : 아이템을 맨 뒤부터 제거

const fruits = ['apple', 'banana', 'orange']
fruits.pop()
fruits.pop()
console.log(fruits) //[ 'apple']

5-3. unshift : 아이템을 맨 앞에 추가

const fruits = ['apple', 'banana', 'orange']
fruits.unshift('kiwi')
console.log(fruits) //[ 'kiwi', 'apple', 'banana', 'orange' ]

5-4. shift : 아이템을 맨 앞부터 제거

const fruits = ['apple', 'banana', 'orange']
fruits.shift()
console.log(fruits) //[ 'banana', 'orange' ]

※ Tip

shift와 unshift는 맨 앞쪽에 데이터를 추가 및 제거를 하는데 이는 전체 데이터들의 이동(step의 증가)이 필요하기 때문에 pop과 push에 비해 속도가 현저히 느리다는 단점을 가지고 있다.

5-5. splice : 지정한 인덱스의 데이터를 제거

const fruits = ['apple', 'banana', 'orange']fruits.splice(1) // (start_index, delete_count) 이때 delete_count를 지정하지 않는다면 start_index를 제외한 모든 데이터를 제거한다.console.log(fruits) //[ 'apple' ]fruits.splice(0, 1, 'kiwi', 'mango') //0번 인덱스의 1개를 지우고 kiwi, mango를 추가console.log(fruits) //[ 'kiwi', 'mango' ]

5-6. concat : 배열 합치기

const fruits = ['apple', 'banana', 'orange']
const fruits2 = ['kiwi', 'mango']

const newFruits = fruits.concat(fruits2);
//concat(...items: ConcatArray<T>[]): T[]; 새로운 배열 return

console.log(newFruits);

5-7. indexOf : 데이터 인덱스 찾기 & includes : 인덱스 T/F 확인

const fruits = ['apple', 'banana', 'orange']
console.log(fruits.indexOf('apple')); // 0
console.log(fruits.includes('kiwi')); // false
console.log(fruits.includes('orang')); // true

5-8. listIndexOf : 마지막 인덱스의 자료 찾기

const fruits = ['apple', 'banana', 'lemon', 'apple']
fruits.indexOf('apple') //0
fruits.listIndexOf('apple') // 3

6. hoisting

사전적 의미는 끌어올리다라는 뜻으로 실제 자바스크립트 엔진이 자체적으로 코드 전반에 선언된 모든 것들을 발견시 위로 끌어 올려 함수나 변수에 할당하여 실행할 수 있는 환경을 갖추는 것을 말합니다.

유효범위는 보통 함수 {} 내에서 유효하며 var 선언과 함수선언문 에만 적용됩니다.

//hoisting
console.log(num) // undefined -> undefined 할당
num = 10;
var num;
console.log(num) // 10 

{
    score = 20;
    var score;
}
console.log(score); //20 {} 영향을 받지 않는다.

7. class get, set

클래스는 객체지향 프로그래밍에서 객체를 생성하기 위한 정의를 말합니다. 예를 들어 회원가입이란 기능이 있다고 가정했을때 회원 하나가 객체라고 볼 수 있습니다. 회원이 가진 특징을 나열해 보면 이름, 나이, 이메일, 생년월일, 아이디 등등이 있을 수 있고 회원이 행동하는 것은 조회, 가입, 탈퇴, 수정등이 있습니다. 이것들을 정의하는 틀을 클래스라 말하며 클래스를 통해 여러 회원을 생성할 수 있는데 이는 인스턴스라고 말합니다.

class: template

obejct: instance of a class

※ 쉽게 이해하는 캡슐화와 get&set의 필요성

생성한 인스턴스의 필드의 속성을 가지고 역할을 수행할 때 우리는 해당 필드의 변조 방지 또는 제한 범위가 필요할 수도 있습니다. 예를 들어 축구팀이라는 클래스가 있을 때 구단내에 최소 스태프는 0명이며 구단 선발 명단은 11명의 조건이 필요합니다. 스태프에 대한 음수(-1)는 다룰 수 없기 때문에 이를 데이터를 보다 안전하게제어하기 위한 수단으로 setter를 사용하여 데이터를 조작하고 getter로 사용합니다. 마지막으로 캡슐화를 하는 이유는 필드 staff, player 특징상 축구팀 클래스 자체의 고유한 성향 때문에 private을 선언하며 다른 영역에서 침범하여 사용할 수 없도록 하기 위함입니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    this._age= value // age -> Maximum call stack size exceeded
  }
}

const user1 = new Person('mount', 21);

console.log(user1)

8. public, private Fields

※ 아직 safari에서 지원하지 않는다.

class Test {
  publicValue = 2;
  #privateValue = 10;
}

const test = new Test();
console.log(test.privateValue) // undefined
console.log(test.publicValue) // 2

9. static properties & method

static은 클래스 자체적으로만 접근할 수 있기 때문에 인스턴스(객체)와 무관하게 공통적으로 클래스 내에서만 사용해야 할 때 유용하며 메모리의 사용도 줄여줄 수 있습니다.

class Article {
  static backend = 'hello python'

  static printBackend() {
    console.log(Article.backend)
  }
}

const article = new Article();
console.log(article.backend) // undefined
console.log(Article.backend) // hello python

10. extends

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color}`)
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  //overriding -> 오버라이딩으로 인해 triangle에 draw가 호출된다.
  draw() {
    console.log("triangle overriding")
  }
}

const rectangle = new Rectangle(5,2,'red')
const triangle = new Triangle(2,3,'black')


triangle.draw()
console.log(rectangle.getArea())

11. async & await

async와 await는 promise를 조금 더 간결하게 사용하고 동기적으로 실행되는 것처럼 코드를 작성할 수 있게 도와주는 역할을 합니다.

promise에 대한 자세한 내용은 비동기 및 콜백함수 에서 확인할 수 있습니다.

function fetchUser() {
  return new Promise((resolve, reject) => {
    resolve("havartz")
  })
} 

const user = fetchUser();
user.then(console.log)

async function fetchUser() { //-> 위 promise 기능을 async로 대신한다.
  return "havartz"
}

const user2 = fetchUser();
user2.then(console.log)


function delay(ms) {
   return new Promise(resolve => setTimeout(resolve, ms))
}

async function getKiwi() {
  await delay(2000); // 2초동안 기다린 후 아래 kiwi 리턴
  return "kiwi";
}

async function getLemon() {
  await delay(2000); // 2초동안 기다린 후 아래 kiwi 리턴
  return "lemon";
}

async function getFruits() {

    //병렬 처리(한번에 처리)
     const kiwiPromise = getKiwi();
     const kiwi = await kiwiPromise
     const lemonPromise = getLemon();
     const lemon = await lemonPromise

     //Promise All api
     return Promise.all([getKiwi(), getLemon()]).then(fruits => fruits.join(', '))

       //먼저 처리되는 것을 불러올때 race 사용
       return Promise.race([getKiwi(), getLemon()]);

}

getFruits().then(console.log)

Quiz

1. 배열 -> 문자열

const fruits = ['apple', 'banana', 'lemon', 'apple']
const result = fruits.join(',');
console.log(result) //apple,banana,lemon,apple

2. 문자열 -> 배열

const fruits = 'apple,lemon,kiwi';
const result = fruits.split(','); //두번째 파라미터 limit(개수)
console.log(result) // [apple, lemon, kiwi]

3. 배열 순서 변경

const numbers = [5,4,3,2,1];
const reverse_result = numbers.reverse(); //배열 자체를 리턴
console.log(rev_numbers)

4. 지정한 인덱스까지 자르기

const arr = [1,2,3,4,5];
const result = arr.splice(1,3); //1번 인덱스부터 총 3개 자르기 
console.log(result) //(2,3,4)
console.log(arr) // 삭제되고 남은 배열

const arr2 = ['chelsea', 'arsenal', 'liverpool'];
const result2 = arr2.slice(0,2); // ['chelsea', 'arsenal']
console.log(arr2) // 원본 유지

5. 조건에 맞는 데이터 찾기

class Player {
  constructor(name, age, number, team) {
    this.name = name,
    this.age = age,
    this.number = number,
    this.team = team
  }
}

const players = [
    new Player('abraham', 30, 9, "sec"),
    new Player('pulisic', 21, 10, "fir"),
    new Player('Kante', 25, 7, "fir"),    
    new Player('mount', 28, 19, "sec"),
]

const result = players.find((player) => player.age < 25);

console.log(result) // pulisic 조건에 맞는 데이터를 리턴하고 종료

6. 객체 속성의 배열에서 조건에 맞는 키값의 데이터 배열 만들기

class Player {
  constructor(name, age, number, team) {
    this.name = name,
    this.age = age,
    this.number = number,
    this.team = team
  }
}

const players = [
    new Player('abraham', 30, 9, "sec"),
    new Player('pulisic', 21, 10, "fir"),
    new Player('Kante', 25, 7, "fir"),    
    new Player('mount', 28, 19, "sec"),
]

const result = players.filter((player => player.team === 'sec'))

console.log(result)

//[Player { name: 'abraham', age: 30, number: 9, team: 'sec' }, Player { name: 'mount', age: 28, number: 19, team: 'sec' }]

7. 조건에 맞는 필드값의 배열 리턴하기

class Player {
  constructor(name, age, number, team) {
    this.name = name,
    this.age = age,
    this.number = number,
    this.team = team
  }
}

const players = [
    new Player('abraham', 30, 9, "sec"),
    new Player('pulisic', 21, 10, "fir"),
    new Player('Kante', 25, 7, "fir"),    
    new Player('mount', 28, 19, "sec"),
]

const result = players.map((player => player.number))

console.log(result) //[ 9, 10, 7, 19 ]

8. 평균값 구하기(나이 평균)

class Player {
  constructor(name, age, number, team) {
    this.name = name,
    this.age = age,
    this.number = number,
    this.team = team
  }
}

const players = [
    new Player('abraham', 30, 9, "sec"),
    new Player('pulisic', 21, 10, "fir"),
    new Player('Kante', 25, 7, "fir"),    
    new Player('mount', 28, 19, "sec"),
]

const player_result = players.reduce((prev, current) => prev + current.age, 0); //prev default value => 0

console.log(player_result/players.length) // 26


//add some, every
const result = players.some((player => player.age > 19 && player.age < 30))

const result2 = !players.every(player => player.number < 6)

//some : 배열의 요소에서 콜백함수의 리턴이 true인지 false인지 체크 (단 하나의 조건이라도 만족하면 true, 아니면 false)

const result2 = !players.every(player => player.number < 6)
console.log(result2)
//evrey : 검색하고자 하는 전체의 조건이 다 만족하면 true, 아니면 false

9. 해당 조건에 맞는 데이터를 문자열 형태로 반환하기

const last_result = players.map((player) => player.number)
                                         .filter((number) => number > 7)
                                         .join(",");

console.log(last_result) //9,10,19

Reference

• 나무위키
• 드림코딩 by 엘리
• 인사이드자바스크립트