JS - [Basic / function / conditional]

노마드코더 강의 참조

이미지를 누르면 링크로 연결

 

---

0. First JS Project

첫 JS 프로젝트 만들어보기! 브라우저에서도 콘솔 창을 통해 JS 코드를 입력해볼 수 있지만 한 줄 씩만 입력 가능하기에 불편하다. 그래서 VS Code를 이용해서 파일을 만들어 보자.

사진과 같이 js 파일을 만들고 알림창을 띄우는 코드를 작성했다. 그런데 브라우저에서 파일을 열어보면 알림 창이 아니라 코드가 그대로 출력된다. 브라우저는 html을 열고, html은 css와 js를 가져오는 방식이다. 그렇기에 css나 js 파일을 열어서는 우리가 원하는 결과를 얻을 수 없고, css와 js 파일을 연결한 html 파일을 브라우저에서 열어야 한다.

css 파일 연결

참고로 일반적으로 js 파일은 맨 위에서 가져오지 않고 주로 끝에서 한다.

js 파일 연결

그리고! 앞으로 작업할 때는 브라우저에 콘솔창은 항상 띄워놓고 하기!! (오류 확인용)

 

---

1. Basic

 

   < 자바스크립트 >

1) 인터프리터 언어 <-> 컴파일 언어 (ex.자바)

    : 코드를 위에서 아래로 순차적 실행. 에러가 발생하기 전까지만 동작

2) 클라이언트 스크립트 언어

    : 서버의 부하를 덜어주는 역할 (서버에서 처리할거를 클라이언트가 처리하게 만듦)

3) '객체' 기반의 언어

4) 오픈소스기반의 코드

    : 외부로 분리는 가능하나, 완벽하게 숨길수는 없다.

5) 다양한 라이브러리 제공 - Jquery, Nodejs

6) HTML5 API 기반의 언어

 

---

   < Data Type >

데이터 타입은 크게 숫자와 문자로 나뉘며 숫자에는 정수(Integer), 실수(Float)가 있다. 문자(String)는 " " 큰따옴표 혹은 ' ' 작은따옴표로 묶어서 사용하기.

 

그 외에 데이터 타입을 몇 가지 알아보자.

• boolean : true(참), false(거짓) 2가지 값 존재
• null : 아무것도 없음을 의미하며 절대 자연적으로 발생하지 않음. variable 안에 어떤 것이 없다는 것을 의도적으로 알려주기 위해 사용
• undefined : 존재하는데 정의되지 않은 것. 즉 컴퓨터 메모리 안에는 존재하는데 값이 들어가있지 않은 상태.    ex) let something; 과 같이 변수를 선언만 한 후 값을 주지 않고 출력하면 undefined 상태가 됨.

* Boolean-false : 0, null, undefined, "" (공백문자)

  Boolean-true : false 값 ( 0, null, undefined, "" )을 제외한 모든 데이터

 

 

---

   < Variable >

변수(Variable)는 값을 저장하거나 유지하는 역할을 한다. 변수명에는 공백이 있을 수 없으며 공백이 필요하다면 JS에서는 주로 두 번째 단어부터 첫 문자를 대문자로 사용하는 방식(camelCase)을 사용한다.

JS에서 변수 선언은 const와 let 두 가지 키워드로 가능하다. const는 바뀌지 않는 값, 계속 유지되는 값에 사용하고 let은 variable 값을 업데이트 할 필요가 있을 경우, 즉 후에 변수 값을 바꿀 경우 사용한다. 선언할 때만 let 키워드를 사용하고 이후부터는 그냥 변수명에 값을 넣어주면 된다.

 

변수 선언은 주로 const를 사용하고, 업데이트가 허용되어야 하는 경우만 때에 따라서 let을 사용해서 만들도록 하자!

(예전에는 어떠한 규칙도 없고 값의 업데이트도 가능한 var 키워드를 사용해서 변수를 생성했다. 후에 몇몇 값을 보호하기 위해 const와 let으로 사용하게 되었다. var도 여전히 사용 가능하지만, 새롭게 나온 const와 let을 따르도록 하자.)

