코딩/1-JavaScript

문법2_개념_문자열 , 문법3_개념_기타

tree0505 2025. 5. 22. 12:56
반응형

문법2_개념_문자열


  • 자바스크립트는 많은 기능을 제공한다.
  • 파이선 언어가 쉽다
  • 거짓말이다.
  • 숙련자에게 좋은 언어다. 
  • 좋은 기능을 많이 제공하니까 쉽다. 숙련자가
  • 오히려 c언어가 가장 쉽다. 정직함 
    • 안되면 안됨. 명확함 

  • 지금부터는 === 을 쓰는게 좋다. 
  • 문자열(String), 그리고 == vs ===의 차이를 이해
  • str1은 문자열 값이 아니라 객체입니다.
    • typeof str1은 "object"입니다.
  • let str2 = "hello";
    str2는 문자열 리터럴, 즉 일반적인 문자열입니다.

    ⭐️ typeof str2는 "string"입니다.

 

  • document.write(str1 == str2, "<br>");
    ==는 **느슨한 비교(loose equality)**로, 타입이 다르면 자동 형변환 후 비교합니다.

    str1은 객체지만 "hello"로 변환될 수 있어서,

    ⭐️ **결과는 true**입니다.

 

  • document.write(str1 === str2, "<br>");
    ===는 **엄격한 비교(strict equality)**로, 타입과 값이 모두 같아야 true를 반환합니다.

    str1은 객체 (object), str2는 문자열 (string)

    ⭐️ 결과는 false

 

  • document.write("1" == 1, "<br>");
    "1"은 문자열, 1은 숫자.

    ==는 자동 형변환을 하기 때문에 "1"이 숫자 1로 바뀌어 비교됨.

    ⭐️ 결과는 true

 

  • document.write("1" === 1, "<br>");
    ===는 형변환 없이 타입까지 비교.

    하나는 문자열, 하나는 숫자 → 타입 다름

    ⭐️ 결과는 false

_01_문자열_생성.html


  • 왜 ===를 써야 할까?
    1. 버그를 줄이기 위해서
      자동 형변환은 예상치 못한 결과를 낳을 수 있어요.
      예:
      • 이런 비교는 혼란을 줄 수 있어요.
      • 실무에서는 예측 가능한 결과가 중요하니까 ===를 쓰는 게 일반적이에요.
    2. js
      복사편집
      false == 0 // true 😨 "" == 0 // true 😨 null == undefined // true 😨
    3. 명확한 의도 표현
      ===는 **"나는 값과 타입까지 동일한지를 확인하고 싶다"**는 의도가 분명합니다.

  • 3. 자바스크립트는 왜 ==을 만들었을까?“HTML을 더 풍부하게 만들 수 있는 브라우저용 간단한 스크립트 언어”
    • 자동 형변환(느슨한 비교) 기능도 일부러 넣었습니다.
      예: "5" * 2 → 10 (문자열 자동 변환)
    이런 유연성 덕분에 초보자도 간단한 스크립트는 금방 짤 수 있었죠.
    하지만...
  • 즉, 비전문가(디자이너, 마케터, 문서 편집자 등)도 쉽게 쓰게 하려고 만든 언어였기 때문에:
  • 자바스크립트는 1995년 단 10일 만에 개발되었습니다.
    당시 목표는 다음과 같았어요:

 

  • 4. 초보자에게 어려운 이유
    js
    복사편집
    null == undefined // true 😵 "0" == 0 // true 😵 [] == false // true 😵
    이런 식으로 자바스크립트는 자동으로 여러 단계를 거쳐 비교하니까,
    의도를 제대로 모르면 오히려 어려운 언어가 되어버립니다.
  • 이 유연성 때문에 오히려 초보자는 예측 불가능한 결과를 만나게 됩니다:

결론: ===를 습관화하자

  • ==은 정말 필요한 상황 외엔 쓰지 마세요.
  • ===는 예측 가능성코드 안정성을 보장해줍니다.
  • 자바스크립트는 잘 쓰면 막강하지만, 잘못 쓰면 예상치 못한 오류가 많습니다.

  • ESLint란?✨ 자바스크립트 코드를 검사하고, 오류나 문제를 미리 찾아내고, 코드 스타일을 자동으로 맞춰주는 도구입니다.
  • ESLint는 왜 필요할까?
    • 자동 형변환
    • 세미콜론 생략 가능
    • 변수 선언도 자유로움 (var, let, const)
    👉 그래서 버그가 숨어도 실행은 잘 되는 경우가 많습니다.그걸 사전에 예방해주는 게 ESLint예요.
  • 하지만 나중에 문제를 찾기 어렵고,
    팀으로 협업할 때는 스타일이 제각각이면 코드가 지저분해져요.
  • 자바스크립트는 유연한 언어예요.

  • 백틱 

