자바스크립트 02. JS - 변수, 타입,조건, 반복, 제어 ,함수

변수

변수 checklist

• 프로그래밍은 데이터 처리를 하는 것임을 이해한다.
• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
• 변수의 선언과 할당에 대해서 설명하고 코드로 작성할 수 있어야 한다.
• 표현문이 값으로 변환되어서 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.

변수 기초, 변수 실습

변수란 변할 수 있는 값을 말한다.

check list

• num = num + 1 이 왜 할당이 되는지 설명할 수 있다.
• 변수가 선언만 되고, 할당만 된 상태의 변수 값을 알고 있다.

변수를 사용한다는 것은

데이터를 보관하는 보관함을 메모리라고 하고 

보관함의 크기는 동일함

보관함의 이름이 변수임

변수를 통해 데이터를 활용가능함

 

1.데이터 보관함 확보

선언 (declaration ) 

Let-Mutable(변동가능한)

let age;  

 

var는 안써야함 .

var을 쓰지 않는 이유 

1. var hosting 마지막에 써도 위로 올라가서 선언하게 됨.
2. block scope를 무시함.

name =4;
let name;
// let이 선언하기 전에 나오기 때문에 error 출력

하지만 var는 선언하기 전에 나옴
age =4;
var age;
// 4 출력됨.

Contants - immutable

많이 사용하면 좋음.

이유 : 보완상 써야함. 

값이 변경할 이유가 없으면 코드를 변경하지 않는 contants 를 사용 하는 것이 좋음.

 

2. 보관함에 자리가 확보 되면 그곳에 데이터 저장이 가능함

그것을 할당이라고 부름 (assignment)

age=12;

3. 선언과 할당을 동시에 할 수도 있음.

let name ='kim'; 

 

변수의 몇가지 규칙

공백을 못씀

중간의 첫글자는 대문자를 사용함 

 

ex) let areaOfCircle = pi * radius * radius;

> 변수엔 공백을 쓸 수 없으므로, 보통 단어의 첫 글자를 대문자로 써 붙이고 이를 낙타 등모양 처럼 생겼다 하여 Camel case라고 부름

 

변수는 동일한 변수를 이용해 대입할 수 있음

let sum = 1;

sum = sum +2; (sum은 sum+2를 하는 것 )

sum = sum +3; (sum은 sum+3를 하는 것 )

sum = sum +4; (sum은 sum+4를 하는 것 )

 

한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않음.

 

할당이 되지 않은 값은 undefined 값이됨.

 

타입 (type) 

string 문자열

number 숫자

 

 

기본 타입 

 

타입이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.

 

자바스크립트의 기본타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

 

원시타입 (primitive type)

 

1. 숫자.

2. 문자열

3. 불리언

4. 심볼

5. undefined

6. 객체

 

타입변환 (type conversion)

 

자바스크립트는 타입검사 매우 유연한 언어임.

자바스크립트의 변수는 타입이 정해져있지 않고 같은변수에 다른 타입의 값을 다시 대입할 수도 있음.

 

var num = 20; // Number 타입의 20

num = "이십"; // String 타입의 "이십"

var num;      // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없습니다. 재선언문은 무시됩니다.

 

묵시적 타입변환(implicit type conversion)

 

자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.

 

<script>
		var result = 10 + "문자열";	// 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
		document.getElementById("result").innerHTML = result + "<br>";
		result = "3" * "5";			// 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
		document.getElementById("result").innerHTML += result + "<br>";
		result = 1 - "문자열";		// NaN
		document.getElementById("result").innerHTML += result;
	</script>

-----------------------------------------result------------------------------------------------
10문자열
15
NaN

 

명시적 타입 변환(explicit type conversion)

 

자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공합니다.

명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수는 다음과 같습니다.

 

1. Number()

2. String()

3. Boolean()

4. Object()

5. parseInt()

6. parseFloat()

 

 

숫자를 문자열로 변환

 

숫자를 문자열로 변환하는 가장 간단한 방법은 String() 함수를 사용하는 것입니다.

또한, null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드를 사용할 수도 있습니다.

 

숫자(Number) 객체는 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공합니다.

 

1. toExponential()

2. toFixed()

3. toPrecision()

 

메소드설명

toExponential()	정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함.
toFixed()	소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함.
toPrecision()	입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함.

 

불리언 값을 문자열로 변환

 

불리언 값을 문자열로 변환하는 방법에는 String() 함수와 toString() 메소드를 사용하는 방법이 있습니다.

 

