노마드코더 JS 1,2일차

Woohyun Shin·2022년 7월 5일
0

노마드코더 JS

목록 보기
1/1

JS에 관하여

Vanilla JS는 다른 라이브러리를 사용하지 않고 순수 JavaScript를 뜻하는 것.

자바 스크립트는 모든 브라우저에 내장되어있고 프론트엔드 개발자가 사용할수 있는 유일한 프로그래밍 언어이다.

브라우저는 html을 열고, html은 css와 js를 가져오는 것.(css나 js는 브라우저에서 연다고 실행X, html 을 브라우저에 열어서 그 안에서 실행)

Data Type(데이터 타입의 종류)

정수/실수/문자열

  1. Number
    1) 정수(Integer) // 1, 2, 3, 4 ...
    2) 소수(Float) // 1.555, 2.545345 ...
  • Number타입은 서로 연산기호를 이용하여 계산할 수 있다.
  1. String
    : 처음부터 끝까지 문자(Text)로 구성되어 있다는 의미

console.log(); 라는 함수를 통해서 콘솔창에 무언가를 출력할 수 있음.

number형은 따옴표없이 입력해도 인식해서 알아서 출력해주고 string은 앞뒤로 "큰따옴표" 혹은 '작은따옴표'로 같은 따옴표를 써서 묶어줘야 한다.

Boolean/null/undefined

data type 에는 숫자 , 문자 말고도 boolean 값으로 true와 false가 있다.

또 다른 값으로는 null, undefined가 있다.

  1. null: 값이 정의되긴 했지만 값이 없음을 의도적으로 알리기 위해 채워진 값이다.
  2. undefined: let something; 처럼 변수에 값을 지정하지 않아 메모리 상에 변수는 선언되었지만 값이 정의되지 않은 것이다.

변수란?

variable은 값을 저장하거나 유지하는 역할을 한다

  1. const : constant(상수) 바뀌지 않는 값, 값을 업데이트 할 수 없음.
  2. let : 생성할 때 사용, 생성 후에 값을 바꿀 수 있음. 새로운 것(변수)을 생성할 때만 앞에 let을 붙여주고 한번 생성된 변수는 let 없이 '변수명 = 값' 으로 업데이트가 가능.
  3. var - 어디서든 변경할 수 있음. 실수로 값을 업데이트해도 알아차릴 수 없는 단점. (구버전)

    ★ always use const, sometimes let, never var ★
    let - 재선언 금지, 재할당 가능
    const - 재선언 금지, 재할당 금지
    var - 재선언 가능, 재할당 가능

variable naming example
javascript : veryLongVariableName ( camelCase )
python : very_long_variable_name ( snake_Case )

Array(배열)

//배열생성
const days_of_week = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

//배열접근방법. 첫번째 인덱스는 0임.
console.log(days_of_week[0]); //Mon출력
console.log(days_of_week[1]); //Tue출력
console.log(days_of_week[6]); //Sun출력

//배열 값 변경
days_of_week[0] = "월요일" //Mon을 월요일로 변경
console.log(days_of_week[0] = "월"); //출력과 동시에 변경 가능

javascript 에서의 배열에는 자료형(Data type)이 달라도 하나의 배열에 저장할 수 있다.

시작과 끝에 [ ]를 쓰고 쉼표(,)로 구분을 해준다.

array를 이용해 값들을 list로 저장한다.

array 안의 데이터에 접근할 때는 name[0]처럼 접근한다. 첫 번째가 0부터 시작한다.

push() 함수를 이용해서 배열의 마지막에 값을 추가할 수 있다. ex) name.push(“sun”)

Object(객체)

설명이 필요하지 않은 데이터 리스트들은 array로,
설명이 필요한 정보가 담긴 데이터 리스트들은 object로 선언.

object는 property를 가진 데이터를 저장해주며, { } 를 사용한다.

게임 캐릭터의 속성을 지정할 때 변수명을
const playerName = "woohyun";
const playerPoints = 100;
const playerFat = true; 으로 지정하면 한 그룹으로 모아서 인식하기 힘들고

const player = ["woohyun", 100, true]; 로 지정하면 어떤 속성의 값인지 알 수 없다.
(왜냐면 list는 같은 속성의 나열만 취급하기 때문이다.)

다른 속성의 리스트를 만들기 위해서는 0bject를 만들어야 하는데 이때 [] 대신 {} 사용.

const player = {
	name: "woohyun",
	points:100,
	fat:true
};

console.log(player); >> {name:"woohyun", points:100, fat:true}

property를 불러오는 방법은 2가지가 있다.
1) console.log(player.fat); >> true
2) console.log(player["fat"]); >> true

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

예) player=false; >> error
player.fat=false; >> success

그리고 property를 추가 할 수도 있다.

player.koreanName = "킹우현";

--> {name:"woohyun", points:100, fat:true, koreaName: "킹우현"}

profile
조급함보다는 꾸준하게

0개의 댓글