[TIL-38] 노마드코더 크롬앱(JS) 클론코딩 #2.2~#2.6

#2 JS 기초 이론

 

변수

• console.log() : 콘솔에 메시지 보냄
  • ( ) 안에 숫자나 string 넣을 수 있음. 그럼 콘솔이 그 값을 출력함. 즉, 콘솔에 log, print 함.
  • string을 입력할 때 " " 혹은 ' ' 맞춰서 쓰면 됨.
• 변수(variable)
  • 여러 번 사용되는 특정 값을 변경하고 싶을 때 유용. 값을 저장하거나 유지하는 역할.
  • const 변수명 = 값;
    • constant(상수)는 바뀌지 않는 값.
  • let 변수명 : 값;
    • constant와 달리 바꿀 수 있는 변수.
    • 한번 생성하고 나면 언제든 ("let" 쓰지 않고) 업데이트 할 수 있음.
      • 업데이트한 다음에 쓴 코드부터 적용됨. 위에서 아래로 읽기 때문.
  • 변수 정하는 방법이 다른 이유는 코드를 읽고 의도를 알 수 있기 때문.
    • 기본적으로 const 이용하고, 업데이트할 필요가 있을 때만 let 이용.
    • 처음엔 var만 있었는데 언제든 업데이트할 수 있음. 하지만 그럼 실수로 어떤 변수를 업데이트하는 경우를 보호하지 못함. 그래서 업데이트(패치)되면서 const와 let을 분리해서 만듦.
  • camelCase : 변수명에 공백 사용 불가. 다음 단어의 첫 문자를 대문자로 씀.
    • 예) veryLongVariableName
    • [참고] snake_case : 파이썬은 띄어쓰기 대신 _(언더바) 씀.
      • const도 필요 없음. "very_long_variable_name = 0;"

 

Boolean 

• 불리언 : true/false
  • 변수 안에 저장할 수 있는 또 다른 데이터 타입.
    • 컴퓨터에서 0은 꺼져있다, 1은 켜져있다. 
    • "true"는 문자, true는 불리언 값.
  • 예) 사용자가 로그인 했는가?

 

다른 데이터 타입들

• null : 아무것도 없음.
  • false와 다름. false는 false라는 값이 있는 것, null은 값이 아예 없는 상태.
    • 아무것도 없는 것이 채워진 것. 변수 안에 아무 것도 없다는 것을 확인시켜주기 위해 쓰는 것.
    • 따라서 저절로 생기지 않음.
  • 예) const amIFat = null;
• undefined : 정의되지 않음.
  • 새로 만든 변수에 값을 주고 싶지 않을 때. 변수는 존재함.
    • 컴퓨터 메모리 안에 공간은 존재하는데 값이 채워지지 않음. null과 다름.
  • 예) let something;
• [참고] 파이썬 : null 대신 None, true/false 대신 True/False

 

데이터 구조(데이터 정리하는 법)

• 배열
  • 배열이 없을 때
    • 요일을 정의하려면 하나하나 월화수목금토일 각각의 변수를 써줘야 함.
    • 리스트로 그룹화하기도 어려움. 그냥 나열하면 string이 됨. 원하는 요일을 불러오거나 하지도 못함.
  • 모든 구성요소들을 하나의 배열 안에 넣음.
    • const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
    • 예) 사용자의 할일 리스트 : const toDo = ["reading", "working out", "coding", "sleeping"];
  • 즉, 배열은 변수 안에 데이터로 이뤄진 리스트를 담음.
    • 구성요소는 숫자, 문자, 변수 모두 가능.
  • console.log(배열변수명[n]) : 배열 안의 데이터에 접근하는 법.
    • 배열의 구성요소들을 나열할 수도 있고, n번째 요소를 뽑아올 수도 있음.
    • 컴퓨터는 0부터 숫자를 셈. 따라서 [n]은 n+1번째인 셈.
  • 배열변수명[n] = " " : 배열의 n+1번째 요소의 값 업데이트
    • [2.9]
  • 배열변수명.push(요소) : 배열 안에 요소 추가하기

 

• object 
  • 한 개의 개체(entity)에 대한 여러 가지를 정의하는 경우,
    • const playerName = "nico";
      const playerPoints = 122112;
      const playerHandsome = false;
      const playerFat = "little bit";
      
      • 변수를 이용하면 각각 이름을 지어야 하고, 변수들의 존재를 기억해둬야 함.
    • player.name
      player.points
      player.handsome
      player.fat
      • 더 잘 정돈됨. 이렇게 하는 게 목표.
    • const player = ["nico", 12121, false, "little bit"];
      • 배열 이용. 하지만 각 요소의 의미를 모름. 더 좋은 방법이 필요함.
  • object는 player를 예로 들면 name, points, handsome, fat 등 여러 특성 가질 수 있음.
    
    • const player = {
          name: "nico",
          points: "10",
          fat: "true",
      };
    • {} 중괄호 이용.
    • object, 즉 {} 안의 규칙은 밖의 규칙과 다름.
      • 데이터 타입은 앞에서 배운 것들 사용.
      • 정리되는 방식이 다름. css와 비슷한 듯한 모양.
    • console.log(player);
      console.log(player.name); 혹은 console.log(player["name"]);
      • console은 object. 그 안에 log가 있는 것.
      • console.log와 같은 형식의 player.name 만들어냄.
  • 모든 값이 같은 의미를 갖는 리스트와 다름.
  • object 업데이트 : player.fat = true; 혹은 player.lastName = "potato";
    • constant는 업데이트 불가지만 object 안의 것을 수정하는 것이라서 가능. object는 동일함.
      • player = true; 이런 식으로 통째로 바꾸려하면 에러 남.
    • player.points를 10에서 25로 만들고 싶다면, player.points = player.points + 15; 라고 해도 됨.
  • object에 새로운 property 추가
    • 원래 있던 property에 다른 값을 넣는 것뿐 아니라, 없던 property도 추가 가능.
    • [2.10] player.sexy = "soon";