[JS]data type, variable, boolean, array, object, function, return, conditionals

Hyodduru ·2021년 9월 25일
0

JavaScript

목록 보기
4/60
post-thumbnail

출처 : nomad coder 크롬 앱 만들기

자바스크립트를 다루는 방법 : 브라우저의 console 이용하기.

HTML에 CSS & JS 불러오기

CSS : <Link rel ="stylesheet" href ="style.css">
  JS : <script src = "script.js"></script>

Data type

  • number
    integer = full number (정수) ex) 1,2 / float ex) 1.2
  • string = text ex) "hello"

console.log() : 괄호 안에는 number 혹은 string과 같은 data type을 입력할 수 있다. console에 값을 출력하는 장치이다.

Variable

1. const

const = 상수. 바뀌지 않는 값

ex)

constant a = 5;  -----> constant인 valauble을 만든 것!
console.log(a+2);
console.log(a/2);
console.log(a*2);

변수를 만들 때 띄어쓰기가 허용되지 않는다.
띄어쓰기 대신 첫글자를 대문자로 적어줄 수 있다.

ex) const myName = "hani";
    const veryLongVariableName = "sally";

이와 같은 이름의 형태를 camelcase라고 부른다.(낙타모양)

2. let

constant 와 let 의 차이
이 둘은 동일한 결과 값이 나오지만, const는 값이 바뀔 수 가없지만 let은 새로운 정보를 업데이트 할 수 있는 특징을 가지고 있다.
ex)

let myName = "nico";
myName = "nicolas";

라고 적어주면 정보가 변경이 된다. let 대신 const를 쓰면 오류가 뜬다.
정보를 변경할 때 let을 한 번 더 적어줄 필요는 없다. let은 변수를 생성할 때만 쓰인다.

정리 : 기본적으로 대부분의 경우 const 를 사용하고 variable을 업데이트하고 싶다면 필요한 경우에만 let을 사용할 것! (var은 쓰지 말기!)

Boolean

Boolean : True or false 의 값

const hi = true

문자열이 아니기 때문에 따옴표와 함께 쓰이지 않는다.

  • null : 아무 것도 없는 상태 자체가 값인 것. 그 변수에 아무 것도 없다는 의미. (false 와 다름), 자연적으로 발생하지 않는다. variable 안에 어떤 것이 없다는 것을 확실히 하기 위해 쓰인다.
const hi = null

아무 것도 없는 상태로 변수가 채워진 것.

  • undefined : 값이 없는 것. 컴퓨터 메모리에는 저장이 되어있지만 값이 없을 때 "undefined" 이라고 출력이 된다.
let something;
console.log(something);

위와 같은 경우 값을 명시하지 않았기 때문에 undefined이라고 표기가 된다.

null 과 undefined 는 다름!

Array

Array : (일일히 변수를 만드는 데에는 한계가 있기에) data를 정리 해주는 역할을 한다.

ex)

const daysOfWeek = ["mon","tue","wed","thu","fri","sat"]
const nonsense = [1, null, undefined, "hello"] 

console.log(daysOfWeek[0]);
console.log(nonsense);

배열 내의 element로는 변수를 포함하여 어떠한 data type이든 올 수 있다!

array 내의 데이터 추가하기 : .push()
ex)

daysOfWeek.push("sun")

Object

object : array와 다르게 각각의 요소들에 대한 부연 설명이 필요할 때.
내부에 있는 요소들을 property라고 부른다.
ex)

const player = {name : "nico", points : 10, fat : true};

console.log(player.name);

위의 코드로 콘솔 내에 "nico"라는 값이 출력이 된다.

object 내의 데이터 변경 또는 추가하기
ex)

player.fat = false ; 
player.age = 25 ;

variable을 const 로 설정했음에도 정보가 변경이 되는 이유는 variable이 아닌 그 안의 무언가를 수정한 것이기 때문!
만약 player = false 라고 했다면 오류가 발생한다.

Function

function : 계속 반복해서 사용할 수 있는 코드조각
function sayHello(){} 와 같은 형태
()내에 argument를 보냄으로서 function을 실행시킬 수 있다.

ex)

function sayHello(nameOfPerson){
			console.log("hello my name is " + nameOfPerson)};

sayHello('Hani');
sayHello('Nico');

hello my name is Hani 라고 출력된다.

여러 인자를 넣는 것도 가능하다.
ex)

function SayHello(nameOfPerson, age)
{console.log("Hello my name is " + nameOfPerson + "I am " + age)};

sayHello("Hani",25);

function plus(a,b){console.log(a+b)};

