[JavaScript] JS 기초 개념 정리

Variables

선언된 변수의 타입을 보고 (코드를 보고) 해당 데이터가 어떻게 사용될 지 유추할 수 있으므로 적절한 타입을 사용하는 것이 좋다.

let	const	var
재선언 금지	재선언 금지	재선언 가능
재할당 가능	재할당 금지	재할당 가능

const

• 상수, 선언 후 값을 바꿀 수 없다.

let

• 변수, 생성 후에 값을 바꿀 수 있다.

재선언 X, 재할당 O

let myName = "ck";
myName = "k";

var

• 변수, 선언 후 값을 변경할 수 있다는 것은 let과 동일하나, let과 달리 재선언할 수 있다는 차이가 있다.

재선언 O, 재할당 O

var myName = "ck";
var myName = "kds";

• 구버전으로, 실수로 값을 업데이트해도 알아차릴 수 없는 단점이 있어 사용하지 않는 것이 좋다.

null 과 undefined

undefined

• 변수는 선언했지만 값을 할당하지는 않음
• variable이 존재하지만 값이 주어지지 않은 상태

null

• 변수에 null(값이 없다)이 할당된다. 즉, 정의됨.
• null은 절대 자연적으로 발생하지 않음
• 자바스크립트에 여기엔 값이 "없다"는 걸 알려주기 위해 씀

Array와 Object

설명이 필요 없는 데이터 리스트들은 array로,
설명이 필요한 데이터 리스트들은 object로!

ex.
월,화,수,목,금,토,일 > array
학생의 이름, 성별, 전화번호 등 > object

Array

• 타입에 상관 없이 다 올 수 있음

  예시)

  const myName = "joonwu";
  const array = ["hello", 1, 2, myName ];
  ``

objects

const player = {
name: "jenny",
points: 10,
fat: flase,
};

property를 불러오는 방법

object.property

예시)

console.log(player.name);

object.["property"]

예시)

console.log(player["name"]);

수정

예시)

player.points= 15

추가

• 없던 object property 추가 가능

예시)

player.lastName = "potato";

• property를 바꿀 수는 있지만 선언된 object를 바꾸는 것은 불가능하다.
• const는 let과 달리 update가 안되나, 리스트의 경우 전체를 변경하는 게 아니라 속성값을 수정/추가하는 경우에는 update 가 가능하다

Functions

function sayHello(userName){
console.log("Hello my name is " + userName);
}

sayHello("Lisa"); //Hello my name is Lisa

• object안에 function 삽입도 가능

const player = {
name : tomato,
color : red,
food : true,
sayHello: function() {
  console.log("hello!);
};
              
player.sayHello();
  //hello!

return

• 어떤 작업을 처리하고 결과를 return하기 위해 function 사용
• return 함으로써 값을 할당함!!
• console.log랑은 차이가 있음
• function의 외부에서 값을 얻기 원함

const age = 96;
function calculateKrAge(someoneAge){
  return someoneAge +2;
}

const krAge = calculateKrAge(age);
console.log(krAge); //98

return은 말 그대로 '다시 돌려준다.' 라는 의미로
해당 함수의 변수값을 지정해주면 해당 code를 안에서 실행해서 그 결과값을 해당 함수의 변수값을 선언한 변수한테 돌려주는것이다.

return 사용 시 주의사항

• return을 하게 되면 해당 함수는 끝난다.
• 때문에 return뒤에 작업을 한다면 수행하지 않는다.
• return 앞에 작업을 한다면 수행된다.

console.log는 그림의 떡.
꺼내 먹으려면 return필요....

parseInt()

• number type으로 변경

NaN

• Not a Number

isNaN()

• 숫자 타입인지 여부를 따져 true or false로 응답

document.getElementById()

• js에서는 html이 표현하는 object를 보여준다.
• html에 있는 id를 불러올 수 있다.

title.innerText

• id의 텍스트 내용을 수정할 수 있다.
• 모든 것들을 html에서 항목들을 가지고와서 js에서 변경한다.

innerText null 오류

• value가 null이면 innerText 접근 불가함
• null variable의 innerText property는 변경할 수 없다.