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

 

 리액트 기술 블로그에 오신 여러분, 환영합니다!

저희 블로그에서는 리액트(React)에 대한 다양한 기술적인 내용을 다룰 예정입니다. 리액트는 현대적인 웹 개발에서 매우 중요한 역할을 하는 라이브러리로, 빠르고 효율적인 웹 애플리케이션을 구축하기 위한 필수 도구 중 하나입니다. 리액트는 자바스크립트 라이브러리이기 때문에 자바스크립트에 익숙하지 않다면 학습하기 어렵습니다. 기초적인 자바스크립트를 공부했다는 전제 하에 기본적인 자바스크립트 문법을 다시 한번 살펴보고, 이어서 객체의 특징이나 단락평가 같은 실전에 적용할 수 있는 문법을 다루겠습니다.

---

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);

 

위 코드에서는 함수를 호출하면서 소괄호에 두 개의 값을 콤마로 구분하여 작성한 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");

}

이 코드에서는 함수 func을 선언도 하기 전에 호출하지만 오류가 발생하지 않습니다. 즉 함수 func에 대한 선언이 호출 코드보다 아래에 있지만, 마치 호출보다 먼저 함수를 선언한 것처럼 자연스럽게 동작합니다. 이처럼 코드 내에서 함수 선언의 위치를 강제하지 않기 때문에 더 유연한 프로그래밍을 작성하는 데 도움을 줍니다.

 

1-7 함수 표현식

자바스크립트는 함수 선언 말고도 함수를 만드는 또 다른 방법이 있습니다. 바로 ‘함수 표현식’을 이용하는 방법입니다. 자바스크립트에서는 함수를 숫자나 문자열처럼 값으로 취급하기 때문에 변수에 함수를 저장할 수 있습니다. 변수에 함수를 저장하면 변수 이름으로 호출할 수 있습니다. 이렇게 함수를 변수의 값으로 저장해 생성하는 방법을 함수 표현식이라고 합니다.

function greetFunc() {

        console.log("hello");

}

greetFunc();

let greeting = greetFunc;

greeting();

 

위의 코드에서 변수 greeting에 함수 greetFunc을 저장하는 줄을 주목해 주세요.함수를 변수에 저장할 때에는 함수 호출과 달리 소괄호를 명시하지 않습니다. 또 한 가지 주의할 점은 함수 표현식으로 만든 함수는 함수 선언으로 만든 함수와는 달리 호이스팅 되지 않는다는 것입니다. 함수 표현식을 사용하여 저장한 함수는 선언이 아닌 ‘값’으로 취급하기 때문에 호이스팅을 하지 못합니다.

 

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 반환값;

};

 

만약 화살표 본문이 여러 줄이면 중괄호를 사용해 주면 됩니다. 다만 화살표 본문에 중괄호를 사용하면, 함수를 선언할 때처럼 값을 반환할 때 return문을 써주어야 합니다.

---

2. 스코프

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

 

2-1 전역, 지역 스코프

전역 스코프와 지역 스코프는 자바스크립트에서 변수와 함수의 유효범위를 나타내는 중요한 개념입니다. 이 두 개념을 이해하면 변수 및 함수의 범위와 접근성을 이해하는 데 도움이 됩니다. 전역 스코프에서 선언된 변수는 해당 변수를 코드 어디에서나 접근할 수 있다는 의미입니다. 반면 지역스코프는 변수가 특정한 범위 내에서만 유효한 것으로, 함수 외부에서는 접근할 수 없고 특정 영역에서만 해당 변수에 접근할 수 있습니다. 변수를 함수 내부에 선언했을 때만 지역 스코프를 갖는 것은 아닙니다. 조건문이나 반복문과 같이 블록 내부에서 선언해도 변수는 지역 스코프를 갖습니다.

function foo() {

        console.log("foo");

}

function bar() {

        foo();

        console.log("bar");

}

bar();

위의 코드를 보면, 함수 bar에서는 다시 함수 foo를 호출합니다. 이때 함수 foo는 조건문이나 반복문 또는 다른 함수 내부에서 선언하지 않았기 때문에 전역 스코프를 갖습니다. 따라서 코드 어디에서나 호출할 수 있습니다.

 

2-2 블록, 함수 스코프

블록 스코프는 중괄호 내에서 선언된 변수의 유효 범위입니다. 즉, 변수는 중괄호 블록 내에서만 접근 가능합니다. 함수를 기준으로 지역 스코프를 정하는 ‘함수 스코프’도 지역 스코프에 해당합니다. var 키워드로 선언한 변수는 블록 스코프를 갖는 let이나 const 키워드와 달리 함수 스코프를 갖습니다.

if (true) {

        var a = 1;

}

console.log(a);

 

