JAVASCRIPT 기초

Bona의 블로그 입니다.·2022년 3월 4일
0

JavaScript

목록 보기
6/9
post-thumbnail

Data type

  • 아직 좀 헷갈림...
  • Boolean은 True 아니면 False
  • string : 숫자 아닌 거
  • number : 숫자들.. 계산 가능

Object

  • 게임 캐릭터의 속성을 지정할 때 변수명을
    const playerName = "Jane";
    const playerPoints = 100;
    const playerFat = true; 으로 지정하면 한 그룹으로 모아서 인식하기 힘들고
    const player = ["yeon", 100, true]; 로 지정하면 어떤 속성의 값인지 알 수 없다.
    (왜냐면 list는 같은 속성의 나열만 취급하기 때문이다.)
  • 다른 속성의 리스트를 만들기 위해서는 0bject를 만들어야 하는데...
    object는 property를 가진 데이터를 저장해주며, { } 를 사용한다.
	const player = { name: "Jane",
			             points:100,
			             fat:true};

	// property를 불러오는 방법은 2가지가 있다.
	console.log(player.name);        // => jane
	console.log(player["name"]);     // => jane

	console.log(player);             // => {name:"yeon", points:100, fat:true}
  • property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다.
	const player = { name : tomato,
    	             color : red,
        	         food : true,};

	console.log(player);

	// property를 추가 할 수도 있다.
	player.color = "blue";

	console.log(player.color);     // =>blue
  • const는 let과 다르게 update가 안되지만
    리스트의 경우 전체를 변경하는 게 아니라 속성값을 수정/추가하는 경우에는
    update 가 가능하다
    예) player=false; >> error (전체변경은 안돼!!)
    player.fat=false; >> success (리스트에 추가해줄게!!)

Function

  • function은 내가 계속 반복해서 사용할 수 있는 코드 조각이다. 어떤 코드를 캡슐화 해서 실행을 여러번 할 수 있게 해준다.
	function sayHello( ){
		console.log("Hello!");
	};
  • 소괄호 안에 작성하는 것은 실행버튼을 누를 때마다 발생한다.
  • sayHello( ); 이렇게 쳐서 실행할 수 있다.
  • argument(인수)는 function을 실행하는 도안 정보를 function에게 보낼 수 있는 방법으로, 소괄호 안에 위치한다.
  • 그렇다면 argument를 어떻게 function에게 보낼 것인가?
  • function의 ( )안의 매개변수에서 argument(인수)를 받아들일 수 있다.
    또 인수는 여러개를 넣을 수도 있다.
	function sayHello(nameOfPerson, age) {
	    console.log("Hello my name is " + nameOfPerson + " and I'm " + age)
	}
	sayHello("janny", 10)      // => Hello my name is janny and I'm 10

	function divide(a, b) { console.log(a / b) }

	divide(50, 10)             // => 5 (순서 중요!!!)
  • function의 값은 function 안에서만 존재한다.
  • 오브젝트 안에서 매개변수가 아규먼트를 받는 방식
	const player = {
	    name: "Jane",
 	    sayHello: function (otherPersonName) {
    	    console.log("hello! " + otherPersonName + " nice to meet you");
  		  },
	}

	player.sayHello("Gabrielle");    // => hello! Gabrielle nice to meet you
	//오브젝트 player안에 sayHello()를 실행새켜줘!
  • conslole.log(console) ➡️ 콘솔창에 함수들이!!!
  • 지금까지 계속 쓰던 console도 object였어!!! (계속 썼는데 지금 알다니!!)
  • 나의 계산 오브젝트 만들기
	const calculator = {
 	   add: function (a, b) {
    	    console.log(a + b);
   	 },
  	  minus: function (a, b) {
   	        console.log(a - b);
     },
 	   multi: function(a, b) {
  	        console.log(a * b);
     },
  	   divide: function(a, b) {
            console.log(a / b);
     },
       power: function(a, b) {
            console.log(a**b);
     },    
   }
  • 그런데... 내가 만든 데이터를 코드 안에서 받아서 쓰고 싶을 때는 어떡하지?

Return

  • 함수가 수행한 결과를 코드 안에서 받아서 쓰고 싶을 때 써보자!!
  • 함수는 가장 안쪽에서부터 차례대로 실행된다.

Conditionals

  • 조건문
  • prompt();라는 함수는 사용자에게 창을 띄어 값을 받음.
  • prompt();를 사용하면 답을 할때까지 코드의 실행을 멈추고, 매우 오래된 방법임. 별로 안이쁨. css로 바꾸지도 못함,
	const age = prompt("how old are you?");
	console.log(typeof age);                 // =>사용자가 입력한 값이 그대로 출력!!
  • typeof라는 키워드를 쓰면 datatype를 볼 수 있는데, prompt();에서 숫자를 입력해도 string이라고 뜬다. string이 디폴트이기 때문이다.
  • 한 type로 받아서 다른 type로 바꾸는 작업을 해야한다. "15"-->15
  • string-->number로 변환해주는 함수 parseInt();
  • console.log(typeof "15", typeof parseInt("15")); ==> string number
  • 이렇게 숫자로 변환이 되야 비교를 할 수 있다.
	const age = parseInt(prompt("how old are you?"));
	console.log(age);
  • 참고로 "숫자"가 아닌게 입력되면 변환이 안됨. NaN(not a number)
  • isNaN 은 무언가가 NaN인지 판별하는 방법
	const age= parseInt(prompt (“How old are you?));
	console.log(isNaN(age));
	// 사용자가 숫자입력하면 false
	// 사용자가 글자입력하면 ture

	if(condition){ // condition == true
	} else{ // condition == false
	}

	//condition은 boolean으로 판별가능해야 한다, (true , false)
	if(isNaN(age)){
		console.log(“please wirte a number”);
		} else{
		console.log(“Thank you for writing your age”);
	}
  • 조건이 여러개 라면?
  • else if : 조건을 하나 더 추가할 수 있다
	const age = parseInt(prompt("how old are you?"));

	if (isNaN(age)) {
	    console.log("Please write a number.");
	} else if (age < 18) {
	    console.log("You are too young.")
	} else {
	    console.log("You can drink")
	}
  • 조건에서 AND는 && (AND operator(연산자))
  • OR operator(연산자)는 || (shift + 역슬래쉬 혹은 원화)
	const age = parseInt(prompt("how old are you?"));

	if (isNaN(age) || age < 0) {
	    console.log("Please write a real positive number.");
	} else if (age < 18) {
	    console.log("You are too young.")
	} else if (age >= 18 && age <= 50) {
	    console.log("You can drink.")
	} else if (age > 50 && age <= 80) {
	    console.log("You should exercise.")
	} else if (age > 80) {
	    console.log("You can do whatever you want.")
	}
	// 나이 계산기 !!!

내가 써놓고 계속 복습하려고 남겨놓은 글...

profile
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

0개의 댓글