[React.js 1팀] 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은 인수, 10과 20의 값을 저장한 변수인 width, height는 변수라고 할 수 있다.

 

1-(4) 함수 반환

자바스크립트의 함수에서 값을 반환하려면 return문을 사용한다. 함수는 return문으로 수행한 결과를 반환한다. 주의할 점은 함수에서 더 동작할 코드가 남았더라도 return문을 만나면 함수는 종료된다.

 

1-(5) 중첩 함수

자바스크립트는 함수 내에서 또 다른 함수를 선언할 수 있다. 특정 함수 내부에서 선언된 함수를 '중첩 함수'라고 한다. 

function greeting(){
	
    function greetingWithName(name) {
		console.log('hello!${name}');
    }
    
    let name = "카리나";
    greetingWithName(name);

}

greeting();

 

위 함수에서 greetingWithName이 중첩 함수임을 알 수 있다. 중첩 함수를 많이 두면 가독성을 헤칠 수 있으나, 적절히 활용하면 함수 내에서 서로 역할을 분담할 수 있어 중복 코드를 방지하는 데 도움이 된다.

 

1-(6) 함수와 호이스팅

호이스팅이란 프로그램에서 변수나 함수를 호출하거나 접근하는 코드가 함수 선언보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 기능이다.

func();

function func() {

	console.log("hello");
 
 }

 

위 코드는 func를 선언하기 전 호출하지만 오류가 발생하지 않는다. 자바스크립트는 코드를 실행하기 전 준비 단계를 거치는데 이때 중첩 함수가 아닌 함수들은 모두 찾아 미리 생성해 둔다. 따라서 함수 선언 코드를 호출보다 늦게 작성해도 오류가 발생하지 않는다. 호이스팅은 코드 내에서 함수 선언의 위치를 강제하지 않기 때문에 보다 유연한 프로그래밍을 작성하는 데 도움을 준다.

 

1-(7) 함수 표현식

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

let greeting = function() {

	console.log("hello");
    
}

greeting();

 

위 함수처럼 함수에 이름을 정의하지 않은 함수를 '익명 함수'라고 한다.

 

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

const double = function(count) {
	console.log(count*2);

};

repeat(5,double);

 

1-(9) 화살표 함수

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

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

 

화살표 함수 funcA는 다음 함수와 동일하다.

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

 

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

 

 

 

---

2. 스코프

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

 

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;

}

 

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

 

 

 

---

3. 객체

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

 

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

자바스크립트는 '리터럴' 또는 '생성자' 문법을 사용해서 객체를 생성할 수 있다.

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

 

빈 객체가 아닌 데이터가 있는 객체를 생성하려면 key와 value 쌍으로 이루어진 '프로퍼티'를 작성하면 된다. 프로퍼티는 객체를 설명하는 정보이며, 프로퍼티의 key는 중복해 사용할 수 없다. 때문에 보통 key 이름으로 프로퍼티를 구별한다. 프로퍼티의 value 값은 여러 자료형으로 구현할 수 있지만, 프로퍼티의 key는 반드시 문자형만 사용하며 key가 중복되면 객체에서는 마지막에 작성한 프로퍼티만 남는다. 만약 복수의 단어로 이루어진 key를 사용하려면 반드시 따옴표로 묶어 주어야 한다.

 

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

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

let person = {

	name: "김덕우",
    age: 25,
    "like cat": true
    
};

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

 

추가하려는 프로퍼티의 key가 고정적이라면 점 표기법을, 유동적이라면 괄호 표기법을 이용하는 것을 권장한다. 프로퍼티를 수정하거나 삭제할 때에도 점 표기법이나 괄호 표기법을 이용하면 된다.

 

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

const로 선언한 상수는 값을 변경할 수 없다. 그러나 상수로 만든 객체는 객체를 없애지 않는 한, 프로퍼티를 자유롭게 추가하거나 삭제, 수정할 수 있다.

 

3-(4) in 연산자

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

let person = {

	age: 10
    
}

let isNameExist = "name" in person;

console.log(isNameExist);

 

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

 

3-(5) 메서드

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

 

 

 

---

4. 배열

배열은 거의 모든 프로그래밍 언어에서 사용하는 순서가 있는 요소의 집합이자 여러 개의 항목을 담는 리스트다. 그만큼 다양한 상황에서 유용하게 활용하는 자료형이다.

 

4-(1) 배열선언

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

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

 

만약 배열을 생성하면서 값도 할당하고 싶다면 대괄호 안에서 콤마로 값을 구분해 입력하면 된다. 객체 리터럴은 중괄호를, 배열 리터럴은 대괄호를 사용한다는 점을 주의하자.

 