위의 코드는 1을 출력합니다. var로 선언한 변수 a는 조건문 내부에서 선언했으나 조건문 외부에서 접근할 수 있습니다. 이는 var로 선언한 변수가 블록 스코프가 아닌 함수 스코프이기 때문입니다. 함수 스코프라는 것은 함수 내부에서 선언한 변수만 지역 스코프를 갖는다는 의미입니다. 따라서 함수가 아닌 조건문의 블록 내부에서 선언한 변수 a는 전역 스코프를 갖습니다. 그렇기 때문에 함수 내부에서 변수를 선언하고 외부에서 접근하려고 한다면 오류가 날 것입니다. 대다수 프로그래밍 언어에서는 ‘함수 스코프’를 잘 쓰지 않고, var를 사용하면 변수의 이름을 중복해 사용해도 아무런 문제가 발생하지 않기 때문에 프로그래머를 혼란에 빠뜨릴 여지가 많습니다. 따라서 보다 보편적인 let이나 const 키워드를 이용해 변수를 선언하기를 권합니다.

---

3. 객체

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

 

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

자바스크립트에서는 ‘객체 리터럴’ 문법과 ‘객체 생성자’ 문법으로 객체를 생성할 수 있습니다.

let objA = {}; //객체 리터럴

let objB = new Object(); //객체 생성자

기초적인 자바스크립트의 내용을 숙지하고 계신 분이라면 프로퍼티에 관해서는 익숙할 것이라 생각됩니다. 기본적인 내용은 넘어가고 주의해야 할 점만 언급해 보려 합니다. 우선 프로퍼티의 value값은 여러 자료형으로 구현할 수 있지만, 프로퍼티의 key는 반드시 문자형만 사용합니다. 그리고 프로퍼티의 key는 중복해도 오류가 발생하지는 않지만, key가 중복되면 객체에는 마지막에 작성한 프로퍼티만 남습니다.

 

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

객체는 key와 value로 이루어진 프로퍼티의 모음입니다. 객체에서 프로퍼티를 찾고, 추가하고, 삭제하는 등의 모든 연산은 key를 이용해 수행합니다. 이때 사용할 수 있는 방법은 점 표기법과 괄호 표기법 두 가지입니다. 객체 이름 뒤에 점(.)을 찍고 프로퍼티의 key를 명시해 해당 프로퍼티의 value에 접근하는 방식이 점 표기법. 객체 이름 뒤에서 대괄호를 열고, 그 안에 원하는 프로퍼티의 key를 문자열로 명시하여 해당 프로퍼티의 value에 접근하는 방식이 괄호 표기법입니다.

let person = {

  name: "김덕성",

  age : 25

};

person.gender = "female"; //점 표기법을 이용한 프로퍼티 추가

person["nickname"] = "lovely"; //괄호 표기법을 이용한 프로퍼티 추가

추가하려는 프로퍼티의 key가 고정적이면, 점 표기법을 사용하고 key가 변수에 저장된 값처럼 유동적이라면 괄호 표기법을 사용하는 것을 권장합니다.

 

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

const로 선언한 상수는 값을 변경할 수 없습니다. 그러나 상수로 선언한 객체는 프로퍼티를 추가하거나 수정하는 등의 자유로운 내용 변경이 가능합니다.

 

3-4 in 연산자

객체에서 해당 프로퍼티의 존재 여부를 확인할 때 주로 in 연산자를 사용합니다.

let person = {

  age : 10

};

let isNameExist = "name" in person;

console.log(isNameExist);

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

---

4. 배열

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

 

4-1 배열 선언

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

let arrA() = new Array(); //배열 생성자

let arrB() = [];          //배열 리터럴

 

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

 

4-2 배열 인덱스

배열과 객체 둘 다 여러 데이터를 저장할 수 있고, 저장할 데이터의 자료형에도 아무런 제약이 없습니다. 다만 객체는 key가 있지만 배열은 그렇지 않다는 차이점이 있습니다. 객체에서는 특정 데이터에 접근할 때 key를 이용하지만, 배열은 인덱스를 사용합니다. 기초적인 내용이기에 배열 요소의 위치에 대해 자세히 기술하지는 않겠습니다.

---

여기서 기초적인 자바스크립트 문법은 마치고, 이어서 실무에서 자주 사용하게 될 자바스크립트 문법을 다루겠습니다.

---

1. truthy & falsy

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

 

1-1 truthy & falsy한 값

falsy한 값이란 불리언 자료형의 거짓(false)은 아니지만 거짓과 같은 의미로 쓰이며, 조건식에서 거짓으로 평가합니다. falsy한 값으로는 undefined, null, 0, -0, NaN, “”, 0n 7가지가 있습니다. 빈 문자열(“”)을 제외하고, 문자열은 그 자체로 truthy한 값이며 조건식에서 참(true)으로 평가합니다.

 

