[React.js]1장. 자바스크립트의 기초 ~ 2장. 자바스크립트 실전 - 반복문 응용하기

1. 함수 

본격적으로 함수에 대해 알아보기 전에, 우리가 함수를 사용하는 이유를 생각해봅시다.
자바스크립트 코드를 작성하다 보면 비슷한 동작을 하는 코드를 반복해서 작성하는 경우가 많습니다.
하지만 이처럼 유사한 코드를 반복적으로 사용하게되면, 코드는 불필요하게 길어지고, 가독성도 떨어지게 됩니다.
이때 우리는 중복 코드를 하나로 묶은 '함수'를 사용해 이 문제를 해결 할 수 있습니다.
 

1-1. 함수 선언 

자바스크립트에서는 function 키워드를 사용해 함수를 선언합니다.
function 키워드 다음에는 함수의 이름, 그다음에는 매개변수가 오며, 마지막으로 중괄호로 감싼 곳에 함수가 수행할 명령을 작성합니다.

function 함수 이름 (매개변수) {
  함수가 수행하는 명령
}

 

1-2. 함수 호출

함수 선언 후 바로 실행할 수 있는 것은 아닙니다. 함수는 이름을 불러 주어야 실행되는데, 이를 '함수 호출' 이라고 합니다.

function greeting() {
  console.log("안녕하세요!");
}
greeting(); // <- greeting 함수 호출

1-3. 함수의 인수와 매개변수

자바스크립트에서는 '인수'와 '매개변수' 기능을 이용해 함수를 호출 하면서 값을 주고 받습니다.
이때 인수는 함수를 호출하며 넘겨주는 값 ,매개변수는 함수에서 넘겨받은 인수를 저장하는 변수입니다.
자주 혼동되는 단어이므로 기억해두길 바랍니다.

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

getArea(10, 20); //

위 코드는 함수 getArea에 높이와 너비 값을 전달하는 예시 코드로,
함수를 호출하면서 소괄호에 작성한 10과 20이 인수이고, 인수로 전달된 값을 함수에서 사용할 수 있게한 변수인 width 와 height 가 매개변수라 할 수 있습니다.

1-4. 함수 반환

자바스크립트에서는 return문을 사용해 값을 반환합니다. 
더 동작할 코드가 남았더라도 return문을 만나면 종료되므로 주의가 필요합니다.

1-5. 중첩 함수

자바스크립트는 함수 내에 또 다른 함수를 선언할 수 있습니다. 특정 함수 내부에서 선언된 함수를 '중첩 함수' 라고합니다.
중첩 함수를 많이 두면 가독성을 헤치는 단점이 있으나, 적절히 활용시 중복 코드 방지에 도움이 됩니다.

function greeting() {
  function greetingWithName(name) { 
    console.log(`hello! ${name}`);
  }

  let name = "홍길동";
  greetingWithName(name); 
}

greeting();

위 코드에서는 greetingWithName 함수가 중첩 함수라는 것을 확인할 수 있습니다.

1-6. 호이스팅

호이스팅(Hoisting)은 자바스크립트만의 독특한 기능으로
프로그램에서 변수나 함수를 호출하거나 접근하는 코드가 함수 선언 코드보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 기능입니다.

func();

function func() {
  console.log("hello");
}

1-7. 함수 표현식

자바스크립트는 함수 선언 말고도 함수를 만드는 또 다른 방법인 '함수 표현식'이 있습니다.
함수 표현식은 함수를 변수의 값으로 저장해 생성하는 방법으로 
이렇게 만든 함수는 함수 선언으로 만든 함수와 달리 '값'으로 취급되기 때문에, 호이스팅 되지 않습니다.

function greetFunc() {
  console.log("hello");
}

greetFunc(); 

let greeting = greetFunc; 
greeting();

1-8. 콜백 함수

자바스크립트에서는 함수를 값으로 취급할 수 있습니다. 따라서 함수는 다른 함수의 인수(=값)로도 전달이 가능합니다.
그리고 이를 '콜백 함수'라 합니다.

function repeat(count, callBack) { 
  for (let idx = 0; idx < count; idx++) { 
    callBack(idx + 1);
  }
}
function origin(count) { 
  console.log(count);
}

