한입 크기로 잘라먹는 리액트 - 자바스크립트 기본(2)

이정환님의 한입 크기로 잘라먹는 리액트 강의를 듣고 정리한 글이다.
https://www.udemy.com/course/winterlood-react-basic/

함수

직사각형의 너비와 높이를 받아와 넓이를 출력하는 프로그램을 만들어 보자.

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;
console.log(area1); // 200

let width2 = 30;
let height2 = 15;
let area2 = width2 * height2;
console.log(area2); // 450

중복되는 부분이 보이게 된다. 너비와 높이 값만 달라지고 곱해서 콘솔에 출력하는 동작은 다 똑같다. 구하려는 직사각형의 넓이가 많다면 반복적인 코드를 작성해야 할 것이다.

함수를 이용하면 중복되는 코드를 효율적으로 줄일 수 있다. 함수는 function 키워드를 통해 함수 선언식(함수 선언 방식)으로 생성이 가능하다..

소괄호 안에는 매개변수를 받아서 함수에 전달 할 수 있다. 호출 부에서 인수를 넣어주면 함수에서 width와 height 값으로 대입이 된다.

function getArea(width, height) {
    let area = width * height;
    console.log(area);
} // 함수 선언식, 함수 선언 방식의 함수 생성

getArea(200, 100); // 함수 호출
getArea(100, 300);
getArea(50, 100);
getArea(10, 50);
console.log("함수 실행 완료");

이처럼 함수를 이용하면 굉장히 짧은 코드로 많은 직사각형의 넓이를 구할 수 있다.

return을 이용하면 값을 반환할 수 있다. 호출 부에서 반환된 값을 변수에 담아 사용이 가능하다.

function getArea(width, height) {
    return area = width * height;
}

let area1 = getArea(100, 200);
console.log(area1); // 20000
console.log("함수 실행 완료");

함수 내부에서 선언한 변수는 외부에서 접근이 불가능하다. 내부에서 선언된 area변수를 참조하려고 하면 에러가 발생한다. 이런 변수들을 지역변수라고 부른다.

반대로 외부에서 선언된 변수는 함수 내부에서 접근이 가능하다. count 변수가 콘솔에 출력되는 것을 볼 수 있다. 어디에서나 접근할 수 있는 변수를 전역변수 또는 글로벌변수라고 한다.

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 "안녕하세요 여러분";
}; // 함수 표현식 - 익명함수를 변수에 담아서 사용

function helloFunc () {
    return "안녕하세요 여러분";
}; // 함수 선언식

console.log(hello()); // 안녕하세요 여러분
let helloText = hello();
console.log(helloText); // 안녕하세요 여러분

함수 선언식으로 나타낸 함수는 자바스크립트의 호이스팅이란 특징 때문에 선언 전에 호출을 하여도 정상적으로 나타나는 것을 볼 수 있다. 하지만 함수 표현식으로 나타낸 함수는 호이스팅이 이루어지지 않고 에러가 발생한다. 그렇기 때문에 호출하려면 초기화된 다음에 해야한다.

console.log(helloB()); // 안녕하세요 여러분
console.log(helloA()); // TypeError: helloA is not a function

let helloA = function () {
    return "안녕하세요 여러분";
}; // 함수 표현식

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

function helloB() {
    return "안녕하세요 여러분";
}; // 함수 선언식

화살표 함수

화살표를 이용해 함수를 표현할 수 있다. 익명함수를 빠르고 간결하게 작성할 수 있도록 하는 문법이다. 구현부가 return 하나만 존재한다면 return은 생략이 가능하다.

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

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

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

객체

객체는 Non-Primitive Type(비 원시 타입)에 해당한다. 그렇기 때문에 여러 개의 값을 가질 수 있다.

객체를 생성하는 방법에는 객체 생성자를 이용하는 방법과 객체 리터럴을 이용한 방법이 있다.

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

객체에는 여러가지 값을 넣어줄 수 있다. 키(key)와 밸류(value) 쌍으로 값을 저장할 수 있으며 쌍을 프로퍼티(객체 프로퍼티)라고 부른다.

프로퍼티의 value에는 어떤 자료형이 와도 상관이 없다. key는 반드시 문자열로 이루어져야 하며 따옴표 없이 작성한다. key끼리는 중복되지 않도록 하는 것을 추천한다.

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

console.log(person); // {key: "value", key2: true, key3: undefined, key4: Array(2), key5: ƒ key5()}

객체의 프로퍼티에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있다. key를 통해서 매칭되는 value 값을 가져온다. 없는 프로퍼티에 접근한다면 undefined를 반환한다.

• 객체명.key
• 객체명["key"]

대괄호 표기법은 함수를 이용해 프로퍼티에 접근할 때 유용하게 사용된다. 즉 동적인 파라미터를 전달 받았을 때, key가 고정되어 있지 않을 때 쉽게 접근이 가능하다.

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

console.log(person.key); // undefined
console.log(person.name); // 홍길동
console.log(person.["age"]); // 25

console.log(getProperyValue("name")); // 홍길동

function getPropertyValue(key) {
    return person[key];
}

프로퍼티 추가와 수정

점 표기법과 대괄호 표기법으로 프로퍼티 추가나 수정이 가능하다.

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

person.location = "한국"
person["gender"] = "남"

person.name = "전우치"
person["age"] = 28

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

person = {
    age: 30
} // SyntaxError: "person" is read-only

const 키워드로 상수로 객체를 만들어도 추가나 수정이 가능하다. 이는 person이라는 상수 자체를 수정하는 행위가 아니기 때문이다. 프로퍼티를 수정하는 것은 오브젝트를 수정하는 행위일 뿐이다.

대입 연산자를 이용해 새로운 객체를 대입할 때는 에러가 발생한다.

프로퍼티 삭제

delete 키워드를 통해 삭제가 가능하다. 물론 점 표기법과 대괄호 표기법 둘 다 가능하다. 하지만 이렇게 삭제 하는 방법은 객체와 프로퍼티 간의 연결을 끊을 뿐, 메모리에는 존재한다. 이렇게 계속 지우게 되면 메모리를 계속 차지하게 된다.

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

delete person.age;

console.log(person); // {name: "홍길동"}

그래서 delete를 사용하는 방법 말고 null을 대입하는 것을 추천한다. 삭제한 것과 똑같은 효과를 낼 수 있다.

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

person.name = null;

console.log(person); // {name: null, age: 25}

메서드

프로퍼티의 value 에는 함수도 담을 수 있다. 객체의 프로퍼티로 함수를 담은 것을 메서드라고 부른다. 점 표기법이나 대괄호 표기법으로 호출이 가능하다.

const person = {
  name: "홍길동", // 멤버
  age: 25, // 멤버
  say: function () {
      console.log("안녕");
  } // 메서드
}

person.say(); // 안녕
person["say"](); // 안녕

메서드에서 this키워드를 이용하면 자신의 객체를 참조가 가능하다.

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

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

존재하지 않은 프로퍼티 접근

존재하지 않는 gender 프로퍼티를 출력하려고 하면 undefined를 반환한다. 이러한 방식은 에러를 발생시키지 않고 유연한 프로그래밍을 가능하게 하지만, 연산을 실행할 때 오류를 발생시킬 가능성이 있다.

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