frontend 개발중

javascript 클래스 사용법 예시1

현재 react 에서 클래스형 component를 사용하는 일은 드물지만 클래스를 통한 객체 방식의 이해는 필수적이다. javascript에서는 function도 객체이며 array도 객체이다.
객체화 하여서 하나의 데이터를 뽑아오는 일은 심심하면 일어나는 일이라서 한번 더 정리해보고자 공식 문서의 힘을 빌렸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // 메서드
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

리엑트에서 일어나는 일의 대부분이 클래스 객체에서도 발생한다. 바인딩 문제,this문제, 상속을 통한 새로운 기능 확보 등등 간단하게 다시 한번 정리가 필요한 부분이 생긴다면 추가할 예정이다.

arrow function

• javascript arrow function

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언하는 기능입니다.

하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 매개변수에 따라 지정 방법이 달라진다 
    () => { ... } // 매개변수가 없을 경우 사용방법 
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 }) 
// 위 표현과 동일하다. 객체 반환을 할 경우에는 소괄호를 사용해야한다

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수의 호출

• 화살표 함수는 익명 함수로만 사용할 수 있습니다.

• 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용합니다.

  1 2 3 4 5 6

  // ES5 var pow = function (x) { return x * x; }; console.log(pow(10)); // 100 // ES6 const pow = x => x * x; console.log(pow(10)); // 100

• 콜백 함수로 사용하는 경우도 많습니다. 이 경우 일반적인 함수 표현식보다 표현이 간결하여 보다 간결하게 코딩을 할수 있게합니다. 버전마다 조금씩 다르지만 내용은 일맥상통합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;

});

console.log(pow);   // 1X1 ,2X2, 3X3 

// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

첫 블로그 포스팅

6월부터 차근차근

1

$ hexo new "My New Post"

hexo와 깃허브를 통해 쉽게 나의 블로그를 개설하게 되었다.

1. 조금 정리가 안된 부분을 한번씩 포스팅
2. 과거 일본에서 배운거도 정리(마케팅,SEO,여행)
3. 취업할때까지 화이팅~

제 깃허브 주소는 이곳입니다!
공부한거도 하나씩 commit 하면서 정리하고 프로젝트 작업도 병행할 예정입니다