[TIL] Day 9 - Javascript 기초 2 : 함수, 내장함수, 다양한 문법

🗓️ 수업 일자 : 2025.09.30

✨ 오늘의 수업 평가 :  [ REVIEW ]   익숙했지만 놓쳤던 포인트 발견 👀✨

 

📝  오늘 배운 내용  

- Javascript 함수 & 내장함수

- Javascript 다양한 문법

자바스크립트 로고

---

1. Javascript 함수

제가 10년 전 퍼블리싱 할 때 javascript에서 함수가 정말 꽃 같은 존재였습니다. 꽃 답게 쓸 일도 정말 많고, 어떻게 조합하느냐에 따라 천차만별로 움직이기 때문에 잘 만든 함수 하나가 열 자바스크립트 파일 안부럽다 할 정도였습니다 (라떼 회상중..😉) 

 

요즘엔 모듈화, 클래스 등등 더 많은 기능들이 보편화 되었지만 그래도 아직까지 기본적으로 알아야 할 개념이 바로 "함수"입니다!

 

함수의 특징 

• 어떤 입력을 받아 특정한 동작을 수행하고, 결과를 반환하는 재사용 가능한 코드 블록
• 입력값이 없다 하더라도 똑같은 코드를 여러 곳 써서 출력값을 낼 경우 함수로 묶어서 사용

함수의 사용법

• 함수 선언문
  • function이라는 명령어로 바로 생성하는 방식
  • 호이스팅이 되서, 정의 하기 전에 다른 구문에서 사용 가능

// 함수 선언문
function newFn(str){
	console.log(str);
}

// 함수 선언문 사용하기
newFn("world");

• 함수 표현식
  • 특정 변수에 함수를 담아 사용하는 방식 
  • 호이스팅 되지 않아, 정의하기 전에는 사용 불가능
  • 함수 표현식은 축약형인 "화살표 함수"로도 사용 가능함

// 함수 표현식
const newFn = function(str){
	console.log(str);
};

// 함수 표현식 사용하기 
newFn("hello");


// 함수 표현식 축약형 = 화살표 함수
const newFnFn = (str)=>{
	console.log(str);
};

 

 

함수의 구조와 관련 명칭

• 함수 이름 : 함수를 부르는 명칭으로 개발자가 임의로 작성 가능(가능하면 함수가 가지고 있는 기능을 표현하는 것이 좋음)
  함수 선언문의 경우 function 다음으로 오는 단어이고, 함수 선언식은 변수명이 함수의 이름 
• 파라미터 : 함수에서 사용할 매개변수를 의미, 함수 내부에서만 사용되는 변수로 함수명 다음에 오는 괄호 안에 써서 사용
• 아규먼트 : 함수를 호출 할 때 작성하는 파라미터로 사용할 값

자바스크립트 함수의 각 명칭 설명

 

• 함수 정의 : 함수를 처음으로 만드는 것
• 함수 호출 : 함수를 사용하기 위해 이름과 파라미터를 선언 하는 것 
• 호이스팅 : 변수, 함수 등이 정의 되기 전에 사용 되어도 문제없이 동작하는 것

// 함수 정의 = 만들기
function newFn(str){
	console.log(str);
}

// 함수 호출 = 사용
newFn("world");


// 호이스팅 
// 함수가 선언되기 전에 사용해도 문제 없음
lastFN(1,2);

function lastFN(num1, num2){
	console.log(num1 + num2);
}

 

 

 

2. Javascript 내장 함수

위에서 본 것처럼 개발자가 직접 함수를 만들어 쓸 수 있지만, 자바스크립트에서 제공하는 기본 함수도 많이 있습니다.

자주 쓰는 내장함수에 대해 몇가지 설명 해 드리겠습니다. 

 

- [배열].forEach(( ){ ... }) : 함수 앞에 오는 배열의 모든 요소에 접근하여 해당 정보를 확인할 때 사용

// [배열].foreach((엘리먼트, 인덱스, 배열 전체){  ...  } 
// 사용되는 파라미터 중 필요한 값만 사용 가능

const arr = ["a", "b", "c", "d"];

arr.forEach((ele, i, allarr) => {
  console.log(`${i}번째 요소는 ${ele}입니다`);
  console.log(`전체 배열의 정보는 ${allarr}입니다`);
});

 

 

- [배열].map(( ){ ... }) : 함수 앞에 오는 배열의 모든 요소에 접근하여 동일한 추가 작업한 뒤 새로운 배열로 만들 때 사용

// [배열].map((엘리먼트, 인덱스, 배열 전체){  ...  } 
// 사용되는 파라미터 중 필요한 값만 사용 가능

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

