continue문 - 반복문을 제어해주는 옵션 첫번째
반복문이 실행이 되다가 특정 조건에서 다음 순번으로 스킵이 가능하다.
for(let i = 1; i <=10; i++){
if(i%2 ==1){ //i를 2로 나눈 나머지 값이 1일경우
continue; // 다음 순번으로 스킵
}
console.log(i);
}
break문 - 해당 반복문을 완전히 종료시킨다.(반복문 강제종료)
while, do while 문에서 주로 사용된다.
특정 조건에서 작업이 완료되고, 그 이후에 반복을 실행하지 않아도 되는 경우 사용한다.
for(let i = 0; i <10; i++){
if(i == 4){ // i가 4가 되었을때
break; // 해당 반복문을 완전히 종료.
}
console.log("break연습 ",i);
}
다양한 데이터의 집합체인 배열
//배열 - 인덱스(index)와 배열요소(element)로 이루어진 데이터의 집합체
// index(인덱스) : 배열에서 사용되는 참조되는 정렬값
// 항상 0부터 시작한다.
// 음수가 올 수 없다.
// 최대 index값은 length보다 1이 적다.
// element(배열요소) : 다양한 타입의 데이터가 취급된다.
// 배열의 길이(length) : 배열갯수의 카운트(count)
//배열의 생성
let arr1 = [1,2,3]; //***배열을 표기하는[]을 이용하여 배열 생성***
let arr2 = Array("1",2,true); //Array객체를 이용하여 배열 생성
let arr3 = new Array("5",true,6); //new연산자를 이용하여 Array객체 생성
//배열에 접근(참조)
// 배열변수[인덱스값] : 해당배열변수의 인덱스값에 해당하는 값을 가져온다.
console.log(arr1[1]);
//배열의 특정 값을 수정
arr1[1] = true;
console.log(arr1);
//배열에 새로운 값 추가
arr1.push("다이어트"); //push()함수를 이용한 새로운 값 추가
console.log(arr1);
arr1[10] = "10번째 데이터"; //임의의 인덱스를 지정하여 값 추가
console.log(arr1);
arr1[arr1.length] = false; // 배열변수의 length를 이용하여 값 추가.
console.log(arr1);
//i는 0부터 시작하여 arr1배열변수의 길이보다 작을동안 1씩 증가하면서 실행
// 0~11까지 실행
for(let i = 0; i < arr1.length; i++){
console.log("배열의 i번째 값을 출력 : ",arr1[i]);
}
//배열생성 - 좋아하는 과일을 배열변수로 표현해봅시다.
// 과일은 5개 입력
// 변수명은 fruits로 통일
console.log("--------배열조작연습-------");
let fruits = ["사과","딸기","블루베리","바나나","포도"];
// 배열의 끝에 있는 데이터 삭제
fruits.pop(); // 배열의 마지막 요소 삭제
console.log(fruits);
// 배열변수 fruits에 과일을 하나 추가 해봅시다.
fruits[fruits.length] = "망고";
console.log(fruits);
// 과일중에 인덱스 1번째 과일을 다른 과일로 수정해봅시다.(중복안되게)
fruits[1] = "체리";
console.log(fruits);
// 배열안에서 특정 요소가 포함되었는지 여부 (외부에서 데이터 갖고 왔을때 확인할때 씀)
console.log(fruits.includes("망고"));
// includes함수를 통해 배열의 값이 있다면 true, 없다면 false를 반환한다.
let loginUser = "이순신"; // 현재 로그인 한 사람
let members = [ // 우리 사이트의 회원목록
{name : "홍길동", role: "일반회원"},
{name : "이순신", role: "관리자"},
{name : "임꺽정", role: "일반회원"}
];
for(let i = 0; i<members.length; i++){
if(loginUser == members[i].name){ // 로그인한 사람이 우리 회원인지 부터 체크
console.log("우리 회원입니다.");
if(members[i].role == "관리자"){
console.log("관리자님 어서오세요.");
}else{console.log("회원님 환영합니다.");}
}
}
// 배열의 요소의 위치를 확인해주는 indexOf()함수
let sports = ['축구','야구','농구'];
console.log( sports.indexOf('배구'));
if(sports.indexOf('야구') > -1) { //배열에 특정 요소가 있는지 여부를 체크할 수 있다.
// 예전에 ie를 지원해야할때 includes함수가 작동안돼서 많이 사용 되기도 했다.
console.log('sports배열에 해당 운동이 존재합니다.');
}
//배열 복사
let food = ['라면','삼겹살','떡볶이','탕수육'];
let dinnerMenu = [];
//반복문을 이용한 배열 복사
for(let i=0; i<food.length; i++){
// dinnerMenu[i] = food[i];
dinnerMenu.push(food[i]);
}
console.log(dinnerMenu);
// 배열복사를 이용하여 food변수의 음식 중 떡볶이만 삭제해봅시다.
let dinnerMenu1 = [];
//반복문을 이용한 배열 복사
for(let i=0; i<food.length; i++){
if(food[i] == '떡볶이'){ //food 변수에서 i번째가 떡볶이라면
continue; // 해당 실행문은 스킵한다.
}
dinnerMenu1.push(food[i]); // dinnerMenu1 배열변수의 마지막 인덱스값에 food[i]를 추가한다.
}
console.log(dinnerMenu1);
//해당배열변수의 요소를 순회하면서 조건에 맞는 요소들의 배열을 생성 - filter()함수
let nums = [1,2,3,4,5];
let result = nums.filter(num => { //nums배열변수를 num이라는 변수로 순회한다.
console.log("nums를 순회 : ",num); //num변수에는 nums에 있는 각 요소들이 저장되어있다.
return num % 2 == 0; // num을 2로 나누었을때 나머지가 0인 요소만 반환(return)해준다.
});
console.log(nums);
console.log(result);
//filter함수를 이용하여 food배열변수 중에 떡볶이만 삭제하여 새로운 배열을 생성 해봅시다.
let menu = food.filter(i => {
return i !== "떡볶이"; // 배열요소중에서 떡볶이가 아닌 요소들로 새로운 배열 생성
});
console.log(menu);
// 배열을 활용하여 성적데이터를 생성
// 변수명은 eng
// 배열변수 eng에 들어갈데이터는 다음과 같다.
// 90, 87, 65, 49 -> 타입은 number
// eng에 저장된 점수들의 합계와 평균을 출력해봅시다.
let eng = [90, 87, 65, 49];
let sum=0;
for(i=0;i<eng.length;i++){
sum += eng[i];
}
console.log("점수들의 합계 : ",sum);
console.log("점수들의 평균 : ",sum/eng.length);
// 문자열도 배열과 같이 index값을 가지고 있다.
// 한글자 한글자가 하나의 index값을 가지고 있다.
// "",'' 안에서 공백도 문자열에 포함이 된다.
let str = " ";
console.log(str.length);
JS 특정 기능을 구현하도록 도와주는 함수-function
함수(function) - JS에서 특정 작업을 수행하도록 설계된 독립적인 블록
//함수의 형태
/*
function 함수이름([매개변수]){
수행문;
[반환값이있을때] return 반환값;
}
*/
// 매개변수 : 함수를 호출할때 전달되는 변수, 함수 내부에서 사용할수 있다.
// 반환값(반환문, return문) : 함수가 실행되고 결과를 호출한곳으로 되돌려주는 역할.
let a = 1, b = 2;
let result = 0;
- 매개변수(parameter, argument)와 반환값이 없는 함수
function add(){ //add함수 작성
result = a+b; // result변수에 a,b를 더해서 저장까지만.
}
add(); // 함수호출(실행)을 해줘야 함수가 실행이 된다.
console.log("add함수 호출 : ", result);
- 매개변수는 없고, 반환값은 있는 함수
function add1(){
// result = a+b;
return a+b; //a,b가 더해져 저장된 변수 result를 호출한곳으로 되돌려 준다.
}
console.log("add1함수 호출 : ",add1());
- 매개변수는 있고, 반환값은 없는 함수
let result2 = 0;
function add2(x, y){//add2함수가 호출이 될때 매개변수 x,y라는 이름으로 데이터를 전달받는다.
console.log(`x의 값 : ${x} , y의 값은 : ${y}`);
result2 = x + y;// 매개변수로 전달받은 x,y를 더해서 result2변수에 저장하고 할일끝.
}
add2(a,b); //함수add2를 매개변수를 설정하고 호출한다.
console.log( result2 );
ex)
function add3(a,b){
let result = a+b;
console.log("add3함수에서 출력 : ",result);
}
add3(1,2);
- 매개변수,반환값 둘다 있는 함수
function add3(i,z){//함수 add3은 매개변수 i,z를 전달받아서
return i+z; // i+y의 결과값을 add3함수를 호출한곳으로 반환 해준다.
}
console.log( add3(a,b) );
//리턴이 있는 함수들은 결과값을 되돌려 받기때문에 변수에 저장하는 형태로 호출이 가능
let add4 = add3(a,b);
console.log(add4);
//함수도 {}(scope)를 가지고있기때문에, 지역변수,전역변수가 구분되어 사용된다.
function localVar(){
let local = 0;
console.log("함수내부에서 출력 : ",local);
}
localVar();//함수를 반드시 호출을 해줘야 실행이된다.
// console.log("함수 바깥에서 출력 : ",local);
// -> 지역변수는 해당 scope를 벗어나면 사용이 불가능 하다.
ex)
let result;
function add4(a,b){
return a+b;
}
result = add4(4,5);
console.log("add4함수의 결과 : ", result);
//구구단을 생성해주는 함수를 만들어봅시다.
// 2단만 만들어주는 구구단 프로그램
function twoDan(){
console.log('2 X 1 = 2');
console.log('2 X 2 = 4');
console.log('2 X 3 = 6');
console.log('2 X 4 = 8');
console.log('2 X 5 = 10');
console.log('2 X 6 = 12');
console.log('2 X 7 = 14');
console.log('2 X 8 = 16');
console.log('2 X 9 = 19');
}
twoDan();
// 특정 단수를 만들어주는 구구단
let target = 8;
function targetDan(t){
// console.log(`${t} X 1 = ${t*1}`);
// console.log(`${t} X 2 = ${t*2}`);
// console.log(`${t} X 3 = ${t*3}`);
// console.log(`${t} X 4 = ${t*4}`);
// console.log(`${t} X 5 = ${t*5}`);
// console.log(`${t} X 6 = ${t*6}`);
// console.log(`${t} X 7 = ${t*7}`);
// console.log(`${t} X 8 = ${t*8}`);
// console.log(`${t} X 9 = ${t*9}`);
// 단수에 필요한 변수 t에는 5가 준비 되어있는 상태
// 1~9까지 반복되는 곱해지는 수가 필요하다.
console.log(`------${t}단 시작------`);
for(let i = 1; i <= 9; i++){
console.log(`${t} X ${i} = ${t*i}`);
}
}
targetDan(target);
// 특정 범위의 단수를 만들어 주는 구구단 (ex. 2~4단 , 5~9단)
// function rangeGugudan(x,y){
// console.log("특정 범위 단수 실행")
// //x = 2, y =4;
// for(let i = x; i <= y; i++){//2~4단까지 단수를 생성
// console.log(`------${i}단 실행------`);
// for(let z = 1; z <= 9; z++){
// console.log(`${i} X ${z} = ${i*z}`);
// }
// }
// }
// rangeGugudan(2,4);
let gugudanResult = '';
function rangeGugudan(x,y){
// \n : 문자열안에서 줄바꿈을 해주는 이스케이프 문자
gugudanResult = '특정 범위 단수 실행 \n';
//x = 2, y =4;
for(let i = x; i <= y; i++){//2~4단까지 단수를 생성
// gugudanResult = gugudanResult + `-------${i}단실행-----\n`;
gugudanResult += `-------${i}단실행-----\n`;
for(let z = 1; z <= 9; z++){
// console.log(`${i} X ${z} = ${i*z}`);
gugudanResult += `${i} X ${z} = ${i*z} \n `;
}
}
return gugudanResult;
}
let _result = rangeGugudan(2,4);
console.log(_result);
'Java > UI구현' 카테고리의 다른 글
| 2023.04.03 할일추가, 할일삭제, 좋아요 구현 (0) | 2023.04.03 |
|---|---|
| 2023.03.31 객체, DOM (0) | 2023.03.31 |
| 2023.03.29 while, for문 (0) | 2023.03.29 |
| 2023.03.28 타입, 연산자, 조건문 (0) | 2023.03.28 |
| 2023.03.27 자바스크립트 시작 (0) | 2023.03.27 |