String(true);     // 문자열 "true"

false.toString(); // 문자열 "false"

 

 

날짜를 문자열이나 숫자로 변환

 

날짜를 문자열로 변환하는 방법에는 String() 함수와 toString() 메소드를 사용하는 방법이 있습니다.

자바스크립트에서 날짜(Date) 객체는 문자열과 숫자로 모두 변환할 수 있는 유일한 타입입니다.

 

날짜(Date) 객체는 날짜를 숫자로 변환하는 다음과 같은 메소드를 별도로 제공합니다.

 

1. getDate()

2. getDay()

3. getFullYear()

4. getMonth()

5. getTime()

6. getHours()

7. getMinutes()

8. getSeconds()

9. getMilliseconds()

 

메소드설명

getDate()	날짜 중 일자를 숫자로 반환함. (1 ~ 31)
getDay()	날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6)
getFullYear()	날짜 중 연도를 4자리 숫자로 반환함. (yyyy년)
getMonth()	날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11)
getTime()	1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함.
getHours()	시간 중 시를 숫자로 반환함. (0 ~ 23)
getMinutes()	시간 중 분을 숫자로 반환함. (0 ~ 59)
getSeconds()	시간 중 초를 숫자로 반환함. (0 ~ 59)
getMilliseconds()	시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999)

<script>
		var result = String(Date());
		document.getElementById("result").innerHTML = result + "<br>";
        
		result = Date().toString();
		document.getElementById("result").innerHTML += result + "<br>";
        
		var date = new Date(); 			// Date 객체 생성
		result = date.getFullYear();
		document.getElementById("result").innerHTML += result + "<br>";
        
		result = date.getTime();		// 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함.
		document.getElementById("result").innerHTML += result;
	</script>
    
    --------------------------------result-----------------------------------------------
    
    
Tue Jul 30 2019 21:58:03 GMT+0900 (한국 표준시)
Tue Jul 30 2019 21:58:03 GMT+0900 (한국 표준시)
2019
1564491483508

문자열을 숫자로 변환

 

문자열을 숫자로 변환하는 가장 간단한 방법은 Number() 함수를 사용하는 것입니다.

 

자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공합니다.

 

1. parseInt()

2. parseFloat()

 

함수설명

parseInt()	문자열을 파싱하여 특정 진법의 정수를 반환함.
parseFloat()	문자열을 파싱하여 부동 소수점 수를 반환함.

불리언 값을 숫자로 변환

 

불리언 값을 숫자로 변환하는 방법에는 Number() 함수를 사용하는 방법이 있습니다.

Number(true);  // 숫자 1

Number(false); // 숫자 0

 

pi	숫자	3.141592
myname	문자열	Steve
isAdult	불리언(boolean) true/false	성인입니까?
banana apple pineapple	배열	let fruits =[ 'banana' 'apple' 'pineapple' ]
이름 steve 나이 32 학생입니까?	객체	let person ={ name='steve', age:32, isStudent: true };
undefined
	함수

연산자 (operator)

1.string concatenation

console.log('my'+'cat');
console.log('1'+2);
console.log('string literals: 1=2=${1+2}');

2. Numeric operator

 

3. Increment and decrement operators

 

4. Assignment operator 할당하는 연산

 

5.comparison operator  비교하는 연산

 

6. logical operator (중요)

|| or ,  && and,   ! not

 

7. Equality operator

== loose equality, with type conversion

=== strict equality 타입이 같을 때, no type conversion (선호)

console.log (0==false); // True
console.log(0===false); //False
console.log(''===false);  //True
console.log(''===false);  //False
console.log(null===undefined); //True
console.log(null===undefined); //False

8. If, else if, else

const name ='df';
if(name==='ellie'){
 console.log('Welcome, Ellie!');
}else if (name ==='coder'){
 console.log('You are amazing coder');
} else {
 console.log('unkwnon');
}

 

9. Ternary operator

//condition ? value1 : value2;

console.log (name ==='ellie' ? 'Yes' : 'no');

이름이 ellie면 Yes 

아니면 no 

간단하게 사용하고 싶을 때 사용함

 

10. Switch statement

const browser ='IE';
switch (browser){
 case 'IE':
   console.log ('go away')
   break;
 case 'Chrome':
 case 'Firefox': //같은 내용을 출력하면 case를 묶으면 됨.
   console.log('love you!');
   break;
  default:
   console.log('same all!');
}   

