TIL-14. 반복문, 조건문, 배열

반복문, 조건문, 배열

1. 반복문

* for

for ([initialization]; [condition]; [final-expression])
   statement

initialization, condition, final-expression 말만 보면 번지르르 하고 어렵다.
예제를 알아보자

• ex1)

for(let i = 0; i < 9; i++){
	console.log(i);
    }

여기서 직관적으로 이해하기 쉽다.
문자그대로
initiallization 은 초기 설정값
condition 은 함수가 종료될 조건
final expression 은 초기 설정값이 변화될 표현이라해야하나
아래는 MDN의 공식설명

condition
매 반복마다 평가할 식. 평가 결과가 참이라면 statement를 실행합니다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 for 문의 바로 다음 식으로 건너 뜁니다.

final-expression
매 반복 후 평가할 식. 다음번 condition 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.

statement
조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 블럭문({ ... })으로 묶어야 합니다. 아무것도 실행하지 않으려면 공백문 (;)을 사용하세요.

위의 예제와 다르게 여러가지 방식으로도 실행해볼 수 있다.

• ex2) initialization 생략 (비선호) -> 유지보수 측면에서 초기값을 쉽게 변경할 수 있다지만 간단한 식에서 굳이 저래야 하나 싶고 막 그렇다 ..

let i = 0 ;
for(; i < 9; i++){
	console.log(i);
   }

• ex3) condition 생략 (괜찮은듯):내부에 조건문을 주고 break를 선언시켜 같은 효과를 내게함

for(var i = 0;; i++){
	console.log(i);
    if(i < 9){
    	break;
	}
   }

• ex4) for in

let array = ["1","2","3","4"]

for (let i in array) {
	console.log(array[i]);
}

참고: MDN
참고: 생활코딩
추가 참고를 위한 사이트: Javascript 커뮤니티

배열을 더 공부하고 봐야 재밌을것같다 ㅇㅅㅇ..

* While

셋팅한 조건이 만족될때 지속적으로 실행& 조건 불만족시 미실행.
그니까 true 일때는 계속 실행되고 false일때는 실행안되고 break and out
해서 다음 명령문으로 넘어감.

while (condition)
  statement

ex1)초기값만 설정하고 상승시킴

let  i = 0 

while(i < 10){
	console.log("c1");
    i = i+1;
    }

ex2)초기값과 증가값을 미리 설정해줌

let n = 0 ;
let x = 0;
while (n < 3){
	 n++;
     x += n;
     }

ex3)초기값 true 설정 및 변수로 true값 바꾸기
html

<input type="click" value="click" />

js

let jsClikc = document.queryselector("input")// click하면 값이 트루가 되는게 맞을걸?
let i = 0;


while( jsClick != true){
	console.log(i)
    i++
    }

많이이상하지만 뭐 ..

2. 조건문

별거 없음.. 여느 언어와 다들 똑같다
If 조건이 참이면 if내부 명령어 실행
거짓이면 else로 넘어가 실행됨.
그리고 빠져나감
끝

Ex)

const coding = document.queryselector("input");

if (coding > 5){
	console.log("wassup")
}
else{
	console.log("hi")
}

3. 배열

배열(Array)이란
뭐랄까

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.

MDN의 말이다.. 역시 이상한말이다
역시 나는 직관적으로 예제부터 봐보겠다.

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.

배열은 요소 인덱스로 **문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용합니다**. **속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다**. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않습니다.

역시 그밑에 또 어려운 말이다.
일단 list와 비슷한 객체라고 한다.(파이썬은 리스트밖에없는데 후 ..)

아래를 통해 속성접근자를 봐보자

속성접근자

어렵게 말할필요 없이 그냥 key & value값이 있는 것이다. {}로 표기됨.

일단 string 자료가 list형으로 정리된 배열을 보자.

const hoonInfo = ["sanghunlee", "27", true, "seoul"];

console.log(hoonInfo[0]);

이게 어떻게 된거나면

0:sanghunlee
1:27
2:true
3:seoul

이렇게하면 몇번째에 뭐가 있는지 기억하며 숫자를 넣어 출력하게 되는 비효율이 발생한다.

