배열에 있는 요소의 값을 변경하여 새로운 배열을 만들 때 사용할 수 있다.

반복문으로 처리가 가능 하지만 간단하게 Array.map() 메소드를 사용할 수 있으며, 이는 콜백 함수를 이용해 각각의 요소를 호출하고 그 값을 변환할 수 있게 만들어준다.

즉, 콜백 함수는 배열의 각 요소에 실행된다.

예를 들어,

let arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 2;
}

console.log(arr); // [2, 4, 6, 8]

와 같은 반복문으로 나타낼 수도 있지만

let arr = [1, 2, 3, 4];

let modifiedArr = arr.map(function(element){
    return element * 2;
});

console.log(modifiedArr); // [2, 4, 6, 8]

처럼 Array.map() 메소드를 사용할 수 있다.

이는 객체 배열에서도 적용될 수 있으며

예를 들어,

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

과 같은 배열을 순환처리해서

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

let usersFullName = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Kanghyun Kim", "Donald Trump", "Michel Jordan"]

와 같이 각각의 객체를 결합할 수도 있다.

이러한 Map() 메소드는 원본 배열을 변경하지 않으며, 각 요소에 대해 콜백 함수를 실행한다

또한, 결과물로 새로운 배열을 반환한다.

참조 : https://www.freecodecamp.org/korean/news/javascript-map-method/

일정 시간이 지난 후에 원하는 함수를 예약하여 호출하는 것을 '호출 스케줄링(scheduling a call)'이라 하며 이는 setTimeout, setInterval과 같이 두 가지로 나뉠 수 있다.

setTimeout

setTimeout은 타이머와 같은 기능을 하고 일정 시간이 지난 후에 함수를 실행시킨다.

예를 들어,

setTimeout (() => {
console.log("setTimeout, 1000ms");
}, 1000);
	
	console.log("Hello World");

와 같이 나타낼 수 있으며 이 함수는 "Hello World"를 출력하고 1초 후에 "setTimeout, 1ms"를 출력하게 된다. 여기서 1000은 1000ms(1초)를 뜻한다

setInterval

setInterval은 일정 시간 간격을 두고 함수를 실행시킨다.

예를 들어,

setInterval (() => {
console.log("Tic");
}, 1000);

setInterval (() => {
console.log("Tok");
}, 2000);

와 같이 나타낼 수 있으며, 이 함수는 1초 마다 "Tic"을 출력하고 2초 마다"Tok"를 출력하여 주기적으로 문자를 출력하게 된다.

clearTimeout / clearInterval

setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환된다. 스케줄링을 취소하고 싶을 때, clearTimeout을 사용할 수 있으며 이는 setInterval에도 동일하게 적용된다.

예를 들어,

let ticTok = setInterval(() => {
console.log("Tictok");
}, 1000);
clearInterval(() => {
ticTok}, 10000);

와 같이 나타낼 수 있으며, 이 함수는 1초 마다  "TicTok"을 10초간 호출하고 더 이상 호출하지 않게 된다.

출처 : https://ko.javascript.info/settimeout-setinterval

다음은 해당 섹션의 끝에 도달한 후 바로 지금 또는 나중에 검토할 수 있는 "심층 정보" 추가 읽기입니다. 연산자, 값 그리고 값 유형에 대한 더 유용한 정보입니다.

연산자에 대한 추가 정보

이전 강의에서 우리는 자바 스크립트로 수학을 할 때 항상 사용하게 될 핵심 연산자를 살펴보았습니다.

● +: 두 개의 숫자를 더하거나 두 개의 문자열을 연결

● -: 두 숫자 빼기

● *: 여러 개의 두 숫자

● /: 두 숫자를 나눕니다.

● %: 나눗셈의 나머지를 구합니다.

영상에서는 다루지 않았지만 과정 후반부에 표시될 유용한 속기 연산자도 있습니다.

● ++(예: age++): age = age + 1에 대한 약식 표기법(변수에 저장된 값을 1씩 증가시키고 해당 변수에 다시 저장)

● --(예: age--): age = age - 1에 대한 약식 표기법(변수에 저장된 값을 1만큼 감소시키고 해당 변수에 다시 저장)

● ** (예: age = 4 ** 3): 지수 연산자(예: age = 4 * 4 * 4 대체)

● +=(예: age += 2): age = age + 2에 대한 약식 표기법(변수에 저장된 값을 증가시키고 해당 변수에 다시 저장)

● -= (예: age -= 2): age = age - 2에 대한 약식 표기법(변수에 저장된 값을 감소시키고 해당 변수에 다시 저장)

● *= (예: age *= 2): age = age * 2에 대한 약식 표기법(변수에 저장된 값을 곱하여 해당 변수에 다시 저장)

● /= (예: age /= 2): age = age / 2에 대한 약식 표기법(변수에 저장된 값을 나누어 해당 변수에 다시 저장)

값 유형에 대한 추가 정보

