const let을 이용한 변수 선언
변수 선언은 프로그램을 작성하는 데 꼭 필요한 지식입니다.
var를 이용한 변수 선언의 문제점
기존의 자바스크립트에서는 var를 이용해 변수를 선언했습니다.
var val1 = "var 변수";
그러나 var로 변수를 선언하는 것은 몇 가지 문제점이 있어 모던 자바스크립트 개발에서는 거의 이용되지 않습니다. 문제점은 변수를 덮어 쓸 수 있다는 점과 재선언할 수 있다는 점입니다.
//변수 덮어 쓰기 및 재선언
var val1 = "var 변수";
console.log(val1); //var 변수
//var 변수는 덮어 쓰기 가능
val1 = "var 변수 덮어 쓰기";
console.log(val1); //var 변수 덮어 쓰기
//var 변수는 재선언 가능
var val = "var 변수를 재선언";
console.log(val1); //var 변수 재선언
- 덮어 쓰기 가능
한 번 정의한 변수에 다른 값을 대입할 수 있습니다. 덮어 쓰고 싶을 때도 많지만 프로그램을 작성하다 보면 덮어 쓰고 싶지 않을 때도 많기 때문에 무조건 덮어 쓰는 것은 좋지 않습니다.
- 재선언 가능
완전히 같은 변수명을 여러 위치에서 변수로 정의할 수 있습니다. 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려우므로 재선언은 기본적으로 안 되는 편이 좋습니다.
변수 선언에 var만 사용할 경우 프로젝트 규모가 커짐에 따라 의도치 않은 시점에 변수를 덮어 쓰거나 재선언하는 등의 문제가 발생합니다. 그래서 ES2015에서는 새로운 변수 선언 방법으로 const와 let이 추가되었습니다.
let을 이용한 변수 선언
let으로는 재선언을 할 수 없습니다. 단, let은 변수를 덮어 쓸 수는 있습니다.
//let으로 변수 덮어 쓰기
let val2 = "let 변수";
console.log(val2); //let 변수
val2 = "let 변수 덮어 쓰기";
console.log(val2); //let 변수 덮어 쓰기
var와 마찬가지로 특별한 에러 없이 변숫값을 덮어 쓸 수 있습니다.
//재선언 실행
let val2 = "let 변수"
let val2 = "let 변수 재선언"; //재선언 불가능 -> 에러
재선언을 하면 에러가 발생합니다.
이렇게 let은 var를 이용했을 때 문제가 되었던 재선언을 개선한 변수 정의 방법입니다. 덮어 쓰기를 허가할 변수는 let을 이용해야합니다.
const를 이용한 변수 선언
const는 재선언, 덮어 쓰기가 모두 불가능한 가장 엄격한 변수 선언 방법입니다. constant=상수라는 의미에서 이런 이름이 되었습니다.
const로 변수를 선언하면 기본적으로 변수 덮어 쓰기, 재선언 모두 불가능합니다. 그러나 변수 종류에 따라 const로 정의해도 변숫값을 변경할 수 있는 경우가 있으므로 주의해야 합니다.
const로 정의한 변수를 변경할 수 있는 예
문자열이나 수치 등 프리미티브 타입(primitive type)이라 불리는 종류의 데이터는 const를 이용해 정의한 경우 덮어 쓸 수 없습니다. 하지만 객체나 배열 등 오브젝트 타입(object type)이라 불리는 데이터들은 const로 정의해도 도중에 값을 변경할 수 있습니다.
| 프리미티브 타입 | 오브젝트 타입 |
| - 논리값(Boolean): true/false - 수치(Number): 1, 2.5 - 큰 수치(BigInt) : 9007199254740992n - 문자열(String) : "Nushida", '사키오카' - undefined: 미정의 - null: 값 없음 Symbol: 유일하며 바꿀 수 없는 값 |
- 객체 - 배열 - 함수 등 프리미티브 타입 이외의 것 |
다음은 const를 이용해 정의한 객체의 속성값을 변경, 추가하는 예입니다.
- 객체 속성값 변경 및 추가
//객체 정의
const obj1 = {
name: "박"
age: 24,
};
console.log(obj1); //{name: '박', age: 24}
//속성값 변경
obj1.name = "Park";
console.log(obj1); //{name: "Park", age: 24}
//속성 추가
obj1.address = "Tokyo";
console.log(obj1); //{name: "Park", age: 24, address: "Tokyo"}
const로 정의해도 객체 내용은 자유롭게 변경할 수 있습니다. 즉, 객체를 정의할 때는 기본적으로 const를 이용합니다. 다음은 const를 이용해 배열값을 변경, 추가하는 예입니다.
- 배열값 변경, 추가
//배열 정의
const arr1 = ["dog", "cat"];
console.log(arr1); //["dog", "cat"]
//첫 번째 값 변경
arr1[0] = "bird";
console.log(arr1); //["bird", "cat"]
//값 추가
arr1.push("monkey");
console.log(arr1); //["bird", "cat", "monkey"]
배열도 마찬가지로 const를 이용해 정의했어도 값은 자유롭게 변경할 수 있습니다. 따라서 배열 역시 기본적으로 const를 이용해 정의합니다.
리액트 개발에서 이용하는 변수 선언
리액트 개발에서는 이 중 const를 가장 많이 이용합니다. 그리고 리액트 개발에서 동적으로 바뀌는 값은 State라는 다른 개념으로 값을 관리합니다.
그래서 대부분은 const를 이용하고, State로 관리하지 않으면서 처리 도중 값을 덮어 써야 하는 변수만 let으로 선언합니다.
템플릿 문자열
템플릿 문자열은 문자열 안에서 변수를 전개하기 위한 새로운 표기법입니다. 예를 들어 기존의 작성법에서는 문자열과 변수를 결합할 때 다음과 같이 +를 이용했습니다.
- 기존의 문자열과 변수 결합 방법
//이름을 저장한 변수
const name = "박";
//나이를 저장한 변수
const age = 24;
//'내 이름은 박입니다. 나이는 24세입니다.'라고 표시하는 경우
const message = "내 이름은" + name + "입니다. 나이는" + age + "세입니다.";
console.log(message); //내 이름은 박입니다. 나이는 24세입니다.
이 경우 문자열을 결합할 때마다 +를 입력해야 하기 때문에 읽기 힘들고 작성하는 것도 귀찮다는 문제가 있었습니다. ES2015 이후부터는 템플릿 문자열을 이용해 다음과 같이 더욱 편리하게 입력할 수 있게 되었습니다.
- 템플릿 문자열 이용
//이름을 저장한 변수
const name = "박";
//나이를 저장한 변수
const age = 24;
//'내 이름은 박입니다. 나이는 24세입니다.'라고 표시하는 경우
const message = `내 이름은 ${name}입니다. 나이는 ${age}세입니다.`;
console.log(message); //내 이름은 박입니다. 나이는 24세입니다.
템플릿 문자열을 이용하는 경우에는 `(역따옴표)로 문자열을 감쌉니다. 역따옴표로 감싼 경우 일반적인 ' (작은 따옴표)나 " (큰따옴표)와 달리 ${ }로 감싼 부분 안쪽은 자바스크립트로 입력할 수 있습니다.
화살표 함수 ( ) => { }
화살표 함수(arrow function)는 ES2015에서 추가된 새로운 함수 표기법입니다. 기존보다 간단하게 함수를 기술할 수 있습니다.
기존 함수
먼저 기존 함수를 실행해봅시다. 다음은 인수로 전달받은 값을 그대로 반환하는 함수를 실행해 콘솔에 결과를 출력하는 예입니다.
- 기존 함수 (예 1)
//기존 함수 정의
function func1(value) {
return value;
}
//실행한 결과 출력
console.log(func1("func1입니다")); //func1입니다
- 기존 함수 (예 2)
//함수를 정의하고 변수에 저장
const func1 = function(value) {
return value;
}
//실행한 결과를 출력
console.log(func1("func1입니다")); //func1입니다
결과는 동일하며 두 경우 모두 function을 선언으로 이용해 함수를 정의해서 실행했습니다.
화살표 함수
새로운 함수 정의 방법인 화살표 함수에서는 function을 이용하지 않고 다음과 같이 함수를 선언할 수 있습니다.
- 화살표 함수
//화살표 함수 정의
const func2 = (value) => {
return value;
}
//실행 결과 출력
console.log(func2("func2입니다")); //func2입니다
function이라는 선언은 없습니다. ( ) 안에 인수를 입력하고 '화살표 함수'라는 이름의 유래이기도 한 =>라는 기호로 함수를 작성합니다. 이후 중괄호에서 처리를 입력하는 부분은 같습니다.
화살표 함수 작성 시 주의점
화살표 함수를 작성할 때는 특수한 생략 표기법을 몇 가지 활용할 수 있습니다. 첫 번째, 인수가 한 개인 경우에는 소괄호 생략이 가능합니다.
- 화살표 함수 생략 표기법
//화살표 함수 정의(인수가 한 개이므로 소괄호 생략)
const func2 = value =>{
return value;
}
두 번째, 처리를 한 행으로 반환하는 경우 중괄호와 return을 생략할 수 있습니다.
- return 생략
//처리를 한 행으로 반환하므로 {} 생략
const func4 = (num1, num2) => num1 + num2;
//실행 결과 출력
console.log(func4(10,20)); //30
반환값이 여러 행일 경우에는 ( )로 감싼 뒤 단일 행과 같이 모아서 반환할 수 있습니다.
- ( )를 이용해 한 행으로 모으기
//괄호로 감싸서 모은 뒤 생략해서 반환
const func5 = (val1, val2) => (
{
name: val1,
age: val2,
}
)이 작성 방법은 리액트를 다룰 때 자주 사용합니다.
분할 대입 { } [ ]
분할 대입은 객체나 배열로부터 값을 추출하기 위한 방법입니다. 먼저 분할 대입을 이용하지 않고 처리를 어떻게 작성할 수 있는지 확인해봅니다. 저장한 객체로부터 프로필 정보를 다음과 같은 문자열로 출력하는 경우가 있다고 가정합니다.
- 분할 대입을 이용하지 않고 문자열을 출력
const myProfile = {
name: '박',
age: 24,
};
const message = `내 이름은 ${myProfile.name}입니다. 나이는 ${myProfile.age}세입니다.`;
const.log(message); //내 이름은 박입니다. 나이는 24세입니다.
이 정도는 괜찮지만 객체 속성 수가 많아지거나, 객체 변수명이 더 길어지면 매번 myProfile.~이라고 입력하기가 매우 번거롭습니다. 이런 경우에 분할 대입을 이용합니다.
객체 분할 대입
분할 대입을 이용하면 앞의 처리를 다음과 같이 작성할 수 있습니다.
- 분할 대입 이용
const myProfile = {
name: "박",
age: 24
};
//객체 분할 대입
const {name, age} = myProfile;
const message = `내 이름은 ${name}입니다. 나이는 ${age}세입니다.`;
console.log(messge); //내 이름은 박입니다. 나이는 24세입니다.
{ }를 변수 선언부에 이용하면 객체 안에서 일치하는 속성을 추출할 수 있습니다. 존재하지 않는 속성명은 지정할 수 없습니다. 이름이 일치한다면 일부만 추출하거나 순서가 달라도 됩니다.
- 일부만 추출
const {age} = myProfile;
- 순서를 바꾸어 추출
const {age, name} = myProfile;
추출한 속성에 별명을 붙이고 싶을 때는 다음과 같이 : (콜론)을 이용해서 해당 변수명으로 이용할 수도 있습니다.
-추출한 속성에 별명 지정
const myProfile = {
name: "박",
age: 24
};
//콜론으로 다른 변수명을 이용
const {name: newName, age: newAge} = myProfile;
const message = `내 이름은 ${newName}입니다. 나이는 ${newAge}세입니다.`;
console.log(message); //내 이름은 박입니다. 나이는 24세입니다.
객체 안의 값을 차례로 사용한다면 분할 대입보다 간단하게 기술할 수는 없는지 생각해보는것이 좋습니다.
배열 분할 대입
객체와 마찬가지로 배열에도 분할 대입을 이용할 수 있습니다. 이번에도 먼저 일반적인 방법을 확인해봅니다.
- 배열 인덱스를 지정해서 대입
const myProfile = ["박", 24];
const message = `내 이름은 ${myProfile[0]}입니다. 나이는 ${myProfile[1]}세입니다.`;
console.log(message); //내 이름은 박입니다. 나이는 24세입니다.
이 예에서는 배열의 각 요소에 인덱스로 접속해 값을 표시했습니다. 여기에서도 분할 대입을 이용해 동일한 처리를 다음과 같이 작성할 수 있습니다.
- 배열에 분할 대입
const myProfile = ["박", 24];
//배열 분할 대입
const [name, age] = myProfile;
const message = `내 이름은 ${name}입니다. 나이는 ${age}세입니다.`;
console.log(message); //내 이름은 박입니다. 나이는 24세입니다.
배열에 분할 대입을 할 때는 변수 선언부에 []를 사용하여 배열에 저장된 순서에 임의의 변수명을 설정해 추출할 수 있습니다. 객체와 달리 순서를 변경할 수 없으며 직접 임의로 설정한 변수명을 이용하게 됩니다. 인덱스 중간까지만 필요한 경우 등에는 이후 요소를 생략할 수 있습니다.
- 배열에서 필요한 요소만 추출
//첫 번째만 필요한 경우
const [name] = myProfile;
이렇게 분할 대입을 쓰면 요소를 효율적으로 추출할 수 있습니다. 간단한 기능이지만 리액트 개발에서 매우 자주 이용하므로 꼭 기억해둬야 합니다.
디폴트값 =
디폴트값은 함수의 인수나 객체를 분할 대입할 경우 설정해 사용합니다. 값이 존재하지 않을 때의 초깃값을 설정할 수 있어 처리를 더욱 안전하게 할 수 있습니다.
인수의 디폴트값
먼저 다음과 같이 이름을 받아 메시지를 표시하는 함수가 있다고 가정합니다.
- 메시지를 출력하는 함수
const sayHello = (name) => console.log(`${name}님, 안녕하세요!`);
sayHello("박"); //박님, 안녕하세요!
전달된 이름을 설정해 콘솔에 출력할 뿐인 단순한 함수입니다. 여기에서 sayHello 함수 실행 했을 때 인수가 전달되지 않은 경우에는 어떻게 해야 할까요?
- 실행 시 인수가 전달되지 않은 경우
const sayHello = (name) => console.log(`${name}님, 안녕하세요!`);
sayHello(); //undefined님, 안녕하세요!
'undefined님, 안녕하세요!'라고 출력됩니다. 자바스크립트에서는 값이 존재하지 않는 경우 undefined가 설정되기 때문에 예시와 같이 사용자는 의미를 알 수 없는 메시지가 출력됩니다.
그래서 디폴트 값을 설정하여 인수가 전달되지 않았을 때 사용할 값을 지정합니다. 디폴트값이기 때문에 무언가 값이 전달되면 해당 값을 우선합니다.
- 디폴트값 설정
const sayHello = (name = "게스트") => console.log(`${name}님, 안녕하세요!`);
sayHello(); //게스트님, 안녕하세요!
sayHello("박"); //박님, 안녕하세요!
인수명 뒤에 =(등호)와 함께 값을 지정하면 디폴트값을 이용할 수 있습니다. 인수를 설정하지 않고 sayHello 함수를 실행하면 앞에서는 undefined라고 표시되었지만 이제는 게스트라는 문자열로 표시되는 것을 확인할 수 있습니다. 이렇게 전달되지 않을 가능성이 있는 인수가 있을 때는 디폴트값을 효과적으로 이용할 수 있습니다.
객체 분할 대입의 디폴트값
객체 분할 대입 시에도 디폴트값을 이용할 수 있습니다. 다음과 같은 처리가 있다고 가정해봅니다.
- 존재하지 않는 속성을 출력
//name을 삭제
const myProfile = {
age: 24,
}
//존재하지 않는 name
const {name} = myProfile;
const message = `${name}님, 안녕하세요!`;
console.log(message); //undefined님, 안녕하세요!
여기에서 분할 대입할 때 활용할 디폴트값을 설정함으로써 다음과 같이 처리 할 수 있습니다.
- 분할 대입 시의 디폴트값을 설정
const myProfile = {
age: 24,
}
const {name = "게스트"} = myProfile;
const message = `${name}님, 안녕하세요!`;
console.log(message}; //게스트님, 안녕하세요!
인수와 마찬가지로 변수명 뒤에 =로 값을 설정하면 속성이 존재하지 않은 경우에 설정할 값을 지정할 수 있습니다. 객체도 물론 속성이 존재할 때는 해당 속성을 우선합니다. 디폴트값은 리액트 개발에서도 자주 이용합니다.
스프레드 구문 ...
스프레드 구문은 배열이나 객체에 이용할 수 있는 표기법이며 이용 방법도 여러 가지입니다.
요소 전개
배열을 하나 준비합니다.
- 배열
const arr1 = [1, 2];
console.log(arr1); //[1, 2]
스프레드 구문은 . . .과 같이 점 세 개를 연결해서 씁니다. 배열에 이용함으로써 내부 요소를 순차적으로 전개할 수 있습니다.
스프레드 구문
const arr1 = [1, 2];
console.log(arrr1); //[1, 2]
console.log(...arr1); //1 2
이렇게 배열이 전개되어 1, 2라는 배열 안의 값이 결과로 출력됩니다.
다음은 인수 두 개의 합계를 구해서 출력하는 함수가 있을 때, 일반적인 함수와 스프레드 구문을 이용하는 방법을 비교한 것입니다.
- 일반적인 함수와 스프레드 구문 비교
const arr1 = [1, 2];
const summaryFunc = (num1, num2) => console.log(num1 + num2);
//일반적으로 배열값을 전달하는 경우
summaryFunc(arr1[0], arr1[1]); //3
//스프레드 구문을 이용하는 방법
summaryFunc(...arr1); //3이와 같이 배열 내부의 값을 순서대로 전개하기 위해 간략하게 기술할 수 있습니다.
요소 모으기
스프레드 구문은 요소를 모으는 데도 활용할 수 있습니다. 배열의 분할 대입을 예로 들면 이해하기 쉽습니다.
- 요소 모으기
const arr2 = [1, 2, 3, 4, 5];
//분할 대입 시 남은 요소를 '모은다'
const [num1, num2, ...arr3] = arr2;
console.log(num1); //1
console.log(num2); //2
console.log(arr3); //[3,4,5]
요소 복사와 결합
지금까지 배운 기능을 응용해보겠습니다. 자주 이용되는 배열이나 객체의 복사, 결합에 관한 스프레드 구문을 소개합니다. 다음과 같이 배열이 두 개 있다고 가정합니다.
- 배열 두개
const arr4 = [10, 20];
const arr5 = [30, 40];
arr4를 복사한 새로운 배열을 스프레드 구문으로 만드는 경우 다음과 같이 작성할 수 있습니다.
- 스프레드 구문을 이용해 새로운 배열 생성
const arr4 = [10, 20];
const arr5 = [30, 40];
//스프레드 구문을 이용해 복사
const arr6 = [...arr4];
- 두 개의 배열 결합
const arr4 = [10, 20];
const arr5 = [30, 40];
//스프레드 구문을 이용해 결합
const arr7 = [...arr4, ...arr5];
console.log(arr7); //[10, 20, 30, 40]
- 여러 객체 결합
const obj4 = {val: 10, val2: 20};
const obj5 = {val3: 30, val4: 40};
//스프레드 구문을 이용해 복사
const obj6 = {...obj4};
//스프레드 구문을 이용해 결합
const obj7 = {...obj4, ...obj5};
console.log(obj6); //{val: 10, val2: 20}
console.log(obj7); //{val1: 10, val2: 20, val3: 30, val4: 40}
등호를 이용해서 복사하면 안 되는 이유
스프레드 구문을 이용하지 않고 =(등호)를 이용해 복사하는 방법도 있습니다.
- =를 이용한 복사
const arr4 = [10, 20];
// =로 복사
const arr8 = arr4;
console.log(arr8); //[10, 20]
하지만 이 방법에는 문제가 있습니다. 배열이나 객체 등 '오브젝트 타입'이라 불리는 변수는 등호로 복사하면 참조값 역시 상속되기 때문에 예상치 못한 동작을 일으킬 수 있습니다.
- 복사할 때의 예상치 못한 작동
const arr4 = [10, 20];
// =로 복사
const arr8 = arr4;
// arr8의 처음 요소를 100으로 덮어 씀
arr8[0] = 100;
console.log(arr4); //[100, 20]
console.log(arr8); //[100, 20]
이렇게 복사 후 배열에 대한 조작이 복사 전 소스의 배열에도 영향을 주게 됩니다.
스프레드 구문을 사용하면 '완전히 새로운 배열'을 만들기 때문에 원래 배열에 영향을 주지 않습니다.
리액트 개발에서는 값의 변화에 따라 화면도 변합니다. 따라서 리액트가 '완전히 새로운 배열'이라고 잘 판단할 수 있도록 배열 등을 변경할 때도 등호 대신 스프레드 구문을 사용해서 복사(새로운 배열 생성)합니다.
객체 생략 표기법
객체 기술 방법으로서 사용 빈도가 높은 쇼트핸드(shorthand)(생략 표현)가 있습니다. '객체의 속성명'과 '설정할 변수명'이 같으면 생략할 수 있습니다.
- 속성명과 변수명이 같은 경우 1
const name = "박";
const age = 24;
//user 객체 정의(속성명은 name과 age)
const user = {
name: name,
age: age,
};
console.log(user); //{name: "박", age: "24"}
- 속성명과 변수명이 같은 경우 2(생략 표기법)
const name = "박";
const age = 24;
생략 표기법
const user = {
name,
age,
};
console.log(user); //{name: "박", age: "24"}map, filter
배열처리에서 자주 나오는 map과 filter에 관해 소개합니다.
기존 for문
기존 배열에 루프를 돌려 처리하는 경우에는 for문을 이용했습니다.
- 기존 for문
//배열 정의
cosnt nameArr = ["하나", "둘", "셋"];
//for문을 이용한 배열 처리
for(let index = 0; index < nameArr.length; index++){
console.log(nameArr[index]);
}
//하나
//둘
//셋
map 함수 이용 방법
map 함수에서는 배열을 순서대로 처리한 결과를 배열로 받을 수 있습니다.
- 배열.map() 1
//배열 정의
const nameArr = ["하나", "둘", "셋"];
//배열.map()으로 이용한다.
const nameArr2 = nameArr.map();
먼저 map 함수는 배열에 대해 배열.map()의 형태로 이용합니다.
- 배열.map() 2
//배열 정의
const nameArr = ["하나", "둘", "셋"];
//배열.map()으로 이용한다.
const nameArr2 = nameArr.map(() => {});
그리고 ( )안에는 함수를 작성합니다. 예제는 화살표 함수의 껍데기를 먼저 입력한 상태입니다. 함수는 임의의 이름을 붙인 인수를 받을 수 있으며 거기에 배열 안의 값이 들어갑니다. 그리고 반환하는 요소를 함수 안에서 return합니다.
- 배열.map() 3
//배열 정의
const nameArr = ["하나", "둘", "셋"];
//인수(name)에 배열의 값이 설정되고 return으로 반환한다.
const nameArr2 = nameArr.map((name)) => {
return name;
});
console.log(nameArr2); //["하나", "둘", "셋"]
이 예는 순서대로 처리하면서 값을 그대로 반환합니다. 따라서 동일한 배열을 지정하면 아무 의미가 없는 처리지만 이것이 map을 이용하는 기본적인 방법입니다. 그럼 처음에 확인했던 for문의 예를 map 함수로 바꿔봅시다.
- map 함수 이용
//배열 정의
const nameArr = ["하나", "둘", "셋"];
//map을 이용한 배열 처리
nameArr.map((name) => console.log(name));
//하나
//둘
//셋
filter 함수 이용 방법
filter 함수는 map 함수와 이용 방법이 거의 동일하지만 return 뒤에 조건식을 입력해서 일치하는 것만 반환합니다. 다음은 숫자가 저장된 배열에서 홀수만 추출하는 예입니다.
- filter 함수를 이용해 홀수만 추출하기
//배열 정의
const numArr = [1, 2, 3, 4, 5];
//홀수 추출
const newNumArr = numArr.filter((num) => {
return num % 2 ===1;
});
console.log(newNumArr); //[1, 3, 5]
이렇게 filter 함수는 조건에 일치하는 값만 배열로부터 추출할 수 있습니다. 프로그램을 작성하면서 배열 안에서 특정한 조건에 일치하는 것을 추출해서 처리하고 싶을 때는 filter 함수를 이용합니다.
index 다루기
루프를 사용해 배열을 처리할 때 몇 번째 요소인지 알아야 하는 경우가 자주 있습니다. 예를 들어 기존 for문은 애초에 index를 이용하기 때문에 다음과 같이 순서의 개념을 다룰 수 있습니다.
- for문의 index를 이용해 요소를 순서대로 추출
const nameArr = ["하나", "둘", "셋"];
//정의한 index를 이용
for(let index = 0; index < nameArr.length; index++) {
console.log(`${index + 1}번째는 ${nameArr[index]}입니다.`);
}
//1번째는 하나입니다.
//2번째는 둘입니다.
//3번째는 셋입니다.
같은 처리를 map 함수로 구현해봅니다. 여기서 포인트는 map() 안에서 실행하는 함수의 인수입니다.
- map 함수의 인수를 이용해 요소 순서대로 추출
const nameArr = ["하나", "둘", "셋"];
//두 번째 인수에 index를 넣는다
nameArr.map((name, index) => console.log(`${index+1}번째는 ${name}입니다.`));
//1번째는 하나입니다.
//2번째는 둘입니다.
//3번째는 셋입니다.
삼항 연산자
리액트에서 자주 쓰는 삼항 연산자를 소개합니다. 삼항 연산자는 너무 많이 이용하면 가독성이 낮아져 좋지 않지만 if ~ else ~를 작성하는 수고가 줄어들기 때문에 적절하게 사용하면 효과적입니다.
삼항연산자
조건 ? 조건이 true 일 때의 처리 : 조건이 false일 때의 처리
- ?와 :을 이용한 처리 예
//1은 0보다 크므로 true, 따라서 :의 왼쪽이 설정된다.
const val1 = 1 > 0 ? "true입니다." : "false입니다.";
console.log(val1); //true입니다.
- 입력값에 대한 메시지 출력
//수치를 변환해 출력하는 함수
const printFormattedNum = (num) => {
const formattedNum = typeof num === "number" ? num.toLocaleString() : "숫자를 입력하십시오";
console.log(formattedNum);
};
printFormattedNum(1300); //1,300
printFormattedNum("1300"); //숫자를 입력하십시오
typeof ~ 는 변수 등의 타입을 판정하고 toLocaleString()은 숫자를 세 자리씩 콤마로 구분해서 변환합니다.
- 함수 return부분에 삼항 연산자 이용
//두 인수의 합이 100을 넘는지 판정하는 함수
const checkSumOver100 = (num1, num2) => {
return num1 + num2 > 100 ? "100을 넘었습니다!" : "허용 범위 안입니다.";
}
console.log(checkSumOver100(50, 40)); //허용 범위 안입니다.
console.log(checkSumOver100(50, 70)); //100을 넘었습니다!
'모던 자바스크립트' 카테고리의 다른 글
| 자바스크립트에서 DOM 조작 (1) | 2025.01.23 |
|---|---|
| 모던 자바스크립트 기초 (2) | 2025.01.22 |