- 반드시 스스로 개념을 정리해야 한다
- 특히, js를 모르는 사람에게 설명할 수 있을 정도로 쉽게 개념을 정리하면 좋다
- HTML5 : 웹브라우저에서 데이터를 보여주는 형식을 지정한 문법구조
- CSS3 : 데이터를 잘 보여주기 위해서 꾸며주는 용도의 문법
1. css 제어 : 레이아웃 변경 하도록 지시
2. html 제어 : 데이터의 결과를 CRUD 하도록 지시
3. Server, DBn 데스크톱 Application를 제어 : Node.js 로 가능
- Web API는 웹브라우저에 미리 기능이 만들어져 있는 js 기능
- 주로 직접 코딩하는 것이 아닌 미리 만들어진 기능을 사용하는 것을 학습
- 이전에 js는 웹브라우저 마다 모두 달랐음
- 이에 대한 불편함을 해소하기 위해서 js의 문법을 통일
- 기준이 ECMScript 라고 하며 ES6가 기준이 됨
F12실행 >Console 탭을 선택 : console 탭은 js의결과, 오류를 보는 곳
console.log("안녕");console.clear();alert("안녕");- 1줄 이상 작성하는 경우는
Shift + Enter키를 입력하여야 함
console.log("안녕하세요");
console.log("dafdab");- index.html 파일을 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트</title>
</head>
<body></body>
</html><script></script>태그를 지원합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트</title>
<script>
console.log("1번 hello");
</script>
</head>
<body>
<script>
console.log("2번 body");
</script>
</body>
</html>
<script>
console.log("3번 html end");
</script>- 일반적으로 css와 html을 제어하는 것이 js의 목적이다
웹브라우저가 css와 html 을 모두 잃고 난 후의 자리
- 개발자가 만든 많은
기능들을 코딩하기 좋은 자리 - 다른 개발자가 만든 많은
기능들을 불러와서 사용하기 좋은 자리
- js 폴더 생성
- js 폴더에
lib.js파일 생성 js/lib.js 내용
// 커피를 출력하는 기능
function 커피머신(_msg) {
console.log(_msg);
}
console.log("1번 hello");<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트</title>
<script src="js/lib.js"></script>
</head>
<body>
<script>
console.log("2번 body");
</script>
</body>
</html>
<script>
console.log("3번 html end");
커피머신("아이스아메리카노");
</script>- 웹브라우저에
값 보관 시 사용할 공간
- 단계 1(필요로 한 기능에 대해서 서술 - 피그마, UI다이어그램 )
사용자 정보를 입력 받아서DB에 보관하고 싶을 때- 사용자가 로그인을 하고 나면 사용자 정보를 화면에 출력 하고싶다
- 단계 2(어떤 정보를 보관할지 결정 - 요구사항명세서)
이름, 주민등록번호, 전화번호, 주소(우편번호, 상세주소), 이메일, 아이디, 비밀번호, 동의여부
- 단계 3(각각의 정보를 보관할 공간을 마련)
이름 : 글자 20자 제한
주민등록번호 : 글자 13자 제한
전화번호 : 글자 11자 제한
우편번호 : 글자 5자 제한
상세주소 : 글자 50자 제한
이메일 : 글자 20자 제한
아이디 : 글자 16자 제한
비밀번호 : 글자 16자 제한
동의여부 : 참/거짓 숫자 1자 제한
- 웹브라우저 메모리
빈 공간요청
var
let
constvar라고 작성을 하면변수로 인정
hoisting으로 오류가 발생할 소지가 높음- 미리 안 만들고 사용해도 되는 문제
무조건 공간에다가 undefined 를 넣어야 함
호이스팅의 대상이 된다
let라고 작성 하면변수로 인정
hoisting의 문제를 사전에 차단한다let으로 작성 시 미리 사용하면 오류로 알려준다
const라고 작성 하면상수로 인정
hoisting의 문제를 사전에 차단한다const으로 작성 시 미리 사용하면 오류로 알려준다- 절대로 내용이 변하지 않는다
- 실제로 var, let, const 중에 선택함
- 값이 사용자 마다 변할 것이다. 그래서
let선택함
let 이름 : 글자 20자 제한
let 주민등록번호 : 글자 13자 제한
let 전화번호 : 글자 11자 제한
let 우편번호 : 글자 5자 제한
let 상세주소 : 글자 50자 제한
let 이메일 : 글자 20자 제한
let 아이디 : 글자 16자 제한
let 비밀번호 : 글자 16자 제한
let 동의여부 : 참/거짓 숫자 1자 제한- 매우 중요함 -> 이름을 잘못지으면 다른 개발자에게 혼란을 줌
- 개발자들은 코딩 컨벤션이 있음
- 변수의 철자는
명사+명사영어로 해야함 - 숫자 및 공백 및 특수기호는 절대 안됨
- 허용되는 특수기호는
_,$는 허용
- Camel Case
- 반드시 소문자로 시작하고 새로운 명사는 대문자로 시작
- 많은 프로그래머들이 변수라고 생각
- Snake Case
- 이름을 모두 소문자로 작성하고
_로 연결한 이름
- Kebab Case
- 이름을 소문자로 작성하고
-로 연결한 것 - 파일 또는 css파일에서는 사용 ->ex) Next.js의 파일명은 Kebab이 표준
- Pascal Case
- 이름을 대문자로 작성하고 새로운 단어는 대문자로 시작
- 객체 변수, 클래스 정의로 볼 수도 있음
- 모두 대문자
- 상수명으로 판단
- 적용하기
let userName : 글자 20자 제한
let userNum : 글자 13자 제한
let userPhone : 글자 11자 제한
let userPost : 글자 5자 제한
let userAddress : 글자 50자 제한
let userEmail : 글자 20자 제한
let userId : 글자 16자 제한
let userPassword : 글자 16자 제한
let userAgree : 참/거짓 숫자 1자 제한
let user_name : 글자 20자 제한
let user_num : 글자 13자 제한
let user_phone : 글자 11자 제한
let user_post : 글자 5자 제한
let user_address : 글자 50자 제한
let user_email : 글자 20자 제한
let user_id : 글자 16자 제한
let user_password : 글자 16자 제한
let user_agree : 참/거짓 숫자 1자 제한- number : 숫자
- string : 글자(문자, 문자열로 구분)
- boolean : ture/false(나중에 falshy한 것 알아야함)
- underfined : 값이 없음(변수 초기값으로 자동 세팅)
- null : 개발자가 값이 없다고 지정(값이 비워져있다로 세팅)
- symbol : 절대로 겹치지 않는 변수
- object : OOP(Object-Oriented Programming)
- 적용하기
let userName = ""; //20자 제한
let userNum = ""; //13자 제한
let userPhone = ""; //11자 제한
let userPost = ""; //5자 제한
let userAddress = ""; //50자 제한
let userEmail = ""; //20자 제한
let userId = ""; //16자 제한
let userPassword = ""; //16자 제한
let userAgree = false; //숫자 1자 제한- 웹브라우저에 저장할 내용, 즉 변수가 있다면 아래를 고민
1순위는 const-> 변수를 만든다면 나는 var, let, const 중에 무엇을 선택할지 고민 const는 변하지 않을 것이다라는 작성법 const로 코딩을 하다가 값이 바뀌어야 하는 경우에 let으로 변경한다 -> const의 특징- 만들기 전에 사용할 수 없다.(호이스팅 문제 해결)
console.log(userName); // error const userName = "홍길동";
- 동일한 이름으로 변수를 또 생성할 수 없다.(변수생성 중복 방지)
const userAge = 10; const userAge = 30; // error
- 값을 변경할 수 없다.
const userCity = "대구"; userCity = "서울"; // error
2순위는 let- 만들기 전에 사용할 수 없다.(호이스팅 문제 해결)
console.log(userName); let userName = "홍길동";
- 동일한 이름으로 변수를 또 생성할 수 없다..(중복 에러 생성 : const와 동일)
let userAge = 20; let userAge = 30; //error
- 값을 변경할 수 있다.(const와 유일한 차이점)
let userCity = "대구"; let userCity = "서울";
var는 잘 사용하지 않는다-> 호이스팅 통과되어 버림(추후 오류의 원인) -> 동일한 이름으로도 중복 생성 가능(추후 오류의 원인) -> 값도 변경이 가능 -> 기존 코드에서 var를 사용한 케이스가 있다면 변경하지 않고 유지한다.
- 만약 interpark 사이트의 banner 영역의 데이터를 js에서 관리하려고할 때 배너는
링크 주소, 이미지 주소, 고유한 ID가 있다. - 하나의 배너는 변수 3개씩 가지고 있다.(총 5개의 배너가 있음)
// 첫 번째 배너
const bannerUrl_1 = "https://~";
const bannerImg_1 = "https://~";
const bannerID_1 = "1";
// 두 번째 배너
const bannerUrl_2 = "https://@";
const bannerImg_2 = "https://@";
const bannerID_2 = "2";
// 세 번째 배너
const bannerUrl_3 = "https://!";
const bannerImg_3 = "https://!";
const bannerID_3 = "3";
// 네 번째 배너
const bannerUrl_4 = "https://#";
const bannerImg_4 = "https://#";
const bannerID_4 = "4";
// 다섯 번째 배너
const bannerUrl_5 = "https://$";
const bannerImg_5 = "https://$";
const bannerID_5 = "5";- 객체
-> 관련있는 기본형 데이터들을
묶어서 하나로 만들기
// 1 단계
const 객체명 = {};
// 2단계
const 객체명 = {
이름 : 값, // , 로 연결
이름 : 값,
이름 : 값
}
const 객체명 = {
key Name : Key Value, // , 로 연결
이름 : 값,
이름 : 값
}
const 객체명 = {
Property 속성명 : Value, // , 로 연결
이름 : 값,
이름 : 값
}// 첫 번째 배너
const banner_1 = {
url: "https://~",
img: "https://~",
id: "1";
};
// 두 번째 배너
const banner_2 = {
url: "https://@",
img: "https://@",
id: "2";
}- 객체 변수 정보에 담겨진 속성 즉, 키명을 통한 값 사용(호출)
객체명.키명;
banner_1.url;
["객체명"].키명;
["banner_1"].url;- 배열 -> 하나의 이름으로 여러개의 데이터를 묶어서 관리
const userArray = [1, 2, 3, "안녕", false, null, undefined];
const bannerrId = ["1", "2", "3"];
const banner = [
{ url: "http~", img: "http~", id: "1" },
{ url: "http~", img: "http~", id: "2" },
{ url: "http~", img: "http~", id: "3" },
];-> 배열의 요소에 값 사용(호출)
배열명[인덱스번호];
banner[0];
banner[1];- 인터파크 티켓 랭킹 작업
// 섹션의 타이틀
const sectionTitle = "티켓 랭킹";
// 섹션의 설명글
const sectionDesc = "~~~";
// 섹션의 카테고리
const sectionCategoryArr = ["뮤지컬", "콘서트", "스포츠"];
sectionCategory[0];
sectionCategory[1];
sectionCategory[2];
// 티켓의 타이틀 정보
const ticketTitleArr = [
"팬텀 10주년 기념 공연",
"뮤지컬 <메디슨 카운티의 다리>",
"뮤지컬 <라이카>",
];
console.log(ticketTitleArr[0]);
console.log(ticketTitleArr[1]);
console.log(ticketTitleArr[2]);
// 티켓의 이미지 경로
const ticketImgArr = ["https://a.jpg", "https://b.jpg", "https://c.jpg"];
// 티켓의 링크 경로
const ticketUrlArr = ["https://a.html", "https://b.html", "https://c.html"];
// 티켓의 순위
const ticketRankArr = [1, 2, 3];
// 티켓의 공연장소
const ticketPlaceArr = ["대구", "서울", "제주"];
// 티켓의 공연일시
const ticketDayArr = ["05/05", "05/07", "05/09"];
// 위의 사항을 효율적으로 관리하기 위한 작업
const ticket_1 = {
title: "팬텀 10주년 기념 공연",
img: "https://a.jpg",
url: "https://a.html",
rank: 1,
place: "대구",
day: "05/05",
};
console.log(ticket_1);
console.log(ticket_1.title);
console.log(ticket_1.img);
console.log(ticket_1.url);
console.log(ticket_1.rank);
console.log(ticket_1.place);
console.log(ticket_1.day);
const ticket_2 = {
title: "뮤지컬 <메디슨 카운티의 다리>",
img: "https://b.jpg",
url: "https://b.html",
rank: 2,
place: "서울",
day: "05/07",
};
console.log(ticket_2);
consloe.log(ticket_2["title"]);
consloe.log(ticket_2["img"]);
consloe.log(ticket_2["url"]);
consloe.log(ticket_2["rank"]);
consloe.log(ticket_2["place"]);
consloe.log(ticket_2["day"]);
const ticket_3 = {
title: "뮤지컬 <라이카>",
img: "https://c.jpg",
url: "ttps://c.html",
rank: 3,
place: "제주",
day: "05/09",
};
const ticketInfoArr = [ticket_1, ticket_2, ticket_3];
// 보통 아래의 형태로 데이터가 들어오는 것을 JavaScript Object Notation 즉, JSON이라고 함
const ticketInfoJsonArr = [
{
title: "팬텀 10주년 기념 공연",
img: "https://a.jpg",
url: "https://a.html",
rank: 1,
place: "대구",
day: "05/05",
},
{
title: "뮤지컬 <메디슨 카운티의 다리>",
img: "https://b.jpg",
url: "https://b.html",
rank: 2,
place: "서울",
day: "05/07",
},
{
title: "뮤지컬 <라이카>",
img: "https://c.jpg",
url: "ttps://c.html",
rank: 3,
place: "제주",
day: "05/09",
},
];
ticketInfoJsonArr[0].title;
ticketInfoJsonArr[1].title;
ticketInfoJsonArr[2].title;- 연산을 해서 결과값을 만드는
기호 - 연산자에 의한 새로운
결과값이 나오는 것을 연산식
+ 연산자
const numA = 0;
const numB = 1;
const result = numA + numB; // 1const strA = "홍길동";
const numAge = 20;
// "저기~ 홍길동님 반가워요!"
// 숫자 + 글자는 글자로 인정함
const result = "저기~ " + strA + "님은 나이가" + numAge + "이군요!";
// 아래처럼 템플릿 문법을 추천함. 흔히 백틱 이라고 함
const resultTemplate = `저기~ ${strA}님은 나이가 ${numAge}이군요!`;- 참고 예제
<div class="section">
<div class="box_wrap">
<a href="https:~">뮤지컬 팬텀</a>
<img src="https:~" alt="뮤지컬 팬텀 배너이미지" />
</div>
</div>const link = "https~";
const img = "https~";
const title = "뮤지컬 팬텀";
const alt = "뮤지컬 팬텀 배너이미지";
let tag = '<div class="section">';
tag = tag + ' <div class="box_wrap">';
tag = tag + ' <a href="' + link + '"https:~">' + title + "</a>";const link = "https~";
const img = "https~";
const title = "뮤지컬 팬텀";
const alt = "뮤지컬 팬텀 배너이미지";
const tag = `
<div class="section">
<div class="box_wrap">
<a href="${link}">${title}</a>
<img src="${img}" alt="${alt}" />
</div>
</div>
`;const numA = 5;
const numB = 8;
const resultA = `${numA} + ${numB} = ${numA + numB}`;
const resultB = `${numA} - ${numB} = ${numA - numB}`;
const resultC = `${numA} * ${numB} = ${numA * numB}`;
const resultD = `${numA} / ${numB} = ${numA / numB}`;const a = 1; // number
const b = "1"; // string
// 1단계 number -> string 으로 물어보지 않고 변환 (암묵적 데이터 타입 변환)
const result = a + b; // number + string -> string- 연산자
const numA = 100;
const numB = 10;
const result = numA - numB; // 90const numA = "100"; // string
const numB = 10; // number
// string을 number로 암묵적 변환
// number - number
const result = numA - numB; // NaN ( Not a Number )* / 연산자
const numA = 4;
const numB = 2;
const resultMulti = numA * numB; // 8
const resultDevide = numA / numB; // 2- 총 게시글 52개
- 한 페이지당 5개 목록
- 몇 페이지가 필요한가?
- 마지막 페이지에서 보여주어야 하는 게시글 수?
const total = 52;
const count = 5;
const totalPage = total / count; // 소숫점 나옴
const totalPageNumber = Math.ceil(totalPage); // 올림
const lastCount = total % count; // 나머지 나옴const numA = 5;
let result = numA + 3; // 5 + 3 = 8
// 코딩에 의한 가독성이 떨어짐
// 하지만 프로그래머들은 많이 사용하는 방식
// result = result + 10;을 줄여서 작성
result += 10; // 18
// result = result - 5;
result -= 5; // 13
// result = result * 4;
result *= 4; // 52
// result = result / 2;
result /= 2; // 26
// result = result % 2;
result %= 2; // 0- 개발자는 타이핑 수를 줄이려고 노력
let num = 5;
num = num + 1;
num += 1;
num++;
++num;let num = 5;
num = num - 1;
num -= 1;
num--;
--num;let num = 20;
// 후에 배치된 후치연산 임
let numA = num--; // numA 에는 20 그리고 연산
num; // 19let num = 20;
// 전에 배치된 전치연산 임
let numA = --num; // numA 에는 19입니다. 그리고 연산
num; // 19무조건 이해해야 함falsy한 값의 종류(js에서 false라고 판단하는 값)
"";
0;
undefined;
null;
NaN;
false;- 최종 결과가 true 인지 false 인지 결과를 변수에 저장
- or 연산자 2개 중 1개만 true 이면 true, 나머지 false
let result = true || true;
result = false || false;
result = false || true;
result = "" || ture;
const userPass;
result = userPass || "비밀번호를 넣으세요.";- and 연산자 (그리고)
- 둘 다 true 면 ture, 아니면 false
- 변수에 결과값은 true, false 가 담겨진다
let result = true && true;
result = false && true;- not 연산자 (반대)
let result = !true;
result = !false;- 실습 예제
const nickName = "";
let displayName = nickName || "Guest";
console.log(displayName); // Guestjlet title = null;
let result = title || "제목 없음";
console.log(result);let totalMoney = 0;
let result = totalMoney || "장바구니가 비었습니다.";
console.log(result);let isLogin = true;
let result = isLogin && "환영합니다.";
console.log(result);let isAdmin = false;
let result = isAdmin && "관리자 메뉴 표시";
console.log(result);let config = {};
config.theme = config.theme || "light";
console.log(config); // {theme: "light"}let options = {
lang: null,
fontSize: 0,
};
let lang = options.lang || "ko";
let fontSize = options.fontSize || 20;// 데이터 값의 종류는 비교하지 않음
let resultA = "1" == 1; // true
// 데이터 값과 데이터 종류도 비교함
let resultB = "1" === 1; // false
let resultC = 1 > 2;
console.log(resultC);
let resultD = 1 < 2;
console.log(resultD);
let resultE = 1 >= 2;
console.log(resultE);
let resultF = 1 <= 2;
console.log(resultF);
let resultG = 1 != 2;
console.log(resultG);
let resultH = 1 !== 2;
console.log(resultH);- 내가 FrontEnd라면 반드시 알아야 함
- 일반적으로 기본값 세팅에서 활용
- falsy가 아니라
null, undefined일 때만 값을 비교할 경우 - 아래에서 기대한 코드는
0값이 나오길 기대하고 코드 진행
let userPoint = undefined;
let displayPoint = userPoint || 500000;
console.log(displayPoint);??연산자는 null과 undefined만 비교하고 나머지는||과 같음
let userPoint = undefined;
let displayPoint = userPoint ?? 500000;
console.log(displayPoint);let formInput = {
name: "",
email: null,
phone: undefined,
};
const name = forInput.name ?? "이름 없음";
const email = formInput.email ?? "이메일 없음";
const phone = formInput.phone ?? "전화 없음";- FrontEnd라면 알아야 함
- 객체의 속성 존재 여부에 따라 코드 진행
{속성:값,}
const user = {
profile: null,
};
const age = user.profile.age; // null Error 발생 후 서비스 멈춤- 연산자가 3개라서 3항 연산자라고 함
결과 = 조건식 ? 참일때 결과 : 거짓일때 결과- 활용 빈도가 너무 높음
const userRole = "ADMIN"; // 사용자 등급
// const url = 조건 ? 참 : 거짓;
const url = userRole === "ADMIN" ? "admin.html" : "guest.html";const age = 10;
const result = age < 19 ? "동의서 필요" : "성인 인증";const goodCount = 10;
const result = goodCount > 0 ? "재고가 있어요" : "재고가 없어요";const user = {
isLogin: true,
name: "아이유",
};
const result = user.isLogin ? `${user.name}님 반가워요.` : "로그인 해주세요.";let num = 5;
let result = num % 2 === 0 ? "짝수" : "홀수";참/거짓을 판단하여 코드 분기 실행- 모양1
if(조건) {
조건이 참이면 실행;
}- 모양2
if(조건) {
조건이 참이면 실행;
}else {
조건이 거짓이면 실행;
}- 모양3
if(조건) {
조건이 참이면 실행;
}else if(조건2) {
조건2이 참이면 실행;
}else if(조건3) {
조건3이 참이면 실행;
}else {
모든 조건이 거짓이면 실행
}- 예제) 로그인이 된 경우에 메세지 출력하기
const isLogin = true;
if (isLogin === true) {
console.log("로그인하셨네요. 반갑습니다.");
}
const isLogin = true;
if (isLogin) {
console.log("로그인하셨네요. 반갑습니다.");
}
// 아래 코드는 사용하지 않은걸 권장
const isLogin = true;
if (isLogin) console.log("로그인하셨네요. 반갑습니다.");- 예제) 로그인 된 경우의 메세지와 로그인 안된 경우의 메세지 출력하기
const isLogin = true;
if (isLogin) {
console.log("어서오세요.");
} else {
console.log("로그인 하셔야 합니다.");
}- 예제) 나이에 따라서 다른 메세지 출력하기
const age = 19;
if (age >= 19) {
console.log("성인이시네요.");
} else if (age >= 30) {
console.log("30대이시네요");
} else if (age >= 50) {
console.log("50대이시네요");
} else if (age >= 70) {
console.log("70대이시네요");
} else {
console.log("미성년자이시네요.");
}- 예) 사용자가 입력한 항목이 값이
없을 경우메세지 보내기(필수 입력 사항)
const name = "";
const pass = "1234";
const useInfoCheck = false; // 사용자 정보 활용 동의
const useEmailCheck = false; // 이메일 수신 동의
if (name === "") {
alert("이름을 입력하세요.");
return;
}
if (!name) {
alert("이름을 입력하세요.");
return;
}
if (pass === "") {
alert("비밀번호를 입력하세요.");
return;
}
if (!pass) {
alert("비밀번호를 입력하세요.");
return;
}
if (!useInfoCheck) {
alert("개인정보 동의를 체크해주세요.");
return;
}
if (!useEmailCheck) {
alert("이메일 수신 동의를 체크해주세요.");
return;
}
console.log("저희 서비스를 자유롭게 활용하세요.");여러 개의 값중 하나의값이 같은지 판단 후 실행 (값을 비교)
switch (값) {
case 비교값1:
실행 코드
break;
case 비교값2:
실행 코드
break;
case 비교값3:
실행 코드
break;
default:
실행 코드
break;
}- 예) 엘리베이터 층 예제
const layer = 5; // 값
switch (layer) {
case 1:
console.log("1층 내리세요.");
break;
case 2:
console.log("2층 내리세요.");
break;
case 3:
console.log("3층 내리세요.");
break;
case 4:
console.log("4층 내리세요.");
break;
case 5:
console.log("5층 내리세요.");
break;
default:
console.log("당신은 내릴 층이 없습니다.");
break;
}- if 와 switch 종합 예제
const userRole = "ADMIN";
if (userRole === "MEMBER") {
console.log("회원");
} else if (userRole === "ADMIN") {
console.log("관리자");
} else {
console.log("비회원");
}
switch (userRole) {
case "MEMBER":
console.log("회원");
break;
case "ADMIN":
console.log("관리자");
break;
default:
console.log("비회원");
break;
}- 주어진
횟수만큼반복 실행 (개발자가 반복횟수를 아는 경우)
for ( 초기값은 단 한번만 실행; 조건식의 결과가 true/false; 증감식은 조건식을 false 로 만들기 ) {
할일 코드 작성
}const total = 10; // 반복횟수
for (let i = 0; i < total; i++) {
console.log(`현재 ${i} 입니다`);
}// 장바구니 담긴 제품 가격 모음.
const bucketsArr = [1000, 500, 700, 400];
// 반복횟수
const total = bucketsArr.length;
// 반복문 없다면
let totalPrice = bucketsArr[0] + bucketsArr[1] + bucketsArr[2] + bucketsArr[3];
// 반복문을 활용한다면
for (let i = 0; i < total; i++) {
totalPriceFor = totalPriceFor + bucketsArr[i];
// totalPriceFor += bucketsArr[i]
}- 예) 제품의 이름과 가격 및 재고를 html 태그로 출력하는 예제
- 예) 백엔드에서 제품의 목록은 json으로 주어진다
// 백엔드에서 가져온 자료 json
const goodData = [
{ id: 542, name: "사과", price: 1000, stock: 10 },
{ id: 5557, name: "딸기", price: 2000, stock: 0 },
{ id: 2147, name: "키위", price: 5000, stock: 5000 },
];
// 반복횟수
const total = goodData.length;
for (let i = 0; i < total; i++) {
// 제품 1개를 뽑아서 보관한다
const good = goodData[i];
// html 만들기
const tag = `<div>
<p>제품명 : ${good.name}</p>
<p>가격 : ${good.price}</p>
<p>재고수량 : ${good.stock || "재고가 없어요"}</p>
</div>`;
}- 예) 구구단
- 가까운 for 구문에서
break는 반복문 빠져나오고 종료됨
const total = 9;
for (let i = 1; i <= total; i++) {
if (i === 6) {
break;
}
console.log(i + " 단");
for (let j = 1; j <= total; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}- 가까운 for 구문에서
continue는 반복문 실행 건너뛰고 계속 실행
const total = 9;
for (let i = 1; i <= total; i++) {
if (i % 3 === 0) {
continue;
}
console.log(i + " 단");
for (let j = 1; j <= total; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}- for 구문으로 모두 가능
- for 를
객체를 대상으로 편리하게 사용하도록 지원하는 문법
// for in 구문 예제
const singer = {
id: "123",
name: "아이유",
age: 30,
city: "서울",
};
// 개발자가 직접 알아내는 경우
console.log(singer.id);
console.log(singer.name);
console.log(singer.age);
//반복문 활용
for (let key in singer) {
console.log(key);
console.log(singer[key]);
}- for 구문으로 모두 가능
- for 를
배열, 문자열 등을 대상으로 편리하게 사용하도록 지원하는 문법 iterator즉,순서가 있는 데이터형에서 사용
const citiesArr = ["대구", "서울", "부산"];
for (let city of citiesArr) {
console.log(city);
}
const words = "안녕하세요";
for (let i of words) {
console.log(i);
}조건이 참인 동안 무한히 반복- 반복에 횟수를 모르는 경우
while(조건){
할 일;
반드시 거짓으로 만들어야 함
}let count = 0;
while (count < 5) {
// 거짓을 만들기 위한 조건을 작성함
count = count + 1;
console.log(count);
}- while과 다르게 일단 실행하고 조건 검사
do {
할일;
} while (조건);let count = 0;
do {
// 거짓을 만들기 위한 조건을 작성함.
count = count + 1;
console.log(count);
} while (count < 5);- 독립된 역할 별 기능을
{}묶고function 함수명()을 주어서 관리 - 여러번 재활용 함
- 문서 즉 설명서(JSDoc)가 잘 만들어져야 함
- 기능 예외처리를 잘 해야 함
-
반복되는 1줄 이상의 코드가 있다면 함수라는 것을 만들 생각해 보기
-
코드에 대한 가독성이 필요하면 함수라는 것을 만들 생각해 보기
-
한 번에 코드를 수정하여 다양한 곳에 동시에 반영되는 것을 원하면 함수라는 것을 만들 생각해 보기
-
코드의 안정성을 생각한다면 함수라는 것을 만들 생각해 보기
-
협업을 한다면 기능을 만들어서 재활용하여야 하며 이때 함수라는 것을 만들 생각해 보기
// 아래는 사용자의 명단과 반가워요라는 메세지를 출력하는 기능이다.
let user_1 = "홍길동";
let user_2 = "김길동";
let user_3 = "박길동";
let user_4 = "고길동";
let user_5 = "정길동";
console.log(user_1 + "님 반가워요.");
console.log(user_2 + "님 반가워요.");
console.log(user_3 + "님 반가워요.");
console.log(user_4 + "님 반가워요.");
console.log(user_5 + "님 반가워요.");- 기능을 구분해서 관리하고 싶을 때 (여기서는 회원명단 및 인사 기능)
function useMember() {
let user_1 = "홍길동";
let user_2 = "김길동";
let user_3 = "박길동";
let user_4 = "고길동";
let user_5 = "정길동";
console.log(user_1 + "님 반가워요.");
console.log(user_2 + "님 반가워요.");
console.log(user_3 + "님 반가워요.");
console.log(user_4 + "님 반가워요.");
console.log(user_5 + "님 반가워요.");
}
// 함수 활용, 함수 호출, 함수 call
useMember();
useMember();
useMember();
useMember();
useMember();// 함수 이름은 동사로 짓는다
function 함수명() {
기능1;
기능2;
기능3;
}
function 함수명(재료1, 재료2, 재료3) {
재료1 처리 기능1;
재료2 처리 기능2;
재료3 처리 기능3;
}- 단계 1.
// 계산기 만들기
const result_1 = 5 + 4;
const result_2 = 8 + 3;
const result_3 = 7 + 2;
const result_4 = 6 + 1;- 단계 2.
// 계산기 만들기
function result_1() {
5 + 4;
}
function result_2() {
8 + 3;
}
function result_3() {
7 + 2;
}
function result_4() {
6 + 1;
}- 단계 3. 재료만 다르고 하는 일은 + 기능임
// 계산기 만들기
function add(재료1, 재료2) {
재료1 + 재료2;
}
add(5, 4);
add(8, 3);
add(7, 2);
add(6, 1);- 단계 4. minus 기능 만들기
function minus(매개변수1, 매개변수2) {
매개변수1 - 매개변수2;
}
minus(5, 4);- 단계 5. 기능에 예외처리(오류 처리) 적용하기 -> 오류 : 원하지 않는 결과, Error도 모두 포함해서 오류라 생각함
function add(매개변수1, 매개변수2) {
// 방어코드 (예외처리)
if (매개변수1 === undefined) {
return alert("매개변수 1 을 입력하세요.");
}
if (매개변수2 === undefined) {
return alert("매개변수 2 을 입력하세요.");
}
매개변수1 + 매개변수2;
}
function minus(매개변수1, 매개변수2) {
매개변수1 - 매개변수2;
}
add(5, "100"); // 원하지 않는 결과이므로 오류
add(5, undefined); // 원하지 않는 결과이므로 오류
add(5); // 원하지 않는 결과이므로 오류- jsDoc 기본 이해
- 재료, 매개변수를 parameter 라고 합니다.
/*
* 두개의 변수를 받아서 덧셈하는 기능
* @param {number} numA - 첫번째 숫자
* @param {number} numB - 두번째 숫자
* @returns {number} 두 숫자의 덧셈결과
*/
function add(numA, numB) {
if (numA === undefined) {
return alert("첫번째 매개변수를 입력해주세요.");
}
if (numB === undefined) {
return alert("두번째 매개변수 입력해주세요.");
}
return numA + numB;
}/**
* 숫자 더하기 기능
* @param {number} a
* @param {number} b
* @returns {number} 덧셈 결과
*/
function add(a, b) {
return a + b;
}
/**
* 숫자 빼기 기능
* @param {number} a
* @param {number} b
* @returns {number} - 뺄셈 결과
*/
function minus(a, b) {
return a - b;
}
/**
* 숫자 곱하기 기능
* @param {number} a
* @param {number} b
* @returns {number} - 곱셈 결과
*/
function multi(a, b) {
return a * b;
}
/**
* 숫자 나누기 기능
* @param {number} a - number
* @param {number} b - number
* @returns {number} - 나눗셈 결과
*
* ------ 호출예 -----
* ```javascript
* let result = divide(5, 4)
* ```
*
*/
function divide(a, b) {
if (b === 0) {
return alert("분모는 0 이 아니어야 합니다.");
}
// 데이터 알아내고, 타입 비교하기
if (typeof a !== "number") {
return alert("분자는 숫자여야 합니다.");
}
if (typeof b !== "number") {
return alert("분모는 숫자여야 합니다.");
}
return a / b;
}
// 덧셈 사용
const resultAdd = add(5, 4);
const resultMinus = minus(5, 4);
const resultMulti = multi(5, 4);
const resultDivide = divide(5, 0);- 추가 함수
/**
* 숫자 더하기 기능
* @param {number} a
* @param {number} b
* @returns {number} 덧셈 결과
*/
function add(a, b) {
return a + b;
}
/**
* 숫자 빼기 기능
* @param {number} a
* @param {number} b
* @returns {number} - 뺄셈 결과
*/
function minus(a, b) {
return a - b;
}
/**
* 숫자 곱하기 기능
* @param {number} a
* @param {number} b
* @returns {number} - 곱셈 결과
*/
function multi(a, b) {
return a * b;
}
/**
* 숫자 나누기 기능
* @param {number} a - number
* @param {number} b - number
* @returns {number} - 나눗셈 결과
*
* ------ 호출예 -----
* ```javascript
* let result = divide(5, 4)
* ```
*
*/
function divide(a, b) {
if (b === 0) {
return alert("분모는 0 이 아니어야 합니다.");
}
// 데이터 알아내고, 타입 비교하기
if (typeof a !== "number") {
return alert("분자는 숫자여야 합니다.");
}
if (typeof b !== "number") {
return alert("분모는 숫자여야 합니다.");
}
return a / b;
}
/**
* 계산기 기능
* 계산기 기능은 +, -, *, / 기능이 있습니다.
* @param {string} symbol +, -, *, / 기호 중 1개 입력
* @param {number} a 숫자 입력
* @param {number} b 숫자 입력
* @returns {number} 결과는 숫자
*
* 사용 예) =================
*
* ```javascript
* const result = calcurator("+", 5, 4);
* ```
*/
function calcurator(symbol, a, b) {
if (typeof symbol !== "string") {
return alert("기호를 입력하세요.");
}
let result = 0;
switch (symbol) {
case "+":
result = add(a, b);
break;
case "-":
result = minus(a, b);
break;
case "/":
result = divide(a, b);
break;
case "*":
result = multi(a, b);
break;
default:
return alert("올바른 기호를 입력해 주세요.");
}
return result;
}/**
* 메세지를 콘솔에 출력하기
* @param {string} message - 출력할 메세지
*/
function showMessage(message) {
console.log(message);
}
showMessage("안녕");
showMessage("홍길동 반가워");/**
* 배열을 받아서 요소를 출력하는 함수
* @param {numer[]} arr - 숫자모음 배열
*/
function showArr(arr) {
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}/**
* 객체의 속성 값을 출력하는 기능
* @param { {id:number, nickName:string, age:number} } user - 사용자 객체
*/
function showUser(user) {
console.log(user.id);
console.log(user.nickName);
console.log(user.age);
}/**
* 나이를 10살 더하여서 출력
* @param {number} age - 현재 나이 입력
* ```javascript
* const result = showAge (10); // 20
*/
function showAge(age) {
return age + 10;
}/**
* 입력된 매개 변수 만큼 총합계산하기
* @param {number} numbers - 숫자 값
*/
function showTotal() {
console.log(arguments);
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total = total + arguments[i];
}
return total;
}
const result = showTotal(4, 5, 6, 7, 8, 9, 1, 2, 0);- Rest 파라메터는 전될된 매개변수에
정확한 값만 배열로 만든다.
/**
* 입력된 매개 변수 만큼 총합계산하기
* Rest 파라메터 이용하기
* @param {...number} numbers - 숫자 값
*/
function showTotal(a, b, ...rest) {
console.log(a);
console.log(b);
console.log(rest);
let total = 0;
for (let i = 0; i < rest.length; i++) {
total = total + rest[i];
}
return total;
}
const result = showTotal(4, 5, 6, 7, 8, 9, 1, 2, 0);- Rest 파라메터는 기본 매개변수 적용 후 , `나머지
-
- 일반적 함수 만드는 법
function 함수명(매개변수) {
return 결과값;
}
함수명(매개변수);-
변수의 값으로 함수 만드는 법
const 변수명 = function (매개변수) {
return 결과값;
};
변수명(매개변수);-
- 왜
const 변수명 = function 형태가 필요할까 ?
- 왜
function add() {
return 1 + 2;
}
// add();
const addFun = function () {
return 1 + 2;
};
// addFun();
const minusFun = function () {
return 1 - 2;
};
// minusFun();
function test(_func) {
_func();
}
test(add); // 값이 아니라서 안된다.
test(addFun);
test(minusFun);- 아래 코드는 특히 위치를 살펴보기 : 완성하고 사용하기
add(); // 호이스팅이 되므로 괜찮다
addFN(); // 호이스팅 에러 발생 (주의)
function add() {}
const addFN = function () {};-
코드가 너무 긴 경우(
하나의 결과를 만들기 위해 작성시) -> 코드 가독성이 너무 떨어져 추후에 분석이 곤란할 때 -> 하나의 결과를 만들기 위한 과정에서 너무 많은 코드가 작성이 될 때 -> 여려 줄이 작성되어서 한 개의 결과를 만든다면 함수로 묶어서 만들까? 고민 -
동일한 기능이 여러 번 사용될 때 -> 두 번이상 동일한 기능이라면 함수를 만들까? 고민 -> 두 번이상 동일한 기능인데 재료(매개변수)만 다르다? 고민
-
코드를 공유할 때 함수만들까? 고민
-
{}로 코드 블럭을 이용해서 묶어준다. -
이름을 짓는데,
동사로 지어준다.(기본 : Camel Case, 생성자함수 : Pascal Case) -
이름 뒤에
(재료, 재료)를 작성한다. (재료 = 매개변수 = paramter) -
function 키워드를 작성해준다.
-
JSDoc으로 사용설명서를 작성해 주면 좋다
- 함수이름();
- 함수명을 호출했다 or 함수명을 Call했다
- 넓이를 계산하는 기능, 그런데 2번이상 사용, 누군가에게 공유
/**
* 너비를 계산해 주는 함수
* @param {number} _height
* @param {number} _width
* @returns {number}
* 함수사용 예시
* ```js
* const result = calcRect(5, 4);
* ```
*/
function calcRect(_width, _height) {
return _width * _height;
}
// 함수 호출
const result = calcRect(5, 4);- 매개변수에 기본값을 지정할 수 있다.
function 함수명(매개변수 = 기본값) {}- 매개변수 개수에는 제한이 없다.
function 함수명(매개변수1, 매개변수2) {
const params = arguments; // 배열로 접근 가능
}
함수명(1, 2, 3, 4, 5);function 함수명(매개변수1, 매개변수2, ...res) {
const params = res; // 배열로 접근 가능
}
함수명(1, 2, 3, 4, 5);- 기본 함수 작성법 두 가지
// 기본 함수 정의
function 함수명() {}-
함수를
표현식(Expression)으로 만드는법 -
변수에 함수를 담는 이유는
함수에 매개변수에
// 함수 표현식 정의
const 함수명 = function () {};
const add = function () {
function calcFunc(_fn) {
add();
}
};
calcFunc(add);- 콜백함수는
특정한 이벤트가 발생 시 덩달아서 실행(추후 다시 할 예정)
- FE에서 함수 작성 시 많이 볼 수 있는 형태
- 활용 비율이 높다. 반드시 이해해 보자
-
함수가 간략해 진다
-
함수가 최적화 된다 (메모리 절약, 성능 최적화)
-
this의 범위가 고정된다 (추후 진행)
-
new를 사용할 수 없다 (추후 진행)
- 매개변수가 없는 경우
// 기본 함수
function say() {
console.log("안녕");
}
// 표현식 함수
const say = function () {
console.log("안녕");
};
// 화살표 함수
const sayArrow = () => {
console.log("안녕");
};
// 실행 코드가 한 줄이면 {}블럭 생략 가능
const sayArrow2 = () => console.log("안녕");- 매개변수가 오직
한 개 있을 때
// 기본 함수
function say(_word) {
console.log(_word);
}
// 표현식 함수
const say = function (_word) {
console.log(_word);
};
// 화살표 함수
const sayArrow = (_word) => {
console.log(_word);
};
// 실행 코드가 한 줄이면 {}블럭 생략 가능
const sayArrow2 = (_word) => console.log(_word);
// 실행 코드가 한 줄이면 {}블럭 생략 가능
// 매개변수 ()가 생략이 가능하다
const sayArrow3 = (_word) => console.log(_word);- 매개변수가
두 개 이상일 때
// 기본 함수
function say(_word, _name) {
console.log(_word + _name);
}
// 표현식 함수
const say = function (_word, _name) {
console.log(_word + _name);
};
// 화살표함수
const sayArrow = (_word, _name) => {
console.log(_word + _name);
};
// 실행 코드가 1 줄이면 {} 블럭 생략 가능
const sayArrow2 = (_word, _name) => console.log(_word + _name);
// 실행 코드가 1 줄이면 {} 블럭 생략 가능
// 매개변수 2개 이상은 ()가 필수
const sayArrow3 = (_word, _name) => console.log(_word + _name);- 변수 활용 가능한 범위
- 제일 중요한 것은
{}이다.
- 전역 범위 : Global Scope
- 지역 범위 : Local Scope
- 프로그램 어디서든 마음대로 접근해서 활용
// 전역 변수
const appName = "JavaScript World";
{
console.log(appName);
}
function say() {
console.log(appName);
}
say();// 전역 변수 자리
function say() {
console.log("안녕");
}
// 지역 변수 자리
{
say();
}
say();{}블록 안쪽을지역범위라고 합니다.
{
// 지역 변수
const appName = "JavaScript World";
console.log(appName);
}
function say() {
console.log(appName);
}
say();- 아래는 정상적으로 실행된다.
function 키워드는 전역 범위에 등록이 된다.- 개발자의 선택권한 없다.
// 전역 자리
// 지역 자리
{
function say(_name) {
console.log(_name + " 안녕");
}
say("홍길동");
}
say("박길동");- function 은 전역에 등록되므로 예측 곤란
- 아래 코드는 협업 실패 :
function은 전역에 등록해서 쓰자 function은 지역에 코드하지 말자.
// 전역 자리
// 개발자: 홍길동 지역 자리
{
function say(_name) {
console.log(_name + " Hello");
}
say("홍길동");
}
// 개발자 : 고길동 지역자리
{
function say(_name) {
console.log(_name + " 반가워");
}
say("고길동");
}
say("테스터");- 아래를 추천함.
// 전역 자리
function say(_word) {
console.log("기본 실행 함수 : " + _word);
}
// 개발자: 홍길동 지역 자리
{
const say = function (_name) {
console.log(_name + " Hello");
};
say("홍길동");
}
// 개발자 : 고길동 지역자리
{
const say = function (_name) {
console.log(_name + " 반가워");
};
say("고길동");
}
say("테스터");- 화살표로 고치면
// 전역 자리
function say(_word) {
console.log("기본 실행 함수 : " + _word);
}
// 개발자: 홍길동 지역 자리
{
const say = (_name) => console.log(_name + " Hello");
say("홍길동");
}
// 개발자 : 고길동 지역자리
{
const say = (_name) => console.log(_name + " 반가워");
say("고길동");
}
say("테스터");console.log(this); // Window{....console.log(this);
function say() {
console.log(this); // Window{....
function hi() {
console.log(this); // Window{....
}
hi();
}
say();console.log(this);
const say = function () {
console.log(this);
};
say();-
this는 동일한 스코프를 가르쳐서 값이 변할 위험이 존재
-
this는 의사와 상관없이 var 변수를 만들고 window 변수에 등록
var brand = "nike";
function now() {
this.brand = "adidas";
}
console.log("함수 실행 전 : ", brand);
now();
console.log("함수 실행 후 : ", brand);-
객체에서 this는 객체 전체를 가르킨다
-
어? function을 사용하니까
this가 상황에 따라서 변하는데?
const Person = {
name: "아이유",
age: 20,
sayHi: function () {
console.log(this);
},
};
Person.sayHi();- 생성된 객체가 this가 된다
// 대문자 즉 Pascal
function Coffee() {
console.log(this);
}
Coffee();
new Coffee();- function에 작성한 곳에 this는
어디서 함수를 사용했는가에 따라 다르다
function say(){
this 는 ? window가 된다.
}
say(); 지금은 global 영역 즉, window 에서 사용했음const Person = {
say: function (){
this ?
}
}
Person.say(); 지금은 Person이 say 함수를 사용했음- 과연 출력 결과는 무엇이 나올까?
const Person = {
name: "아이유",
say: function () {
console.log(this.name);
},
};
Person say();- 화살표 함수는
상위 스코프를 말함
// 여기는 window
const say - () => {
console.log(this); //현재의 상위 범위
// window 출력됨
};
say();const Person = {
name: "아이유",
say: function () {
console.log(this); // 객체가 호출
console.log(this.name); // 객체.name 찾는다
setTimeout(function () {
console.log(this); // window 가 호출
console.log(this.name); // window.name 찾는다
}, 3000);
},
sayArrow: function () {
console.log(this); // 객체가 호출
console.log(this.name); // 객체.name 찾는다.
setTimeout(() => {
console.log(this); // 화살표는 나보다 위에 영역
console.log(this.name); // 위에 영역.name
}, 3000);
},
};
Person.sayArrow();new 키워드를 붙여서 함수를 호출함
function Person(_name) {
console.log(this);
}
new Person();- 목적이
객체를 생성하는 것
class Person {
// 클래스에서 메소드 함수 만드는 법
// 메소드명(){}
// 객체를 생성하는 함수 : 변경 불가
// 디폴트 객체 생성자 함수
constructor(_name, _age) {
console.log("new 하면 자동 실행");
console.log(_name);
this.name = _name;
this.age = _age;
}
}
const a = new Person("둘리", 500000);
console.log(a);메소드명() { 할일 }
class Person {
constructor(_name, _age) {
this.name = _name;
this.age = _age;
}
// say 라는 메소드
say() {
console.log(this.name);
}
}
const a = new Person("둘리", 500000);
a.say();- Property : 프로퍼티
- constructor 메소드에서 만든다.
constructor(_name, _age) {
this.name = _name;
this.age = _age;
}- 1단계
// 동물
class Animal {
constructor(eye, nose) {
this.eye = eye;
this.nose = nose;
}
}
const a = new Animal(2, 1);
console.log(a);
// 강아지
class Dog extends Animal {
constructor() {
super(2, 5); // new Animal();
this.name = "강아지";
}
}
const b = new Dog();
console.log(b);
// 새
class Bird extends Animal {
constructor() {
super(2, 1);
this.name = "이쁜새";
}
}
const c = new Bird();
console.log(c);- 2단계
// 동물
class Animal {
constructor(eye, nose) {
this.eye = eye;
this.nose = nose;
}
speak() {
console.log("소리를 내요");
}
}
const a = new Animal(2, 1);
a.speak();
console.log(a);
// 강아지
class Dog extends Animal {
constructor() {
super(2, 5); // new Animal();
this.name = "강아지";
}
speak() {
console.log("멍멍이라고 소리를 내요");
}
}
const b = new Dog();
b.speak();
console.log(b);
// 새
class Bird extends Animal {
constructor() {
super(2, 1);
this.name = "이쁜새";
this.city = "대구";
}
speak() {
console.log("짹짹이라고 소리를 내요");
}
}
const c = new Bird();
c.speak();
console.log(c);- 프로퍼티와 메소드를 활용하는
- 만약 java 라면
public : 마음대로 접근가능, 공유하는
private : 사적인 즉, 클래스 내부에서만 접근가능
protected : 상속 받은 클래스들만 접근 가능- 만약 javascript 라면
public : 마음대로 접근가능, 공유하는
# : 사적인 즉, 클래스 내부에서만 접근가능(private 역할)class MathCalc {
static add(a, b) {}
static minus(a, b) {}
}
MathCalc.add(3, 4);
MathCalc.minus(3, 4);
const a = new MathCalc();
a.add(3, 4); // 에러 : 생성된 객체로 접근 불가call은 함수를 실행(호출)한다는 의미- 일반 함수에
매개변수로 전달된 함수를 callback 함수라 칭한다.
- 주로 사용자 행동에 따른
이벤트 발생시 실행하는 함수 - 서버 연동하여 자료를 호출하는
이벤트 발생시 실행하는 함수
const say = function () {};
const cry = () => {};
// 매개변수로 전달된 함수 실행
function run(a) {
a();
}
run(say);
run(cry);
// 아래 추천함.
run(function () {});const bt = document.querySelector(".bt");
bt.addEventListener("click", function () {});객체 리터럴로 생성리터럴(literal)이라는 단어는 꼭 정의해 두길 권장- 리터럴은 정해진
값을 개발자가 직접 작성해 주는 것 - 숫자 리터럴, 문자열 리터럴, 배열 리터럴, 객체 리터럴 등
const 객체 = {
객체키명: 키값,
객체키명: 키값,
};- 만약 객체를 1개씩 만든다면 즉,
객체리터럴로 생성한다면 객체명은Camel Case로
const personInfo = {
nickName: "아이유",
age: 20,
job: "singer",
};객체 생성자 함수를 이용하는 법 (함수 이름이Pascal Case)
function PersonInfo(_name, _age) {
this.nickName = _name;
this.age = _age;
this.job = "singer";
}
const 아이유 = new PersonInfo("아이유", 20);
const BTS = new PersonInfo("BTS", 20);클래스를 이용하는 법 (클래스 이름이Pascal Case)
class PersonInfo {
constructor(_name, _age) {
this.nickName = _name;
this.age = _age;
this.job = "singer";
}
}
const 아이유 = new PersonInfo("아이유", 20);
const BTS = new PersonInfo("BTS", 20);const student_1 = {
name: "홍길동",
age: 10,
};
const student_2 = {
name: "둘리",
age: 2000,
};
function Student(_name, _age) {
this.name = _name;
this.age = _age;
}
const student_1 = new Student("홍길동", 20);
const student_2 = new Student("둘리", 2000);- 기능은 흔히
메소드(Method)또는행위(Behavior)라고 호칭 - 객체 리터럴로 메소드 추가해 보기
const student_1 = {
name: "홍길동",
age: 20,
// 정확하게는 Property 로 기능 정의하기
sayName: function () {
this.name; // 객체
},
// 화살표 함수는 곤란합니다.(주의하자)
sayAge: () => {
this.age; // window
},
// 가장 최신 문법으로서 정확히 메소드 임을 표현
sayHi() {
this.age;
},
};- 위의
객체 생성자 함수로 수정해 보자.
function Student(_name, _age){
this.name = _name;
this.age = _age;
this.sayName = function () {
console.log(this.name); // 객체
},
// 아 위험하다. 화살표 주의
this.sayAge = () => {
console.log(this.age); // window
},
// this.sayHi = () {
// console.log(this.age);
// },
}
// 같은 리소스를 사용할 때는 prototype 쓰자
Student.prototype.sayHi = function(){}
const student_1 = new Student("홍길동", 20)class Student {
constructor(_name, _age) {
this.name = _name;
this.age = _age;
}
sayName() {
this.name;
}
// 화살표 독특하다. class 의 화살표는 객체
sayAge = () => {
this.age;
};
sayHi() {
this.name;
}
}
const student_1 = new Student("홍길동", 20);정말 중요함 : Vue, React 에서는 기본이 객체 생성으로 시작함.정말 중요함 : Vue, React 에서는 화살표 함수를 기본으로 함.객체 생성자 함수,클래스의 화살표 함수에서의this 는 모듈 객체를 가르킨다.
- 데이터 종류와 상관없이 여러개를
인덱싱(순서대로)할 수 있습니다.
// 가장 많이 함(배열 리터럴)
const 배열명 = [요소, 요소, 요소];
// 추천하지 않음
const 배열명 = new Array(3);const 배열 = [1, "안녕", false, function () {}];
배열[0];
배열[1];
배열[2];
배열[3];const 배열 = [1, 3, 5];
배열.length; // 3개- 일반적 데이터 형태 :
[{},{},{},{}] - 배열을 프로그래밍에서 많이 다루므로
미리 함수를 제공함(빌트인 함수). - 주의 사항으로서
절대로 원본을 훼손하지 말아야 함.
- 쓰지 않기를 권장
- push() : 배열
끝에 추가
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.push("커피");
console.log(lunchArr);
// 커피 추가 (원본 훼손)
// [ "사과", "딸기", "과자", "햄버거", "커피"]- pop() :
끝요소 제거 및 제거된 요소 반환
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.pop();
console.log(lunchArr);
// 햄버거 제거 (원본 훼손)
// [ "사과", "딸기", "과자"]- unshift() :
앞요소 추가
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.unshift("커피");
console.log(lunchArr);
// 햄버거 앞자리 추가 (원본 훼손)
// ["커피", "사과", "딸기", "과자", "햄버거"]- shift() :
앞 첫번째요소 제거
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.shift();
console.log(lunchArr);
// 햄버거 앞자리 제거 (원본 훼손)
// ["딸기", "과자", "햄버거"]- splice() :
원하는 인덱스부터 추가, 제거
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.splice(1, 2);
console.log(lunchArr);
// 인덱스로 부터 개수만큼 제거 (원본 훼손)
// ["사과", "햄버거"]- sort() : 배열의 순서를 정렬하기
const lunchArr = ["사과", "딸기", "과자", "햄버거"];
lunchArr.sort();
console.log(lunchArr);
// ['과자', '딸기', '사과', '햄버거']
const enArr = ["k", "o", "r", "e", "A", "j", "p", "a", "n"];
// 원본훼손
enArr.sort();
console.log(enArr);
// ['A', 'a', 'e', 'j', 'k', 'n', 'o', 'p', 'r']
const numArr = [1, 2, 12, 25, 37, 30];
// 원본훼손
numArr.sort();
console.log(numArr);
// 단순히 sort() 를 사용하면 앞 글자를 기준으로 정렬됨.
// [1, 12, 2, 25, 30, 37]
// 내림 차순으로 정렬해 보자.
// numArr.sort((a, b) => b - a);
// [37, 30, 25, 12, 2, 1]
// 올림 차순
numArr.sort((a, b) => a - b);
console.log(numArr);
// [1, 2, 12, 25, 30, 37]- reverse() :
역순순서를 뒤집어 저장
const numArr = [1, 2, 12, 25, 37, 30];
// 원본 훼손
numArr.reverse();
console.log(numArr);
// [30, 37, 25, 12, 2, 1]- fill() : 요소에 값을 채운다.
const numArr = [1, 2, 12, 25, 37, 30];
// 원본 훼손
// numArr.fill(0);
console.log(numArr);
// [0, 0, 0, 0, 0, 0]
// 값 1 을 채워라
// 인덱스 3번으로 부터
// 인덱스 5번 전까지
numArr.fill(1, 3, 5);
console.log(numArr);
// [1, 2, 12, 1, 1, 30]- flat() :
배열을 평탄화사용합니다. : flat 을 위한 별도의 라이브러가 존재합니다. : react 에서 모듈을 설치해서 사용합니다.
const numArr = [1, 2, 3, ["a", "b", "c"], 8, 9];
// flat(배열의 단계)
const result = numArr.flat(1);
console.log(result);
// [1, 2, 3, 'a', 'b', 'c', 8, 9]
const num2Arr = [1, 2, [3, [4, [5, 6]]], 100];
const result2 = num2Arr.flat(1);
console.log(result2);
// [1, 2, 3, Array(2), 100]
const result3 = result2.flat(1);
console.log(result3);
// [1, 2, 3, 4, Array(2), 100]
const result4 = result3.flat(1);
console.log(result4);
// [1, 2, 3, 4, 5, 6, 100]데이터 불변성(immutability)유지하셨나요?
- map()
star가 1000만개가치가 있고, 자주활용- 원본 배열의 요소에 동일한 함수 실행 후 새로운 배열로 생성
const originArr = ["홍길동", "고길동", "김수한무"];
const copyArr = originArr.map(function (item, index, arr) {
// console.log(`item : ${item}, index: ${index}`);
const tag = `<div class="user-info">${item}</div>`;
console.log(tag);
// 리턴해야 배열이 담깁니다.
return tag;
});
console.log(`원본 originArr : ${originArr}`);
console.log(`복제본 copyArr : ${copyArr}`);
const copyArrowArr = originArr.map((item, index) => {
return `<a href="${index}">${item}</a>`;
});
console.log(`복제본 copyArrowArr : ${copyArrowArr}`);- filter()
조건에 참인 것만 모아서 배열 리턴- 자주 사용은 합니다.
const memberHong = {
age: 10,
name: "홍길동",
role: "GUEST",
};
const memberKim = {
age: 18,
name: "김수한무",
role: "MEMBER",
};
const memberPark = {
age: 25,
name: "박둘리",
role: "ADMIN",
};
const originArr = [memberHong, memberKim, memberPark];
const result = originArr.filter((item, index) => {
// return item.role === "ADMIN";
return item.age <= 20;
});
console.log(result);- slice()
- 배열의 일부를 복사한다.
const numArr = [1, "a", "b", 4];
// 시작 인덱스로 부터 도착 인덱스 미만 요소 출력
const nowArr = numArr.slice(1, 3);
console.log(numArr);
console.log(nowArr); // ['a', 'b']- concat();
- 배열을
합쳐서하나의 배열을 리턴.
const numArr1 = [1, "a", "b", 4];
const numArr2 = [8, 100];
const result = numArr1.concat(numArr2);
console.log(result);
// [1, 'a', 'b', 4, 8, 100]- reduce();
- 배열의 요소를 탐색하면서 누적 연산함.
- 누적된 결과를 출력함.
const numArr1 = [1, 2, 3, 4];
// 문법이 좀 다릅니다.
// 보통은 ===> (item, index, arr)
// const total = numArr1.reduce(함수, 초기값)
const total = numArr1.reduce((acc, cur) => {
console.log("acc : ", acc);
console.log("cur : ", cur);
return acc + cur;
}, 0);
console.log("total : ", total);- join();
- 문자열로 배열을 연결한 결과를 만든다.
const numArr1 = [1, 2, 3, 4];
// 기본은 , 연결된 글자
const result = numArr1.join("#");
// 결과는 string
console.log(`typeof ${typeof result} , ${result}`);
// typeof string , 1#2#3#4- indexOf();
- 찾는 요소가 몇번째 인덱스 인지를 파악
const numArr1 = [1, 2, 3, 4];
// 기본은 , 연결된 글자
const result = numArr1.indexOf(3);
console.log(`typeof ${typeof result} , ${result}`);
// typeof number , 인덱스 2- includes();
- 요소가 포함되었는지 아닌지
const numArr1 = [1, 2, 3, 4];
// 기본은 , 연결된 글자
const result = numArr1.includes(3);
console.log(`typeof ${typeof result} , ${result}`);
// typeof boolean , true- 배녈에서 사용하는 경우 반복문 문법
const arr = [1, 2, 3, 4];
//가장 보편적인 방식
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 배열의 요소 반복문 버전
arr.forEach(function (item) {
console.log(item);
});
// 배열의 for of 문
for (const item of arr) {
console.log(item);
}
// 배열의 map : 새로운 배열을 만듦
const now = arr.map(function (item) {
return item;
});- 객체에서 사용하는 경우의 반복문 문법
const person = {
age: 10,
nickName: "hong",
isMember: false,
};
// 객체의 속성명 알아내기
for (let key in person) {
console.log(key); // age, nickName, isMember
}
// 객체의 속성에 보관하는 값 알아내기
for (let key in person) {
console.log(person[key]); // 10, hong, false
}- 배열
const arr = ["사과", "딸기", "참외"];
// 아래처럼 요소 값을 알아내는 것은 비추천
arr[0];
arr[1];
arr[2];
// 반복문으로 알아내기
for (let i = 0; i < arr.length; i++) {
arr[i];
}배열 Spread 문법(매우 중요)- 배열의 요소를 알아내고,
- 배열의 요소를 복사하고,
- 새로운 배열에 담아주고
const arr = ["사과", "딸기", "참외"];
// 아래처럼 하지는 않습니다.
const apple = arr[0];
const straw = arr[1];
const melon = arr[2];
// 배열 Spread 문법
const [apple, straw, melon] = [...arr];
// 두 배열을 Spread 문법으로 합치기
const numArr = [1, 2, 3];
const strArr = ["a", "b", "c"];
// [1, "a", "b", "c", 2, 3]
// 아래처럼 권장하지는 않습니다.
const sampleArr = [1, strArr[0], strArr[1], str[2], 2, 3];
// Spread 활용
const resultArr = [1, ...strArr, 2, 3];
// 구분하세요. (Rest 파라메터 문법)
function showArr(...rest) {}- 객체
const person = {
age: 10,
nickName: "hong",
isMember: false,
};
// 아래처럼은 비추천
const newPerson = {
age: person.age,
nickName: person.nickName,
isMember: person.isMember,
};
// 객체 Spread 문법
const nowPerson = { ...person };
// 두개의 객체를 합치기
const a = { age: 10, name: "hong" };
const b = { city: "대구", year: 2025 };
const result = { ...a, ...b };
// 결과 { age: 10, name: "hong", city: "대구", year: 2025 }
// 원본 객체 복사하고 새로운 속성 추가하기
const ari = { a: 1, b: "안녕" };
const now = { ...ori, gogo: "happy" };
// now { a:1, b:"안녕", gogo:"happy" }
// 함수에 매개변수로 객체를 복사해서 전달하기
const user = { name: "아이유", age: 20 };
function show() {}
show({ ...uesr });비동기는 시간이 오래 걸리는 작업- 예) 데이터 서버에서 자료를 요청(Request) 및 응답(Response)
- 예) 데이터 서버에서 파일 전송 시
- 비동기 작업 중에 결과를 기다리지 않고 다른 작업을 병렬로 실행하도록
- XHR (Xml Http Request)
- Callback
- Promise
- async/await
- https://chromewebstore.google.com/detail/attack-on-titan-mikasa-ac/fnkgikmcdjhcjoeghbcjkimaeoippblk
- https://www.data.go.kr/index.jsp
- 서버와 통신하는 작업을 위해서 기본적으로 제공이 됨.
Request: 요청, url로 자료를 요청한다Response: 응답, url로부터 자료를 돌려받는다- status 200 류의 값 : 정상적으로 자료를 응답함
- status 400 류의 값 : url이 존재하지 않음
- status 500 류의 값 : 데이터 서버가 오류거나 전원이 꺼짐
- https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status
- 자료 응답 후 처리하기
// 데이터 서버에 자료를 호출함.
function getData(api = "posts", fn) {
// 1. xhr 객체 한개 만듦
const xhr = new XMLHttpRequest();
// 2. 주소를 연결함
xhr.open("GET", `https://jsonplaceholder.typicode.com/${api}`);
// 3. 웹브라우저로 요청을 합니다.
xhr.send();
// 4. 요청 이후 응답이 오기를 기다린다.
xhr.onload = function () {
//console.log("요청이 되어졌을 때 백엔드 회신정보 : ", xhr);
if (xhr.status === 200) {
// console.log("정상적인 Response 됨 : ", xhr.response);
// 콜백함수 : 자료가 오면 자료를 활용하고 싶다.
fn(xhr.response);
} else if (xhr.status === 404) {
console.log("주소가 잘못되었네요.");
} else if (xhr.status === 505) {
console.log("서버에 오류입니다. 잠시 후 시도해 주세요.");
}
};
}
// 콜백함수 만들기 : 자료가 들어오면 처리함.
const postsParser = function (res) {
console.log(res);
};
const commentsParser = function (res) {};
const albumsParser = function (res) {};
const photosParser = function (res) {};
const todosParser = function (res) {};
const usersParser = function (res) {};
// 함수 사용
getData("posts", postsParser);
getData("comments", commentsParser);
getData("albums", albumsParser);
getData("photos", photosParser);
getData("todos", todosParser);
getData("users", usersParser);- 서버 연동이 끝날 때 원하는 콜백함수 실행
- 두 개의 매개변수를 전달 받는다
- resolve 콜백함수 : 성공 시 실행함수
- reject 콜백함수 : 실패 시 실행함수
// 데이터 서버에 자료를 호출함.
function getData(api = "posts") {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open("GET", `https://jsonplaceholder.typicode.com/${api}`);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
// 성공
resolve(xhr.response);
} else if (xhr.status === 404) {
// 실패
reject("데이터 없어요.");
} else if (xhr.status === 505) {
console.log("서버가 불안정합니다. 잠시 후 재접속해주세요.");
}
};
});
}
// 함수 사용
getData("posts")
.then(function (data) {
return getData("comments");
})
.then(function (data) {
return getData("albums");
})
.then(function (data) {
return getData("photos");
})
.then(function (data) {
return getData("todos");
})
.then(function (data) {
return getData("users");
})
.catch(function (err) {});- 강력히 추천
- Promise 를 편하게 쓰기위해서 최신 문법 제공
function 키워드 앞 쪽에 async를 작성BE 연동 쪽에 await를 작성- 1단계
async function getAllData() {
try {
} catch (error) {}
}
getAllData();- 2단계
async function getAllData() {
try {
const apiUrl = "https://jsonplaceholder.typicode.com";
// BE 데이터 연동 시도
let res = await fetch(`${apiUrl}/posts`);
let data = await res.json();
console.log(data);
res = await fetch("https://jsonplaceholder.typicode.com/comments");
data = await res.json();
console.log(data);
res = await fetch("https://jsonplaceholder.typicode.com/albums");
data = await res.json();
console.log(data);
res = await fetch("https://jsonplaceholder.typicode.com/photos");
data = await res.json();
console.log(data);
res = await fetch("https://jsonplaceholder.typicode.com/todos");
data = await res.json();
console.log(data);
res = await fetch("https://jsonplaceholder.typicode.com/users");
data = await res.json();
console.log(data);
} catch (error) {
console.log("ERROR 입니다. : " + error);
}
}
getAllData();