모든 값에는 특정 값 유형이 있다는 것을 이해하고 염두에 두는 것도 중요합니다. 예를 들어 2는 숫자이고 'hi'또는 '2'는 문자열입니다('!에 주의).

특히 '2'의 경우가 중요합니다. 우리 인간에게는 숫자처럼 보이지만 물론 엄밀히 따지면 숫자입니다. 그러나 "원시 숫자"가 아닌 텍스트로 저장됩니다.

그게 왜 중요할까요?

위에서 언급한 연산자로 작업을 수행하기 시작하면 중요합니다. 다음은 몇 가지 예제 코드 조각과 이에 의해 생성되는 결과입니다(브라우저 개발자 도구의 자바 스크립트 콘솔에서 모두 테스트할 수 있음).

위의 예를 살펴보면 생성한 결과를 생성할 것으로 예상하지 못한 일부 코드 라인이 있을 수 있습니다.

특히 e, f와 g는 혼동될 수 있습니다.

그러나 값에는 특정 값 유형이 있다는 점을 염두에 두면 덜 혼란스럽습니다. 무언가를 따옴표로 묶는 경우(큰따옴표든 작은따옴표든 중요하지 않음) 문자열입니다. 비록 그것이 우리에게 숫자처럼 보일지라도 문자열에 + 연산자를 사용하면(다른 값이 숫자인 경우에도) 자바 스크립트는 문자열에 대해 +를 사용할 때 항상 하던 일을 수행하죠.

값을 연결해서 새로운 문자열을 만듭니다. 이것이 e와 f가 결과로 '22'를 산출하는 이유입니다.

이제 결과가 갑자기 문자열이 아니라 숫자이기 때문에 g가 다시 혼란스러울 수 있지만 그 이유는 간단합니다. 자바 스크립트는 문자열에 대해 *, / 또는 -로 무엇을 해야 할지 모릅니다. 하지만 바로 실패하는 대신 문자열을 배후에서 숫자로 변환하고 변환된 숫자를 연산에서 대신 사용하려고 시도합니다. 그래서 결과적으로 숫자 6을 얻습니다.

문자열을 숫자로 변환하는 데 실패하면(예: 'hi' * 3을 시도했기 때문에) "Not a Number"를 나타내는 NaN이라는 특별한 결과를 얻게 됩니다. 이와 같은 경우에 자바 스크립트에 존재하는 특수 값입니다.

다른 값 유형(객체, 배열, 함수 등)도 있지만 지금은 숫자와 문자열이 가장 중요하며 과정을 통해 더 많은 값과 값 유형을 탐색할 것입니다!

출처 : https://www.udemy.com/course/100-2022-web-development/learn/lecture/30289952#questions

프로그래밍에서 함수(function)는 일정한 동작을 수행하는 코드를 의미한다.

이를 미리 만들어 두고 원할 때 실행하여 정해진 동작을 수행할 수 있다.

함수를 만들 때, ‘function’ 예약어를 사용하거나 ‘=>(화살표)’ 기호를 사용하며 화살표 기호를 사용한 함수를

화살표 함수(arrow function)이라 한다.

이는

function() {}

() => {}

와 같이 나타낼 수 있으며, 함수에 이름을 붙이면 다른 곳에서 사용할 수 있다.

예를 들어,

function a() {}

const b = function() {}

const c = () => {}

와 같이 사용할 수 있으며

함수 a 처럼, 함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declaration statment)이라 한다.

그리고, 두 번째와 세 번째 함수에는 각각 b와 c의 상수를 대입했는데, 이처럼 함수에 상수나 변수를 대입하는 방식을 함수 표현식(function expression)이라 한다.

이러한 함수를 만드는 행위도 선언한다(declare)고 표현한다.

만든 함수를 사용하는 행위를 호출한다(call)고 표현하며

예를 들면,

function a () {

console.log('Hello');

console.log('Function!');

};

a ();

Hello

Function!

undefined

와 같이 나타난다.

위의 부분은 함수선언문을 선언한 것 이며,

아래의 a(); 부분은 선언한 함수를 호출한 부분이고 출력이 된다.

undefined 부분은 반환값을 나타내는데, 이는 반환값이 없음을undefined 라는 반환값으로 나타내 주었다.

이는 함수선언문 안에서 return undefined;

가 생략된 모습이다. 따라서, undefined와 return undefined는 생략 가능하다.

return 함수를 사용한다면 그 부분을 마지막으로 함수는 종료된다.

그러므로, if문을 사용하여 함수의 실행부분과 종료부분을 설정할 수 있다.

함수와 배열은 객체이며 배열이나 함수가 아닌 것이 특정 모양을 가지면 ‘객체 렉터럴’ 이라 부른다.

예를 들면,

const kanghyun = {
name : '김강현',

date : 13,

month : 'January',

year : 1996,

gender : 'Male',

};

로 나타낼 수 있으며, 이렇게 중괄호에 묶인 것을 말하고 배열과 비슷하지만 다른 점을 나타내는데 이는 속성의 값 마다 이름을 부여 받는다는 점 이다.

또한 속성명에 숫자, 공백, 특수문자가 들어갈 경우에 따옴표를 붙여주어야 하며 후에 이를 다시 입력할 때, 따옴표와 함께 대괄호로 감싸주어야 한다.

예를 들면,

const object = {

a : 'b',

'1a' : 'c',

'a b' : 'd',

'a+b' : 'e',

};

위의 경우에서

object.a

object[a]

object[’1a’]

object[’a b’]

object[’a+b’]

등으로 표현할 수 있다.

만약, 여기서 대괄호와 따옴표를 함께 입력하지 않는다면 찾고자하는 문자는 객체 레터럴 안의 문자열이 아닌 변수로 인식된다. 또한 객체 레터럴 안에 새로 추가하거나 변경하고 싶을 때에는

object.a = f;

object.b = f;

등의 방법으로 객체 레터럴 안에 있는 값을 바꾸거나 새로운 속성을 추가할 수 있다.

만약, 객체 레터럴 안의 속성을 제거하고 싶다면 ‘delete’를 사용할 수 있으며 이는

delete object.b;

등의 방법으로 객체 레터럴 안에 있는 속성을 제거할 수 있다.