JavaScript

함수(function)

함수의 기본 형태

• function 명령어 뒤에 함수명을 입력한다.
• 함수명 뒤에 매개변수를 담을 수 있는 ()가 있으며 매개변수는 원하는 만큼 선언이 가능하다.
• {}에는 구현하고자하는 로직이 들어간다.
• return을 통해 호출한 곳에 데이터를 전달할 수 있다.

function a(x){
	b = x + 12;
	return b;
};

a(7);

//함수 이름 : a
//연산식 : b = x + 12;
//출력 값 : return b;
//함수 실행 : a(7);

함수 선언하기

function 함수이름(인자){
	함수 로직
}

함수 실행하기

• 함수의 중괄호{} 안에 선언한 변수는 중괄호 안에서만 사용할 수 있다.

function func1(){
	console.log("안녕하세요");
}

func1(); //함수를 호출하면 실행된다!

function funcZ (){
	let a = 1;
	console.log(a);
}

funcZ(); //1

console.log(a); //a is not defined

return이 있는 함수

• return : 호출한 곳으로 데이터를 반환할 때 쓰는 명령어 → return 명령어 뒤의 데이터를 호출한 곳으로 반환한다.
  

function returnNum(){
	let myNum = 2;
	return myNum;
}

returnNum(); //console.log()가 없으므로 콘솔에 나타나지 않는다. 2라는 값을 반환할 뿐.
let a = returnNum(); //returnNum이 return한 값 2를 변수 a에 할당
console.log(a); //2

input이 있는 함수

• 파라미터 : 외부의 호출로부터 변수에 값을 받아 로직을 처리할 때 쓰는 변수. 인자라고도 한다.
• 함수 호출 시 파라미터 자리에 넣는 값을 argument라 한다.

function add(a,b){
		console.log(`${a+b}`);
}
let a = 3; //add의 파라미터 a와 다른 변수
add(1,2); //여기서 1,2를 argument라 한다.

---

Boolean 타입

• 논리적인 요소를 나타내고자 할 경우에 사용된다.
• true / false
• true로 인정되는 것들(Truethy) : 0을 제외한 정수, true, 값이 있는 문자열, {}, []
  
• false로 인정되는 것들(falsy) : 0, undefined, 값이 할당되지 않은 변수(undefined), 빈문자열(’’),null, NaN
  

---

조건문

if 문

• 조건문이 참이면 로직 실행, 거짓이면 if문 바로 다음 문장 실행

if(5 < 3){
            console.log("5는 3보다 큽니다");
        }
        console.log("이것은 로직 실행여부와 관계없이 실행되는 문장");

if-else문

• 조건문이 참일 경우 if문의 로직을 실행하고, 거짓일 경우 else의 로직을 실행한다.
• 실행 후에 else문 아래의 로직을 실행시킨다
  • true이면 "양수입니다", false이면 "음수입니다" 출력

    let v1 = Number(prompt("숫자 입력"));
            if(v1 >= 0) {
                document.write(`<h1>양수입니다</h1>`);
            } else{
                document.write("<h1>음수입니다</h1>");
            }
            document.write("<p>로직의 참, 거짓 여부에 관계없이 실행되는 로직</p>");
 ``
    

### if-else if-else문

- 해당 조건이 만족할 경우 해당 조건에 있는 로직을 실행시키고 전체 로직을 종료한다
- else if 중첩 가능
- 조건에 부합하는 조건들이 없다면 else문의 조건 실행

