[JS] 2. JS 문법

1. 변수

// 변수
// 가상 최상단에 적을 수 있는 것들을 1급 객체라 한다 -> 단독 주소가 있다, 전달가능한 객체
// 자바에선 1급 객체는 class 뿐
// 자바스크립트에선 모든 변수가 1급 객체
let n1 = 1; // Number 타입
let n2 = 10.5; // Double 타입

let s1 = "문자열"; // String 타입
let s2 = "문자열"; // String 타입
let s3 = `문자열 ${n1}`; // String 타입

let b1 = true; // bool 타입
let u1 = null; // null 타입
let u2; // undefined 타입

console.log(n1);
console.log(n2);
console.log(s1);
console.log(s2);
console.log(s3);
console.log(b1);
console.log(u1);
console.log(u2);

2. 컬렉션 & 오브젝트

// 컬렉션, 오브젝트

let list = [1, 2, 3, 4];
let hobby = ["축구", "농구"];

let user = {
    id: 1,
    username: "ssar",
    hobby: hobby,
};

user.username = "cos";

hobby[0] = "탁구";

console.log(user.id);
console.log(user.username);
console.log(user.hobby);
console.log(user.hobby[0]);

3. 함수

// 함수

// 함수 기본형
function m1() {
    console.log("m1 호출됨");
}

// 함수 인수받는 형
function m2(n1, n2) {
    console.log(`${n1}, ${n2}`);
}

// 함수 리턴형
function m3() {
    return 10;
}

m1();
m2(1, 2);
let r = m3();
console.log("r: ", r);

4. 람다식

Expression 표현 (return 이 되면 다 표현식)

String score = 3 < 90 ? "우" : "양";

public static class Math {
	public int plus(int a, int b) {
		return a + b;
	}
}

<div>{{name}}</div>

Statement 문장 (return 이 없으면 다 문장형)

public static class Math {
	public int plus(int a, int b) {
		System.out.print(a+b);
	}
}

// 람다식

/* function m1() {
    console.log("m1 호출됨");
}

function m2(n1, n2) {
    console.log(`${n1}, ${n2}`);
}

function m3(n1, n2) {
    return n1 + n2;
} */

// 익명 함수 function (), 이름이 없다 : 람다식
// 이제 이런 방식으로 사용하지 않는다
let m1 = function () {
    console.log("m1 호출됨");
};

m1();

// 람다식 () => {} : 이름이 없는 익명함수
// 이런 방식으로 사용하자 ()=> 화살표를 사용하게 된 이유는 다른 모든 언어는 람다식을 화살표로 사용하기 때문에 햇갈리지 말라고 바꿧다
let m11 = () => {
    console.log("m11 호출됨");
};

m11();

// 람다(Lamda) statement
// return 이 없으면
let m2 = (n1, n2) => {
    console.log(`${n1}, ${n2}`);
};

m2(1, 2);

// 람다 expression
// return 이 있으면
let m3 = (n1, n2) => {
    return n1 + n2;
};

let r1 = m3(5, 6);
console.log("r1:", r1);

// 람다 expression
// 람다는 간결하게 사용하기 위해 나온것. 간결한게 좋다
let m33 = (n1, n2) => n1 + n2;

let r11 = m33(1, 2);
console.log("r11:", r11);

// 람다 statement
// 리턴문에 리턴하는 값이 아니라 함수실행이 들어가면 안된다.
let m333 = (n1, n2) => console.log(n1 + n2);
// 다음과 같이 사용하자
let m3333 = (n1, n2) => {
    console.log(n1 + n2);
};

// 람다 expression을 사용하고 싶다
// 1줄 표현식
let k1 = () => 1;
// 여러줄 표현식
let k2 = () => {
    return 1;
};
// 람다 statement를 사용하고 싶다
// 람다 문장식
let k3 = () => {
    console.log(1);
};

5. List 추가, 찾기, 삭제, 수정

얕은 복사

// 불변

let list1 = [1, 2, 3];

// 1. 복사
// 1-1. 얕은 복사
let data = list1;
data.push(4);
console.log("list:", list1);
console.log("data:", data);

깊은 복사

// 불변

let list2 = [1, 2, 3];

// 1. 복사
// 1-2. 깊은 복사
let deepCopy = [...list2]; // 전개연산자(세련된 언어에는 있다)
deepCopy.push(4);
console.log("list:", list2);
console.log("deepCopy:", deepCopy);

추가

// 불변

let list2 = [1, 2, 3];

// 2. 추가
let appendList = [...list2, 4];
let prependList = [0, ...list2];
console.log("appendList:", appendList);
console.log("prependList:", prependList);

찾기

// 불변

let list2 = [1, 2, 3];

// 3. 찾기
let searchList = list2.filter((n) => n == 2);
console.log("searchList:", searchList);

삭제

// 불변

let list2 = [1, 2, 3];

// 4. 삭제
let deleteList = list2.filter((n) => n != 2);
console.log("deleteList:", deleteList);

수정

// 불변

let list2 = [1, 2, 3];

// 5. 수정
// let updateList = list2.map((n) => (n == 2 ? n * 10 : n));
let updateList = list2.map((n) => {
    if (n == 2) {
        return n * 10;
    } else {
        return n;
    }
});
console.log("updateList:", updateList);

이터레이터 → 연속된 데이터를 처음부터 끝까지 전부 순회하는 것 filter(), map() for-each 등…

반복문 → 정해진 횟수 만큼만 반복하는 것 for, while