_02_문자열_백틱출력.html


  •  

_03_문자열_접근_charAt.html


_04_문자열_인덱스_indexOf.html


  • 중요한것은 재 저장을 해야한다. 

_05_문자열_교체_replace.html


_06_문자열_추출_slice.html


_07_문자열_추출_substring.html


_08_문자열_구분자_split.html


_09_문자열_대소문자변환.html


_10_문자열_합치기_concat.html


문법3_개념_기타


  • getMonth는 0월부터 시작해서 +1을 해주어야 한다. 
  • 인덱스로 하기 좋게 하기 위해서 0부터. 위의 getMonth 
  • 배열로 만들어서 쓰기 

_01_날짜_Date클래스.html


  • 실무에서는 라이브러리를 쓴다. 

_02_수학_Math클래스.html


  • 일반적으로 let으로 쓴다. 

_03_변수var.html


  • 값을 안 바꾼다. 
  • 신입들 훈련 방법
  • 무조건 const 그래서 값 바꿀일 있으면 let으로 수정 

_04_변수const.html


  • var는 규칙이 일관적이지 않다. 
  • 규칙이 모호하다. 
  • 알고는 있어야 한다. 옛날것도 있어서. 

_05_변수var와함수.html


  • var 특징 최악. 재 선언이 된다. 
  • var name1 = 'Mike' ; 
  • var name1  = 'Jane' ; 
  • 이렇게 재 선언이 된다. 
  • 선생님은 var가 좋데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

_06_변수var재선언.html


  • for in 
  • 보통 객체 출력할 때 쓴다. 
  • 배열도 되지만. 보통 객체 출력 

_07_다양한반복문_for_in.html


  • for of 
  • for in 은 index가 담긴다.  index => key . name. age. gender 같은게 담겨서 반복문이 도는데. 
  • for of 는 값이 바로 담긴다. 

_08_다양한반복문_for_of.html

  • for ( let i  in arr ) => 이것은 인덱스가 담긴다. 그래서 객체반복문이 적합하다. 


  • forEach는 함수이다. 
  • arr.forEach( ) ; 

_09_다양한반복문_forEach.html

 


  • 구조분해 할당 
  • 배열에 있는 것을 변수에 담는다. 
  • 이건 쓸만하다. 편하다. 

_10_구조분해할당1.html


  •  

_11_구조분해할당2.html


  •  

_12_구조분해할당3.html


  • 값 변경을 쉽게 할 수 있다. 
  • 원래는 컵 3개인데. 쉽게 변경 할 수 있다. 
  • 모르는데 기능을 쓰면 안된다. 

_13_구조분해할당4.html

  • 원래는 컵 3개였었다. 


  • 객체도 담긴다. 

_14_구조분해할당5.html


  • 얕은 복사는 주소 공유 
  • 깊은 복사를 할려면. 진짜 배열을 만들어서 일일이 만들었어야 했다. 
  • 이것이 귀찮아서 전개구문이 만들어졌다. 
  • 깊은 복사가 되기 때문에. arr1. arr2가 원본이 살아있다. 
  • let a = [ ...arr1]; 이게 밑의 반복문과 같다. 
  • 깊은 복사가 된다. 이말 

_15_전개구문.html


  • isNaN 
  • 문자인지 확인하는것 
  • let a = isNaN("10"); 
  • 즉 10이 숫자이면 false . 문자면 true 
  • 내용이 숫자면 false
  • 왜냐하면 "10"은 문자열이지만. 내용자체는 숫자이기 때문에. false이다.
  • 은근히 많이 쓰인다. 

_16_isNan함수.html


  • 경고창을 띄워주는것 많이 씀 

_17_alert함수.html


  • 프롬포트 prompt
  • alert에서 입력을 할 수 잇게 한것 

_18_prompt함수.html


  • confirm 
  • ]버튼이 2개 있는것 

_19_confirm함수.html

 


 

반응형