AI 웹개발 취업캠프 - 5주차 위클리 학습일지 [NIPA/정보통신산업진흥원]

📖학습

함수

function키워드로 함수 선언식(함수 선언 방식)으로 생성이 가능하다. 소괄호 안에 매개변수를 받아 함수에 전달이 가능하다. 호출부에서 인수를 넣어주면 값이 대입이 된다.

return을 통해 값을 반환할 수도 있다.

function getArea(width, height) {
  let area = width * height;
  console.log(area);
  return area
}

getArea(200, 100); // 20000
const area = getArea(50, 100);
console.log(area); // 5000

함수 내부에서 선언한 변수는 외부에서 접근이 불가능한 지역변수이다. 반대로 외부에서 선언한 변수는 함수 내부에서 접근이 가능하다. 어디서나 접근할 수 있는 변수를 전역변수라고 한다.

let count = 1

function getArea(width, height) {
    let area = width * height;
    console.log(count); // 1
    return area
}
console.log(area); // ReferenceError: area is not defined

함수 표현식

함수도 자바스크립트에선 자료형이다. 함수 표현식으로 작성된 함수는 변수나 상수에 담아 활용이 가능하다.

let hello = function () {
  return "안녕하세요"
}

console.log(hello()); // 안녕하세요

화살표 함수

화살표를 이용해 함수를 표현할 수 있다. 익명함수를 빠르게 작성할 수 있는 문법이다.

let helloA = () => {
  return "안녕하세요 여러분";
}

let helloB = () => "안녕하세요 여러분";

console.log(helloA()); // 안녕하세요 여러분
console.log(helloB()); // 안녕하세요 여러분

콜백함수

함수의 매개변수로 넘겨준 함수를 의미한다. 함수 내부에서 콜백 함수 호출이 가능하다.

function checkMood (mood, goodCallback, badCallback) {
    if(mood === "good") {
        goodCallback()
    } else {
        badCallback()
    }
}

function cry() {
    console.log("Action : CRY");
};

function sing() {
    console.log("Action : SING");
};

function dance() {
    console.log("Action : DANCE");
};

checkMood("good", sing, cry); // Action : SING
checkMood("sad", dance, cry); // Action : CRY

객체

비 원시 타입 자료형인 객체는 여러 개의 값을 가질 수 있다. 객체 생성자를 이용하거나 객체 리터럴을 이용해 만들 수 있다.

let person = new Object(); // 객체 생성자
let person2 = {}; // 객체 리터럴

키(key)와 밸류(value) 쌍으로 값을 저장하며 프로퍼티(객체 프로퍼티)라고 부른다.

let person = {
    key: "value",
    key2: true,
    key3: undefined,
    key4: [1, 2],
    key5: function () {}
};

프로퍼티 접근법에는 점 표기법과 대괄호 표기법이 있다. key를 통해 매칭되는 value를 가져오고 없다면 undefined를 반환한다.

let person = {
    key: "value",
    key2: true,
    key3: undefined,
    key4: [1, 2],
    key5: function () {}
};

console.log(person.key); // value;
console.log(person["key6"]); // undefined

프로퍼티 추가나 수정도 가능하다.

const person = {
  name: "홍길동",
  age: 25
}

person.location = "한국"
person.["gender"] = "남"
person.name = "전우치"

console.log(person); // {name: "전우치", age: 25, location: "한국", gender: "남"}

메서드

프로퍼티의 value에는 함수도 담을 수 있다. 프로퍼티로 함수를 담은 것을 메서드라고 부른다. this키워드를 이용하면 자신의 객체를 참조 가능하다.

const person = {
  name: "홍길동",
  age: 25,
  say: function () {
    console.log(`안녕 나는 ${this.name}이야`)
  }
}

person.say(); // 안녕 나는 홍길동이야

in 연산자

in 연산자를 이용해 객체 내 프로퍼티가 존재하는지 파악이 가능하다. 이를 이용해 존재하지 않은 프로퍼티 접근을 피할 수 있다.

const person = {
  name: "홍길동",
  age: 25,
  say: function () {
      console.log(`안녕 나는 ${this.name}`);
  }
}

console.log(person.gender); // undefined;
console.log(`name : ${"name" in person}`); // name : true
console.log(`gender: ${"gender" in person}`); // gender: false

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.