plus(2,3)

함수들의 객체 만들기
ex)

const player = { sayHello : function(OtherPersonsName)
{console.log("hello " + OtherPersonsName + "nice to meet you),
sayBye : function(OtherPersonsName)
{console.log("bye " + OtherPersonsName);

player.sayHello('Hani')

Return

Return : 어떤 작업을 처리하고 그 결과를 return하기 위해 function을 사용한다.

ex)

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

const krAge = calculateKrAge(96);

console.log(krAge)

위의 코드 값으로 console 내에 98 값이 출력이 된다.

이 function이 호출한 것은 calculateKrAge 함수의 "return"값이다.

만약

function calculateKrAge(ageOfForeigner)
{ageOfForeigner + 2 ; 
return "hello"}

const krAge = calculateKrAge(96);

console.log(krAge)

와 같은 코드라면 return 값인 "hello" 가 반환 된다.

return을 사용함으로써 함수 내부에서 직접 console.log를 사용하지 않아도 되었다. -> 내부에서 console.log를 하는 대신 function의 외부에서 값을 얻은 뒤에 그 값으로 무엇이든 할 수 있는 것!

또다른 ex)

const calculator = {
       plus : function(a,b){return a + b},
       minus : function(a,b){return a - b},
       times : function(a,b){return a * b},
       divide : function(a,b){return a / b}};

const plusResult = calculator.plus(2,3);
const minusResult = calculator.minus(plusResult, 10);
const timesResult = calculator.times(10, minusResult);
const divideResult = calculator.divide(minusRetult, 2);

각 함수들의 상호관계 파악 가능

console.log를 표시하지 않았기 때문에 console 내에 표시가 되지는 않지만 plusResult 의 값을 입력하면 value가 출력이 된다!

console.log는 console내에 값을 표시해주지만 이를 function 안에 넣으면 js 코드에서는 그 value를 바로 얻을 수가 없다.

만약 함수 내에 return 대신 console.log를 적는다면 plusResult를 적었을 때 undefined라고 나온다. -> 아무것도 return 하지 않았기 때문

정리 : 외부에서의 value를 얻고 싶을 땐 꼭 return 써주기.

추가사항> return 하는 순간 function은 결과값을 남기고 종료 된다.
ex)

const calculator = {
       plus : function(a,b){return a + b 
       			    console.log("hi")}

다음과 같은 경우 return값만 나오고 뒤의 명령은 실행되지 않음.

Conditionals

promt(message,default) : 사용자에게 창을 띄울 수 있게 해준다.
promt 자체가 js 코드 실행을 멈추고 있을 수 있는 기능이 있다.
(but 요즘은 잘 사용하지 않음)

typeof : variable이 어떤 datetype인지 확인하고 싶을 때 사용할 수 있다.
ex)

const age = promt("how old are you?");

console.log(typeof age);

위의 코드로 console 내에 string 이라는 값이 출력된다.

parseInt()

parseInt() : string을 number 형태로 바꾸어 준다.
ex)

console.log(typeof "15" typeof parseInt("15")

위의 값으로 console 내에 string number 이 출력된다.

parseInt()의 장점 : 숫자의 크고 작음을 비교할 수 있다.
사용자가 숫자가 아닌 문자열을 입력했을 때 인지할 수 있다.

console(parseInt(age))

promt 창에 문자열을 입력했을 시 NaN(Not a Number)이라는 값이 나온다. 이를 통해 숫자와 문자열을 구분할 수 있는 것!

isNaN()

isNaN() : 값이 true or false 로 출력이 된다. datatype이 숫자인지 아닌지 알려준다.

true = Nan (숫자 x)
false = 숫자

const age = parseInt(prompt("how old are you?"))

console.log(isNaN(age))

숫자이므로 false라는 값이 출력이 된다.

if문

ex)

if(isNaN(age)){
	console.log("please write a number.")}
else{console.log("Thank you for writing your age.")}

else if문

여러개의 조건을 만들 수 있다.
ex)

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("Do whatever you want.")}
      

맨 마지막에 나오는 else 는 위의 모든 조건이 false 일 때 실행이 된다. 생략 가능!

&& : and (a와 b 둘다 true 이어야 함)
|| : or (a 또는 b 둘중 하나 이상이 true 이어야 함)

위 함수에
else if(age===100){} 을 추가하고 싶다면, else if(age > 80){} 위에 적어줄 것! (js는 위에서 아래의 순서로 실행되기 때문!)

if((a&&b)||(c&&d)||(x||y)){} 와 같은 복잡한 형태도 가능하다.

profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글