[자바스크립트(Java Script)]2. 자바스크립트 문법

1. 변수 선언과 기본 타입

//변수
//가장 최상단에 적을 수 있는 것들을 1급 객체 (자바에서는 1급 객체는 클래스 밖에 없다)
let n1 = 1;//Number 타입
let n2= 10.5;//Double 타입
let s1 ="문자열";//String 타입
let s2 ='문자열';
let s3 =`문자열 ${n1}`

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

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. 람다식 (Arrow Functions)

//람다식


// function에 이름이 없음 : 익명함수
let m1 = function () { 
    console.log("m1 호출됨");
  };

  m1();

  // Lamda 식: 이름이 없는 익명함수
  let m11 = ()=>{ 
    console.log("m11 호출됨");
  };

  m11();

  // Lamda Statement 
  let m2 =  (n1, n2) => {
    console.log(`${n1}, ${n2}`);
  };

  m2(1,3);

  //Lamda Expression
  let m3 = (n1, n2) =>{
    return n1 + n2;
  };

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

  // Lamda Expression
  let m33 = (n1, n2) => n1 + n2;
  let r2 = m33(1,5);
  console.log(r2);

//   Lamda Statement 
//   let m333 = (n1, n2) => console.log(n1+n2);
//   m333(10,50);
  
  //  Lamda Statement 
  let m333 = (n1, n2) => {console.log(n1+n2)};
  m333(10,50);
  let r3 = m333(10,50);
  console.log(r3);
  

  // Lamda 표현식 (1줄,2줄이상)
  let k1 = () => 5;
  let k2 = () => {
    return 5;
  };

  // Lamda 문장
  let k3 = () => {
    console.log(5);
  };

4.1 익명 함수와 람다식의 기본 형태

// 익명 함수(Anonymous Function)
let m1 = function() {
    console.log("m1 호출됨");
};

// 람다식(Arrow Function)
let m11 = () => {
    console.log("m11 호출됨");
};

4.2 람다 Statement와 Expression의 차이

람다 Statement (문장)

• 중괄호 {}를 사용

• return 키워드가 필요할 수 있음

• 여러 줄의 코드 작성 가능

• 값을 반환하지 않는 실행문에 주로 사용

// 람다 Statement 예시
let m2 = (n1, n2) => {
    console.log(`${n1}, ${n2}`);
};

let m333 = (n1, n2) => {
    console.log(n1 + n2);
};

람다 Expression (표현식)

• 중괄호 {}를 생략

• return 키워드 생략 (암시적 반환)

• 한 줄로 표현 가능한 코드만 작성

• 값을 반환하는 간결한 함수에 주로 사용

// 람다 Expression 예시
let m33 = (n1, n2) => n1 + n2;   // 암시적 반환

let k1 = () => 5;                // 5를 반환

4.3 람다식 사용 예시 정리

// 기본 익명 함수
let m1 = function() {
    console.log("m1 호출됨");
};

// 기본 람다식
let m11 = () => {
    console.log("m11 호출됨");
};

// 매개변수가 있는 람다 Statement
let m2 = (n1, n2) => {
    console.log(`${n1}, ${n2}`);
};

// 반환값이 있는 람다 Statement
let m3 = (n1, n2) => {
    return n1 + n2;
};

// 람다 Expression (암시적 반환)
let m33 = (n1, n2) => n1 + n2;

// 람다 Statement (반환값 없음)
let m333 = (n1, n2) => {
    console.log(n1 + n2);
};

// 단일 값 반환 람다 Expression
let k1 = () => 5;

// 단일 값 반환 람다 Statement
let k2 = () => {
    return 5;
};

// 값을 반환하지 않는 람다 Statement
let k3 = () => {
    console.log(5);
};

5. 람다식의 특징과 장점

1. 간결한 문법: 함수 선언을 더 짧고 읽기 쉽게 만듭니다.

2. this 바인딩: 일반 함수와 달리 자신만의 this를 생성하지 않고 외부 스코프의 this를 그대로 사용합니다.

3. 암시적 반환: 중괄호 없이 한 줄로 작성할 경우 자동으로 값을 반환합니다.

4. 선택적 괄호: 매개변수가 하나만 있으면 괄호를 생략할 수 있습니다 (예: x => x * x).

6. 람다 Expression vs Statement 정리

7. 중괄호 없는 Statement 람다식 사용 지양

중괄호 없는 Statement 람다식 문제점

//   Lamda Statement 
//   let m333 = (n1, n2) => console.log(n1+n2);
//   m333(10,50);

안전한 람다 Statement 작성법

jsx
복사편집
// 올바른 람다 Statement (중괄호 사용)
let m333 = (n1, n2) => {
    console.log(n1 + n2);
};

m333(10, 50);

중괄호 없는 표현은 오직 Expression에서만!

jsx
복사편집
// 올바른 람다 Expression (암시적 반환)
let sum = (n1, n2) => n1 + n2;
console.log(sum(10, 20));  // 30