[Javascript] Arrow Function

// 인자 0개
const greet = () => 'hello';
console.log(greet());
​
// 인자 1개 (괄호 생략 가능)
const double = x => x * 2;
console.log(double(5));
​
// 인자 여러 개
const add = (x, y) => x + y;
console.log(add(3, 4));
​
// 본문이 블록 (명시적 return 필요)
const sumAndDouble = (x, y) => {
const sum = x + y;
return sum * 2;
};
console.log(sumAndDouble(3, 4));
​
// 객체 반환 (괄호로 감싸기)
const makePoint = (x, y) => ({ x, y });
console.log(makePoint(1, 2));

const makeWrong = (x) => { value: x };
console.log(makeWrong(42));
​
const makeRight = (x) => ({ value: x });
console.log(makeRight(42));

const obj = {
name: 'Alice',
greetRegular: function () {
  return `Hello, ${this.name}`;
},
};
​
console.log(obj.greetRegular()); // obj 가 this
​
const fn = obj.greetRegular;
console.log(fn()); // this 는 undefined (strict)

const name = 'Global';
​
const obj = {
name: 'Alice',
greetArrow: () => `Hello, ${this?.name ?? globalThis.name}`,
};
​
console.log(obj.greetArrow());
​
const fn = obj.greetArrow;
console.log(fn()); // 같은 결과, 호출 방식 무관

function regular() {
console.log('regular:', Array.from(arguments));
}
regular(1, 2, 3);
​
// 화살표는 arguments 가 외부 스코프를 본다
const arrow = () => {
try {
  console.log('arrow:', arguments);
} catch (e) {
  console.log('arrow:', e.message);
}
};
arrow(1, 2, 3);
​
// rest 매개변수가 정답
const arrowRest = (...args) => console.log('rest:', args);
arrowRest(1, 2, 3);

function Person(name) {
this.name = name;
}
const a = new Person('Alice');
console.log(a.name);
​
const Arrow = (name) => { this.name = name; };
try {
new Arrow('Bob');
} catch (e) {
console.log('Error:', e.message);
}

// 함수 선언은 호이스팅됨
greet('A');
function greet(n) { console.log('hi', n); }
​
// 화살표는 표현식, TDZ
try {
sayHi('B');
} catch (e) {
console.log('Error:', e.message);
}
const sayHi = (n) => console.log('hi', n);

function Counter() {
this.count = 0;
var self = this;  // ← 트릭의 시작
​
setInterval(function () {
  // 여기서 this 는 setInterval 의 호출 컨텍스트 (브라우저: Window)
  // self 가 외부 Counter 인스턴스를 들고 있다
  self.count++;
  console.log('count:', self.count);
}, 1000);
}
​
new Counter();

function Counter() {
this.count = 0;
​
setInterval(function () {
  this.count++; // ❌ this 는 Window
  // strict 모드면 TypeError
  // sloppy 모드면 window.count 가 생성되며 의도와 다른 동작
  console.log('count:', this.count);
}, 1000);
}
​
new Counter();

function Counter() {
this.count = 0;
​
setInterval(function () {
  this.count++;
  console.log('count:', this.count);
}.bind(this), 1000);  // ← 매 호출마다 새 함수 객체 생성
}
​
new Counter();

class Counter {
constructor() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log('count:', this.count);
  }, 1000);
}
}
​
new Counter();

function ButtonWidget(el) {
this.label = 'Click me';
this.clicks = 0;
var self = this;
​
$(el).on('click', function () {
  self.clicks++;
  $(el).text(self.label + ' (' + self.clicks + ')');
});
}

const nums = [1, 2, 3, 4, 5];
​
console.log(nums.map(x => x * 2));
console.log(nums.filter(x => x % 2 === 0));
console.log(nums.reduce((acc, x) => acc + x, 0));

const obj = {
name: 'Alice',
greet: () => `Hello, ${this?.name ?? 'unknown'}`,
};
console.log(obj.greet());
​
// ✓ 메서드 단축 문법
const obj2 = {
name: 'Alice',
greet() { return `Hello, ${this.name}`; },
};
console.log(obj2.greet());

// 가상 DOM 환경
const button = { tag: 'BUTTON', textContent: '' };
​
function handlerRegular() {
console.log('this is:', this.tag);
}
​
const handlerArrow = () => {
console.log('this is:', this?.tag ?? '(lexical)');
};
​
handlerRegular.call(button); // 가상 디스패치
handlerArrow.call(button);