repeat(5, origin);

 
함수가 동일한 기능을 갖더라도 특정 부분이 달라 새 함수를 만들게 되면 중복 코드가 발생합니다. 이때 콜백 함수를 사용하면 상황에 맞게 하나의 함수가 여러 동작을 수행하게 만들 수 있습니다.

1-9. 화살표 함수

화살표 함수는 익명 함수를 간결하게 작성할 때 사용하는 함수 표현식의 단축 문법입니다.

let funcA = (매개변수) => 반환값;

 
화살표 함수 funcA는 다음 함수와 같습니다.

let funcA = function (매개변수) {
  return 반환값;
};

---

2.스코프

자바스크립트의 변수와 함수는 생성과 동시에 접근하거나 호출할 때 일정한 제약 범위를 갖는데 이를 '스코프'라고 합니다,

2-1. 전역, 지역 스코프

변수가 전역 스코프를 가지면 해당 변수는 코드 어디에서나 접근 할 수 있습니다. 반면 지역 스코프를 가질 경우 특정 역역에서만 접근이 가능합니다.
이때 전역 스코프를 갖는 변수를 전역 변수, 지역 스코프를 갖는 변수를 지역 변수라고 합니다.
변수가 아닌 함수도 스코프를 갖는데 아래 코드를 통해 확인 할 수 있습니다.

function foo() {
  console.log("foo");
}

function bar() {
  foo();
  console.log("bar");
}

bar();

함수  bar에서 함수 foo를 다시 호출하고 이때 함수 foo는 조건문이나 반복문 또는 다른 함수 내부에서 선언하지 않았기 때문에 전역 스코프를 갖습니다. 

2-2. 블록, 함수 스코프

변수나 함수는 블록을 기준으로 지역 스코프가 결정됩니다. 
블록 내부에서 선언한 변수가 갖는 스코프를 블록 스코프, 함수 내부에서 선언한 변수가 갖는 스코프를 함수 스코프라 합니다.
이때 var 키워드로 선언한 변수는 블록스코프를 갖는 let, const 키워드와 달리 함수 스코프를 갖습니다.

---

3.객체

객체는 숫자형이나 문자형과 같은 원시 자료형과 달리 다양한 값을 담는 자료형입니다.

3-1. 객체 생성과 프로퍼티

자바스크립트에서는 '객체 리터럴' 또는 '객체 생성자' 문법으로 객체를 생성합니다.

let objA = {};				// '객체 리터럴'문법
let objB = new Object();	// '객체 생성자'문법

 
빈 객체가 아닌 데이터가 있는 객체를 생성하려면 key 와 value 쌍으로 이루어진 프로퍼티를 작성하면 됩니다.
프로퍼티 작성시 주의할 점이 몇가지 있습니다.

• 프로퍼티의 value 값은 여러 자료형으로 구현이 가능하나 key는 문자형만 사용하므로 주의가 필요합니다.
• 프로퍼티의 key는 중복해도 오류가 발생하지 않지만, 중복시 마지막에 작성한 프로퍼티만 객체에 남습니다.
• 하나의 key가 하니의 프로퍼티에 해당하므로 복수의 단어로 이루어진 key는 반드시 따옴표로 묶어 주어야 합니다.

3-2. 객체 프로퍼티 다루기

객체는 key와 value로 이루어진 프로퍼티의 모음입니다. 프로퍼티를 찾고, 추가하고, 삭제하는 등의 모든 연산은 key를 이용합니다. 이때 사용할 수 있는 방법은 점 표기법과 괄호 표기법 두가지가 있습니다.

• 점 표기법 : 객체 이름 +점(.)+접근할 프로퍼티의 key
• 괄호 표기법 : 객체 이름["접근할 프로퍼티의 key"]

let person = {
  name: "이재욱",
  age: 25,
  "like cat": true
};

person.gender = "male"; //점 표기법을 이용한 프로퍼티 추가 
person["nickname"] = "winterlood"; //괄호 표기법을 이용한 프로퍼티 추가 

person.name ="차은우"; //프로퍼티 수정
delete person.age; //프로퍼티 삭제

console.log(person.gender); // male
console.log(person["nickname"]); // winterlood

프로퍼티 수정, 추가, 삭제 방법은 다음과 같습니다.

3-3.상수 객체의 프로퍼티

const로 선언한 상수는 값을 변경할 수 없습니다. 그러나 상수로 선언한 객체는 변경이 자유롭습니다.

