헷갈릴 수 있는 용어들 정리

비 전공자가 알아두면 좋은 개발 용어나 알아도 헷갈리는 용어들 정리

 

사이드 이펙트: 구현하고자 하는 형태의 기능이 동작하지 않고 어떠한 다른 요인으로 인해 동작하지 못하거나 다른 값을 도출할 경우 쉽게 버그라고 생각하면 된다.

 

인스턴스 : 일반적으로 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트를 가리킨다.

 

IIFE : 즉시 호출 된 함수

(function hello() {
	console.log(`IIFE`);
})(); // 즉시 호출 됨!!

일급 객체 함수

first-class function: 함수가 일반 객체처험 모든 연산이 가능한 것

// 콜백 함수
const add = (a, b) => a + b
const multiply = (a, b) => a * b

// 전달된 action은 콜백함수이다.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라
// 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
// 그래서 함수는 고차함수안에서 필요한 순간에 호출이 나중에 됨
function calculator(a, b, action){
	let result = action(a, b)
}

calculator(1, 2, add)
calculator(1, 2, multiply)

calculator(10, 20, (num1,num2) => console.log(num1 * num2))

static

static이 붙은 프로퍼티나 메서드는 만들어진 인스턴스에 포함되지 않고 클래스에 그대로 남아있게 됩니다.

class Fruit {
  static MAX_FRUITS = 4
  constructor(name, upercase) {
    this.name = name
    this.upercase = upercase
  }

  // 클래스 레벨의 메서드
  static makeRandomFruit() {
    // 클래스 레벨의 메서드에서는 this를 참조할 수 없음
    // 왜냐하면 클래스 레벨은 아무것도 채워지지않은 템플릿 상태이기 때문
    return new Fruit('banana', 'BANANA')
  }
  // 인스턴스 레벨의 메서드
  display = () => {
    console.log(`${this.name}: ${this.upercase}`)
  }
}

const banana = Fruit.makeRandomFruit()
console.log(banana)

console.log(Fruit.MAX_FRUITS)

const apple = new Fruit('apple', 'APPLE')
const orange = new Fruit('orange', 'ORANGE')
console.log(orange.display) // Fruit { display: [Function: display], name: 'orange', upercase: 'ORANGE'}

필드 MAX_FRUITS 의 앞에 static이 붙어있다. 이렇게 되면 MAX_FRUITS는 인스턴스 레벨의 메서드가 아닌 클래스 레벨의 메서드가 되어 클래스에서 사용할 수 있게 된다.

 

오버라이딩

필요한 메서드를 재정의 해서 사용할 수 있다

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

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

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

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); // 오버라이딩 해도 부모 class 메소드 호출 쌉가능
    console.log(`📐`);
  }

	// 오버라이딩(다형성)
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, `blue`);
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, `red`);
triangle.draw();
console.log(triangle.getArea());

오버 로딩

같은 이름의 메소드를 여러개 정의하는 것 매개변수의 타입이 다르거나 개수가 달라야 한다.

function user(){
		console.log("user()");
	}
	
	//overloading - 매개인자 선언과 상관없이 입력값을 넣을 수 있다.
	myUser = function(name, age){
		console.log("myUser()",arguments.length); //자바스크립트의 배열은 가변적으로 사용이 가능하다.(java와 큰 차이점)
		console.log(name,age);
		for (var t in arguments){
			console.log(arguments[t],t, typeof arguments[t]); //t는 인덱스 값(키 값)
		}
	}
	
	user();
	myUser();
	myUser("홍길동",10);
	myUser(10,20,30,40);

DOM

DOM(Document Object Model)은 정적 웹 사이트를 기능적으로 만들기 위해 브라우저에 의해 구현되는 프로그래밍 인터페이스다.

SDK

Software Development Kit의 약자로, 소프트웨어 개발 도구 모음 SDK는 API, IDE, 문서, 라이브러리, 코드 샘플 및 기타 유틸리티가 포함될 수 있다.

	API	SDK
목적	소프트웨어 연결 및 통합	다양한 개발 도구 포함
형질	가볍고 빠르며 일반적으로 전문화 됨	더 견고함 일반적으로 많으 유틸리티를 포함
사용 사례	애플리케이션에 특정 기능을 추가하는데 사용	새로운 애플리케이션을 생성하거나 하나의 패키지로 많은 기능을 추가하는데 사용

이터레이션(이터러블)

반복 가능한 규격, 약속, 인터페이스이다.

// Iterable 하다는건! 순회가 가능하다는 것
// [Symbol.iterator](): IterableIterator<T>
// 심볼정의를 가진 객체나, 특정한 함수가 IterableIterator<T>를
// 리턴한다는 것은 순회 가능한 객체다! 라는것을 의미한다.
// 순회가 가능하면 무엇을 할 수 있나?
// 바로 반복문, 연산자들을 사용할 수 있습니다.

const arr = [1, 2, 3]
console.log(arr.values()) // Object [Array Iterator] {}
console.log(arr.entries()) // Object [Array Iterator] {}
console.log(arr.keys()) // Object [Array Iterator] {}
// 이터레이터가 된다는 것은 반복문을 사용할 수 있다는 것이다.

// iterator 사용해 보기
// values는 iterableIterator를 리턴합니다.
const iterator = arr.values()
while (true) {
  const item = iterator.next()
  //   item이 마지막이라면 while문 나갑니다.
  if (item.done) break
  console.log(item.value)
}

// arr의 값을 하나하나씩 item에 할당할 수 있다.
for (let item of arr.values()) {
  console.log(item)
}

// 일반 오브젝트는 iterable한 규격 사항을 준수하지 않습니다.
// 즉 iterable한 함수가 들어있지 않습니다.
// 오브젝트의 키를 가져올 수 있습니다.
const obj = { id: 123, name: 'Ellie' }
for (const item in obj) {
  console.log(item)
}

 

Spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) // 질문: 어떤 값을 리턴하나요?

 

Rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 질문: 어떤 값을 리턴하나요?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?