[React-Winterlood] 섹션 01. JavaScript 기본(2)

1.10 반복문

---

• 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법
• for 키워드 + 초기식, 조건식, 증감식
• 강제 종료는 조건문과 함께 break 사용
• 건너뛰기는 조건문과 함께 continue

for (let idx = 1; idx <= 10; idx++) {
  console.log(idx);
}

for (let idx = 1; idx <= 10; idx++) {
  if (idx % 2 === 0) {
    continue;
  }
  console.log(idx);

  if (idx >= 5) {
    break;
  }
}

1.11 함수

---

• 공통으로 자주 사용하는 코드를 묶어 사용
• 함수선언과 함수호출
• 매개변수: 함수의 변수 / 인수: 함수를 호출하며 함수에게 전달하는 값
• 반환값: 함수 호출의 결과값. return
• 중첩 함수: 함수 안에 함수 선언 가능
• 호이스팅
  • 자바스크립트에서는 함수의 선언이 함수의 뒤에 있어도 문제없이 작동

function greeting() {
  console.log("안녕하세요!");
}

greeting();

// 호이스팅
let area1 = getArea(10, 20);
console.log(area1);

let area2 = getArea(30, 20);
console.log(area2);

getArea(120, 200);

function getArea(width, height) {
  function another() {
    // 중첩 함수
    console.log("another");
  }

  another();
  let area = width * height;

  return area;
}

1.12 함수 표현식과 화살표 함수

---

1. 함수 표현식

• 값으로서 함수를 생성하는 방식
• 자바스크립트에서는 함수도 변수에 담기 가능
• 함수를 만들며 변수에 담는 것도 가능 ⟶ 변수명으로 함수 호출 가능
  • 다만 이렇게 만들어진 함수는 함수 선언이 아니고, 값으로서 변수에 담긴 것이기에 함수 명으로는 호출 불가능
• 익명 함수: 이름이 없는 함수
• 함수 표현식으로 만든 함수들은 호이스팅의 대상이 되지 않음

2. 화살표 함수

• 기존 함수에서 function 키워드 생략, 소괄호와 중괄호 사이에 => 추가
• 값을 반환하기만 할 뿐이라면 중괄호와 return도 생략 가능
• 매개변수가 필요하다면 소괄호 안에 선언

// 1. 함수 표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA;
varA();

// 익명 함수
let varB = function () {
  console.log("funcB");
};

varB();

// 2. 화살표 함수
let varC = () => {
  return 1;
};

let varD = () => 1;

let varE = (value) => value + 1;

let varF = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varF(10));

1.13 콜백함수

---

1. 콜백함수

• 자신이 아닌 다른 함수에, 인수로써 전달된 함수
• 함수를 다른 함수의 인수로 넣는 것 가능
• 함수표현식처럼 사용 가능

2. 콜백함수의 활용

• 구조가 비슷한 함수를 여러 개 만들 때 유용
• 주요 기능이 담긴 함수에 인수를 콜백함수로 넣어서 콜백함수를 호출

// 1. 콜백함수
function main(value) {
    value();
}

function sub() {
    console.log("i am sub");
}

main(sub);


main(() => {
  console.log("i am sub");
});

// 2. 콜백함수의 활용
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeat(5, (idx) => {
  console.log(idx);
});

repeat(5, (idx) => {
  console.log(idx * 2);
});

repeat(5, (idx) => {
  console.log(idx * 3);
});

1.14 스코프

---

• “범위”
• 변수나 함수에 접근하거나 호출할 수 있는 범위
• 전역 스코프: 전체 영역에서 접근 가능
• 지역 스코프: 특정 영역에서만 접근 가능
• 반복문이나 조건문, 함수 안에서처럼 중괄호 안에 선언 된 변수들은 지역 스코프를 가짐
  • 반복문의 초기식에 선언된 변수들도 지역 스코프
• 중첩 함수로 선언한 경우 함수도 지역 스코프
  • 예외적으로 함수 선언식은 조건문이나 반복문 안에서 전역 스코프

// 스코프

let a = 1; // 전역 스코프

function funcA() {
  let b = 2; // 지역 스코프
  console.log(a);
  function funcB() {}
}

funcA();

console.log(b); // 오류

if (true) {
  let c = 1;
  function funcB() {}
}

for (let i = 0; i < 10; i++) {
  let d = 1;
  function funcB() {}
}

funcB();

1.15 객체 1

---

• 객체(Object)
  • 원시 타입이 아닌 객체 타입의 자료형
  • 여러가지 값을 동시에 저장할 수 있는 자료형을 의미
  • Array / Function / RegexExp
• 객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이

1. 객체 생성

1. 객체 생성자를 사용하는 방식
2. 객체 리터럴 방식: 중괄호로 생성. 주로 사용하는 방식.

2. 객체 프로퍼티 (객체 속성)

• key: value
• 객체의 정보값
• value의 타입에는 제한이 없음
• key 값으로는 문자열이나 숫자값만 가능
  • 띄어쓰기가 포함된 문자열을 값으로 사용하고 싶다면 따옴표로 감싸기

3. 객체 프로퍼트를 다루는 방법

3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)

• 점 표기법: 객체.특정프로퍼티
  • 존재하지 않는 프로퍼티에 접근하면 Undefined를 반환
• 괄호 표기법: 객체["특정프로퍼티"]
  • 프로퍼티의 key는 항상 쌍따옴표를 통해 문자열로 작성
  • 변수에 접근하고자 하는 key 값을 담아서 프로퍼티를 꺼내오도록 설정 가능

3.2 새로운 프로퍼티를 추가하는 방법

• 점 표기법: 객체.새로운key = 새로운value
• 괄호 표기법: 객체["새로운key"] = "새로운value";

3.3 프로퍼티를 수정하는 방법

• 점 표기법: 객체.key = 수정value
• 괄호 표기법: 객체["key"] = "수정value";

3.4 프로퍼티를 삭제하는 방법

• delete 연산자 사용
• delete 객체.프로퍼티

3.5 프로퍼티의 존재 유무를 확인하는 방법

• in 연산자
• 존재하면 true, 없으면 false 반환

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴

// 2. 객체 프로퍼티 (객체 속성)
let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
  job: "FE Developer",
  extra: {},
  10: 20,
  "like cat": true,
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;
let age = person["age2"];

let property = "hobby";
let hobby = person[property];

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

// 3.3 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿";

// 3.4 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result2);

1.16 객체 2

---

1. 상수 객체

• 상수에 저장한 객체
• 상수인 객체에 또 다른 객체를 할당하는 것은 불가능
• 기존 객체에 프로퍼티를 추가, 수정, 삭제하는 것은 가능

2. 메서드

• 값이 함수인 프로퍼티
• 객체.함수()등으로 호출 가능
• 익명함수, 화살표 함수로 선언 가능
  • 더 단축된 메서드 선언
• 메서드는 객체의 동작을 정읜

1.17 배열

---

• 여러개의 값을 순차적으로 담을 수 있는 자료형

1. 배열 생성

• 배열 생성자
• 배열 리터럴
• 배열 요소의 타입에는 제한이 없음

2. 배열 요소 접근

• 배열[index]
• 배열 요소 수정 가능

// 1. 배열 생성
let arrA = new Array(); 
let arrB = []; 

let arrC = [
  1,
  2,
  3,
  true,
  "hello",
  null,
  undefined,
  () => {},
  {},
  [],
];

// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];

arrC[0] = "hello";
console.log(arrC);