🔥 [UIUX] 0121 JAVASCRIPT Coding, 코딩 초급 12

You_Jin.·2025년 1월 22일

✏️ 2025. 1월 21일 / javascript 초급 12

👻 const
const역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어입니다.
const로 선언한 변수는 상수변수(costant variable)입니다.
상수는 프로그래밍 안에서 변하지 않는 값을 의미합니다.
즉, 변하지 않는 값을 선언할 때 const를 이용하여 선언합니다.
const로 할당한 변수는 재선언과 재할당이 불가능합니다.
그래서 반드시 변수를 만들때 이름과 초기값을 함께 선언해야 합니다.
주로 태그를 불러와 담을 때 많이 사용합니다.
상수 변수에 객체나 배열을 포함하고 있는 경우 , 이 객체나 배열안의 데이터가
바뀌고 편집되는 것은 오류가 나지 않습니다.
  [기본형]
  const 변수명 = 값;

👻 자바스크립트에서 변수를 사용하는 방법
자바스크립트는 유연성이 많아 편리한 언어입니다. 다양하게 코드를 사용할 수 있습니다.
하지만 편리성은 프로그램이 커지면서 가독성이나 디버깅을 하기 어렵게 만듭니다.
자바스크립트 문법은 벗어나지 않으면서 가독성이나 디버깅 하기 쉽도록 변수를 사용하려면 아래와 같이 사용합니다.
1. 전역변수는 최소한으로 사용합니다.
: 전역변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있습니다.
하지만 예상하지 못한 곳에서 오류가 발생할 확률이 높아집니다.
그래서 되도록 전역변수는 최소한으로 사용해야합니다.
2. var변수는 함수의 첫 줄(시작부분)에 선언합니다.
: var를 사용한 변수는 어디에서 선언하든 상관없지만 내부에서 호이스팅이 생기므로
오류가 발생할 수 있습니다. 그래서 var변수는 함수 시작 부분에 선언하는 것이 변수를 확인하기도 편하고 오류를 줄일 수 있습니다.
function example(){
        var first = '값'; // 호이스팅이 일어나지 않도록 첫 줄에 선언
        document.write(first);  
      }
3. for문에서 카운터 변수를 쓸 때에는 var예약어 대신 let을 사용합니다.
: for문에서 사욜할 변수는 그 블록안에서만 사용할 것이므로 가끔 var를 이용하여 사용
하기도 합니다. 하지만 이렇게 쓴다고 해서 var가 지역변수가 되는 것이 아닙니다.
var 변수는 함수레벨의 스코프를 가지기 때문에 var 대신 let을 사용하는 것이 좋습니다.
    ex) for(let i = 0; i < arr.length; i++){코드}
        for(let i in arr){코드} -> 배열안을 순회하는 for문
4. ES6 버전의 자바스크립트 문법을 사용할 때에는 var보다는 let을 사용합니다.
: var변수는 재선언, 재할당이 가능하고 호이스팅 기술도 지원되므로 같은 변수를
실수로 재선언하거나, 프로그램을 합치다보면 변수가 중복될 수도 있어 이런경우 문제가 발생합니다.
그래서 재선언을 할 수 없는 let을 사용하면 코드가 더 안전해집니다.
      let str; //선언
      str = "서울"; //할당
      str = "경기도"; //재할당
      let str2 = "강원도"; //선언과 동시에 할당
      //const
      const num = 2025; // 선언과 동시에 할당
      //const num; 오류남. 값이 필요. 이름만 지을수 없음
      //num = 2026; //재할당 불가능
      //const num = 2026; //재선언 불가능
      //콘솔창에var_let_const04.html:36 Uncaught TypeError: Assignment to constant variable.에러메세지
      //상수변수라서 값을 바꿀 수 없다는 뜻
      //const로만든 변수에 배열 저장하기
      const arr1 = [30, true, "강아지", "고양이", 250];
      // arr1 = '강아지'; //배열을 문자열로 바꾸려고 했기 때문에 오류남
      //배열의 인덱스번호 3번에 위치한 데이터를 다른 500으로 바꾸기
      arr1[3] = 500;
      console.log(arr1);
      const userInfo = {
        //속성(프로퍼티):값
        age: 30,
        marraige: true,
        name: "김땡땡",
        content: "하이루",
        anni: 250,
        //메서드-함수를 담고있는 이름
        intro: function () {
          document.write(
            `안녕하세요. 제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`,
            "<br/>"
          );
        },
      };
      //1. intro 메서드 실행
      userInfo.intro();
      //2. age룰 40으로 바꾸기
      userInfo.age = 40;
      //속성명 불러올때 .age, .name 등등
      //3. intro메서드 실행하기
      userInfo.intro();

👻 도전! 실습 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>함수실습</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body id="the_body">
    <!-- onclick : 클릭이벤트. 클릭을 할때마다 함수가 실행됨 -->
    <button onclick="changeColor();">배경색 바꾸기</button>
    <!-- 버튼이 클릭될 때 마다 function의 함수가 실행될 수 있게 함수호출문 실행 -->
    <div class="box" id="the_div" onclick="changeColor();"></div>
    <script>
      //배경색 바꾸기 버튼을 누르면 클릭할 때마다 배경색을 바꾸는 함수
      let color = ["white", "gold", "pink", "lavender", "skyblue"]; //바꿀 배경색
      //getElementById : html문서에서 해당 id이름을 가진 태그를 불러옴.
      //getElementById()안에는 아이디명을 문자열로 가져오고 #은 붙이지 않는다.
      //전역변수로 써도 상관없음
      const bodyTag = document.getElementById("the_body");
      // const divTag = document.getElementById("the_div");
      let i = 0; //버튼을 클릭할 때마다 바꿀 인덱스번호 초깃값
      function changeColor() {
        i++; // 인덱스 번호 증가
        //만약 i가 배열갯수와 동일해지면 다시 i를 0으로 바꿈
        if (i >= color.length) {
          i = 0;
        }
        //body태그의 style(css)중 backgroundColor(카멜표기법으로 씀)를 배열의[i]번째의 컬러로 변경.
        bodyTag.style.backgroundColor = color[i];
      }
    </script>
  </body>
</html>

👻 매개변수가 있는 함수
함수를 호출할때마다 실행결과를 다르게 하고 싶다면 매개변수를 이용할 수 있습니다.
매개변수는 '파라미터'라고도 부르고, 함수를 호출할때 인자(수)값을 넘겨받아
함수 안에서 활용할 수 있는 특별한 변수입니다.
함수에 전달된 인자값은 매개변수에 순차적으로 대입됩니다.
  [기본형]
  function 함수명(매개변수1, 매개변수1....){}
   자바스크립트 코드
  }
  함수명(인자값1, 인자값2...);

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🔥 [UIUX] 0121 JAVASCRIPT Coding, 코딩 초급 12

✏️ 2025. 1월 21일 / javascript 초급 12

🔥 [UIUX] 0120 JAVASCRIPT Coding, 코딩 초급 11

🔥 [UIUX] 0122 JAVASCRIPT Coding, 코딩 초급 13

0개의 댓글