3-4. in 연산자

in 연산자는 객체에 존재하지 않는 프로퍼티에 접근하면, undefined를 반환해
객체에서 해당 프로퍼티의 존재 여부 확인에 주로 사용합니다.

let person = {
  age: 10
};

let isNameExist = "name" in person; // ①

console.log(isNameExist);

in 연산자 왼쪽에 존재 여부를 확인하려는 프로퍼티의 key를 문자열로 명시하고, 오른쪽에 객체를 명시하면 프로퍼티의 존재를 확인할 수 있습니다.
위 코드의 경우 name 프로퍼티가 객체에 존재하지 않으므로 false가 출력될 것입니다.

3-5. 메서드

객체에서 값이 함수인 프로퍼티를 메서드라고 합니다. 메서드는 데이터가 아니라 객체의 동작을 정의합니다.

---

4.배열

배열은 순서가 있는 요소의 집합이자 여러개의 항목을 담는 리스트입니다.

4-1. 배열 선언

자바스크립트에서는 두가지 방법으로 빈 배열을 생성합니다.

let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴

리터럴 방법으로 배열 생성과 동시에 값도 할당하고 싶다면, 대괄호 안에서 콤마(,)로 값을 구분해 입력하면 됩니다.
또한 리터럴로 배열 생성시 객체 리터럴과 다르게  중괄호가 아닌 대괄호를 사용한다는 점을 주의해야 합니다.

4-2. 배열 인덱스

배열과 객체 둘 다 여러 데이터를 저장할 수 있고, 저장할 데이터의 자료형에도 제약이 없습니다. 
다만 객체와 다르게 배열에서 데이터의 위치를 나타내는 인덱스를 사용해 특정 데이터에 접근합니다.

let food = ["짜장면", "피자", "치킨"];

console.log(food[0]); // 짜장면
console.log(food[1]); // 피자
console.log(food[2]); // 치킨

위 코드와 같이, 인덱스를 객체의 괄호 표기법처럼 사용해 데이터에 접근합니다.
인덱스는 배열 요소의 위치를 0부터 순서대로 표현한 것임을 주의해야 합니다.

---

자바스크립트의 기초 문법은 여기서 마치고, 이제 실무에서 자주 사용하게 될 자바스크립트의 심화 내용을 다루도록 하겠습니다.

---

1.truthy&falsy

자바스크립트에는 불리언 자료형의 참이나 거짓이 아닌 값도 상황에 따라 참, 거짓으로 평가하는 특징이 있습니다.

1-1. truthy&falsy 한 값

• truthy 한 값 : 조건식에서 참(true)로 평가
• falsy 한 값 : 조건식에서 거짓(false)로 평가 / (undefined, null, 0, -0, NaN, "", 0n )

1-2. truthy&falsy 응용하기

truthy 또는 falsy한 값은 조건식을 간결하게 만듭니다. 다음은 자주 활용되는 세 가지 응용 예시입니다.

• 조건문에서 특정 변수에 값이 있는지 없는지 확인할 때 사

let varA;

if (varA) {
  console.log("값이 있음");
} else {
  console.log("값이 없음");
}

• 조건문에서 특정 변숫값이 0, -0 또는 NaN인지 확인할 때 사용

const num = -0;

if (num) {
  console.log("양수이거나 음수입니다.");
} else {
  console.log("0이거나 -0이거나 NaN입니다.");
}

• 조건문에서 문자열이 공백인지 아닌지 확인하는 용도

const str = "";

if (str) {
  console.log("공백 아님");
} else {
  console.log("공백임");
}

2.단락 평가

단락평가는 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할때, 두 번째 값은 평가하지 않는 것 입니다.
주로 논리 AND와 논리 OR 연산에서 사용됩니다.

2-1. AND 단락 평가

AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환합니다. 
왼쪽에 위치한 첫 번째 피연산자의 값이 false이면, 단락평가가 이루어지므로 두 번째 피연산자는 계산하지 않습니다.
 
AND 단락 평가를 이용한 오류 방지
AND 단락 평가는 피연산자가 불리언이 아니어도 truthy&falsy 값을 그대로 반환합니다. 이를 이용해 객체 접근시 오류를 방지할 수 있습니다.

2-2. OR 단락 평가

