2023.02.08 10일차 JavaScript
JavaScript
배열 여러값을 저장한 자료형 [] 안에 ,로 구분해서 넣었다.
타입 구분이 필요없다.
67. array-4
let a = ["java", "css", "spring", "jsp"];
배열 출력하기
for (i = 0; i < a.length; i++) {
console.log(a[i]);
}거꾸로 출력하기
for (i = 3; i >= 0; i--) {
console.log(a[i]);
}
for (i = 1; i <= a.length; i++) {
console.log(a[a.length-i]);
}javascipt 배열메소드중에 array뒤집어버리는 것이 있음.
a.reverse();
for (i = 0; i < a.length; i++) {
console.log(a[i]);
}68. array - 5
let a = ["java", "spring", "jsp", "react", "next"];
for (let i = 0; i < a.length ; i +=2){
console.log(a[i]);
}짝수만 뽑고싶다. i를 2씩늘려서 뽑을 수도 있다.
혹은 if문을 사용해서 출력하기
for (let i = 0; i < a.length; i++) {
if (i % 2 === 0) {
console.log(a[i]);
}
}이외에도 continue를 사용할 수도 있다.
69. array -6
!!확인문제!!
더한값을 첫번째줄에 나오게 출력
let a = [9, 8, 7, 6];
let b = [11, 22, 33, 44];
for (let i = 0; i < a.length; i++) {
console.log(a[i] + b[i]);
}실제 코드는 이거보다 훨씬 더 많이 고민하고 작성하게 될 것이다.
70. object 객체 - 1
let a = ["java", "spring", 55]; 배열은 인덱스를 통해서 접근 할 수 있엇다.
배열은 값만 넣었고 인덱스가 순서로 매겨졋다.
object : 여러 갓을 저장한 자료 형태(data type)
{값이름:값 }
let b = { lang: "java", frame: "spring", age: 55 };
console.log(b["lang"]); 변수["값이름"] 값이름은 string으로 가져온다. 이렇게 값을 불러올 수 있다.
사용기호 : {}
각 값에 이름을 명시(property) 값을 읽을때 ["property name"]
이건 거의 사용안한다.
값을 읽을때 .propertyName 사용 (이 기호로 사용할 것)
변수.propertyname
console.log(b.lang);
console.log(b.frame);
console.log(b.age);
71. object - 2
객체의 property 이름은 lowerCamelCase로 작성한다.
길다면 각 property앞에서 끊으면 된다.
let a = {
address: "seoul",
age: 55,
bookTitle: "spring"
"car model": "kia"
};
console.log(a["car model"]);특수기호가 필요하다면 property명을 ""안에넣고 출력할시에는 []을 사용해서 출력한다.
a.address = "jeju";
console.log(a.address);
a객체의 property address값을 변경할때는 대입연산자를 사용하면된다.
let b = a.age;
a.age = 66;
console.log(b); //55
console.log(a.age); //66
property객체값을 다른 변수에 담을 수도 있다.
시간이 지나서 다른 property가 필요하다.
존재하지 않는 property를 사용하면 없는데에 값을 추가하면?
없지만 있는 것 처럼 값을 할당할 수 있다. 새 property 추가 방법이다.
a.job = "teacher";
72. function 함수 -1
명령문들이 순서대로 진행되는데 if문 , for문 등으로 제어할수 잇엇다.
console.log(1);
console.log(2);
console.log(3);
function a(){
//함수(function)
바로 실행되지 않고
나중에 실행하기 위해 묶은 코드들(code block)
console.log(4);
console.log(5);
}
console.log(6);우리가 아는대로면 1~6까지 실행되어야하는데 4,5는 실행이 안된다.
함수란 코드블럭들을 바로 실행하지 않고 나중에 실행하기 위해 묶은 코드들이다.
함수(function) 작성방법
function 함수이름 (파라미터1, 파라미터2) {실행될 코드들}
파라미터는 들어가도되고 없어도된다.
그럼 나중에 어떻게 실행하나? 함수 실행방법
함수명(argument1, argument2) // argument = 파라미터
a();
73 function 함수-2
a();
console.log(1);
function a() {
console.log("abc");
console.log("def");
}
console.log(2);
a();
a();
a();나중에 실행하기 위해 저장해둔 것이기 때문에 여러번 실행도 가능하다.
심지어 함수가 작성되기 전도 실행되는 경우도 있다.
74 function 함수-3
!!확인문제!!
printHello(); 함수호출시 콘솔에 "HELLO!!" 출력하는 함수 작성해보기
function printHello() {
console.log("HELLO!!");
}한 파일안에 함수를 여러개 작성할 수도 있다.
또한 함수안에서 함수를 호출할 수도 있다.
function printHelloWorld() {
printHello();
printWorld();
}함수 작성, 정의, 선언 -> 함수 실행(execute), 함수 호출(call, invoke) 다양하게 부른다.
함수 호출한곳에서 ctrl + 클릭하면 함수 정의한곳으로 가진다.
함수는 어디든지 작성하고 어디서든지 호출 할 수있다.
그래도 별일없으면 호출하기전에 함수가 작성되어 잇는게 좋다.
함수안에서 함수를 작성할 수도 있다. 함수안에서 작성한 함수는 함수안에서 {}안에서만 호출 할 수 있다.
function printHelloWorld() {
function newFunction() {
console.log("new function");
}
printHello();
printWorld();
newFunction();
}75. parameter (매개변수)
함수 정의할때 ()내에 parameter(매개변수)목록 작성 가능하다.
파라미터이름은 lowerCamelCase
파라미터는 함수호출 할때 값을 받는 역할을 한다.
function b(param) {
console.log("b함수 실행됨");
console.log(param);
}
b(3);param을 넣은 채로 호출하면 값이 들어가진다.
연습문제
4를 넣어서 b함수 호출 코드 작성
b(4);
b([3,4,5]);
b({assress: "seoul", age: 33});
객체나 배열을 넣을 수도 있다.
여기서 전달하는 값을 argument(인자, 인수)라고 한다
parameter나 argument를 구분없이 사용한다. 문맥에 맞게 잘 해석하자.
76. parameter (매개변수) - 2
function b(param1, param2) {
console.log("파라미터 2개 있는 함수");
console.log(param1);
console.log(param2);
}b(); // undefined, undefined
b(99); // 99, undefined
b(11,22); // 11 , 22
인수는 매개변수 순서에 맞게 들어간다.
배가 되는 함수
function printDouble(num){
let d = num * 2;
console.log(d);
}
printDouble(3); //6
printDouble(4); //8
printDouble(100); //200!!!확인문제!!!
두개의 파라미터를 넣엇을때 더한 값이 출력되도록 하는 함수
function printSum(param1, param2){
console.log(param1 + param2);
}
printSum(3, 4) //7
printSum(100, 200) //300
printSum("java", "css") //javacss77. return - 1
return은 함수의 실행결과를 뜻 한다.
function a(param) {
console.log("어떤 일을 함");
}
function b(param) {
console.log("b함수가 일함");
//함수의 실행 결과
return "어떤 결과";
}다음 명령문에서 쓰고싶으면 변수에 저장하면됨
let r1 = a(); //결과 없음.
let r2 = b(); //결과 있음.console.log(r1); //undefined
console.log(r2); //어떤 결과 return값즉, b의결과가 return의 오른쪽 값이다.
수학에서 함수가 input x -> function x -> output f(x)로 가는데 프로그래밍애선 결과값, return(반환)이라고 표현한다.
java와 비교를하면 메소드에서 void메소드 = return이 없는 메소드 / 특정 타입 메소드 String Integer = return이 있는함수
메소드와 함수는 다르지만 비슷하게 이해 할 수 있다.
78. return - 2
function a() {
//...
//...
console.log("a 함수 실행 중...");
return 9;
}console.log(a());
a하면 안에있는 코드들이 실행이 되고 9라는 값을 반환한다.
함수정의 - 호출 함수정의하는 것만으로 호출되는 것이 아님.
또한 return과 출력은 관계가 없다.
79. return - 3
1~num까지의 합을 구하는 공식
function sum(num) {
let total = 0;
for (let i = 1; i <= num; i++) {
total += i;
}
return total;
}
let sum10 = sum(10); //1~10 합
let sum100 = sum(100); //1~100합
console.log("1~10의 합은", sum10); //55
console.log("1~100의 합은", sum100); //5050!!!for문 사용안하고 더 빠르게 처리!!!
등차수열의 합 이용하기 n * (1+n) / 2
|첫째항-마지막항+1| * (첫째항 + 마지막항) / 2
function sum2(num) {
let total = 0;
total = num * (1+num) / 2
//total = (Math.abs( 1 - num)+1) * (1+num) / 2
return total;
}
console.log("1~10의 등차수열 합은", sum2(10)); //55
console.log("1~100의 등차수열 합은", sum2(100)); //5050return이 함수 호출결과를 돌려준다. 어디에돌려주냐? 호출한곳에 돌려준다.
80. return - 4
let r1 = a("java", 3);
console.log(r1); //"javajavajava" 가 되도록 출력하는 함수
내 풀이
function a(p, q) {
let message = "";
for (let i = 0; i < q ; i++) {
message += p;
}
return message;
}
let r1 = a("java", 3);
let r2 = a("c", 3);
console.log(r1); //"javajavajava"
console.log(r2); //"ccc"
console.log(a("spring",3)); //"springspringspring"message에 null값을 넣으면 원래 java에서는 그냥 누적하는데
null부터 누적을 해서 빈스트링을 넣었다.
잘못한줄 알았는데 강사님도 이렇게 푸심.
-> 자바도 null부터 누적함. 내가 잘못알고있던 부분임. 이렇게 할일이 없어서 몰랏다.
실행흐름이 바뀌는 여러 키워드를 배웠다. 한줄한줄 조합하면서 나아가는게 필요하다.
81. return - 5
사용자한테 나이를 입력받고 영화추천하는 함수
//함수정의
function whichMovie(age) {
if (age >= 20) {
return "데드풀";
} else if (age >= 15){
return "어벤져스";
} else {
return "뽀로로";
}
console.log("리턴 이후의 코드");
}
let age = +prompt("나이를 입력해주세요",0);
//함수호출
let movie = whichMovie(age); //argument에따라 return값 할당
console.log(movie);return이후에 있는 명령문은 실행되지 않는다.
return은 1. 오른쪽 값 반환 2. 함수 종료 두가지 역할을 한다.
function whichMovie(age) {
if (age >= 20) {
return "데드풀";
} else if (age >= 15) {
return "어벤져스";
} else if (age >= 5) {
return "뽀로로";
}
console.log("리턴 이후의 코드");
}만약 이렇게 식을 고치면? age거 4일때 위에가 다 false라서 return이 실행되지 않아서 마지막코드가 실행된다.
값이 없어서 undefined가 할당되고 undefined가 출력된다.
82. return - 6
return의 함수 종료 기능만 사용하는 경우도 있다.
function a() {
console.log(1);
console.log(2);
return; //함수종료
console.log(3);
}
a();
console.log("흐름 이어감...");-> 1 2 "흐름 이어감..." 출력
특별히 return할게 없다면 그냥 return;해주면된다.
오른쪽에 값이 없다면 그냥 종료만 해준다. return에 값이 아무것도 없다면 함수 종료하는 것이라고 생각하면된다.
83. First-class Function - 1
함수는 First-class citizen 일급객체이다. 인자로 넘기기 변수에 대압하기 등이 가능하다.
First-class Function -> 다른함수에 전달가능하고 argument로도 가능하고 return도 가능함.
https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function
은유적 비유적으로 누군가가 표현한 것이다.
함수는 javascipt라는 나라에서 메인으로 사용되는 타입이다. (java에선 불가능함.)
83.1 변수에 할당가능
function a() {
console.log("a라는 함수가 실행하는 코드들...");
}
let b;
b = a;b에 a라는 함수를 할당한것임. 함수를 실행시킨게 아니라 변수 b가 함수a자체가 되는 것임.
이러면 b도 함수가 된다. b가 a라는 함수 그 자체를 가지게 되는것.
결국 a() === b() 이게 되는 것이다.
84. First-class Function - 2
84.1 인수로 전달 가능
function a() {
console.log("에이 함수 실행 됨...");
}
function b(param) {
console.log(param);
param();
}
b(a);param이 함수니까
함수 정의한 내용이 출력이 된다. param이 함수이기때문에 함수를 실행시킬 수도 있다.
!!!자주 일어나는 코드의 형태이다 익숙해질 필요가 있다.!!!
java에선 사용하지 않아서 이해가 잘 안된다.
85. First-class Function - 3
85.1 값으로 반환 가능
반환? 함수에서 일어나는 일이다. 말이 어렵게 느껴질뿐이지 함수를 값으로 취급을 한다는 것이다.
function a() {
function b() {
console.log("b 함수 실행 ...");
}
return b;
}let c = a(); 하면 b함수를 먼저처리하고 b를 리턴한다. 반환받은 값을 c에 저장한다.
c에 b함수를 저장햇으니 c도 함수로 사용할 수 있게 된다. (변수에 할당가능 이용)
c();
값이 들어갈 수 있는데에 함수를 넣엇을 뿐이다. 함수도 하나의 값인 것임.
java에선 사용되지 않아서 이해하기가 어렵다.
function a() {
return function b() {
console.log("b 함수 실행 ...");
};
}이렇게 보는게 오히려 이해가 쉬운듯하다.
a()();이것도된다. 실행된결과값을 바로 실행하기
a()();->b();
이해는 되는데 이걸 예제에서 실제로 써봐야 이해가 될 듯하다.
86. First-class Function - 4
86.1 데이터 구조에 저장 가능 - 1
배열에 함수를 넣을 수 있다.
function a() {
console.log("에이 함수 실행!!");
}
let b = a;
let c = [3, "hello", a];
console.log(c[0]); //a
console.log(c[1]); //hello
console.log(c[2]); //a함수내용
c[2](); //"에이 함수 실행!!"배열의 인덱스로도 함수를 실행가능하다. c[2] = a이기때문에!!
87. First-class Function - 5
87.1 데이터 구조에 저장 가능 - 2
배열에도 사용할 수 있다.
function d() {
console.log("디 함수 시행!@!@");
}
let e = {
name: "son",
age: 33,
z: d
}
console.log(e.name); //"son"
console.log(e.age); //33
console.log(e.z); //d함수 내용
e.z(); //"디 함수 시행!@!@"호출하여 사용도 가능하다.
함수가 그냥 값이라고 생각하면 다 가능한 일이다. 익숙하지 않아서 납득이 안되는 것 같다.
88. function 함수가 값
함수 선언(function declaration)
보통 함수를 선언하기 위해 밑에와 같이 했다.
function fname(param) {
//코드들...
}
함수를 선언하면서 변수에 담고 싶다.
함수 표현 식(function expression)
let d = function (param) {
//코드들...
}
변수 선언 및 할당 = 함수식 이런식으로도 할 수 있다.
d에 함수를 넣었으니 d를 호출이 가능하게 된다. d();
First-class Function의 규칙중
1.위 내용이 변수에 할당가능 사용한것이다.
2.인수로 전달가능
function e(param) {
}
e(function (param) {
//코드들...
});
3.값으로 반환가능
function f() {
return function(){
//실행코드들
}
}
4.데이터 구조에 저장 가능
let g = ["css", function() {}];
let h = {
name : "park",
walk: function() {}
}
-->굳이 자바랑 비교하자면 익명 구현 객체를 넣는 느낌으로 넣을 수 있다는 느낌 인 것 같다.
89. 메소드
객체에 저장된 함수를 메소드라고 한다.
let a = {
name : "kim",
age : 44,
drive : function(){
console.log("드라이브 함수 실행됨");
}
};다른거들은 출력할때 log로 해야햇다.
console.log(a.name); //"kim
console.log(a.age); //44
a.drive(); //"드라이브 함수 실행됨"a라는 객체의 drive메소드를 출력할 수있다.
console.log(a.age); 따라서 이것도 console이라는 객체의 log라는 메소드를 실행시키는거였다!!!!
자바에서 System.out하는것 시스템 객체의 out메소드를 사용하는 거랑 비슷한 느낌
자바에서 메소드 실행할때 객체명.메소드이름 으로 호출하는데 같은 느낌인듯 하다.
2023.02.08 후기
함수가 결국은 변수 중 하나이다라는 것을 이해해야할 것 같다. java에서는 없던 개념이고 애초에 java는 함수라는게 따로 있지도 않으니 이해가 어렵다. 너무 헷갈리는 개념이다. 그러나 결국 하나로 귀결되는 것은 함수가 결국 하나의 값 변수 라는 것을 이해하면 될 것 같다.
front 부분을 2주간 나간다고 했엇는데 진도가 느려서 jquery dom객체 부분 엄청빨리나갈까봐두려웠다.
-> 강사님이 말씀해주심
view단에서 jsp 사용량이 내려가고 react가 javascipt기반 프레임워크로 사용량이 더 늘어나고 있다. 우리는 react를 배우진 않지만 언젠간 배우게 될 것이어서 자스를 좀 더 길게 배우고있다고 하셨다. 두려워 하지 않아도 될 것 같다.