const hoonInfo = 
{
    name:"Hoon",
    age : 33,
    gender : "Male",
    isHandsome: true,
    favMovies: ["Along the gods","LOTR", "OldBoy"],
};

console.log(hoonInfo.name);

이렇게하면 hooninfo라는 Array 안의 name으로 lable이 된 친구가 출력됨.-> Hoon이라고 출력될것

list안에 array를 배열할 수도 array안에 List를 배열할 수도 있다.--> 배열안에 배열을 넣을수도 있다는 말이다.

const hoonInfo = {
    name:"Hoon",
    age : 33,
    gender : "Male",
    isHandsome: true,
    favMovies: ["Along the gods","LOTR", "OldBoy"],
    favFood: [
        {
            name:"Kimchi",
            fatty: false}, 
        {
            name:"Cheeseburger",
            fatty: true}
    ] //object의 array를 만듦
}; //data에 lable을 붙여준것인데 해당 데이터 뽑고 싶을때 .하고 lable명 적어주면 됨.

console.log(hoonInfo.favFood[0].fatty);
favFood 변수명을 가진 list형식 배열내에 새로운 배열을 생성하였다.

해당 데이터 뽑고 싶을때 .하고 lable명 적어주면 됨.
console.log(hoonInfo.favFood[0].fatty);
이렇게하면 김치 fatty가 false 인지 True인지 출력해줄 것인데 false가 나옴

const로 설정해도 중도에 변수명을 가져다 변경할 수 있긴함.
hoonInfo.gender = "Feamale" //const 인데 바꿔버릴 수 있음.

Tip
DB에서 가져온 데이터가 list data 면 array를 선택하고 만약 데이터를 합쳐서 만들어야 한다면 object(객체)를 사용하는 게 좋다.

• array method 중 slice, splice, push, pop, filter, map 을 활영한 함수를 작성해보세요

4. 배열 사용

우선 간단한 리스트형 배열을 만들어보자

let fruits =["apple", "dog"]

4.1 length

console.log(fruits.length)

2가 나올것이다(2개있으니까) - > 파이썬의 len()과 같은역할

4.2 index로 접근하기

let first = fruits[0]
let last = fruits[fruits.length-1]

first 변수는 fruits배열에서 첫번째 것을 가져온다는 의미
last 변수는 fruits 배열의 길이에서 -1 을 한 순서의 것을 가져온다는 의미

4.3 배열끝에 항목 추가하기(push) ->앞에서부터 추가는 unshift

let newOne = fruits.push("whatelse")

이러면 배열은 아래와 같이 바뀐다

fruits =["apple", "dog","whatelse"]

4.4 배열끝에서부터 항목 제거하기(pop) ->앞에서부터 제거는 shift

let lastOne = fruits.pop()

이러면 제일 마지막에 있던 "dog"가 삭제된다

4.5 인덱스 위치에 있는 항목 제거하기(splice)

let remove = fruits.splice(fruits, 0)

• [indexOf를 사용하면 index를 얻을수 있다 :)]
  첫번째에 존재한 인덱스 0 인 apple 이 사라짐

4.6 배열복사하기(slice)

let newFruits = fruits.slice()

newFruits 이름으로 새로운 배열이 생성된다.

4.7 테스트통과하는 모든 요소 새로운 배열로반환(filter)

그냥 보는게 쉬울 것 같다.

arr.filter(callback(element[, index[, array]])[, thisArg])

callback
각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

element
처리할 현재 요소.

index Optional
처리할 현재 요소의 인덱스.

array Optional
filter를 호출한 배열.

thisArg Optional
callback을 실행할 때 this로 사용하는 값.

이런 형태임

function big(value){
	return value >= 10;
   }
   
   let filtered  = [12, 5, 8, 130, 44].filter(big);

결과

filtered = [12, 130, 44]

의 새로운 배열이 생성될것.

filter참고

4.7 map

주어진함수를 호출한 결과를 모아 새로운 배열반환

const number = [1,2,3,4,5]

const multiple = number.map( x => x*2);

console.log(multiple);

이러면 2,4,6,8,10이 나오게 된다

간단한 함수의 경우 생략을 시켜주는 아주 좋은 효과랄까 ..

map참고

여튼 이렇게 끝