JS)변수,타입,함수

백준우·2021년 8월 24일

JavaScript 변수 타입 합수

JavaScript & TypeScript

목록 보기

1/15

학습 목표

1. 변수
1.1 변수에 대해
1.2 변수 선언
1.3 변수 실습

2. 타입
2.1 타입이란
2.2 타입정리

3. 함수
3.1 함수에 대해
3.2 함수 기초
3.3 함수의 선언 종류
3.4 함수 실습

1. 변수

1.1 변수에 대해

상황에따라 변할 수 있는 값
프로그램을 실행하면서 변경될수 있는 값을 명명한것을 뜻한다.
테이터,값을 보관하는 상자에 이름을 정하는것으로 생각하면된다.
정해진 이름(=변수)를 통해 값을 불러와 사용,정의 할수 있다.

그럼 변수는 왜 설정하는 것일까요?
만약 여러분들이 곱하기를 하는 코드를 구상하였다고 생각해보겠습니다.

예제1)
구구단 3단을 3까지 작성하시오

 console.log (3*1)
 console.log (3*2)
 console.log (3*3)

위와 같은 곱하기 문제에 3이 아닌 5단을 3까지 구하시오라는 문제로 출제되면 한줄한줄 변경하는것이 아닌 변수지정을 통해 한번에 변경이 가능합니다.

let num  = 5
 console.log (num*1)
 console.log (num*2)
 console.log (num*3)

1.2 변수 실습

먼저 변수를 선언하는 방법에 대해 알아보겠습니다.
먼저 C언어에서 변수를 선언하는 방법이다.

int C = 1 혹은 int D = 2

과 같이 C와 D라는 상자명에 "int"라는 정수형으로 형식을 선언한 후 숫자 1,2를 넣어둘수 있다.
하지만 Javascript에서는 정수형이라는 형식을 지정 안하여도 변수 선언이 된다.

변수 선언
let name;
할당하는 방법
name = 'Baek';
같이 입력하는 방법
let name = 'Baek'; 

1.3 변수 실습

거리를 구하는 공식이 속도 * 시간인것을 이용하여 이동한거리(dis)를 구해보자

먼저 시간과 속도의 변수를 지정해보자 (5시간동안 3Km거리를 이동)
time = 5;
speed = 3;
주어진 시간과 속도의 변수를 통해 dis변수의 값을 담아주자
dis = time * speed; 
(거리) = (시간) * (속도)

2. 타입

2.1 타입이란

JavaScript에는 값의 종류를 의미하는 타입이 있습니다.
타입은 크게 2개의 종류로 나뉩니다.

-원시타입-
1. 숫자(number)
2. 문자열(string)
3. 불리언(boolean)
4. undefined,null

-객체타입-
5. 객체(object)

2.2 타입정리

2.2.1 숫자(number)
JavaScript는 실수를 구분하지않고 모든 수를 실수로만 표현 합니다.
또한, 매우큰수,작은수는 e표기법이 사용가능합니다.

숫자 예제

let firstNum = 10;     // 소수점을 사용하지 않은 표현
let secondNum = 10.00; // 소수점을 사용한 표현
let thirdNum = 10e6;   // 10000000
let fourthNum = 10e-6; // 0.00001

2.2.2 문자열(string)
Javascript에서는 문자열을 큰따옴표("")와 작은따옴표('')로 표현할수 있습니다.

문자열 예제

let firstString = "Baek";      // 큰따옴표를 사용한 문자열
let secondString = 'baek';     // 작은따옴표를 사용한 문자열

2.2.3 불리언(boolean)
불리언(boolean)은 참값과 거짓값을 표현합니다. 예약어인 true와 false를 사용하여 나타낼 수 있으며 또한 불리언 값이 숫자 연산에 사용되면 참은 숫자 1로, 거짓은 숫자 0으로 변환된다.

불리언 예제1

let boolean1 = true;            
let boolean2 = false;   
console.log(0 + boolean1);  // 1
console.log(0 + boolean2);  // 0

불리언 값이 문자열 연산에 사용되면 참은 "true"라는 문자열로, 거짓은 "false"라는 문자열로 변환된다. 다음 예제를 보자.

불리언 예제2

let boolean1 = true;            
let boolean2 = false;   
console.log("" + boolean1); // "true"
console.log("" + boolean2); // "false"

2.2.4 undefined,null
자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미하며 undefined란 null과는 달리 '타입'이 정해지지 않은 것을 의미합니다. 따라서 자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환됩니다.

undefined,null 예제

