[2주차] Javascript 문법 종합반 1주차 강의 내용 정리 (2)

함수

함수(function)

input과 output을 가진 기능의 단위로, 재활용이 용이하다. 함수 선언문과 표현식으로 만들 수 있다.
함수의 input 부분을 매개변수라고 하고, return문 뒤에 오는 값을 반환값이라 한다.

• 함수 선언문

function functionName (매개변수) {
       // 함수 내부에서 실행할 로직
   }

• 함수 표현식

let functionName = function () {
       // 함수 내부에서 실행할 로직
    }

• 함수를 호출하는 방법: functionName()

스코프(scope)

변수의 영향 범위

• 전역변수: 함수 내외 모두에서 참조할 수 있다.
• 지역변수: 선언된 함수 내부에서만 의미가 있기 때문에 함수 바깥에서는 참조할 수 없다.
• 화살표함수

// 기본적인 화살표 함수
let arrowFunction = (x , y) => {
   return x + y
}

// 한 줄로 쓰는 화살표 함수
// 내부 로직이 1줄일 때만 이런 식으로 사용 가능
let arrowFunction = (x, y) => x + y

조건문

특정 조건에 해당되는 경우에만 하위의 로직을 실행하도록 제어한다.

if문

()안에 있는 조건이 true일때만 로직을 실행하고, false일 때는 로직을 실행하지 않는다.

let x = 10
if (x > 0) {
  // 메인 로직
  console.log("x는 양수입니다.")'
  }

• y의 문자열의 길이가 5보다 크면 문자열의 길이를 출력하기
  

  나는 처음에 1번으로 짰고, 강의에서 강사님은 2번으로 짰는데, 결과는 같게 나오겠지만 상황에 따라 다르게 사용될 것 같다.
  y.length의 값을 이 if문에서만 사용하고 버릴거면 2번으로, 다음에도 또 사용할 거면 1번으로 짜는 것이 좋겠다.

• if - else문
  ()안에 있는 조건이 true이면 로직1을 실행하고, false인 경우에는 로직2를 실행한다.

• if - else if - else문
  첫번째 조건이 true이면 로직1을 실행하고, 첫번째 조건이 false이면 두번째 조건을 확인하여 true이면 로직2를 실행하며, 두번째 조건도 false인 경우 로직 3을 실행한다.

switch문

복수의 if 조건문을 switch문으로 바꿀 수 있다. 하나 이상의 case문으로 구성되며, 대개 default문도 있으나 이는 필수는 아니다.

// '사과입니다'를 출력하는 switch문

let fruit = "사과" ;

switch (fruit) {
    case "사과":
        console.log("사과입니다.");
        break;
    case "바나나":
        console.log("바나나입니다.");
        break;
    case "샤인머스캣":
        console.log("샤인머스캣입니다.");
        break;
    default:
        console.log("아무 것도 아닙니다.");
        break;
}

조건문의 중첩

나이와 성별을 함께 확인하는 경우 등 여러 조건을 걸어야 하는 경우에는 조건문 안에 또다른 조건문을 중첩할 수 있으나, 중첩문을 많이 사용하게 되면 코드의 가독성이 떨어지고 유지/보수가 어려울 수 있기 때문에 꼭 필요한 경우가 아니라면 지양하도록 한다.

조건부 실행

• and 조건 (&&)
  조건이 true이면 && 뒤의 로직을 실행

let x = 10;

// 1번 조건문
if (x > 10) {
   console.log("x는 양수입니다.");
}

// 1번과 결과가 같은 2번 조건문
x > 0 && console.log("x는 양수입니다.");

• or 조건 (||):
  삼항연산자와 단축평가. 조건이 undefined면 || 뒤의 로직을 실행

let y; // 선언만 하고 할당하지 않음(undefined)
let z = y || 20;
console.log(z); // y가 undefined이므로 20을 출력

falsy / truthy한 값

0, 빈칸(""), null, undefined, NaN 모두 falsy값이므로, if문의 조건에 들어오게 되면 로직이 실행되지 않는다.

객체

key-value pair를 {}로 묶은 것. value에는 어떤 데이터형도 모두 올 수 있다.

생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("김민지", 30, "여자");
let person2 = new Person("신지유", 25, "여자");

이거 강사님이 일단 이런 게 있다고만 알아두고 넘어가라고 하셨는데... 어떻게든 이해해보고 싶어서 ChatGPT와 백엔드개발자 친구 붙들고 엄청 물어봤다ㅎ

this.name / this.age / this.gender는 앞으로 이 Person함수로 만들어지는 변수들에 작은 공간들을 만들어두고, "Person함수를 사용한 변수에는 요런 이름의 공간들이 있을 테니 알아서 채워주시면 됩니다~" 하는 역할이라고 한다.

this.race = human처럼 새로운 값을 채워줄 필요 없이 Person이라면 모두 공통적으로 갖게 될 값이 있다면 괄호 안에 매개 변수로 넣어주지 않아도 된다.

따라서 let으로 선언된 person1은 name, age, gender 매개변수로 전달된 값인 "김민지", 30, "여자"라는 값을 각각 person1.name / person1.age / person1.gender 라는 자리를 만들어서 저장한다.

이 행위를 Person1을 새로 생성할 때 처음으로 값(초깃값)을 넣어준다고 해서 '초기화'라고 한다.

이렇게 하면 다음과 같이 출력이 가능하다: console.log(person1.name); // 김민지

• 생성된 함수에 접근하는 방법: 객체이름.객체의속성(key값)

객체 메소드

객체가 갖고 있는 여러 가지 기능으로, Object.으로 시작

• Object.keys() : key를 배열 형태로 가져옴

let person = {
  name: "김민지",
  age: 30,
  gender: "여자",
};
  
let keys = Object.keys(person);
console.log("keys => " keys); // keys => ['name'],['age'],['gender']

• Object.values() : value를 배열 형태로 가져옴
• Object.entries() : key와 value를 묶어서 배열로 만든 2차원 배열

let person = {
  name: "김민지",
  age: 30,
  gender: "여자",
};
  
let entries = Object.entries(person);
console.log(person); // [['name','김민지'], ['age',30],['gender','여자']]

• Object.assign(target, source) : target에 복사된 객체(source)를 복사

let person = {
  name: "김민지",
  age: 30,
  gender: "여자",
};
  
let newPerson = {}
Object.assign(newPerson, person);
console.log(newPerson); // { name: '김민지', age: 30, gender: '여자'}

// 복사된 객체의 내용 일부(ex.나이)만 수정하고 싶을 때
let newPerson2 = {}
Object.assign(newPerson, person, { age:20 });
console.log(newPerson); // { name: '김민지', age: 20, gender: '여자'}

객체 비교

객체와 배열은 다른 데이터 타입에 비해 크기가 크기 때문에 메모리에 저장할 때 값 자체만을 저장한다기보다 별도의 공간에 저장하여 각자의 주소를 갖고 있다. 따라서 각각의 객체 1과 객체 2의 내용이 보기에 완전히 같더라도 '객체1 === 객체2'는 false이다.

• JSON.stringify: 객체를 문자열화하여 비교한다면 '객체1 === 객체2'는 true일 것이다.

객체 병합

spread operator인 ...을 사용하여 중괄호를 없애고 key-value를 꺼낸 뒤 2개 객체의 내용을 합친 새로운 객체를 만들 수 있다.

let person1 = {
  name: "김민지",
  age: 30,
};
  
let person2 = {
  gender: "여자",
};
  
let kimMinji = {...person1, ...person2}
console.log(kimMinji); // {name: '김민지', age: 30, gender: '여자'}