function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  };

  return (
    <div className="App">
      <p>{state}</p>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        +3
      </button>
    </div>
  );
}

export default App;

...
const handleClick = () => {
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
  };
...

function returnX(){
    return 'x';
}

const x = returnX()
console.log(typeof x) // string

----------------------------------------------

function returnX() {
    let x = 'x';
    return function returnY() {
        return x + 'y';
    }
}

const x = returnX()
console.log(typeof x) // function => return 값이 함수 덩어리이기 때문에

const x = returnX()();
console.log(typeof x) // string
function sum(num1) {
    return function (num2) {
        return num1 + num2;
    };
}

const sum5 = sum(5); // 숫자5가 계속 바인딩되어 있는 상태
console.log(sum5(10)); // 15

function privateData() {
    let temp = 'a';
    return temp;
}

const result = privateData(); // privateData를 실행시켜야만 temp값을 알 수 있다.
console.log(result);

-------------------------------------

function privateData() {
    let temp = 'a';
    return {
        value: () => {
            return temp;
        },
        changeValue: (newVal) => {
            temp = newVal;
        }
    };
}

const private = privateData();
console.log(private.value()); // a
private.changeValue('b');
console.log(private.value()); // b

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

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

function Func() {} // 생성자함수의 이름은 Pascal case로..

class Class {}

const newInstance = new Func();
const newInstance2 = new Class();

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.location = location;
}

Person.prototype.getName = function () {
    return this.name + ' 입니다.';
}

=============================================

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

    getName() {
        return this.name + ' 입니다.';
    }
}

const one = new Person('one', 1, 'Korea');
const two = new Person('two', 2, 'Korea');

console.log(one.getName()); // one 입니다.  

// Super Class
class Animal {
    constructor(name, sound) {
        this.name = name
        this.sound = sound;
    }

    getInfo() {
        return this.name + '가(이)' + this.sound + '소리를 낸다.';
    }
}
// Sub Class
class Friends extends Animal {
    constructor(name, sound) {
        super(name, sound); // 부모의 생성자함수를 호출가능
    }
}

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냐옹');

console.log(dog.getInfo()); // 개가(이)멍멍소리를 낸다.
console.log(cat.getInfo()); // 고양이가(이)냐옹소리를 낸다.

-------------------------------------------------

dog.contructor.name // Friends
cat.contructor.name // Friends

dog instanceof Friends // true
dog instanceof Animal // true

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

class Paerson {
	constructor() {

	}
}

const one = new Person('one', 1);
const two = new Person('two', 2);

console.log(one.constructor); // [Function: Person]
console.log(two.constructor.name); // Person

array.__proto__ ...로 array의 프로토타입에 접근

const animal = {
    sayName() {
        return 'ANIMAL';
    }
}

console.log(animal.sayName()); // ANIMAL
const dog = Object.create(animal);
console.log(dog.sayName()); // ANIMAL

// Super Class
function Animal(name, sound) {
    this.name = name
    this.sound = sound;
}

Animal.prototype.getInfo = function () {
    return this.name + '가(이)' + this.sound + '소리를 낸다.';
}

// Sub Class
function Friends(name, sound) {
    Animal.call(this, name, sound); // 명시적 바인딩 -> Animal함수의 this를 Friends로 바인딩
}

Friends.prototype = Object.create(Animal.prototype);
Friends.prototype.constructor = Friends;

const dog = new Friends('개', '멍멍');
const cat = new Friends('고양이', '냐옹');

console.log(dog.getInfo()); // 개가(이)멍멍소리를 낸다.
console.log(cat.getInfo()); // 고양이가(이)냐옹소리를 낸다.

-------

dog.contructor.name // Friends

dog instanceof Friends // true
dog instanceof Animal // true

const obj = {
	name: 'obj',
	method: function() {
		return this.name
	}
}

obj.method() // 'obj'

const person = {
    name: 'Lee',
    sayName: function () {
        return this.name + '입니다';
    }
}

const zero = {
    name: '베이스',
    sayName: function () {
        return this.name + '입니다';
    }
}

function sayFullName(firstName) {
    return firstName + this.sayName()
}
const result = sayFullName.call(person, 'Chaehyeon ');
// Chaehyeon Lee입니다.

function sayFullName(firstName) {
    return arguments[1] + this.sayName()
}

const result = sayFullName.apply(person, ['Chaehyeon ','채현 ']);
// 채현 Lee입니다.

{
// 블록
}

function func() { // 함수 스코프 블록
}

if (true) { // 블록 스코프 블록
}

function foo() {
    console.log(hoist); // undefined

    var hoist = '호이스팅';

    console.log(hoist); // 호이스팅
}

foo();

function foo() {
    console.log(hoist); // Cannnot access 'hoist' before initialization

     let/const hoist = '호이스팅';

    console.log(hoist); // 호이스팅
}

foo(); // Cannnot access 'hoist' before initialization

function func() {

}

func();

==>

(function () {
    
})();

(function (num) {
    console.log(num); // 1
})(1);

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

const alpha = ['a', 'b', 'c'];

alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]

--------

const newArr = [...array1, ...array2];
// ['a', 'b', 'c', 'd', 'e', 'f']

const langs = ['JS', 'HTML', 'CSS'];

const newLangs = langs.map(lang => lang + ' 언어');
console.log(newLangs);
// [ 'JS 언어', 'HTML 언어', 'CSS 언어' ]

