[본캠프 10주차] 목요일 TIL

12/26 일일 목표📝

 

자바스크립트 강의 듣기

디자인 집중반

 

---

 

 

📖 오늘 배운 내용

 

1. 함수

• 기능의 단위로 묶어서 저장한 다음 재활용이 가능
• 인풋과 아웃풋을 가지고있는 기능의 단위

function 함수이름 (매개변수input) {
        //함수 내부에서 실행할 로직
}

 

 

1-1. 함수 선언문

• 주로 기본적인 함수 정의에 사용
• function 키워드로 이름을 붙여서 함수를 만들고 나중에 불러서 사용 가능

두개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 기능을 하는 함수
function add (x, y) { 
     return x + y;
}

 

2-2. 함수 표현식

• 선언한 뒤에만 호출이 가능
• 함수를 변수에 넣거나, 동적으로 사용할때 사용함

두개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 기능을 하는 함수
let add2 = function ( x, y ) {
      return x + y;
}

 

input = 매개변수 (함수한테 줄 수 있는 값)

output = 반환값 (return문 뒤에 오는 값)

return 은 함수의 결과를 반환하는 키워드

---

 

2. 함수 스코프

변수나 함수가 유효한 범위를 뜻함 어디에서 그 변수나 함수가 사용 가능한지 결정하는 것

 

• 전역 스코프: 함수 외부에서 선언된 변수는 전체 코드에서 사용 가능
• 지역 스코프: 함수 내부에서 선언된 변수는 그 함수 안에서만 사용 가능
• 블록 스코프: let과 const로 선언된 변수는 블록 내부에서만 유효

 

---

 

3. 화살표 함수

기본 function에 익숙해지기 전까지는 사용을 자제..

 

3-1. 기본적인 화살표 함수

let arrowFun01 = (x, y) => {
         return x + y
}

 

3-2. 한줄로 된 화살표 함수

let arrowFun02 = (x, y) => x + y
return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략가능

let arrowFun03 = (x) => x
let arrowFun03 = x => x
매개변수가 한개일때 괄호생략가능

---

 

4. 조건문(if , else if, else, switch)

 

4-1. if문

 

• 기본 if 문
  • 조건이 참일 때 코드 블록을 실행.
  • 조건이 거짓이면 아무 일도 일어나지 않음.
• if-else 문
  • 조건이 참이면 첫 번째 코드 블록 실행, 조건이 거짓이면 두 번째 코드 블록 실행.
• if-else if 문
  • 여러 조건을 차례대로 비교하여 조건이 참인 코드 블록을 실행. 만약 어느 조건도 맞지 않으면 else 부분이 실행됨.

5. switch 문

 

• 여러 가지 조건을 비교하고, 그에 맞는 코드를 실행하는 방법.
• if 문과 비슷하지만, 여러 조건을 다루는 데 더 유용
  • case : 각 조건을 의미함 
  • break :  실행후 스위치문을 종료시켜줌. 없으면 아래의 case들이 실행됨
  • default : 위의 조건이 모두 거짓일때 실행되는 코드

let fruit = "사과";
switch (fruit) {
        case "사과":
          console.log("사과는 빨간색입니다.");
          break;
        case "바나나":
           console.log("바나나는 노란색입니다.");
           break;
         case "오렌지":
            console.log("오렌지는 주황색입니다.");
            break; 
         default: console.log("해당하는 과일이 없습니다.");
            break;
}

---