Note > 자바스크립트 관련

console.log('javascript는 뭘까');

정말 이해가 힘든 부분이 많습니다.

읽는건 가능해도 이렇게는 못만들듯 합니다.

  <button className="absolute top-0 right-0 p-2" onClick={handleClick(memo.key)}>

  const handleClick = (key) => (e) => {
    console.log(key);
    console.log(e);
  };

좀 이해가 쉬운 형태는

  <button className="absolute top-0 right-0 p-2"  onClick={(e) => handleClick(memo.key, e)}>

  function handleClick(key, e) {
    console.log(key);
    console.log(e);
  }

이 형태인걸 같습니다.

참고 : JavaScript 재입문하기 (JS 튜토리얼) - JavaScript | MDN (mozilla.org)

자바스크립트 변수 let, const, var

let

1. let은 블록 유효 범위(block scope)를 가지는 변수를 선언할 때 사용합니다.변수가 선언된 중괄호({}) 내에서만 유효하다는 것을 의미합니다. 블록 유효 범위를 가지는 변수는 중복 선언이 불가능하며, 선언과 동시에 값을 할당할 수도 있습니다.
2. 변경 가능합니다.

let x = 10;
if (true) {
  let x = 20;
  x=30;
  console.log(x); // 30
}
console.log(x); // 10

const

1. const는 블록 유효 범위를 가지는 상수(constant)를 선언할 때 사용합니다. 상수는 값이 변하지 않는 변수를 의미하며, 한 번 값을 할당하면 그 이후로는 변경할 수 없습니다. 상수를 선언할 때는 반드시 선언과 동시에 값을 할당해야 합니다.
2. 변경시 에러가 발생합니다.

const PI = 3.14;
console.log(PI); // 3.14

PI = 3; // TypeError: Assignment to constant variable.

var

1. var는 함수 유효 범위(function scope)를 가지는 변수를 선언할 때 사용합니다. 함수 유효 범위란 변수가 선언된 함수 내에서만 유효하다는 것을 의미합니다. 또한, var로 선언된 변수는 중복 선언이 가능하며, 선언과 동시에 값을 할당하지 않아도 됩니다.
2. 전통적으로 변수를 선언하기 위해서 사용해왔던 선언 방식입니다. 제약이 없습니다.

var x = 10;
if (true) {
  var x = 20;
  console.log(x); // 20
}
console.log(x); // 20

함수는 일련의 코드 블록으로, 특정 작업을 수행하는 기능을 정의합니다. 함수는 특정한 입력을 받아서 원하는 결과를 출력하는 것이 일반적입니다. 

왜 사용하는가는 번들링된 자바스크립트 파일을 열어보시면 바로 이해하실수 있습니다. 보통 한 페이지에 함수, 변수, 객체 등등이 한꺼번에 들어 있어서 사람이 보기에는 굉장히 힘듭니다.

함수 만들기 [정의]

함수를 정의하기 위해서는 function 키워드를 사용합니다.

function greeting(name) {
  console.log('Hello, ' + name + '!');
}

함수 사용하기 [호출]

함수를 호출하기 위해서는 함수 이름과 인자를 전달합니다.

greeting('John');

함수 결과 사용하기[반환값]

함수에서 값을 반환하기 위해서는 return 키워드를 사용합니다.

function add(a, b) {
  return a + b;
}


const result = add(1, 2);
console.log(result); // 3

함수 만드는 방법들

- 함수 선언문

 function 키워드를 사용하여 함수를 정의합니다. 함수 선언문은 함수가 선언되기 이전에도 호출될 수 있습니다

function add(a, b) {
  return a + b;
}

- 함수 표현식

 함수 표현식은 변수가 선언된 이후에만 호출할 수 있습니다.

const add = function(a, b) {
  return a + b;
};

- 화살표 함수

 ES6에서 도입된 새로운 함수 정의 방법입니다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 함수를 정의합니다.

const add = (a, b) => {
  return a + b;
};

- 함수 생성자

 new 연산자를 사용하여 함수 객체를 생성하는 방법입니다. 함수 생성자는 일반적으로 잘 사용되지 않습니다.

const add = new Function('a', 'b',  'return a + b');

함수는 왜 사용하는가?

코드의 재사용성을 높이고, 가독성을 향상시키며, 유지보수 용이성을 높이고, 코드를 구조화하며, 함수형 프로그래밍을 구현하기 용이하기 때문입니다.

- 코드 재사용 : 한번 만든 코드를 여러 곳에서 반복해서 사용할수 있습니다.

함수를 사용하면 코드를 재사용할 수 있습니다. 함수를 여러 곳에서 호출하여 동일한 코드를 반복적으로 작성하지 않고도, 코드의 재사용성을 높일 수 있습니다.

- 가독성 향상 : 동일한 코드가 함수를 통해 적어져서 양이 줄고 코드가 뭉쳐져서 하는 일을 함수명으로 알기 쉽게 바꿀수 있습니다.

함수는 코드의 가독성을 향상시키는 데 중요한 역할을 합니다. 함수는 특정 작업을 수행하는 코드 블록으로, 함수 이름을 통해 코드의 의도를 명확하게 전달할 수 있습니다.

-유지보수 용이성 : 코드 재사용과 아울러 여러곳에 반복적으로 쓰여진 코드를 다 고치는것 보다 집중되어 있는 함수 내용만 고치면됩니다. 그러나 연결된곳의 여파는 누가, 어떻게 확인할까요?

함수를 사용하면 코드의 유지보수 용이성을 높일 수 있습니다. 함수는 일정한 작업을 수행하는 코드 블록으로, 이러한 코드 블록을 함수로 정의하면 해당 함수를 수정하면 모든 호출자가 수정된 코드를 사용하게 됩니다.

- 코드 구조화 : 함수를 사용하여 코드를 작성하면, 코드를 논리적인 블록으로 구성할 수 있습니다. 이러한 구조화는 코드를 이해하고 수정하기 쉽게 만듭니다.

- 함수형 프로그래밍 : 함수형 프로그래밍은 상태 변이를 최소화하여 코드를 안정적으로 만드는 프로그래밍 패러다임입니다. 함수는 입력값에 대한 출력값을 반환하는 순수 함수로 작성하여, 상태 변이를 최소화할 수 있습니다.

 if...else, switch...case, ?:

if...else: if문은 조건식이 참(true)일 때, 해당하는 코드 블록을 실행하고, 그렇지 않은 경우에는 else 블록을 실행합니다.

if (a > 10) {
  console.log('10보다 크다.');
} else {
  console.log('10보다 작거나 같다');
}

if...else if...else

if (score >= 90) {
  console.log('Grade A');
} else if (score >= 80) {
  console.log('Grade B');
} else if (score >= 70) {
  console.log('Grade C');
} else if (score >= 60) {
  console.log('Grade D');
} else {
  console.log('Grade F');
}

switch...case: switch문은 여러 개의 조건을 검사하여 해당하는 코드 블록을 실행합니다.

 switch (color) {
  case 'red':
   console.log('is red');
   break;

  case 'blue':
   console.log('is blue');
   break;

  default:
   console.log('is not red|blue');
 }

삼항 연산자 : 삼항 연산자는 if...else 문의 간결한 버전입니다. 조건식이 참(true)이면 첫 번째 표현식을 실행하고, 그렇지 않으면 두 번째 표현식을 실행합니다.

let rst = (a > b) ? 'a win' : 'b win';
console.log(rst);