11. Loops

let i =3;
while (i>0){
 console.log ('while : ${i}');
 i--;
}

출력값
while :3
while :2
while :1

do while

do {
 console.log ('do while : ${i}');
 i--;
} while (i>0);

출력값
do while :0

for loop, for(begin; conditioon; step)

for (i=3; i>0, i--){
 console.log('for: ${i}');
}


//for 안에 let이라는 지역함수를 넣어서 작성해도 좋음.
for (let i =3; i >0; i=i-2){
 //inline variable declaration
  console.log('inline variable for : ${i}');
}

//nested loops
//for 문안에 for문 작성하는 방법

for(let i=0; i<10; i++){
for (let j=0; j<10; j++){
  console.log('i: ${i}, j:${j}');
  }
}

함수 

함수 checklist

• 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
• 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.
• 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다.
• 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다.

함수 기초, 함수 실습

• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.

함수는 코드의 묶음 (즐겨찾기 버튼과 같음)

기능의 단위

입력과 출력간의 매핑

호출 후에는 반드시 돌아옴.

 

함수의 사용법

1.버튼제작

함수의 선언 (declaration)

function cal(함수이름) (param1(매개변수), param2) {
   console.log(param1 + param2);//함수가 호출되었을 때 실행하고자 하는 실행문
   return param1 * 10;
}

2. 버튼 사용

호출 (call, invocation)

cal (10,20);

 

함수 표현식 

let result = cal (10,20) // 변수 result 에 10,20 대입
function cal (param1,param2) {  //function cal (10,20) {
   console.log(param1 + param2)  // console.log (10+20);
   return param1 * 10  // return 10 * 10;
}

 

함수에 대한 정의 

 

입력 > 함수 > 출력 과정으로 이루어져 있음

 

함수를 (컴퓨터에게 일을 시키기 위한) 지시사항의 묶음이라도 함. 

 

let length = getLength("안녕하세요");

console.log(length); // 5

 

함수의 선언 (함수 선언식)

functio myFunction (input){    

    //컴퓨터에게 시킬 일

}

* input 

특별히 함수에서 사용할 입력값을 매개 변수 (parameter)라고 부릅니다.

 

> 다음과 같이 정의할 수도 있습니다 (함수 표현식)

 

let myFunction = funtion (input) {

   // 컴퓨터에게 시킬 일

}

 

let timeToGoHome = funtion (speed,distance){
   let time = distance / speed;
   return time;
}
let myTime = timeToGoHome (20,100);
console.log(myTime);  //5

 

 

변수 선언하기(declaration)

변수 = 이름이 붙은 저장소를 의미함.

변수를 선언하기 위해서 let키워드를 사용합니다.

let에 넣은 변수는 메모리에 자리를 잡고 여러 값을 넣을 수 도 있습니다.

변수가 자리 잡는 동작을 변수의 선언이라고 합니다.

 

let word;

//word 변수값이 선언되었다는 뜻 

 

변수에 값 할당하기(Assignment)

비어 있는 변수에 값을 할당 할 때는 변수 뒤에 = 을 쓰고 할당하는 값을 넣으면 됨.

let word;

word = 'branden' // branden 문자열 할당

 

함수 

함수는 입력을 받아 출력을 하는 하나의 작은 기능 단위임,

 

 

함수의 선언

 

functio plusOne(input1) {
	input1 = input1 +1;
    return input1;
}

let minusOne = fuction(input2){
	input2 = input2 -1;
    return input2;
};

함수의 호출 (invoke; call)

변수에 함수가 담겨있으면, 다른 변수와는 다르게 () 괄호를 붙여서 함수를 호출할 수 있음.

또한 입력값을 설정할 수도 있는데, 이를 전달인자 (argument)라고 하고 줄여서 인자라고 부름.

 

let word=speakUp('hello world');
//변수 word
//할당된 함수 speakUp 
//문자열 hello world

 

함수의 리턴 (return)

 

함수가 호출되고 나면, 함수의 body(중괄호 내의 코드)에 있는 코드가 실행되고 결과값을 리턴(return)함.

이 결과 값은 함수의 body에서 어떤 값을 return 하는지에 따라서 결정됨.

아무것도 return 하지 않으면 undefined를 리턴함.

 

function minusOne(input) {
	input = input -1;
	return word;
}
let result = minusOne(10); //9

function functionWithoutReturn(){
	console.log('I may return!');
}
let result = functionWithoutReturn(); //undefined