결론적으로 -> 항상 const 가끔 let 노노 var !!!

 

 

---

   < Array >

하나의 variable 안에 데이터의 list를 가지는 Array(배열)에 대해 알아보자. array에는 대괄호 [ ] 를 이용해 다음과 같이 데이터들을 넣어줄 수 있다.

nonsense 라는 Array 생성

 

Array에서 데이터 컨트롤하는 방법!!

• 항목 가져오기 : 배열명[항목 번호] 와 같이 사용해서 값을 받아올 수 있음. 컴퓨터는 0부터 시작하므로 첫 번째 항목은 컴퓨터에서 숫자 0과 같다.  ex) nonsense[5] -> true
• 항목 추가 : 배열명.push(항목) 과 같이 사용.

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

// Get Item from Array
console.log(daysOfWeek[3]);
// thu 가 출력됨

// Add one more day to the array
daysOfWeek.push("sun");
console.log(daysOfWeek);
// ["mon", "tue", "wed", "thu", "fri", "sat", "sun", "sun"] 가 출력됨

 

---

   < Objects >

앞서 사용했던 console.log나 array.xxx 처럼 object를 이용해 xx.xx 를 직접 만들 수 있다.

object는 중괄호 { }를 이용하며 다음과 같이 생성한다. object 안에서는 = 대신 : 를 사용하고 , 를 사용하여 구분한다.

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

위의 코드를 예시로 값 컨트롤 방법에 대해 알아보자.

 

• object의 property 확인 : player.name 또는 player["name"]
• 값 업데이트 : player.name = "YJ";
• property 추가 : player.lastName = "Yun";

 

---

2.  Functions 

function은 계속 반복해서 사용할 수 있는 코드 조각과 같다. 어떤 코드를 캡슐화해서, 실행을 여러 번 할 수 있게 해 준다.

소괄호 ( )와 코드블럭을 나타낼 중괄호 { } 이용해 생성하며, argument(인자)를 통해 function에게 데이터를 전달할 수 있다. 인자는 여러 개를 넣어줘도 된다.

확인 결과 잘 출력됨!

object안에서의 function생성은 조금 다르다.

 

함수에서는 return을 사용해 값을 반환해서 함수 밖에서도 값을 사용할 수 있다. 그리고 return을 하면 function은 작동을 멈추고 결과 값을 반환하고 끝낸다. 즉 return 이후의 코드들은 실행되지 않는다.

plusResult는 5가 됨. but! console.log 사용하지 않았으므로 출력은 안됨

 

 

---

3. conditional

음주 가능한 나이를 계산하는 간단한 계산기를 만들면서 조건문에 대해 알아보자.

 

prompt() 는 문자(message)와 default 총 2개의 인자를 가지며, 사용자에게 message를 보여주고 값을 받아오는 함수이다. 아래와 같이 코드를 작성하고 실행했는데

탭 창을 보면 브라우저가 로딩중이고 prompt 함수로 인해 팝업창이 뜨는걸 확인할 수 있다. prompt는 css로 어떤 스타일도 적용시킬 수 없다.. 아주아주 오래 전에 사용하던 함수로 요즘은 쓰지 않으니 참고.

어쨌든! 팝업창에 숫자를 입력하고 typeof() 함수로 타입을 확인해보면 데이터 타입이 string으로 뜨는 것을 볼 수 있다. parseInt() 함수를 사용하면 string을 number로 바꿀 수 있다.(혹은 Number( ) 함수도 사용 가능) 만약 123 과 같은 숫자가 아니라 asas 처럼 문자를 입력했다면 숫자가 아니라는 의미의 NaN 를 반환한다. 그리고 isNaN() 함수를 이용하면 인자가 number 타입인 경우 false를 반환해 준다.

 

아래와 같이 사용자에게 나이를 입력받아 조건에 따라 출력하는 계산기 완성!

 

* if 조건식 위치에 값만 있는 경우 Boolean() 결과를 생각하면 됨. 즉 0, null, undefinded, ""를 제외하고 숫자 String 등은 모두 true 로 생각!!

---