```jsx
if(score > 90 && score <= 100){
        console.log("A학점입니다");
            //90점 미만인 점수들은 이미 다 걸러짐
        }else if(score > 80){
            console.log("B학점입니다");
            //80점 미만인 점수들은 이미 다 걸러짐
        }else if(score > 70){
            console.log("C학점입니다");
        }else if(score > 60){
            console.log("D학점입니다");
        }else if(score > 50){
            console.log("E학점입니다");
        }else{
            console.log("F학점입니다");
        }

---

논리연산자

• 조건문 등에서 사용될 때 앞의 값을 먼저 평가 후 true가 나오면 뒤의 값을 검사한다.
• 앞의 값이 false라면 &&는 뒤의 값을 검사할 필요가 없다.(뒤의 표현식을 실행하지 않는다.)
• 앞의 값이 false라면 ||는 뒤의 값을 검사한다.

논리 AND (&&)

A && B

• A를 true로 변환할 수 있는 경우 B를 반환하고 그렇지 않으면 A를 반환(둘 다 true이어야 true)

논리 OR ( || )

A || B

• A를 true로 변환할 수 있으면 A를 반환하고 그렇지 않으면 B를 반환(둘 중 하나가 true면 true)

논리 NOT ( ! )

!A

• 단일 피연산자를 true로 변환할 수 있으면 false를 반환하고 그렇지 않으면 true를 반환(true는 false로, false는 true로 변환)

---

배열

• 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 구조이다.
• 데이터는 순차적으로 저장되며 중복이 가능하다.
• 배열 안의 데이터를 요소(element)라고 한다.

배열 선언하기

const arr1 = [];

const arr2 = [1,2,3];

다차원 배열(multi-dimensional array)

• 배열 안에 배열을 요소로 넣을 수 있다.

const arr3 = [1,2,3,"홍길동",true,[100,200,300]];

배열 요소 접근하기

• 인덱스 번호를 통해 접근이 가능하다.
• 인덱스 : 요소의 순번
• 인덱스는 0번부터 시작한다.
• 잘못된 인덱스로 접근하면 undefined가 출력된다.

const arr4 = [1,2,3,4,5];

console.log(arr4[0]); //1
console.log(arr4[3]); //4
console.log(arr4[4]); //5

/*다차원 배열 요소 접근하기*/
const arrA = [[1,2,3],[4,5,6],[7,8,9]];

console.log(arrA[0][1]); //2 -> arrA의 0번째 배열의 1번째 값
console.log(arrA[1][2]); //6
console.log(arrA[2][0]); //7

배열 요소 값 변경하기

const arr5 = [10,20,30,40,50];

arr5[0] = 100;

console.log(arr5[0]); //100

Array.length

• 배열의 길이를 알 수 있다.

const arr6 = [100,200,300,400,500];

console.log(arr6.length); //5

slice

• 배열의 일부분을 반환한다.
• 원본 배열을 변형시키지 않는다.
• 새로운 변수에 할당해야한다.
• 인자를 하나만 넣으면 맨 처음부터 시작한다.
• 첫번째 인자에 음수를 넣으면 끝에서부터 시작한다.

const sampleArr = [1,2,3,4,5];
const sliceArr1 = sampleArr.slice(0,2); // 0번째부터 2번째 앞까지
console.log(sampleArr); //(5) [1, 2, 3, 4, 5]
console.log(sliceArr1); //(2) [1, 2]

const sliceArr2 = sampleArr.slice(2); //0번부터 2개
console.log(sliceArr2); //(3) [3, 4, 5]

const sliceArr3 = sampleArr.slice(-2); //맨 끝부터 2개
console.log(sliceArr3); //(2) [4, 5]

splice

• 배열값을 추가하거나 제거하여 반환한다.
• splice(시작지점, 삭제할 요소 개수, 추가할 요소)
• splice(시작지점, 삭제할 요소 개수)
• splice(추가할 요소)
• 원본 배열 값을 제거한다.

const arr4 = arr1.splice(0,2);
console.log(arr1); //(3) [3, 4, 5]
console.log(arr4); //(2) [1, 2]

concat

• 배열과 배열을 합친다.
• 요소가 중복되어도 상관없다. 모두 합쳐진다.

const arr1 = ["a","b","c"];
const arr2 = ["d","e","f"];

const arr3 = arr1.concat(arr2);
console.log(arr3); //(6)["a","b","c","d","e","f"]

const arr4 = arr1.concat(1,[2,3]); 
console.log(arr4); //(6) ['a', 'b', 'c', 1, 2, 3]
// 배열을 3개 합친것으로 인식하기 때문에 이런 결과가 나온다.

const num1 = [1,2,3];
const num2 = [3,4,5];
const concatNum = num1.concat(num2);
console.log(concatNum); //(6) [1, 2, 3, 3, 4, 5]

배열에 요소 추가하기

• push : 배열의 끝에 원하는 값을 추가한다.

const arr7 = ["a","b","c"];
arr7.push("d");

console.log(arr7); // (4)["a","b","c","d"]

배열에 요소 제거하기

• pop : 배열의 마지막 요소를 제거한다.

let str1 = arr7.pop();
console.log(str1); //d
console.log(arr7); // (3)["a","b","c"]

• shift : 배열의 첫번째 요소를 제거한다.

let str2 = arr7.shift();
console.log(str2); // a
console.log(arr7); // (2)["b","c"]

---

자바스크립트도 하다보니까 재밌는것같다!