1-2 truthy & falsy 응용하기

‘값이 비었다’는 의미는 특정 변수의 값이 undefined나 null일 때 쓰이는 표현입니다. undefined나 null 값 모두 falsy하기 때문에 조건문에서 특정 변수에 값이 있는지 없는지 확인할 때 사용합니다.

---

2. 단락 평가

단락 평가는 논리 연산에서 조건을 검사하는 도중에 첫 번째 피연산자 값만으로 이미 결과를 확정할 수 있는 경우, 추가적인 조건 검사를 하지 않고 해당 결과를 반환하는 것을 의미합니다. 주로 논리 AND(&&)와 논리 OR(| |) 연산에서 사용됩니다. 

 

2-1 AND 단락 평가

AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환합니다. 따라서 왼쪽에 위치한 첫 번째 피연산자의 값이 false이면, 단락평가가 이루어지므로 두 번째 피연산자는 계산하지 않습니다.

 

2-2 OR 단락 평가

OR를 의미하는 | | 연산자는 피연산자의 값이 하나라고 참이면 참을 반환합니다. 따라서 왼쪽에 위치한 첫 번째 피연산자의 값이 true면, 단락 평가가 이루어져 두 번째 피연산자 값은 계산하지 않습니다.

 

2-3 OR 단락 평가와 null 병합 연산자

| | 의 단락 평가는 null 병합 연산자와 유사한 듯 보이지만 혼동해서는 안됩니다. null 병합 연산자는 null이나 undefined가 아닌 확정된 피연산자를 찾습니다. 따라서 truthy와 falsy로 동작하는 | | 연산자와는 엄밀히 다른 동작을 수행합니다.

 

---

3. 객체 자료형 자세히 살펴보기

자바스크립트에서 원시 자료형을 제외한 모든 자료형은 객체 자료형입니다.

 

3-1 객체와 참조

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

 

let person = {

        name: "김덕성"

};

let woman = {

        name: "김덕성"

};

console.log(person == = woman);

 

위의 코드를 보면, 변수 person과 woman에 저장한 객체는 서로 완벽하게 같습니다. 그러나 두 값을 비교하면 false를  반환합니다. 이는 객체 자료형을 비교할 때는 값이 아닌 참조값을 비교하기 때문입니다. 객체는 생성될 때 고유한 참조값을 갖습니다. 즉, 변수 person과 woman에 저장된 참조값은 서로 다릅니다. 배열이나 함수도 객체이므로 당연히 동일한 결과가 나옵니다.

let arr1 = [1, 2, 3];

let arr2 = [1, 2, 3];

console.log(arr1 == arr2);

변수 arr1과 arr2에 저장한 값은 같지만 서로 다른 객체입니다. 참조값을 비교하므로 결과는 거짓이 됩니다.

 

---

4. 반복문 응용하기

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

 

4-1 배열과 반복문

 

-인덱스를 이용한 순회

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

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

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

        console.log(food[i]);

}

-for...of 문을 이용한 순회

프로퍼티 length를 사용하지 않고 배열을 순회하는 방법이 있습니다. 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를 이용한 value 순회

위와 비슷한 방식으로 Object.values 메서드를 이용해 객체 프로퍼티의 value만 불러올 수 있습니다.

 

-for...in문을 이용한 순회

배열을 순환할 때의 for...of문처럼 객체를 순환할 때는 for...in문을 사용합니다. for...in문으로 객체를 순환하면, for문보다 더 간결한 코드를 작성할 수 있습니다.

let person = {

    name: "김덕성",

    age : 25,

    location : "서울"

};


for (let key in person) {

    const value = person[key];

    console.log(key, value);

}

---

Quiz 

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

 

2. (                )에서 선언된 변수는 해당 변수를 코드 어디에서나 접근할 수 있다.

 

3. (               )는 숫자형이나 문자형과 같은 원시 자료형과 달리 다양한 값을 담는 자료형이다.

 

4. 객체에서 해당 프로퍼티의 존재 여부를 확인할 때 주로 (           ) 연산자를 사용

 

5. 빈 배열을 생성할 때 배열 리터럴은 (           )를 사용하고, 객체를 생성할 때 객체 리터럴은 (           )를 사용한다.

 

6. (                 ) 은 하나의 값을 저장하지만 함수나 배열 같은 (                  ) 은 여러 개의 값을 저장한다.

 

7. 객체 메서드인 (                    ) 는 객체 프로퍼티의 key를 배열로 반환한다.

 

---

해당 포스트는 한 입 크기로 잘라먹는 리액트(이정환 저) 책을 참고했습니다. (p44-87)

Corner React.js 1

Editor: nini