const langs = ['JS', 'HTML', 'CSS', 0, 1, 2, 3];

const numbers = langs.filter(lang => {
    if (typeof lang === 'number') {
        return true;
    }
});
console.log(numbers);
// [ 0, 1, 2, 3 ]

const strings = langs.filter(lang => {
    if (typeof lang === 'string') {
        return lang;
    }
})
console.log(strings)
// [ 'JS', 'HTML', 'CSS' ]
const isNumber = function (el) {
    if (typeof el === 'number') {
        return true;
    }
}
const numbers = langs.filter(isNumber);
console.log(numbers)

const isString = (el) => typeof el === 'string';
const strings = langs.filter(isString)
console.log(string)

// [ 0, 1, 2, 3 ]
// [ 'JS', 'HTML', 'CSS' ]

// argument로 받거나
// 인자에 spread형식으로 받거나...

function sumTotal() {
    let temp = 0;
    for (let i = 0; i < arguments.length; i++) {
        temp = temp + arguments[i];
    }
    return temp;
}

console.log(sumTotal(1, 2, 3, 4, 5, 6, 7));
// 28
function sumTotal(...numbers) {
    let temp = 0;
		// reduce((누적값, 현재값){},초기값)
    return numbers.reduce((total, current) => total + current, 0);
		// 첫번째는 초기값(total(0))+ 인자(1)이 total로 들어가고
		// 그 다음 total(1)+인자(cur(2))
}

console.log(sumTotal(1, 2, 3, 4, 5, 6, 7));

const numbers = [4, 2, 5, 1, 3];

const orderNumbers = numbers.sort((a, b) => a - b)
console.log(orderNumbers);
// [ 1, 2, 3, 4, 5 ]

const strings = ['마', '가', '라', '나', '다'];
const orderStrings = strings.sort((a, b) => a.localeCompare(b));
console.log(orderStrings);
//[ '가', '나', '다', '라', '마' ]

const strings = ['마', '가', '라', '나', '다'];

const result = strings.find((string) => string === '나');
console.log(result);
// 나  ///없으면 undefinded

const result = strings.findIndex((string) => string === '나');
console.log(result);
// 3

const result = strings.indexOf('나'); // 왼쪽부터,,, lastIndexOf()
console.log(result);
// 3

const result = strings.includes('나');
console.log(result);
// true

const object = {
	property: 'value',
	method: function () {},
}

function NewObject(name) {
	this.name = name;
}

const newObject = new NewObject(’Lee’);

const newObject2 = Object.create(Object.prototype, {
	name: {
		value: 'lee',
		writable: true, // 덮어쓸 수 있는지
		enumerable: true, // forin문과 같은 것으로 열거할 수 있는지
		configurable: true, // 객체 기술자를 수정할 수 있는지
	},
});
// const newObject2 = Object.create(프로토타입, 객체 서술자(기술자));

newObject2.name = 'Kim';

for (const key in newObject2) {
	console.log(key);
}

const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3',
	prop4: 'value4',
};

const prop = 'prop';
const prop1 = 'prop1';

obj.prop1 // value1
obj['prop1'] // value1
obj[prop + 1] // value1
obj[prop1] // value1

for (const key in obj) {
	console.log(key); // prop1, prop2, prop3, prop4
	console.log(obj[key]); // value1, value2, value3, value4
}

for (const key in obj) {
	if (obj.hasOwnProperty(key)) {
		console.log(obj[key]); // value1, value2, value3, value4
	}
}
// 상속되거나 확장되어 사용 된 객체의 상위에서 꺼내오지 않도록 하는 방어문

const person = {
	firstName: "Chaehyeon",
	location: "Korea",
}

// 추가
person.lastName: "Lee"
// 수정
person.lastName: "lee"
// 삭제
delet person.location;

person; // { firstName: "Chaehyeon", lastName: "lee" }

// const는 재할당을 막는 것... 그래서 가능

// 추가, 수정, 삭제 등을 접근해서 조작할 때 안전하게 하기 위해
const person = {
	_firstName: "Chaehyeon",
	lastName: "Lee",

	get firstName() {
		return this._firstName.toUpperCase();
	}

	set firstName(newFirstName) {
		if (typeof newFirstName !== 'string') {
			this._firstName = 'undefinedName';

			return;
		}

		this._firstName = newFirstName;
	}

	get fullName() {
		return this._firstName + this.lastName + '입니다'.
	}
}

// console.log(person.firstName); // CHAEHYEON
// console.log(person.fullName); // LeeChaehyeon입니다

person.firstName = 12345;
console.log(person.firstName); // UNDEFINDEDNAME

const me = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

const me2 = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

console.log(me === me2); // false
console.log(me.name === me2.name); // true

// 객체 그 자체를 비교할 때에는 객체의 메모리 주소를 본다.
// 당연히 메모리주소는 다르다

const me = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

// 객체를 자주 만들고 싶을 때 -> 생성자 함수
function Person(name, age, location) {
	this.name = name;
	this.age = age;
	this.location = location;

	this.getName = function () {
		return this.name + ' 입니다';
	}
}
// 여기서 this는 "생성 될" 인스턴스를 가리킨다.

const me2 = new Person('ChaehyeonLee', 26, 'korea');
// Person { name: 'ChaehyeonLee', age: 26, location: 'korea' }

const you new Person('Kim', 20, 'korea');
// Person { name: 'Kim', age: 20, location: 'korea' }

accessKey: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
...