dl은 Definition List의 약어입니다. dt는 Definition Term, dd는 Definition Description의 약어입니다.

<dl>은 용어와 그 용어에 대한 설명을 나타내는 데 사용되는 HTML 태그입니다.

<dt> (용어 정의 용어)는 용어의 제목 또는 이름을 지정하고,

<dd> (용어 설명)는 용어에 대한 설명을 제공합니다. 일반적으로 용어집, 용어 사전 등에서 사용됩니다.

<dl>
    <dt>JavaScript</dt>
    <dd>웹 페이지에서 상호 작용을 추가하기 위해 사용되는 프로그래밍 언어</dd>
    <dt>CSS</dt>
    <dd>웹 페이지에서 스타일을 적용하기 위해 사용되는 스타일 시트 언어</dd>
    <dt>HTML</dt>
    <dd>웹 페이지 구조를 정의하기 위해 사용되는 마크업 언어</dd>
 </dl>

for, while, do...while, for...in

for...of, forEach, map, filter, reduce

for: for문은 일반적인 반복문입니다. 주로 배열이나 객체와 같은 컬렉션을 순회할 때 사용합니다.

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, 2, 3
}

while: while문은 주어진 조건식이 true인 동안 코드를 반복해서 실행합니다.

let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

do...while문은 일단 코드를 한 번 실행한 후에, 주어진 조건식이 true인 동안 코드를 반복해서 실행합니다.

let i = 0;
do {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
} while (i < 5);

for...in은 객체의 속성(property)을 반복해서 처리하는 데 사용됩니다. 객체의 프로퍼티를 순회할 때 사용합니다.

const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`); // a: 1, b: 2, c: 3
}

for...of는 반복 가능한(iterable) 객체의 요소를 반복해서 처리하는 데 사용됩니다. 배열, 문자열, Map, Set 등의 객체를 반복할 수 있습니다.

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 1, 2, 3
}

const str = 'hello';
for (const char of str) {
  console.log(char); // h, e, l, l, o
}

forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 데 사용됩니다. for...of문보다 간결하고 직관적으로 사용할 수 있습니다.

const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item); // 1, 2, 3
});

map은 배열의 각 요소를 변환하는 데 사용됩니다. 배열의 각 요소에 함수를 적용하고, 그 결과로 새로운 배열을 생성합니다.

const arr = [1, 2, 3];
const doubled = arr.map((item) => item * 2);
console.log(doubled); // [2, 4, 6]

filter는 배열의 요소 중에서 주어진 조건에 맞는 요소만 추출하는 데 사용됩니다. 새로운 배열을 반환합니다.

const arr = [1, 2, 3, 4, 5];
const even = arr.filter((item) => item % 2 === 0);
console.log(even); // [2, 4]

 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);

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

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

함수 만들기 [정의]

함수를 정의하기 위해서는 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');

함수는 왜 사용하는가?

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

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

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

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

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

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

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

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

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

참고 : 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