[React.js] React 사용을 위한 자바스크립트 기본 - 2(함수, 함수표현식&화살표 함수, 콜백함수, 객체, 배열, 반복문)

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

 

 

함수(function)

함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 이러한 함수는 함수를 정의하고, 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
자바스크립트에서는 함수도 하나의 데이터 타입이다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 행위도 가능하다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있다.

두 개의 직사각형 넓이를 구하는 코드를 만들어보자.

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

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

코드를 보니 뭔가 반복적인 부분이 보인다. 함수를 사용하면 이런 반복적인 부분을 최소화할 수 있다.

function getArea(width, height) {
  return width * height;
}; // 함수 선언식, 함수 선언 방식의 함수 생성

console.log(getArea(10, 20)); // 200
console.log(getArea(20, 40)); // 800

 

반응형

---

함수 표현식 & 화살표 함수

함수도 데이터 타입 중 하나이므로 변수에 대입될 수 있다.

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

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

// 만약 hellText가 아닌 hello를 출력하게 되면
// console에 function에 관련한 내용들이 출력된다.

 

호이스팅(Hoisting)
호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

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

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

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

제일 첫 줄의 console.log에 helloB가 호출이 됐지만 에러가 나지 않고 출력이 정상적으로 된다. 원래 모름지기 모든 것은 위에서 아래로 흐르는 법. 뭔가 프로그래밍도 라인에 따라 순차적으로 실행되어야 할 것 같아 helloB()란 함수를 선언하기 전에 호출하게 되면 에러가 날 것 같았지만 자바스크립트에서는 호이스팅이란 기능이 있어 에러가 나지 않고 정상적으로 실행할 수 있다.
이 호이스팅의 대상은 var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다. let, const 변수와 함수 표현식에서는 호이스팅이 발생하지 않으므로 주의.

 

화살표 함수

위의 함수 표현식에서 사용한 무명 함수는 더욱 간단하게 줄일 수 있다.

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

생긴 게 좀 기이하지만 function이란 키워드를 지우고, =>를 추가하고, 중괄호와 return을 없앤 모양이다.
중괄호 같은 경우는 함수의 실행문이 return 하나만 있을 경우 생략할 수 있다. 그 외에는 중괄호를 쳐줘야 한다.
그리고 화살표 함수 역시 호이스팅의 대상이 아니니 주의.

반응형

---

콜백 함수

콜백 함수는 어떤 다른 함수에 매개변수로 함수를 넘겨준 것이다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출한다는 것이 콜백 함수의 개념이다.

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 :: DACNE");
}

checkMood("good", sing, cry); // ACTION :: SING

위 코드의 경우는 실행 순서대로 보자면 먼저 제일 하단의 checkMood() 함수를 "good"과 sing(), cry()를 매개변수로 전달해 호출했다. 즉, checkMood의 mood에는 good이 대입되고, goodCallback에는 sing(), badCallback는 cry()가 대입된다. if 분기 처리로 mood가 good이면 goodCallback()을 호출한다. 그런데 goodCallback에는 sing()이란 함수가 담겨있다. 그래서 결과적으로는 sing()을 호출하게 되어 ACTION :: SING을 출력한다.

반응형

---

객체

객체는 자바스크립트의 비 원시 타입 중 하나다.
객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. 만약 프로퍼티의 값으로 함수가 오면 이러한 프로퍼티를 메서드(method)라고 한다.

let person = new Object(); // 기본적인 객체 생성 방법

let person2 = {
    key : "value", // (프로퍼티)
    key2 : 123,
    key3 : true,
    key4 : undefined,
    key5 : [1, 2],
    key6 : function() {}
}; // 객체 리터럴 방식

console.log(person.key2); //  123 출력
console.log(person["key3"]); // true 출력  (괄호표기법). 괄호 안에 key는 꼭 문자열로 사용.
console.log(person.key10); // key가 없을 경우 undefined 출력

Key의 이름은 중복될 순 있지만 중복된 프로퍼티를 호출할 때 그중 제일 뒤에 있는 key를 가져온다. 즉, 제일 뒤에 선언된 프로퍼티 외에 중복된 프로퍼티는 무시한다. 

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

// 프로퍼티 추가
person.location = "대한민국";
person["gender"] = "기타";

// 프로퍼티 수정
person.name = "유관순";
person.gender = "여자";

// 프로퍼티 삭제
delete person.location;
delete person["gender"];

// delete를 사용하여 삭제해도 메모리 상에는 계속 남아있음.
// 그래서 null을 사용해서 메모리 상에서도 지울 수 있도록 한다.
person.name = null;

프로퍼티에 함수를 넣는 경우

const person = { // const로 선언해도 프로퍼티 변경은 가능하다.
  name : "홍길동",
  age : 30,
  say : function() {
    console.log(`안녕 나는 ${this.name}이야`); // 백틱과 this를 사용해서 출력하는 법
  }
}

person.say();

프로퍼티가 있는지 없는지 확인하고 싶은 경우

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

console.log(`name : ${"name" in person}`); // true 출력

 

반응형

---

배열

배열은 자바스크립트에서 비 원시 타입 중 하나이며 순서가 있는 컬렉션을 저장할 때 쓰이는 자료구조이다.

let arr = new Array(); // 생성자를 이용한 생성 방법

let arr2 = []; // 배열 리터럴을 이용한 생성 방법

let arr3 = [1, 2, 3, 4];

console.log(arr3); // [1, 2, 3, 4] 출력

let arr4 = ["a", 1, true, null, function(){}]; // 여러 가지 자료형을 복합적으로 넣을 수 있음.

// 배열은 key로 꺼내는 게 아니라 인덱스(index)를 이용해서 값을 꺼낸다.
// 참고로 인덱스는 1이 아닌 0부터 시작한다.
console.log(arr3[0]); // 1 출력
console.log(arr3[1]); // 2 출력


// 원소 추가하기
arr3.push(5); // 가장 마지막에 추가된다.
console.log(arr3); // [1, 2, 3, 4, 5] 출력

// 배열 길이 구하기
console.log(arr3.length); // 5 출력

반응형

---

반복문

반복문은 특정 명령을 반복해서 수행해야 할 때 사용한다. 

for문

for(let i = 0; i < 5; i++) {
  // 반복 수행할 명령
}

// 위의 for문의 조건문은 i가 0으로 시작하고, 한번 반복을 할 때마다 증감 연산자로인해
// i는 1씩 커진다. 그리고 i가 5보다 작을때까지 반복한다는 의미.

for(let i = 0; i < 5; i++)
{
  console.log(i);
}
// 0
// 1
// 2
// 3
// 4 
// 총 5번 반복

객체 내장 함수

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

const personKeys = Object.keys(person); 

for(let i = 0; i < personKeys.length; i++) {

    const curKey = personKeys[i];
    const curValue = person[curKey]; 
    
    console.log(`${curKey} : ${curValue}`);
}

// name : 홍길동 
// age : 25 
// tall : 170

 

---

• 참고
  • http://www.tcpschool.com/javascript/js_function_basic