1. return
- 함수는 기능을 실현하는 요소이며 값을 남기지 않는다
- 하지만 함수에 값을 남겨 활용할 때 사용하는 것이
return이다
finction plus(){
var a= 10;
var b=20;
return a+b; // plus의 함수에 30이란 값을 넣는다
};- 아래 코드는 함수를 값 처럼 활용하는 예시이다
var c = plus();
function plus(x, y){
return x+y;
};
var c = plus(5, 10) + 10;
// plus함수의 값은 return으로 인해 15가 된다
console.log(c); // 출력값 : 25
console.log와return의 차이
console.log: 출력문, 값을 저장하거나 내보내는 것이 아니라 확인하는 용도이다return: 값을 저장하고 내보낸다
- 자판기(함수)에 돈(인자값)을 넣으면 return(음료수)가 나온다
return값 밑으로는 실행되지 않고 끝난다- 위치의 관계를 잘 확인하자
예시1. function ap(a,b){ return a+b; console.log(a+b); } ap(1, 2); // console.log가 출력되지 않는다예시2. function ap(a,b){ return a+b; } ap(1, 2); //값이 출력되지않지만 함수의 return에는 남아있다예시3. function ap(a,b){ console.log(a+b); return a+b; } ap(1, 2); // 값은 출력되지만 그것은 console.log의 a+b를 더한 출력문이지 return값이 출력되는 것이 아니다function ap(a,b){ return a+b; } ap(1, 2); console.log(a+b); //함수 밖에서의 a+b는 출력되지 않는다 // 단 ap(1, 2);의 함수값을 확인할 수는 있다 -> console.log(ap(1, 2));
1-1. 지역변수와 전역변수
- 지역변수 : 함수 안의 변수
- 함수가 끝나면 함수 밖에선 못쓴다
- 함수 안에서 사용되고 사라진다
- 전역변수 : 함수 밖의 변수
- 전체에서 사용되는 변수로 사라지지 않는다
function plus(num1, num2) {
var sum = num1 + num2; // 지역변수 sum
return sum; // 참고로 데이터는 오직 딱 1개만 리턴될 수 있다.
};
var sum; // 전역변수 sum
sum = plus(2, 4);
// plus(2, 4)가 실행되면 전역변수 sum에는 6이 들어간다.
sum = plus(10, 20);
// plus(10, 20)이 실행되면 전역변수 sum에는 30이 들어간다.1-2. typeof
- 인자로 입력받은 값의 타입을 알려주는 함수
- 입력방법 :
typeof();
var a = false;
var typeOfA = typeof(a);
console.log(typeOfA); //"typeOfA : boolean"
var b = true;
var typeOfB = typeof(b);
console.log(typeOfB); //"typeOfB : boolean"
var c = 2;
var typeOfC = typeof(c);
console.log(typeOfC); //"typeOfC : number"
var d = "1 + 1";
var typeOfD = typeof(d);
console.log(typeOfD); //"typeOfD : string"2. 객체
- 변수나, 함수 등을 담는 폴더
- 입력방법 :
var obj = { };
var obj = {
나이 : 20, // 다음 변수와 값 입력을 위해 ,(반점)을 찍자
이름 : "홍길동"
}
console.log(obj.나이); // 출력값 : 20
// (obj["나이"]);라고도 쓸 수 있다변수 안에 또 다른 변수 값을 넣을 수 있다
var 변수 = {};
변수.다른변수 = "박상은"; // 여기서 '다른변수'를 key라한다
변수.다른변수1 = 30;
변수.다른변수2 = function() {
console.log("저는 " + 변수.다른변수 + "살 " + 변수.다른변수1 + "입니다.");
};
변수.다른변수2();
// 출력 => 저는 30살 박상은입니다.
변수.다른변수1++;
변수.다른변수 = "내년의 박상은";
변수.다른변수2();
// 출력 => 저는 31살 내년의 박상은입니다.2-1. this
- 같은 객체 안에 있는 변수를 불러올 때 쓴다
var 변수 = {};
변수.변수1 = "값";
변수.변수2 = function(){
console.log(this.변수1); // this는 '변수'이다
}
var 다른변수 = {};
다른변수.변수1 = "다른값";
다른변수.변수2 = function(){
console.log(this.변수1); // this는 '다른변수'이다
}3. 배열
- 연관된 데이터들을 모아서 관리하기 위해서 사용되는 데이터 타입
- 입력방법 :
var 변수 = [ ]; - 배열 값 입력방법 :
변수[순번] = 값;
var ages = [];
ages[0] = 11;
ages[1] = 22;
ages[2] = 33;
console.log(ages[2]); // 출력값 : 333-1. unshift, push
unshift: 배열 맨 앞에 값을 넣어준다push: 배열 맨 뒤에 값을 넣어준다
var ages = [];
ages[0] = 11;
ages[1] = 22;
ages[2] = 33;
ages.unshift(5);
ages.push(1);
console.log(ages); // 출력값 : [5, 11, 22, 33, 1]생각하는 방법 연습
- 평균값 구하기
- 나는 아래의 배열 값의 평균값을 구할거야
console.log(solution([10, 20, 30]));- 우선 총합을 구하자
for(var i=0; i<점수.length; i++){ // 여기서 length는 배열의 총 갯수야
sum += 점수[i]; // 여기서 sum에 배열의 총합을 담을거야
// 그럼 sum이 0이되어야 총합이 나오고 나누는 함수에 써야하니까
// sum을 지역변수로 값 0을 줘야겠지?
}- 총합을 나누는 함수를 만들자
function solution(점수){
var sum = 0; //함수 안의 지역변수 sum
return sum / 점수.length; //이 함수에 평균값을 넣을거야
}- 이제 나누는 함수 안에 총합을 집어넣자
function solution(점수){
var sum = 0;
for(var i=0; i<점수.length; i++){
sum += 점수[i];
}
return sum / 점수.length;
}
console.log(solution([10, 20, 30])); // 출력값 : 20추가로 알아두면 좋은 코드
- 배열에 들어있는 값들 확인하기
var arr = [100, 50, 40] // 배열에 들어있는 값
for(var i =0; i<arr.length; i++){
console.log(arr[i]);
} // 확인하는 코드- 객체에 들어있는 값과 변수타입 확인하기 (feat.typoef)
- `key` : 변수.key - `변수[key]` : key의 값 - `typeof(변수[key])` : string, double, boolean, int...for입력방식 :for (var key in 객체){ }
var 박상은 = { // 객체에 들어있는 값
name: "박상은",
ages: 30,
height: 180
};
for(var key in 박상은){
console.log(key, 박상은[key], typeof(박상은[key]));
} // 출력값 : "name" "박상은" "string"
응용 --!
for (var key in 박상은) {
if (typeof 박상은[key] == "number") {
console.log(박상은[key]); //객체 안의 숫자 key값만 출력
}
}Today Commet :
Javascript의 대표적인 변수,조건문, 반복문, 함수, 객체, 배열의 기초를 다져보았다여러 테스트를 했지만 역시 필요 요소를 먼저 만들고 합치는 방법을 연습하지 않으면 기초도 속도가 느려지는 부분이 있는거 같다...습관을 고치는것이 중요하다
이제는 좀 더 실전으로 들어가자
dom을 다루는 법을 배우고 나면 바로 카카오뱅크의 메인페이지를 모작해보자
박상은