2. 변수와 상수
(1) 변수
- 변수를 선언할때 사용하는 명령어: let
- 변수는 이름으로 구분하기 때문에 let으로 변수를 선언할 때는 이름을 중복해서 사용할 수 없습니다.
- var를 이용한 변수 선언은 let과는 달리 이름을 중복해 선언해도 실행할 수 있습니다.
(2) 명명 규칙
- 기호 사용 규칙: 한글, 문자, 숫자, 특수기호( _와 $ )
$ 기호는 이 변수가 별도의 라이브러리 객체라는 것을 가리킬 때 사용합니다. _기호는 변수 이름이 두 단어 이상으로 이루어진 합성어일 때 가독성을 높이기 위해 사용 - 숫자 사용규칙: 변수의 이름을 숫자로 시작해서는 안 된다는 규칙입니다.
- 예약어 규칙: 예약어란 자바스크립트에서 이미 사용하기로 약속한 단어입니다. 따라서 예약어는 변수명으로 사용할 수 없습니다.
- 대소문자 구별: 혼돈의 여지가 있기 때문에, 의도치 않은 오류가 발생할 수 있다.
카멜 표기법: 첫단어 대문자, 낙타등, 맨앞시작은 소문자
let totalsalescount =20;
파스칼 표기법: 모든 단어의 첫 글자를 대문자로 표기하는 방법
let TotalSalesCount = 10;
스네이크 표기법: 단어 사이에 ‘_’를 넣습니다.
let total_sales_count = 10;
(3) 상수
- 상수는 절대 변하지 않는 값을 저장할 때 사용하는 이름입니다
- const: 한번 선언하면 값이 바뀌지 않는다.
- 상수는 선언과 동시에 값을 할당하는 과정이 꼭 필요합니다.
3. 자료형
(1) 자료형과 원시 자료형
<원시 자료형>은 한 번에 단 하나의 값만 가질 수 있는 타입입니다.
- 숫자형: 소수, 음수, 실수와 같은 수를 모두 포함하는 자료형입니다.
Infinity는 양의 무한대, -Infinity는 음의 무한대를 의미하는 값입니다. 이 값들은 최솟값이나 최댓값을 구할 때 주로 사용합니다. 또한 Infinity는 0으로 어떤 수를 나눈 결과이기도 합니다. (c언어는 0으로 나누면 오류 but 자바는 infinity출력) - NaN은 Not a Number라는 뜻으로 표현이 불가능한 숫자형의 결과를 표현할 때 사용하는 값 (숫자형 * 문자형 # NaN출력), NaN이라는 값이 있기 때문에 수학 연산이 안전, 오류가 아닌 NaN출력
- 문자형 : 문자열을 포함하는 자료형, 큰따옴표 또는 작은 따옴표, 백틱``(물결표시와 함께 있는): 백틱을 이용하면 문자열 사이에 변수를 사용할 수 있어
- 불리언: 불리언 형(Boolean type)은 참(true) 또는 거짓(false)만을 저장하는 자료형
- null: “아무것도 없다”라는 뜻으로, 변수에 아무런 값도 할당할 필요가 없을 때
- undefined: ‘미정의 값’, 변수를 생성하고 아무런 값도 할당하지 않으면
let name = "이정환";
let location = "역곡";
let introduce = `${name}은 ${location}에 살고 있습니다.`;
console.log(introduce); // 이정환은 역곡에 살고 있습니다.4. 형 변환
- 어떤 값의 자료형을 다른 자료형으로 변환하는 것을 ‘형 변환
(1) 묵시적 형 변환
묵시적 형 변환: 자바스크립트 엔진이 알아서 변환하는 작
let number = 10;
let string = "20";
const result = number + string; // 숫자형 변수 + 문자형 변수
console.log(result); // 문자열 1020을 출력
자바스크립트가 암묵적으로 숫자를 문자로 형 변환해 계산 -> 문자형 간의 덧셈 연산
이렇듯 프로그래머가 의도하지 않았음에도 자바스크립트가 직접 자료형을 적절히 변환하는 것을 묵시적 형 변환이라고 합니다.
(2) 명시적 형 변환
프로그래머가 의도적으로 자료형을 변환하는 작업
a. 숫자형으로 변환
let strA = "10";
let strB = "10개";
let numA = Number(strA);
let numB = Number(strB);
console.log(numA); // 10
console.log(numB); // NaN
Number(자바스크립트 내장 함수): 문자열을 숫자로 변환해 반환
let strA = "10";
let strB = "10개";
let numA = parseInt(strA, 10); // 문자열 strA를 10진수 숫자로 형 변환
let numB = parseInt(strB, 10);
console.log(numA); // 10
console.log(numB); // 10
parseInt(내장 함수): 숫자 + 문자 -> 숫자만 추려 반환
첫 번째 값은 변환하려는 문자열이고, 두 번째 값은 진수입니다.
(단 함수 parseInt가 동작할 때는 문자열의 첫 문자부터 숫자로 변환하므로, 문자열이 숫자가 아닌 문자로 시작한다면 NaN을 반환하게 되니 주의해야 합니다.)
b. 문자열로 변환
숫자를 문자로 바꾸면 내장함수로 문자열로 변환 반환
let num = 2022;
let str = String(num);
console.log(str); // 2022
String (자바스크립트 내장 함수): 인수로 제공한 값을 문자열로 변환해 반환
let varA;
let varB = null;
let varC = true;
let strA = String(varA);
let strB = String(varB);
let strC = String(varC);
console.log(strA); // undefined
console.log(strB); // null
console.log(strC); // true
c. 불리언으로 변환
truthy & falsy 규칙을 따릅니다.
Boolean
let varA = "하이";
let varB = 0;
let varC = "";
let boolA = Boolean(varA);
let boolB = Boolean(varB);
let boolC = Boolean(varC);
console.log(boolA); // true : 문자
console.log(boolB); // false : 숫자
console.log(boolC); // false : 공백5. 연산자
연산자: +, -, *, / 등과 같이 프로그래밍 언어에서 다양한 연산을 수행할 때 도움을 주는 기호 또는 문자
a. 대입연산자( = ) : 변수에 값을 할당 (결합 방향은 오른쪽에서 왼쪽으로 진행)
let number = 1;
let numA = 1;
let numB;
let numC;
numB = numC = numA; // 결합 방향은 오른쪽에서 왼쪽
console.log(numA, numB, numC); // 1 1 1
(결합 방향이란 같은 수식 내에 우선순위가 같은 연산자가 둘 이상 있을 때, 어느 연산을 먼저 수행할지 결정하는 일 )
b. 산술연산자: 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지 연산(%) (왼쪽에서 오른쪽)
let numberA = 1;
let numberB = 2;
console.log(numberA + numberB); // 3
console.log(numberA - numberB); // -1
console.log(numberA * numberB); // 2
console.log(numberA / numberB); // 0.5
console.log(numberA % numberB); // 1
소괄호를 사용하면 원하는 연산부터 먼저 수행
let numberA = 1 + 2 * 10;
console.log(numberA); // 21
let numberA = (1 + 2) * 10;
console.log(numberA); // 30
c. 복합 대입 연산자: 대입+산술
let number = 10;
number = number + 10;
// number += 10;
console.log(number); // 20;
d. 증감연산자:후위 연산,전위 연산 (a++, ++a, a–, –a)
// 후위연산
let a = 1;
console.log(a++); // 1
console.log(a); // 2
let b = 1;
console.log(b--); // 1
console.log(b); // 0
// 전위 연산
let a = 1;
console.log(++a); // 2
console.log(a); // 2
let b = 1;
console.log(--b); // 0
console.log(b); // 0
e. 논리연산자:
OR(||) : 둘 중 하나라도 참이면 참
AND(&&) : 둘 중 하나라도 거짓이면 거짓
NOT(!) : 참이면 거짓, 거짓이면 참
// OR
let boolA = true;
let boolB = false;
console.log(boolA || boolB); // true
// AND
let boolA = true;
let boolB = false;
console.log(boolA && boolB); // false
//NOT
let boolA = true;
let boolB = false;
console.log(!boolA); // false
console.log(!boolB); // true
( 토글(Toggle): 전원 스위치의 on/off처럼 참을 거짓으로, 거짓을 참으로 바꾸는 기능을 특별히 ‘토글 (Toggle)’ 기능이라고 합니다. )
f. 비교연산자: 동등비교연산자 (===), !==, >, >=, <, <=
(!= 연산자는 자료형은 비교하지 않고 값이 다르면 참으로 판단합니다.)
// 같다
let numberA = 2;
let numberB = 2;
let numberC = "2";
console.log(numberA === numberB); // true
console.log(numberB === numberC); // false
console.log(numberB == numberC); // true
// ==는 값만 비교할 뿐 자료형 비교 x
// 같지 않다.
let numberA = 2;
let numberB = 2;
let numberC = "2";
console.log(numberA !== numberB); // false
console.log(numberB !== numberC); // true
console.log(numberB != numberC); // false
// 대소비교
let numberA = 1;
let numberB = 2;
let numberC = 3;
console.log(numberA < numberB); // true
console.log(numberA > numberB); // false
console.log(numberB < numberC); // true
console.log(numberB > numberC); // false
let numberA = 1;
let numberB = 2;
let numberC = 2;
console.log(numberA <= numberB); // true
console.log(numberA >= numberB); // false
console.log(numberB <= numberC); // true
console.log(numberB >= numberC); // true
null 병합 연산자: 값이 확정된 변수를 찾을 때 사용하는 연산자
let varA = 10;
let varB = 20;
let varC;
console.log(varA ?? varB); ① // 10
// null 병합 연산에서는 ?? 연산자 기준 왼쪽의 값을 연산 결과로 반환합니다.
console.log(varC ?? varB); // 20
// varC는 값을 할당하지 않아 undefined 값을 갖습니다.
// 이때 null 병합 연산에 서는 값이 확정된 변수인 varB의 값을 연산 결과로 반환합니다.
// 요구사항: 변수 user에 해당 사용자의 이름이 있다면 이름을, 이름이 없다면 닉네임을 저장하시오.
let name;
let nickname = "winterlood";
let user = name ?? nickname; // 변수 name과 nickname 중 확정된 변숫값을 user에 저장
console.log(user); // winterlood
(2) 동적 타이핑과 typeof 연산자
저장하는 변숫값에 따라 변수의 자료형도 함께 변경되는 특징, 변수는 값을 저장할 때마다 자료형이 동적으로 결정(숫자-> 문자로 형변환을 해도 오류가 나지 않는다. )
let varA = 1;
varA = "이정환";
console.log(++varA); // NaN
// 숫자형으로 오인하고 증감 전위 연산자를 사용
typeof 연산자를 이용하면 변수의 자료형을 확인할 수 있습니다.
let varA = 1;
varA = "이정환";
console.log(typeof varA); // string
(3) 삼항 조건 연산자
조건식 ? 참일 때 명령 수행 : 거짓일 때 명령 수행
const varA = "안녕하세요";
typeof varA === "string"
? console.log("문자 자료형")
: console.log("문자 자료형이 아님"); // 문자 자료형let num = 1;
let result = num % 2 === 0 ? "짝수" : "홀수";
console.log(result); // 홀수
6. 조건문
1. if문
만약 A라면 B를 하고, 그렇지 않으면 C를 하라
| if (조건식) { 조건식이 참일 때 수행할 명령 } else if (조건식2) { 조건식2가 참일 때 수행할 명령 } else { 거짓일때 수행하는 명령 } |
let num = 5;
if (num >= 10) {
console.log("num은 10 이상입니다.");
} else if (num >= 5) {
console.log("num은 5 이상입니다.");
} else {
console.log("num은 5 미만입니다.");
}
// num은 5 이상입니다.
let country = "ko";
if (country === "ko") {
console.log("한국");
} else if (country === "us") {
console.log("미국");
} else if (country === "dk") {
console.log("덴마크");
} else {
console.log("미 분류");
}
// 한국
2. switch문
식이나 값을 case 문과 비교해 정확히 일치할 때만 수행
let fruit = "apple";
switch (fruit) {
case "apple": {
console.log("사과");
break;
}
case "banana": {
console.log("바나나");
break;
}
default: {
console.log("우리가 찾는 과일이 아님");
}
}
// 사과
let country = "ko";
switch (country) {
case "ko": {
console.log("한국");
break;
}
case "us": {
console.log("미국");
break;
}
case "dk": {
console.log("덴마크");
break;
}
case "do": {
console.log("도미니카 공화국");
break;
}
case "mx": {
console.log("멕시코");
break;
}
case "ch": {
console.log("스위스");
break;
}
case "es": {
console.log("스페인");
break;
}
default: {
console.log("미분류");
}
}
// 한국7. 반복문
1. 반복문의 유용성과 for문
console.log(1);
console.log(2);
(...)
console.log(99);
console.log(100);
for (let i = 1; i <= 100; i++) {
console.log(i);
}
2. 반복문 강제 종료하기, 건너뛰기
반복을 강제로 종료
break: break 문을 실행하면서 반복을 즉시 종료합니다.
for (let idx = 1; idx <= 100; idx++) {
if (idx > 10) { ①
console.log("반복문 종료!");
break;
}
console.log(idx);
}
// 출력
// 1
// (...)
// 10
// 반복문 종료!
continue:다음 반복 과정으로 바로 건너뛰게 됩니다.
for (let idx = 1; idx <= 10; idx++) {
if (idx % 2 === 0) { ①
continue;
}
console.log(idx);
}
// 출력
// 1
// 3
// (...)
// 9
8. 함수
1. 함수가 필요한 이유
공통으로 사용하는 유사 코드를 하나로 묶어 ‘함수’라는 이름으로 사용, 중복 코드를 하나의 블록 단위로 묶을 수 있습니다. -> 더 간결하고 구조적인 프로그래밍이 가능하게 됩니다.
let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;
let width2 = 100;
let height2 = 200;
let area2 = width2 * height2;
console.log("면적: ", area1); // 면적: 200
console.log("면적: ", area2); // 면적: 20000
// 반복되면 가독성이 떨어진다.
2. 함수 선언
함수 선언은 호출하면 바로 실행할 수 있도록 준비하는 작업
function 함수 이름 (매개변수) {
함수가 수행하는 명령
}
function greeting() {
console.log("안녕하세요!");
}
3. 함수 호출
function greeting() { // 함수선언
console.log("안녕하세요!"); // 함수 콘솔
}
console.log("함수 시작 전"); // 콘솔 출력
greeting(); // 함수 호출
console.log("함수 종료"); // 호출 후, 복귀
// 함수 시작 전
// 안녕하세요 !
// 함수 종료function getArea() {
let width = 10;
let height = 20;
let area = width * height;
console.log(area);
}
getArea(); // 200
4. 함수의 인수와 매개변수
인수: 함수를 호출하면서 넘겨주는 값
매개변수는: 함수에서 넘겨받은 인수를 저장하는 변수
(즉 인수는 ‘값’, 매개변수는 그 값을 저장할 ‘변수’)
function getArea(width, height) { // 매개변수
let area = width * height;
console.log(area);
}
getArea(10, 20); // 인수 200
5. 함수 반환
함수에서 값을 반환하려면 return문을 사용합니다.
function getArea(width, height) {
let area = width * height;
return area; // return문을 이용해서 함수 반환 (반환값)
console.log("함수 종료"); // return문을 기준으로 종료되지 때문에 수행되지 않는다.
}
let result = getArea(10, 20);
console.log(result); // 200
6. 중첩 함수
특정 함수 내부에서 선언된 함수
function greeting() {
function greetingWithName(name) { // 이름을 전달받아 인사말 출력
console.log(`hello! ${name}`);
}
let name = "이정환";
greetingWithName(name); // 이름을 담은 name변수를 전달
}
greeting(); // hello! 이정환
7. 함수와 호이스팅
호이스팅이란 변수나 상수를 접근 코드보다 위에 있지만, 동작하는 기능
func(); // 함수 호출
function func() { // 함수 선언
console.log("hello");
}
// hello
// 함수호출이 선언보다 위에 있지만 동작함
자바스크립트는 실행하지 전에 준비단계를 거치는데, 이때 중첩함수 제외 모근 함수를 찾아 미리 생성해둡니다.
이런 준비 단계때문에, 선언이 호출보다 느리더라도 자연스럽게 호출할 수 있습니다.
8. 함수 표현식
함수를 생성하고 변수에 값으로 저장하는 방법
let greeting = function () {
console.log("hello");
};
greeting(); // hello
자바스크립트에서는 함수를 숫자나 문자열처럼 값으로 취급 (변수에 함수 저장 가능) -> 변수이름으로 함수 호출 가능
function greetFunc() {
console.log("hello");
}
greetFunc(); // hello
let greeting = greetFunc; // 변수에 함수 저장
greeting(); // hello
!!!!함수표현식으로 만든 함수는 호이스팅이 되지 않는다!!!!
9. 콜백 함수
콜백함수: 함수는 다른 함수의 인수(인수=값)로도 전달할 수 있다.
function parentFunc(callBack) {
console.log("parent"); // 2. 출력
callBack(); // 3. 매개변수 callback에 저장된 함수호출
}
function childFunc() {
console.log("child");
}
parentFunc(childFunc); // 1. 함수 parentFunc을 호출하면서 (매개변수 callback에는 인수로 전달된 함수 childFunc이 저장)
// 출력
// parent
// child
콜백함수가 필요한 이유
function repeat(count) {
for (let idx = 0; idx < count; idx++) {
console.log(idx + 1);
}
}
function repeatDouble(count) {
for (let idx = 0; idx < count; idx++) {
console.log((idx + 1) * 2);
}
}
repeatDouble(5); // 2 4 6 8 10
function repeat(count, callBack) {
for (let idx = 0; idx < count; idx++) {
callBack(idx + 1);
}
}
function origin(count) {
console.log(count);
}
function double(count) {
console.log(count * 2);
}
repeat(5, double);
// 출력 : 2 4 6 8 10
함수 표현식을 이용한 콜백 함수
익명 함수를 직접 인수 형태로 전달해도 됩니다.
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);
// 출력 : 2 4 6 8 10
????????????????????????????????????????????????????
10. 화살표 함수
익명 함수를 매우 간결하게 작성할 때 사용하는 함수 표현식의 단축 문법
익명 함수를 직접 인수 형태로 전달해도 됩니다.
let funcA = (매개변수) => 반환값;
let funcA = function (매개변수) {
return 반환값;
};
let greeting = (name) => `hello ${name}`;
const greetingText = greeting("이정환");
console.log(greetingText); // hello 이정환
let greeting = (name) => {
let greetingText = `hello ${name}`;
return greetingText;
};
console.log(greeting("이정환"));
// hello 이정환
let isConfirm = true;
function confirm(onYes, onNo) {
if (isConfirm) onYes();
else onNo();
}
confirm(
() => console.log("승인"),
() => console.log("거부")
);
// 승인
9. 스코프
- 스코프: 변수나 함수에 접근하거나 호출할 수 있는 범위
- 지역 변수, 지역 스코프: 특정 영역（함수, 반복문, 조건문）에서만 해당 변수에 접근할 수 있다는 의미, 함수 내부에서만 접근할 수 있습니다.
- 변수의 스코프: 선언한 위치에 따라 자신에게 접근할 수 있는 범위가 결정
1. 전역, 지역 스코프
전역 스코프: 해당 변수를 코드 어디에서나 접근할 수 있다는 의미
지역 스코프: 특정 영역（함수, 반복문, 조건문）에서만 해당 변수에 접근할 수 있다는 의미
- 블록, 함수 스코프：
블록 스코프：중괄호로 둘러싸인 부분을 뜻하는 ‘블록(block)’, 블록을 기준으로 지역 스코프를 정한다.
함수 스코프： 함수를 기준,
함수 스코프를 갖는다는 것은 함수 내부에서 선언한 변수만 지역 스코프를 갖는다는 의미 (함수가 아닌 조건문의 블록 내부에서 선언한 변수 a는 전역 스코프를 갖습니다.)
| if (true) { 2 var a = 1; 3} 4 5console.log(a); // 1 var로 선언한 변수가 블록 스코프가 아닌 함수 스코프를 갖기 때문입니다. (var은 함수 스코프라 혼란의 여지가 있다. 그래서 let, const많이 사) function foo() { 2 var a = 1; 3} 4console.log(a); // ① 오류 : a는 정의되지 않았습니다. |
10장 객체
<객체 생성과 프로퍼티>
- 객체 생성:리터럴 or 생성자
| let objA = {}; ① // '객체 리터럴' 문법 let objB = new Object(); // '객체 생성자' 문법 |
- 프로퍼티: 속성이라는 뜻으로 객체를 설명하는 정보
key는 문자형을 사용하며 중복해 사용할 수 없습니다, key 이름으로 프로퍼티를 구별
| let person = { name: "이정환", age: 25, "like cat": true ① } |
<객체 프로퍼티 다루기>
- 프로퍼티 접근:. or []
| let person = { name: "이정환", age: 25, "like cat": true }; const personName = person.name; // ① 점 표기법 const personAge = person["age"]; // ② 괄호 표기법 console.log(personName); // "이정환" console.log(personAge); // 25 |
- 프로퍼티 추가
| let person = { name: "이정환", age: 25, "like cat": true }; person.gender = "male"; // ① 점 표기법을 이용한 프로퍼티 추가 =>프로퍼티의 key가 고정적이라면 person["nickname"] = "winterlood"; // ② 괄호 표기법을 이용한 프로퍼티 추가 =>key가 변수에 저장된 값처럼 유동적이라면 console.log(person.gender); // male console.log(person["nickname"]); // winterlood |
- 프로퍼티 수정: 점 표기법, 괄호 표기법 사
- 프로퍼티 삭제
| delete cat.name; delete cat["age"]; |
< 상수 객체의 프로퍼티 >
- 상수로 만든 객체도 객체 자체를 없애지 않는 한, 프로퍼티를 자유롭게 추가하거나 삭제, 수정할 수 있습니다.
< in 연산자>
- 객체에 존재하지 않는 프로퍼티에 접근하면, undefined를 반환합니다. 프로퍼티의 존재 여부를 확인할 수 있습니다.
| let person = { age: 10 }; let isNameExist = "name" in person; // ① console.log(isNameExist); // false |
< 메서드 >
- 객체에서 값(value)이 함수인 프로퍼티, 메서드는 데이터가 아니라 객체의 동작을 정의합니다.
| let person = { name: "이정환", sayHi: function () { console.log("안녕"); } }; person.sayHi(); // 안녕 |
11장 배열
- 배열은 순서가 있는 요소의 집합이자 여러 개의 항목을 담는 리스트
< 배열선언 >
- 빈배열
| let arrA = new Array(); // 배열 생성자 let arrB = []; // 배열 리터럴 |
- 배열 리터럴: 배열을 생성하면서 값도 할당
| let arr = [ 1, "1", true, null, undefined, () => {}, function () {}, [1, 2, 3], { a: 1 } ]; |
< 배열인덱스 >
- 인덱스란 배열 요소의 위치를 0부터 시작하는 숫자로 순서대로 표현한 것입니다.
| let food = ["짜장면", "피자", "치킨"]; food[2] = "파스타"; // ① food[3] = "레몬"; // ② console.log(food); // ["짜장면", "피자", "파스타", "레몬"] |
출처 : 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023).
'DEVELOPMENT > react' 카테고리의 다른 글
| 6. 리액트 기본 개념 다루기 - 2 (0) | 2024.11.10 |
|---|---|
| 5. 리액트 기본 개념 다루기 - 1 (0) | 2024.11.03 |
| 4. react - 리액드 시작하기 (0) | 2024.10.31 |
| 3. react - Node.js (0) | 2024.10.31 |
| 깃허브 설치 및 초기연동 (0) | 2024.10.31 |