OR를 의미하는  || 연산자는 피연산자의 값이 하나라도 참이면 참을 반환합니다.
왼쪽에 위치한 첫 번째 피연산자의 값이 true면, 단락평가가 이루어지므로 두 번째 피연산자는 계산하지 않습니다.
 
OR 단락 평가와 null 병합 연산자
||의 단락 평가는 null 병합 연산자와 유사한 듯 보이지만 혼동해서는 안 됩니다.
null 병합 연산자는 값이 null이나 undefined가 아닌 확정된 피연산자를 찾습니다. 따라서 truthy와 falsy로 동작하는 ||연산자와는 엄밀히 다른 동작을 수행합니다.
 

3.객체 자료형

자바스크립트에서 원시자료형을 제외한 모든 자료형은 객체 자료형입니다. 따라서 배열과 함수 역시 객체 자료형입니다.

3-1. 객체와 참조

원시 자료형은 하나의 값을 저장하지만 함수와 배열 같은 객체 자료형은 여러 개의 값을 저장합니다. 원시 자료형이  일정한 크기의 공간에 값을 저장하는데 반해 객체 자료형은 값이 동적으로 늘어나거나 줄어들기 때문에 일정한 크기의 공간에 저장할 수 없습니다. 객체 자료형은 값의 크기가 유동적으로 변하기 때문에 자바스크립트는 참조라는 기능을 사용합니다. 참조란 실제로 값을 저장하는 것이 아니라 값을 저장한 곳의 주소만 저장하는 방식입니다.

let person = {
  name: "이도현"
};

let man = {
  name: "이도현"
};

console.log(person === man);

위 함수의 변수 person과 man에 저장한 객체는 같으나 두 값을 비교하면 false가 반환됩니다. 이는 객체 자료형을 비교할때는 값이 아닌 참조값을 비교하기 때문입니다. 객체는 고유한 참조값을 가지고 있습니다. 따라서 변수 person과 man 변수에 저장한 객체의 값이 같아도 저장된 참조값은 서로 다르므로 각각 별개의 객체로 여겨져  false 가 반환되는 것 입니다.
배열이나 함수도 객체이므로 당연히 동일한 결과가 나옵니다.

4.반복문 응용하기

반복문을 이용하면 배열과 객체에 저장한 값에 쉽게 접근할 수 있습니다.

4-1. 배열과 반복문

-인덱스를 이용한 순회
배열에는 데이터의 저장 순서를 의미하는 인덱스가 있습니다. 인덱스를 0부터 1씩 증가하며 차례대로 데이터에 접근하면 배열의 모든 요소에 접근할 수 있습니다.

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

for (let idx = 0; idx < 4; idx++) {
  console.log(arr[idx]);
}

프로퍼티 length를 이용할 경우 프로퍼티 length는 배열의 길이를 반환할 뿐, 마지막 인덱스 번호는 반환하지 않는다는 점을 주의해야합니다.

let food = ["짜장면", "피자", "치킨"];

for (let i = 0; i < food.length; i++) {
  console.log(food[i]);
}

 
 
-for...of문을 이용한 순회
프로퍼티 length를 사용하지 않고 배열을 순회하는 방법이 있습니다. for문의 특수한 형태인 for...of문은 배열을 더 간결하게 순회합니다.

let food = ["짜장면", "피자", "치킨"];

for (let item of food) {
  console.log(item);
}

4-2. 객체와 반복문

-Object.keys를 이용한 key 순회
객체 메서드인 Object.keys는 객체 프로퍼티의 key를 배열로 반환합니다.

let person = {
  name: "차은우",
  age: 25,
  location: "경기도"
};

const keyArr = Object.keys(person);

console.log(keyArr);

 
위 코드의 값은  ["name", "age", "location"] 입니다.
 
-Object.values를 이용한 key 순회
Object.keys를 이용한 key순회와 비슷한 방식으로 Object.values 메서드로 value만 불러올 수 있습니다.
 
-for...in문을 이용한 순회
배열을 순회할 때의 for...of문처럼, 객체를 순환할 때는 for...in문을 사용해 for문보다 더 간결한 코드를 작성할 수 있습니다.

let person = {
  name: "차은우",
  age: 25,
  location: "경기도"
};

for (let key in person) {
  const value = person[key];
  console.log(key, value);
}

 
 

출처: 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023), p44-87.
Corner React.js
Editor: jyeon