[React.js 3] 1장. 자바스크립트 기초

 

 

Javascript란? 

자바스크립트에 대해 자세히 살펴보기 전에 우리가 보는 인터넷 웹 페이지 구성에 대해 먼저 살펴보자.

웹 페이지는 HTML, CSS, Javascript  이 3가지의 언어로 만들어진다. 

HTML은 웹 페이지 요소의 배치를, CSS는 스타일링을, Javascript는 동작을 담당한다.

 

웹페이지의 주된 목적은 정보 전달 뿐만이 아닌 사용자와의 상호작용이다.

자바스크립트를 사용하여 동적인 기능을 장착할 수 있게 되고 자바스크립트 엔진은 그것을 가능하게 한다.

이것이 오늘날 자바스크립트의 중요성이 점점 커지고 있는 이유이기도 하다.

 

이제 자바스크립트 문법을 본격적으로 살펴보도록 하자.

 

---

 

변수와 상수 

변수는 값을 가리키는 이름이면서 값의 저장소이다. 값 변경이 가능하고 선언과 동시에 할당(초기화)할 필요가 없다.

변수 선언 방법에는 2가지가 있는데 var은 혼동 가능성이 있으므로 let을 추천한다.

① let : 이름 중복 사용할 수 없다.
② var : 이름 중복 사용할 수 있다.

// 변수 선언하는 2가지 방법
let age;   // 변수 선언
age = 25;  // 값 할당

var age;   // 변수 선언
age = 30;  // 값 할당

//변수 초기화
let age = 25;

상수는 변수처럼 이름을 가진 저장공간이지만 값 변경이 불가능하고 초기화를 꼭 해야한다.

상수 선언 방법은 const를 이용하는 것이다.

const age = 25; // 초기화(선언 + 할당)

추가로 변수와 상수의 이름을 정하는 명명규칙이 있는데 다음과 같다.

(참고로 변수의 이름은 어떤 역할을 하고 어떻게 동작할지 유추할 수 있도록 작성하는 게 좋다.)

• 숫자로 시작할 수 없다.
• 대소문자를 구별한다.
• _ $ 를 제외한 특수기호를 사용할 수 없다.
• 예약어(키워드)는 이름으로 사용할 수 없다.

 

자료형 

자료형은 값을 성질에 따라 분류한 것으로 크게 원시 자료형(① ~ ⑤)과 객체 자료형(⑥)으로 나눈다.

 

① Number : 수의 종류 구분 없이 모든 종류의 숫자를 하나로 처리한다.

            - 특수한 숫자형: ±Infinity(무한대) ⇒ 최대, 최소를 구하거나 0으로 나눈 결과를 나타낼 때 사용한다.
            - 표현이 불가능한 숫자형 ⇒ NAN으로 표시하며 오류는 아니다.