let num;          // 타입이 정해지지 않았으므로 undefined 값을 반환함.
let str = null;   // object 타입의 null 값
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결괏값이 다르므로 주의해야 합니다.
null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않습니다.

동등 연산자, 일치 연산자 비교
null ==  undefined; // true
null === undefined; // false
2.2.5 객체(object)
자바스크립트의 기본 타입은 객체(object)입니다.
객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체입니다.
객체 예제
var me = { name: "baek", age: 23 }; 
document.getElementById("result").innerHTML =
"저의 이름은 " + me.name + "이고, 나이는 " + me.age + "살 입니다.";

3.함수

3.1 함수에 대해

자동차에는 수많은 부품이 들어갑니다. 이러한 자동차를 움직이기 위해 엔진은 어어떤것을 쓸것이며 바퀴의 크기와 좌석의 수등 수많은 요소들이 하나의 자동차를 만들기 위해 들어갑니다. 이때 엔진출력은 몇으로 할지, 좌석의 수는 몇개로할지,바퀴는 몇인치로 할지 등에 따라 다양한 자동차가 제작됩니다.
이러한 자그만한 요소들이 모여 하나의 자동차를 만들어낼때 부품하나하나를 함수라고 할 수 있습니다.

함수란 프로그램을 실행하는 작은기능의 단위
함수 선언과 호출을 통해 프로그램을 구동할수 있다.
함수에 담기는 변수의 값에따라 다양한 값이 나올수 있다.

3.2 함수 기초

간단히 말해 위의 설명과 연관되어 엔진이라는 함수에 3천cc라는 변수를 주어 3천cc자동차를 만들어낸다라고 생각하면 되겠다.

function 자동차제작 (엔진,바퀴크기,좌석수) {
  // 엔진,바퀴크키,좌석수를 입력받아 자동차 제작에 사용된다.
  //1. 엔진출력은 (엔진)으로 정한다.
  //2. 바퀴는 (바퀴크기)로 정해진다.
  //3. 시트의 갯수는 (좌석수)로 정해진다.
  return 자동차 //자동차가 만들어져 나온다

프로그램에서 함수를 호출하기 위해서는 먼저 만들어야한다.
가장 기초적인 함수 선언부터 해보겠다.

function cal (num1,num2){ //num1과 num2을 변수로 받아
return num1+num2; //num1 + num2 값을 return하여 출력한다.
}

3.3 함수의 선언 종류

함수선언 방법에는 함수선언식,함수표현식,화살표함수가 있다.
삼각형의 넓이를 구하는 공식을 함수로 만들어 확인해보겠다.

함수 선언식

function getTriangle(base ,height){ 
  // getTriangle 함수에 base와 height 변수 선언 
  let triangle = (base * height) /2 ;
  // triangle에 삼각형 구하는 공식 대입 
  return triangle 
  // triangle을 return하여 값 출력 
}

함수 표현식

const getTriangle = functuion (base ,height){ 
 // getTriangle 함수에 base와 height 변수 선언 
 let triangle = (base * height) /2 ;
 // triangle에 삼각형 구하는 공식 대입 
 return triangle 
 // triangle을 return하여 값 출력

화살표 함수 (함수 표현식보다 좀더 간결한 문법을 만들수 있습니다.)

const getTriangle = (base ,height) => { 
 // getTriangle 함수에 base와 height 변수 선언 
 let triangle = (base * height) /2 ;
 // triangle에 삼각형 구하는 공식 대입 
 return triangle 
 // triangle을 return하여 값 출력

화살표 함수에 대해

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.
const getTriangle = height => height * height ; 
인수가 하나도 없을때는 괄호를 비워두면 됩니다.
let sayHi = () => alert("안녕하세요!");
sayHi(); // 안녕하세요!

3.4 함수 실습

함수에 대해 전반적으로 알아봤으니 이제 함수로 19살이상이면 성인 19살 미만이면 비성인이라는 코드를 작성해보자

let age = prompt("나이를 알려주세요.");
let adult = (age >= 19) ?
  () => console.log('성인') :
  () => console.log("비성인");

adult();

#출력물
1.함수 입력

2.값(나이) 입력

3.결과값 출력

변수값으로 26 입력시 정상적으로 성인이 출력되었다.

이상 변수,타입,함수에 대해 알아보았다.

변수는 값을 담을 상자의 이름을 정의하는것이다.

Javascript에는 입력하는 값에따라 type이 있다.

함수를 통해 변수에 담긴값을 활용해 다양한 계산을 할 수 있다.

백준우

이게 되네?

다음 포스트