[2025-04-03] Object, function - [멋쟁이사자처럼부트캠프 프론트엔드13기]

rogie·2025년 4월 10일

멋쟁이사자처럼후기 자바스크립트

likelion-posting

목록 보기

1/10

📚 오늘 공부한 내용

반복문을 멈추는 코드
Object
function

🧠 배운 점 & 정리

반복문을 멈추는 코드

break
- 반복문 이나 switch 문을 즉시 종료
- break 를 감싸고 있는 코드 블럭을 빠져나오고 코드 블럭 이후의 코드로 실행이 넘어감
continue
- 반복문 내에서 남아있는 코드를 건너뛰고 다음 반복으로 실행이 넘어감

예시코드

const n = 1;
const m = 10;

for (let i = n; i <= m; i++) {
  if (i % 2 === 0) {
    console.log(`첫 번째 짝수: ${i}`);
    continue; // 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.
  // break; / => 반복문이 몇개이든 상간없이 코드 멈추기
  }
}

Object

key value 쌍의 데이터 집합 (속성, property)
속성의 값으로 모든 데이터 타입 지정 가능
- 값으로 함수가 지정된 속성을 메소드 (method) 라 함
여러개의 속성을 포함할 수 있음
원시 타입은 한 개의 변수 안에 2개의 값을 넣을 수 없었음

예시코드

// 원시 타입
let userName = "차차핑";
let kor = 100;
let eng = 90;
let math = 85;

let sum = kor + eng + math;
let avg = sum / 3;

console.log("총점: " + sum);
console.log("평균: " + avg);

⇒ 원시 타입은 userName이라는 값에 다른 값을 넣으려면 변수를 하나 더 선언해야함

// 객채로 만들기
const score = new Object();
score.userName = "차차핑";
score.kor = 100;
score.eng = 90;
score.math = 85;

score.sum = kor + eng + math;
score.avg = sum / 3;
console.log(`${score.userName}의 총점: ${score.sum}`);
console.log(`${score.userName}의 평균: ${score.avg}`);

⇒ score이라는 변수를 새로 만들고 그 안에 변수값을 수정함

function

명령어의 묶음
특정 기능을 재사용 하고 싶을 때 작성
함수이름 , 인자목록 , 실행구문 , 반환값으로 구성됨

예제

// 기본 값
function 함수명 (매개변수1, 매개변수2, ...){
실행할 구문1;
실행할 구문2;
...
return 반환값;
}

실행구문은 함수 밑에 두나 함수 위에 두나 상관이 없음

하드코딩 vs 함수 사용

console.log("hello Function!");
console.log("hello Function!");
console.log("hello Function!");

⇒ 하드코딩으로 3번 사용함

//함수 생성
function sayHello() {
  console.log("안녕 Function!");
}
//함수 호출
sayHello();

⇒ 함수 명 사용함

매개 변수

매개변수는 함수에 전달되는 입력값을 받기 위한 변수이다.
```
function sayHello(pingName) {
                // 매개변수
  console.log("Hello " + pingName);
}

sayHello("하츄핑");
        // 호출할때 괄호 안에 매개 변수 사용하기
```
📌 실행 순서 (디버깅 과정)

1️⃣ 함수 sayHello() 정의
- function sayHello(pingName) { console.log("Hello" + pingName); }
  - 하지만 함수는 실행되지 않음 (호출되기 전 단계)
    
    2️⃣ 첫 번째 함수 호출 sayHello("하츄핑")
  - pingName에 "하츄핑"이 전달됨
  - 실행: console.log("Hello" + "하츄핑")
  - 출력: Hello하츄핑
    
    3️⃣ 두 번째 함수 호출 sayHello("깡총핑")
  - pingName에 "깡총핑"이 전달됨
  - 실행: console.log("Hello" + "깡총핑")
  - 출력: Hello깡총핑
    
    4️⃣ 세 번째 함수 호출 sayHello("초롱핑")
  - pingName에 "초롱핑"이 전달됨
  - 실행: console.log("Hello" + "초롱핑")
  - 출력: Hello초롱핑

함수를 사용할때와 아닐때

🧠 함수 쓸 때

함수는 그냥 “이름 붙여놓은 코드 블록”이야. 반복되는 작업을 한 번만 쓰고 계속 불러서 쓸 수 있게 하는 거.

예시

function sayHello() {
  console.log("안녕, 감자야!");
}

sayHello(); // 실행
sayHello(); // 또 실행

언제 쓰냐?

코드 재사용하고 싶을 때
같은 패턴이 반복될 때
코드 정리하고 싶을 때 (덜 지저분하게)

나중에 고치기 쉽게 만들고 싶을 때

🤯 함수 안 쓸 때

그냥 하드코딩. 필요한 작업을 그때그때 쓰는 스타일. 빠르게 테스트하거나, 짧고 단순한 코드에선 괜찮지만,

조금만 길어지면 바로 지옥 개장함. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

예시

console.log("안녕, 감자야!");
console.log("안녕, 감자야!"); // 중복된 코드

🎯 비교 요약

상황	함수 쓸 때	함수 안 쓸 때
반복 작업	✅ 재사용 짱	❌ 복붙지옥
깔끔한 코드	✅ 구조화됨	❌ 혼돈의 카오스
단순 테스트	❌ 오바임	✅ 빠름
협업 코드	✅ 칭찬받음	❌ 욕먹음

🔗 배웠던 파일

❓ 생긴 질문 / 더 알아볼 것

추후 배울 object의 하위 속성들?을 좀더 공부하고 개념에 대해서 더 알아보고 싶다

🔗 참고 자료

rogie

front-end를 꿈꿉니다

다음 포스트