레벨 테스트, 데이터 타입

오답 공부

 

11. 배열 `[1, 2, 3, 4, 5]`의 각 요소에 `2`를 곱한 새로운 배열을 반환하는 `map` 함수를 사용한 코드를 작성하세요.

정답

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((num) => num * 2); // 답

// 정답 풀어보기
const newArr = arr.map(function (num) {
  return num * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

 

map 함수 : 

맵은 인자값으로 함수를 받습니다.

 // Map 함수의 기능 풀어보기
function map(callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; ++i) {
    let newValue = callback(arr[i]);
    newArr.push(newValue);
  }
  return newArr;
}

코드 해석

callback 함수를 매개변수로 받는 map함수(여기선 그냥 함수 이름)를 선언합니다.

newArr배열을 비워 둔 상태로 선언합니다.

for 반복문으로 배열의 길이만큼 반복합니다.

   callback함수로 배열의 i번째 값을 처리해서 newValue에 재할당 합니다.

   newArr배열에 새 newValue 값을 push(배열 맨 뒤에 들어감)합니다.

 반복

newArr배열을 반환합니다.

 

함수의 진화형태

// 태초의 함수 모양
function f1(num1, num2) {
  return num1 + num2;
}
// 1차진화 변수에 할당
const f2 = function () {
  return 1;
};
// 2차진화 화살표 함수
const f3 = () => {
  return 1;
};
// 3차진화 return만 필요한 화살표 함수. 이젠 중괄호도 없음
const sum = (num1, num2) => num1 + num2; // return만 하는 함수

 

JavaScript에서 매개변수, 인자, 생성자

차이점 요약
- 매개변수 : 함수나 생성자에 정의된 입력 자리.
- 인자 : 함수나 생성자 호출 시 전달되는 실제 값.
- 생성자 : 객체 초기화를 위해 클래스에서 자동 호출되는 특별한 메서드.

1. 매개변수 (Parameter)
함수나 메서드를 정의할 때 받는 입력 자리표시자입니다. 함수 내에서 이 이름으로 값을 참조할 수 있습니다.

function sayHello(name) {  // name이 매개변수
  console.log("Hello, " + name);
}

2. 인자 (Argument)
함수를 호출할 때 실제로 전달하는 값입니다. 이 값이 매개변수 자리에 들어가서 함수 내부에서 사용됩니다.

sayHello("Alice");  // "Alice"가 인자

3. 생성자 (Constructor)
객체를 초기화하는 특별한 함수입니다. `class`를 통해 객체를 만들 때 자동으로 호출되며, 객체의 초기 상태를 설정합니다. JavaScript에서는 `constructor`라는 메서드로 정의됩니다.

class Person {
  constructor(name, age) {  // 생성자, name과 age는 생성자의 매개변수
    this.name = name;       // 객체의 초기 상태 설정
    this.age = age;
  }
}

const person1 = new Person("Alice", 25);  // "Alice"와 25가 인자

12. 다음 코드에서 `increment` 함수를 호출할 때마다 `count`가 증가하는 이유를 설명하세요.

function createCounter() {
  let count = 0;
  return function () {
    count++; // 호출 할 때 마다 여기에서 count의 값이 1 씩 증가합니다.
    return count;
  };
}
const increment = createCounter();
console.log(increment()); // 1
console.log(increment()); // 2

클로저를 통해 `createCounter` 내부의 `count` 변수가 유지되며, `increment` 함수가 호출될 때마다 해당 변수에 접근해 값을 증가시키고 반환하기 때문 입니다.

 

클로저는 함수가 선언될 때의 환경을 기억하고, 그 환경에 접근할 수 있도록 하는 기능입니다. 

이 코드에서 `createCounter` 함수가 실행되면 내부에 `count` 변수가 생성되고, 이 변수는 `createCounter`가 반환하는 함수(이름을 `increment`라고 부를 수 있음) 내에서 참조됩니다. 

 

1. `createCounter` 함수가 실행 될 때, `count` 변수는 초기값 `0`으로 설정됩니다.
2. `createCounter`는 내부에 있는 익명 함수를 반환합니다. 이 익명 함수는 `count` 변수를 참조하고 있으며, 반환된 후에도 `count`의 값을 접근할 수 있습니다.
3. `increment`는 `createCounter`가 반환한 익명 함수가 되며, `increment`를 호출할 때마다 `count++`가 실행되어 `count`의 값이 1씩 증가합니다.
4. `count` 변수는 `createCounter` 실행이 끝난 뒤에도 `increment` 함수 안에서 계속 접근할 수 있는데, 이는 자바스크립트가 이 변수에 대한 참조를 기억하고 있기 때문입니다. 이처럼 외부 함수 실행이 끝난 뒤에도 내부 함수에서 계속 접근할 수 있는 변수를 클로저라고 합니다.

따라서 `increment`를 호출할 때마다 `count`가 1씩 증가하여, `console.log(increment());`를 두 번 호출했을 때 각각 `1`과 `2`가 출력됩니다.

13. `fetchData`라는 비동기 함수를 `Promise`를 사용하여 작성하고, 데이터가 성공적으로 가져와지면 "데이터 로드 성공"을, 실패하면 "데이터 로드 실패"를 출력하는 코드를 작성하세요.

비동기 함수

비동기를 제대로 이해하기 위해선 아래 의  진화를 이해해야 합니다 < 이건 추가 공부하기
callback 방식 -> Promise then 방식 -> Promise async await 방식

 

비동기 함수는 키가 붙음 ( async)

sync : 동기

async : 비동기

비동기함수는 Promise를 리턴합니다. Promise는 파라미터로 익명의 함수를 가집니다.

async function fetchData() {
  /// 데이터 처리
  return new Promise(function (resolve, reject) {
    if (true) {
      resolve("데이터 로드 성공");
    } else {
      reject("데이터 로드 실패");
    }
  });
}

async function main() {
  try {
    // 성공하면
    // result = "데이터 로드 성공"
    const result = await fetchData();
  } catch (error) {// error에 reiect(실패)의 값이 들어갑니다.
    // 실패하면
    // error = "데이터 로드 실패"
    console.log(error);
  }
}

 

'return new Promise()' 는 아래 코드를 줄인 것 입니다.

let promise = new Promise;
return Promise

'new'로 시작하는 변수의 경우 생성자를 받습니다.

new 변수명 (생성자)

 

비동기 함수의 형태를 외워두세요

//비동기 함수
async function fetchData() {
  return new Promise(function (resolve, reject) {
    if (true) {
      resolve("데이터 로드 성공");
    } else {
      reject("데이터 로드 실패");
    }
  });
}

resolve : 성공 시 호출.   리졸브 호출 시 리졸브값 받음
reject : 실패 시 호출. try catch문에서 catch문에 error로 걸림

 

14. `Animal` 클래스를 생성하고, `speak` 메소드를 정의하세요. 그 다음 `Dog` 클래스를 `Animal` 클래스에서 상속받아 `speak` 메소드를 오버라이드하여 "멍멍"을 출력하도록 하세요.

class Animal {
  speak() { // function없이 함수명(){}로 사용합니다.
    console.log("동물소리");
  }
}
class Dog extends Animal {
  speak() {
    console.log("멍멍");
  }
}

console.log(new Animal().speak()); // 동물소리
console.log(new Dog().speak()); // 멍멍

 

메소드 : 클레스 안의 함수

function없이 바로 함수명부터 적음 

상속 (extends)

class 클래스명 extends 부모클래스 {

 // 오버라이드만 재정의합니다

}

 

레벨 테스트

// 1. `let` 키워드를 사용하여 변수 `age`를 선언하고 값으로 `25`를 할당하세요.
let age = 25;
// 2. 다음 코드의 `typeof` 결과는 무엇인가요?
const isStudent = true;
console.log(typeof isStudent); // boolean

// 3. 변수 `score`가 60 이상이면 "합격"을, 그렇지 않으면 "불합격"을 출력하는 `if` 문을 작성하세요.
if (score >= 60) {
  console.log("합격");
} else {
  console.log("불합격");
}
// 4. 다음 배열에서 두 번째 요소를 출력하는 코드를 작성하세요.
const fruits = ["사과", "바나나", "체리"];
console.log(fruits[1]);

// 5. 두 숫자를 매개변수로 받아 더한 값을 반환하는 함수를 작성하세요.
function add(n1, n2) {
  let ad = n1 + n2;
  return ad;
}

// 6. `const`를 사용하여 상수 `PI`를 선언하고 값으로 `3.14`를 할당하세요. 이 상수에 새로운 값을 할당하려고 하면 어떤 오류가 발생하나요?
const PI = 3.14; // const를 바꾸려하면 오류가 발생한다는 것 까지만 알아요.

// 7. 두 변수 `a`와 `b`가 모두 참일 때만 "둘 다 참입니다."를 출력하는 코드를 작성하세요.
if (a && b) {
  console.log("둘 다 참입니다.");
}
// 8. 숫자 `1`부터 `5`까지 출력하는 `for` 반복문을 작성하세요.
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

// 9. `name`과 `age` 속성을 가진 객체 `person`을 생성하고, `name`을 출력하는 코드를 작성하세요.
let person = { name: "이름", age: 33 };
console.log(person.name)(
  // 10. 변수 `temperature`가 30 이상이면 "더워요", 그렇지 않으면 "괜찮아요"를 변수 `weather`에 할당하는 코드를 삼항 연산자를 사용하여 작성하세요.
  temperature >= 30
)
  ? (weather = "더워요")
  : (weather = "괜찮아요");
// 11. 배열 `[1, 2, 3, 4, 5]`의 각 요소에 `2`를 곱한 새로운 배열을 반환하는 `map` 함수를 사용한 코드를 작성하세요.
// 모릅니다.
const arr = [1, 2, 3, 4, 5];
//const newArr = arr.map((num) => num * 2); // 답

// Map 함수의 기능 풀어보기
const newArr = arr.map(function (num) {
  return num * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

function map(callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; ++i) {
    let newValue = callback(arr[i]);
    newArr.push(newValue);
  }
  return newArr;
}

// 태초의 함수 모양
function f1(num1, num2) {
  return num1 + num2;
}
// 1차진화
const f2 = function () {
  return 1;
};
// 2차진화
const f3 = () => {
  return 1;
};
// 3차진화
const sum = (num1, num2) => num1 + num2;

// 12. 다음 코드에서 `increment` 함수를 호출할 때마다 `count`가 증가하는 이유를 설명하세요.
function createCounter() {
  let count = 0;
  return function () {
    count++; // 호출 할 때 마다 여기에서 count의 값이 1 씩 증가합니다.
    return count;
  };
}
const increment = createCounter();
console.log(increment()); // 1
console.log(increment()); // 2
// createCounter는 count를
// 클로저 변

// 13. `fetchData`라는 비동기 함수를 `Promise`를 사용하여 작성하고, 데이터가 성공적으로 가져와지면 "데이터 로드 성공"을, 실패하면 "데이터 로드 실패"를 출력하는 코드를 작성하세요.
//function fetchData

// 비동기를 제대로 이해하기 위해선
// callback 방식 -> Promise then 방식 -> Promise async await 방식

// sync : 동기
// async : 비동기
// 비동기함수는 Promise를 리턴한다.
async function fetchData() {
  /// 데이터 처리
  return new Promise(function (resolve, reject) {
    if (true) {
      resolve("데이터 로드 성공");
    } else {
      reject("데이터 로드 실패");
    }
  });
}

async function main() {
  try {
    // 성공하면
    // result = "데이터 로드 성공"
    const result = await fetchData();
  } catch (error) {
    // 실패하면
    // error = "데이터 로드 실패"
    console.log(error);
  }
}

// 14. `Animal` 클래스를 생성하고, `speak` 메소드를 정의하세요. 그 다음 `Dog` 클래스를 `Animal` 클래스에서 상속받아 `speak` 메소드를 오버라이드하여 "멍멍"을 출력하도록 하세요.
// 모릅니다
class Animal {
  speak() {
    console.log("동물소리");
  }
}
class Dog extends Animal {
  speak() {
    console.log("멍멍");
  }
}

console.log(new Animal().speak()); // 동물소리
console.log(new Dog().speak()); // 멍멍

// 15. 다음 코드의 출력 결과를 예측하고, 그 이유를 설명하세요.
person = {
  name: "홍길동",
  regularFunction: function () {
    console.log("Regular Function:", this.name);

    setTimeout(function () {
      console.log("Regular Function inside setTimeout:", this.name);
    }, 1000);
  },
  arrowFunction: () => {
    console.log("Arrow Function:", this.name);

    setTimeout(() => {
      console.log("Arrow Function inside setTimeout:", this.name);
    }, 1000);
  },
};

person.regularFunction();
person.arrowFunction();

// Regular Function:홍길동
// Arrow Function:홍길동

// 10초 뒤

// Regular Function inside setTimeout:홍길동
// Arrow Function inside setTimeout:홍길동

 

 

 

// 참고 링크
// w3schools - https://www.w3schools.com/js/js_datatypes.asp
//  입문하기 좋음
// modern javascript - https://javascript.info/types
//  중간 수준
// mdn - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
//  공식문서는 아니지만 공식같이잘 나옴

 

 

data type

// 2. BigInt
const bigNumber = 1234567890123456789012345678901234567890n; 
// 1. 매우 큰 정수를 저장합니다. 끝에 'n'을 붙입니다. 
//2. 일반 number type은 최대 15자리 정수까지만 정확히 표현

// 5. undefined
let address; // 값을 할당하지 않으면 undefined입니다.
console.log('예시 5: ', address); // undefined 출력

// 6. null
const emptyValue = null; // 값이 없음을 명시적으로 나타냅니다.
console.log('예시 6: ', emptyValue); // null 출력

// 7. 심볼(Symbol) - 고유한 식별자를 만들 때 사용합니다.
// 심볼은 실무에서 자주 사용되지는 않습니다. 주로 라이브러리나 프레임워크 개발자들이 사용하는 경우가 있습니다.
const uniqueKey = Symbol('설명');
const obj = {};
obj[uniqueKey] = '이 값은 고유한 키로 저장됩니다';
console.log('예시 7: ', obj[uniqueKey]); // '이 값은 고유한 키로 저장됩니다' 출력

// 데이터 타입 확인하기  typeof
console.log(typeof age); // "number"

// 10진수가 아닌 수는 모두 문자열입니다.