② String : 작은따옴표, 큰따옴표, 백틱(`)을 사용한다.

            - 백틱: ${ } 안에 있는 변수 값도 문자열로 변환하여 동적인 문자열 생성 시 사용한다.

③ Boolean : True/False를 저장한다.

④ Null : 아무런 값도 할당할 필요가 없을 때 나타난다.

⑤ Undefined : 미정의 값을 표현한다.

⑥ Object : 객체, 배열, 함수가 포함된다.

 

 

형변환 

어떤 값의 자료형을 다른 자료형으로 변환하는 것을 형변환이라고 하며 묵시적 형변환과 명시적 형변환이 있다.

묵시적 형변환은 자바스크립트 엔진이 알아서 변환하고 명시적 형변환은 내장함수 등을 이용하여 의도적으로 변환하는 것이다.

 

다음은 명시적 형변환이 일어날 때 각각 어느 내장 함수가 사용되는지를 정리한 것이다.

• 문자열 → 숫자형    
  parseInt 내장 함수 : 숫자만 추려 반환하지만 문자로 시작하면 NaN을 반환한다.

  let str = "파이팅 2023";
  let num = parseInt(str,10); // 괄호 안 문자열을 숫자로 반환
  
  console.log(num); // NaN 반환
  

• 숫자형 → 문자열 : String 내장 함수
• boolean으로 변환 : Boolean 내장 함수 ⇒ truthy/falsy 규칙을 따른다.

 

연산자 

다양한 연산을 수행할 때 도움이 되는 기호 또는 문자로 자바스크립트는 다양한 연산자를 제공한다.

• 대입 연산자 : = 
• 산술 연산자 : *  /  %  +  -
• 복합 대입 연산자 : 산술 + 대입 연산자
• 증감 연산자 : ++  -- 
  ① 전위 연산 : ±±a  (증감연산 작성한 행부터 바로 적용된다)
  ② 후위 연산 : a±±  (다음 행부터 적용된다)
• 논리 연산자 : boolean값을 다룰 때 사용한다.
  ① OR(||) : 둘 중 하나만 참 → 참
  ② AND(&&) : 둘 다 참 → 참
  ③ NOT(!) : 참 → 거짓 / 거짓 → 참
• 비교 연산자 : ===   !==   >   >=   <   <=
• null 병합 연산자 :?? (값이 확정된 변수를 찾을 때 사용한다)
• typeof 연산자 : 변수의 자료형을 확인할 때 사용한다.
• 삼항 조건 연산자 : 3개의 피연산자를 가진다. (조건식 ? 참일 때 명령 : 거짓일 때 명령)

 

조건문과  truthy & falsy 

조건문은 특정 조건에 따라 동작을 다르게 수행할 때 사용하는 문법이다. 조건문에는 if문과 switch문이 있다.

중첩 if문은 조건이 2개 이상일 때 사용하고 비교할 조건이 많아지면 switch문을 사용한다.

switch문은 case문과 비교해 정확히 일치할 때만 수행하며, break문을 만나면 실행이 종료되고 어떤 case와도 일치하지 않을 때는 default문을 수행한다.

let fruit = "apple";
switch (fruit) {
    case "apple": {
        console.log("사과");
        break;                                //실행 종료
    }
    case "banana": {
        console.log("바나나");
        break;                                //실행 종료
    }
    default: {
        console.log("우리가 찾는 과일 아님");  //찾는 case 없을 때
    }
}

truthy&falsy란 boolean자료형으로는 참, 거짓이 아니지만 상황에 따라 참, 거짓으로 평가하는 자바스크립트의 특징이다. 

falsy한 값으로는 undefined, null, 0, -0, NaN, '''', 0n 이 있고, truthy한 값은 falsy를 제외한 모든 값이라고 생각하면 된다.

이러한 특징은 조건식을 간결하게 만들어준다.

const str = "";               // 빈 문자열은 falsy한 값
if (str) {
    console.log("공백 아님");
} else {                      // 조건식에서 false로 평가
    console.log("공백임");    // "공백임" 출력
}

또한, truthy & falsy는 단락평가에도 적용될 수 있다.

단락평가란 논리연산에서 첫 번째 피연산자의 값만으로도 결과가 확실하면 두번째 값은 평가하지 않는 것을 뜻한다.

AND 연산자에서 첫번째 값이 false일 때와 OR연산자에서 첫번째 값이 true일 때 단락평가가 이루어진다.

다만, truthy & falsy한 값을 사용할 때는 결과가 참, 거짓이 아닌 해당 값을 그대로 반환한다.

 

객체와 객체 자료형 

객체란 다양한 값을 담는 자료형으로 key와 value로 이루어진 프로퍼티의 모음이다.

객체를 생성하는 방법에는 2가지가 있는데 주로 리터럴 문법을 사용한다.

① 리터럴 문법 : let objA = { }; 
② 생성자 문법 : let objB = new object( );

 

프로퍼티란 객체를 성명하는 정보로, 프로퍼티에 접근하는 방법에는 점 표기법과 괄호 표기법이 있다. 

객체에 접근할 때에는 key값을 사용하는데 특정 프로퍼티의 존재 여부를 확인할 때는 in 연산자를 사용하여 알 수 있다.

또한, 객체에서 value값이 함수인 프로퍼티가 있는데 그것을 메서드라고 한다. 메서드는 객체의 동작을 정의한다.

let person = {        // 객체 생성
    name : "이정환"; 
    age : 25;
    "like cat" : true;  // key값이 복수 단어 -> "" 사용하기
};

const personName = person.name; // 점 표기법
const personAge = person["age"]; // 괄호 표기법

let isNameExist = "adress" in person; // in 연산자 이용하여 프로퍼티 존재 여부 확인
console.log(isNameExist);           // false 출력

 

 

객체에 대해 살펴본 김에 객체 자료형에 대해 더 자세히 살펴보자.

 

객체 자료형에는 배열과 함수도 포함된다. 원시 자료형은 하나의 값을 저장하지만 함수와 배열 같은 객체 자료형은 여러 개의 값을 저장한다. 또한, 객체 자료형은 값의 크기가 유동적으로 변한다.

따라서 자바스크립트는 참조라는 기능을 이용하여 실제 값이 아닌, 값을 저장한 곳의 주소만 저장하는 방식을 취한다. 객체 자료형을 비교할 때에는 값이 아닌 참조값(값을 저장한 곳의 주소값)을 비교한다.

 

배열 

앞에서 자바스크립트의 배열은 객체 자료형에 속한다고 했다. 그 이유를 배열의 특징과 함께 알아보자.

 

먼저 배열이란 순서가 있는 요소의 집합이자 여러 개의 항목을 담는 리스트이다. 배열을 선언하는 방법에는 리터럴 문법과 생성자 문법이 있고 객체와 같이 리터럴 문법을 주로 사용한다. 배열을 접근할 때에는 인덱스로 접근한다.

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

자바스크립트에서 배열은 객체 자료형에 몇 가지 기능을 추가해 배열처럼 동작하도록 만든 특수한 객체이다. 따라서 일반 객체에 있는 프로퍼티와 메서드가 배열에 있는데, 그 예로 length프로퍼티와 push매서드가 있다.

 

함수 

함수란 유사하게 동작하는 코드를 하나의 블록 단위로 묶은 것으로 간결하고 구조적이라는 특징이 있다.

function문으로 함수를 선언하고. 함수 호출로 선언된 함수를 실행한다. return문을 만나면 함수가 종료되며 값을 반환한다.

함수를 호출하면서 넘겨주는 값을 인수라고 하고, 넘겨받은 인수를 저장하는 변수를 매개변수라고 한다.

자바스크립트에서 함수는 선언하기 전에 호출할 수 있는데 이러한 기능을 호이스팅이라고 한다.

function getArea(width, height) {   //함수 선언 
    let area = width * height;
    return area;                    //함수 반환
}

let result = getArea(10, 20);       //함수 호출
console.log(result);

자바스크립트의 함수도 객체 자료형에 속한다. 따라서 함수를 변수의 값이나 다른 함수의 인수로 사용할 수 있다.

자바스크립트의 배열에 length프로퍼티가 있듯이 함수에도 name 프로퍼티가 있다.

함수표현식은 함수를 변수의 값으로 저장해 함수를 생성하는 또 다른 방식으로, 함수를 변수에 저장할 때 소괄호를 쓰지 않으며 호이스팅 되지 않는다는 특징이 있다. 콜백함수는 다른 함수의 인수로 사용(전달)되는 함수로 동일한 기능의 함수더라도 특정 부분을 다르게 수행해야 할 때 사용한다. 

 

반복문 

자바스크립트에서 반복문을 이용하면 배열과 객체에 저장한 값에 쉽게 접근할 수 있다.

for반복문은 for (초기식; 조건식; 증감식) { 실행할 명령; }  형식으로 작성할 수 있다.

 

배열과 반복문

for반복문으로 인덱스와 length 프로퍼티를 이용하여 배열의 모든 요소에 접근할 수 있다. 하지만, for문의 특수한 형태인 for...of문으로 length 프로퍼티를 사용하지 않고 더 간결하게 배열을 순회할 수 있다.

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

for (let item of food) {      // of 뒤 배열에서 요소를 하나씩 꺼내 item에 저장
    console.log(item);
}

 

객체와 반복문

객체에 저장된 프로퍼티를 순회하는 방법에는 key를 이용한 방법과 value를 이용한 방법이 있다.

Object.keys 매서드는 객체 프로퍼티의 key를 배열로 반환하고 Object.values는 value를 배열로 반환한다.

배열로 반환되면 이제 for...of로 순회하면 되는 것이다.

 

다만, 더 간단하게 객체를 순회하는 방법이 있는데 그것은 바로 for...in문이다.

let person = {
    name : "이정환",
    age : 25,
    location : "경기도"
};

for (let key in person) {       // in 뒤에있는 객체에서 프로퍼티의 key를 하나씩 변수에 저장
    const value = person[key];  // 괄호 표기법으로 value를 하나씩 불러옴
    console.log(key, value);
}

 

---

Quiz 

1. 자바스크립트는 웹 페이지에서 웹 페이지 요소의 (   동작    )을 담당한다.

2. 상수를 선언할 때는 (    const    ) 키워드를 사용한다.

3. 문자열에서 숫자형으로 형변환을 하기 위해 (    parseInt     ) 내장함수를 사용한다.

4. 함수를 선언하기 전에도 함수를 호출할 수 있는 기능을 (    호이스팅     )이라고 한다.

5. 자료형은 크게 (     원시 자료형      )과 (   객체 자료형    )로 나눌 수 있다.

6. 배열은 (    인덱스    ) 로 요소에 접근하고, 객체는 (   key   ) 로 프로퍼티에 접근한다.

7. 객체를 생성할 때 key 값이 복수단어라면 (    " "    )를 사용해야 한다.

 

<프로그래밍 문제>

1.  반지름이 3인 원의 넓이를 구하는 함수를 작성하라.
     매개변수로 반지름을 전달하고 원주율은 3.14로 상수 선언하여 프로그램을 작성하여라.

2.  책 이름, 저자, 가격을 key값으로 하는 프로퍼티를 가진 book이라는 객체를 만들고,

      value값을 순회하는 코드를 작성하여라 (value값은 아무거나 상관없음, for...of문 이용)

 

---

 

Answer 

 

빈칸: 드래그

function getArea(radius) {
    let area = radius * radius * PI;
    return area;
}

const PI = 3.14;
let result = getArea(3);
console.log(result);

let book = {
    name : "한입 크기로 잘라먹는 리액트",
    author : "이정환",
    price : 33000,
}

const valueArr = Object.values(book);

for (let value of valueArr) {
    console.log(value);
}

 

 

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

Corner React.js 3 

Editor: via