const arrNum = arr.map((ele) => {
	return ele + 1;
});

 

... 하다보니 너무 많아서 주말에 한번 더 정리해서 특집으로 가져올게요 ❤️

 

 

3. Javascript 다양한 문법

조금 전 보았던 함수 내부에 맨날 출력하는 console.log 만 쓸 순 없잖아요😭

그래서 보통은 함수 선언시 받았던 파라미터(= 매개변수)를 가지고 여러 작업을 합니다.

(전역에서 사용해도 무방하지만, 보통 실무에서는 함수의 기능을 제대로 실현 시키기 위해 사용합니다)

 

그럼 여러가지 문법을 배워 보도록 하겠습니다! 

 

1) 조건문 

• 정의 : 특정 조건을 만족했을때 실행되는 코드를 쓰는 문법
• 종류 : if문 , switch문

1-1) if문

• if ( ) { } : "~한다면 " 이라는 가정으로 if문의 괄호 안에 있는 내용이 성립되면 다음에 오는 중괄호의 내용을 실행 
• else { } : if문이 아닌 경우 실행 될 내용을 작성, 생략 가능
• else if ( ) { } : if문이 아닌 나머지 값에 대하여 한번 더 조건을 걸어 확인 할 수 있음 

const a = 1;
const b = 2;
const c = a + b;

// if문 단독
if( c===3 ){
	console.log("c의 값은 3 입니다");
    // 조건에 맞으므로 해당 값 출력
}

// if-else문
if( c===5 ){
	console.log("c의 값은 5 입니다");
    // 조건에 맞지 않으므로 else문으로 이동
}else{
	console.log("c의 값은 알수 없습니다");
    // 조건에 상관 없이 해당 값 출력
}

// if-elseif-else문
if( c===5 ){
	console.log("c의 값은 5 입니다");
    // 조건에 맞지 않으므로 else문으로 이동
}else if( c===3 ){
	console.log("c의 값은 3 입니다");
    // 조건에 맞으므로 해당 값 출력
}else{
	console.log("c의 값은 알수 없습니다");
    // 앞서 else if문에서 빠져나갔기 때문에 출력되지 않음
}

 

1-2) switch문

• switch( ){ } : 괄호 안의 값이 아래 case의 값과 맞으면 그 아래 문장이 적용되고 "return"으로 문단에서 빠져나옴.
• case : 조건과 함께 실행 될 내용을 작성하는 공간,
             여러 조건이 동일한 출력이 나온다면 연속으로 사용해 표기 가능(고양이,야옹이)
• default : 조건에 다 맞지 않을 경우, 기본으로 실행 될 공간

function animals(str){

   switch(str){
        case "강아지" :
            console.log("멍멍");
            return;
        case "고양이" :
        case "야옹이" :
            console.log("야옹")
            return;
    	case "호랑이" :
            console.log("어흥")
            return;
    	default 
            console.log("누구냐~")
    }

}

animals("야옹이") // "야옹" 출력!

 

 

2) 반복문 

• 정의 : 정해진 기준값에 따라 작성된 내용이 반복되어 실행되는 문장
• 종류 : for문, while문, .forEach문(내장함수) 등이 있음

2-1) for문 

• for( ) { } : 괄호안에 조건을 쓰고, 조건이 참인 동안에는 중괄호 안의 코드 블록을 반복하여 실행하는 문장
• for(...in){ } : 객체의 키에 접근해서 사용하며, value도 불러올 수 있음, 변수로 키를 선언하여 객체를 순회함
• for(...of){ } : 배열에 접근해서 각각의 값을 사용함, 변수로 배열값를 선언하여 배열을 순회함

// for문 기본
// 조건 : i라는 변수를 선언하고, i가 5보다 작을 때 코드블록 실행, 조건을 지나칠때마다 +1 함
for(let i=0; i<5; i++){
  console.log(i);
}

// 0 1 2 3 4 출력


// for...in (객체 key)
const obj={a:1,b:2};
for(let key in obj){ 
   console.log(key); 
} // a b



// for...of (이터러블 값)
const arr=[10,20];
for(let v of arr){ 
   console.log(v); 
} // 10 20

 

 

2) while문 

• while( ) { } : 괄호안에 조건을 쓰고, 중괄호의 내용을 조건이 충족할때까지 순회. for문은 순회와 관련된 조건 모두를 모두 괄호안에 쓰지만, while문은 "조건만" 쓰고 나머지는 괄호 안에 기재

let j=0; 

while(j<3){ 
   console.log(j); 
   j++; 
} // 0 1 2

 

 

 

 

---

 

📃 내일은 뭘 배울까 🤔

- Javascript 추가 문법