4-(2) 배열 인덱스

배열과 객체 둘 다 여러 데이터를 저장할 수 있고, 저장할 데이터의 자료형에도 아무 제약이 없다. 배열과 객체의 차이점은 key의 여부다. 객체에서는 특정 데이터에 접근할 때 key를 이용하고, 배열은 데이터의 위치를 key처럼 사용할 수 있는 인덱스가 있다. 배열에서 특정 데이터에 접근하려면 데이터의 위치를 나타내는 인덱스를 객체의 괄호 표기법처럼 사용하면 된다.

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

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

 

인덱스는 배열 요소의 위치를 0부터 시작하는 숫자로 순서대로 표현한 것임을 주의하자.

 

 

 

---

이제 자바스크립트의 기초 문법을 마친다. 다음으로는 리액트를 사용하면서 실무에서 자주 사용하게 될 자바스크립의 심화 문법을 집중적으로 다룬다.

 

 

 

---

1. truthy & falsy

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

 

1-(1) truthy & falsy 한 값

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

 

1-(2) truthy & falsy 응용하기

truthy 또는 falsy 한 값은 조건식을 간결하게 만든다. '값이 비었다'는 의미는 특정 변수의 값이 undefined나 null일 때 쓰이는 표현이다. undefined나 null 값 모두 falsy 하기 때문에 조건문에서 특정 변수에 값이 있는지 없는지 확인할 때 사용한다.

 

 

 

---

2. 단락평가

논리 연산에서 첫 번째 피연산자 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것을 '단락 평가'라고 한다. 단락 평가는 다른 표현으로 '지름길 평가'라고도 한다. 논리 연산자 AND와 OR의 특징을 이용하는 두 가지 방식이 있다.

 

2-(1) AND 단락 평가

AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환한다. 따라서 첫 번째 피연산자 값이 false면, 단락 평가가 이루어지므로 두 번째 피연산자는 계산하지 않는다. 단락 평가는 불리언이 아닌 truty & falsy 한 값을 사용할 때도 적용된다.

 

2-(2) OR 단락 평가

OR 연산을 의미하는  | | 연산자는 피연산자의 값이 하나라도 참이면 참을 반환한다. 따라서 첫 번째 피연산자의 값이 true면, 단락평가가 이루어져 두 번째 피연산자 값은 계산하지 않는다.

 

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

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

 

 

 

---

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

자바스크립트에서 원시 자료형을 제외한 모든 자료형은 객체 자료형이다. 따라서 논리적으로 배열과 함수 역시 객체 자료형이다.

 

3-(1) 객체와 참조

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

let person = {
	
    name: "김덕우"
  
};

let female = {
	
    name: "김덕우"
  
};

console.log(person === female);

 

위 함수의 변수 perosn과 female에 저장한 객체는 서로 완벽하게 같다. 그러나 두 값을 비교하면 false를 반환한다. 이는 개체 자료형을 비교할 때 값이 아닌 참조값을 비교하기 때문이다. 객체는 생성될 때 고유한 참조값을 갖는다. 즉, 변수 person과 female에 저장된 참좃값은 서로 다르다. 객체를 비교할 때는 값이 아닌 참조값을 비교하며 이를 '참조에 의한 비교'라고 한다. 배열과 함수 또한 객체이므로 동일한 결과가 나온다.

 

 

 

---

4. 반복문 응용하기

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

 

4-(1) 배열과 반복

- 인덱스를 이용한 순회

배열에는 데이터의 저장 순서를 의미하는 인덱스가 있다. 인덱스를 0부터 1씩 증가하며 차례대로 데이터에 접근하면 배열의 모든 요소에 접근할 수 있다. for문과 프로퍼티 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)
    
}

 

for... of 문은 for문과 달리 of 뒤의 배열에서 요소를 하나씩 순서대로 꺼내 변수 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.keys와 비슷한 방식으로 Object.values 메서드로 value만 배열로 반환할 수 있다.

 

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

배열을 순회할 때의 for...of 문처럼, 객체를 순회할 때는 for...in문을 사용한다.

let person = {
	
    name: "김덕성",
    age: 25,
    location: "경기도"

};

for (let key in person) {

	const value = person[key];
    console.log(key,value);
    
}

 

for...in문을 사용하면 Object.keys 메서드보다 더 간단하게 객체를 순회할 수 있다.

 

 

 

---

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

Corner React.js1
Editor: Ninanyu