Array - JavaScript | MDN (mozilla.org)
Array - JavaScript | MDN
JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
developer.mozilla.org
1. 조건문(자바와 동일), 반복문, 탈출문
- 조건문: if else, switch
* 예제 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 1;
if(num1 >= 10) {
console.log('10보다 큼');
} else {
console.log('10보다 작음');
}
//형변환 parseInt(값), parseFloat(값)-실수로의 형변환
var a = parseInt (Math.random() * 101);
console.log(a);
if(a >= 90) {
} else if( a >= 80) {
} else {
}
var b = '가';
switch (b) { //b에 맞춰서 알맞은 케이스로 들어간다
case '가':
console.log('가 입니다');
break;
case '나':
console.log('나 입니다');
break;
default:
break;
}
</script>
</body>
</html>
- 반복문: while, for, for in
* 예제 2, 3(향상된 for문)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//while문
// var a = 1;
// while(a <= 10) {
// console.log(a);
// a++;
// }
//for문
// for(var i = 1; i <= 10; i++){
// console.log(i);
// }
//배열과 for문
// var arr = [1,2,3,4,5];
// for(var i = 0; i < arr.length; i++){
// console.log( arr[i] );
// }
//빈 배열을 하나 생성하고 1 ~ 10까지 값을 반복문으로 추가
//var arr = new Array();
// for(var i = 0; i < 10; i++) {
// arr[i] = i+1;
// }
// var arr =[];
// for(var i = 1; i <= 10; i++){
// arr.push(i);
// }
// console.log(arr);
//구구단 2~9
for(var i = 2; i <= 9; i++){
for(var j = 1; j <= 9; j++){
console.log(i, '*', j, '=', (i*j))
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//for ~ in
//배열에서는 index를 담는다.
var arr = [1,2,3,4,5];
for( var i in arr ) {
// console.log(i); //i는 인덱스
console.log(arr[i]); //배열의 값
}
//객체에서는 키를 담는다.
var obj = {a : '1', b : '2'}; //키, 값
for(var i in obj){
// console.log(i); //i는 키를 담는다.
console.log(obj[i]); //객체의 값
}
</script>
</body>
</html>- 탈출문: break, continue
* 예제 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++){
if(arr[i] == 3) break;
console.log(arr[i]);
}
console.log('-------------------------------------')
for(var i = 0; i < arr.length; i++){
if(arr[i] === 3) continue; //3을 건너뜀
console.log(arr[i]);
}
</script>
</body>
</html>
2. 함수(선언적 함수)
1) 자바스크립트 사용자 정의 함수
- 종류: 선언적 함수, 익명함수
- 의미: 사용자가 정의하는 함수
2) 선언적 함수
- 반환 유형은 적지 않으며 매개변수도 적지 않을 수 있습니다.
- 매개 변수는 데이터 타입을 적지 않습니다.
- 리턴은 적어도 되며 적지 않아도 상관없습니다.
- 선언적 함수는 함수 선언 이전에 호출 하여도 에러를 발생시키지 않습니다
- 선언적 함수는 함수를 변수에 저장할 수도 있고, 함수를 a에 저장할 때 변수 선언 이후에 호출해야 합니다.
3) 즉시 실행 함수
- 즉시실행 함수
함수 표현(Function expression)은 함수를 정의하고, OR 변수에 함수를 저장하고 실행하는 과정을 거칩니다. 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다. 함수를 정의하자마자 바로 호출하는 것을 즉시 실행함수라고 합니다.
- 사용이유
- 페이지 시작 시 호출할 함수를 기술합니다.
4) 함수의 가변 인자 argument
- 자바스크립트에서 매개변수는 큰 의미가 없다, 단순히 인자 값에 들어오는 것에 이름을 붙이는 형태이다.
ex) method(1,2,3,4,5,6,7);
function method(a, b) {
return a + b;
}
다음 코드는 에러를 발생시키지 않는다.
* 예제 5(선언적 함수-호이스팅)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
func1(); //호이스팅 (선언적 함수에서 가능)
// var result = func2(); //함수의 return
// var result2 = func3(1, 2, 3);
console.log (func2());
console.log (func3(1, 2, 3));
function func1() {
console.log('func1 실행');
}
function func2(){
console.log('func2 실행');
return 'func2 반환';
}
function func3(a, b, c){
console.log('func3 실행');
return a + b + c;
}
//함수를 변수에 저장할 수 있습니다.
var a = func1;
// console.log(typeof a); //function이라고 나옴
//console.log(a);
a(); //a의 호출
</script>
</body>
</html>
* 예제 6(익명 함수)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1st
// function func1() {
// }
// var a = func1;
var a = function(){
console.log('a함수');
}
a();
var b = function(x, y){
return x + y;
}
var result = b(1,2);
console.log('b함수:', result)
console.log('-------------------------------------------------------')
//1. 익명 함수로 변경해보기
// function method1(x) {
// if(x % 2 == 0) {
// return '짝수';
// } else {
// return '홀수';
// }
// }
var c = function(x) {
return x % 2 == 0 ? "짝수" : "홀수";
}
//2. 매개변수를 3개 받아서 평균을 반환하는 익명함수를 선언.
var d = function(x, y, z){
return (x + y + z) / 3;
}
console.log( c(10) ); //리턴 O
console.log(d( 1,2,3) ); //리턴 X
</script>
</body>
</html>
* 예제 7(함수의 가변 인자)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function func1(x, y){
//argument 키워드를 이용해서 매개변수를 찾아서 사용할 수 있습니다.
// console.log("매개변수의 길이:" + typeof arguments);
console.log("매개변수의 길이:" + arguments.length );
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
return x + y;
}
//매개변수 자체는 큰 의미가 없습니다. 단순히, 사용할 값에 이름을 붙이는 형태
// console.log(func1(1));
// console.log(func1(1, 2));
console.log(func1(1, 2, 3, 4, 5));
</script>
</body>
</html>
3. 전역 변수, 지역 변수
- let은 java랑 비슷한 느낌으로 이해 했음.
- var은 함수 안에서는 지역 변수 취급, if 에서는 전역 취급
* 예제 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//var변수의 유효범위는 함수이다.
var num1 = 50; //전역 변수
if(true) {
var num2 = 100; //전역 취급
}
console.log(num2);
var num3 = 100; //전역 변수
function add(){
var num4 = 200; //변수가 함수 안에 있어서 지역 변수
}
//console.log(num4);
//es6 - let변수, 중괄호 스코프(변수의 중복 선언 X)
let x1 = 100;
if(true) {
let x2 = 200; //지역 변수
}
console.log(x2);
let x3 = 100; //전역 변수
function add2() {
let x4 = 200; //지역 변수
}
console.log(x4); //err
</script>
</body>
</html>
4. 클로저
- 지역변수의 사용 위치가 함수 내부로 한정되는 것을 내부 함수를 이용하여 지역변수를 외부에서 접근할 수 있는 환경을 만드는 것을 클로저라고 한다.
* 예제 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//클로저 - ??
//렉시칼 스코프 - 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다.
/*
var a = 1;
function x(){
a = 10;
console.log(a); //10 - 나랑 가까운 a 참조
}
x();
var b = 1;
function y(){
var b = 10;
z();
}
function z(){
console.log(b); //나랑 가까운 전역 변수 b를 참조함
}
y(); //실행
*/
//클로저 - 내부 함수를 이용해서 외부 함수(a)의 변수의 접근할 수 있는 환경을 제공
function func1() {
var a = 1;
//1st
// var b = function(){
// return a;
// }
// return b;
//2nd(1st와 완전 동일 코드)
return function() {
return a;
}
} //a의 범위는 여기까지
//console.log(a);
//a는 지역 변수이고 function을 벗어나면 사라지기 때문에 err.
//이 때 closer 사용하면 함수 안에 있는 변수 사용 가능해짐.
var result = func1(); //result는 내부 함수임
var x = result();
console.log(x); //x는 a값
</script>
</body>
</html>
* 예제 10(클로저 은닉)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function obj() {
var name ="홍길동";
//get
// return function(){
// return name;
// }
//set
// return function(aaa) {
// name = aaa;
// console.log(name);
// }
return { //키에다 function을 저장(get, set 동일)
getName : function() {
return name;
},
setName : function(aaa) {
name = aaa;
}
}
}
// var getObj = obj();
// console.log(getObj);
// var setObj = obj();
// setObj("이순신");
//사용
var result = obj(); //obj 반환
result.setName("이순신"); //setter
console.log ( result.getName() ); //getter
</script>
</body>
</html>
5. 객체(JSON)
- 자바스크립트에서는 객체를 JSON이라고도 표현 합니다.
- JSON은 엄밀히 말하자면 객체는 아니지만 객체에 대한 표기법입니다. (통용적으로 객체는 JSON이라고 부른다라고 생각할 것)
- 객체의 표기는 중괄호로 표기함. 중괄호 안에 키: 값 = java의 map과 동일한 표현으로 사용됨.
- 밑에 문법은 잘 사용하지 않습니다.
* 예제 11(객체)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//객체의 표현 {}
var person = {name : 'hong', age : 20, info : [1, 2, 3]};
console.log(person);
//객체의 접근 방법이 2개 입니다.
//1st → .로 접근
console.log(person.name ); //hong
console.log(person.age ); //20
console.log(person.info ); //[1, 2, 3]
//2nd → 이름[키]
console.log(person['name'] ); //name 변수가 없으니까 문자열로 name이라고 적어줘야함. hong
console.log(person['age']); //20
console.log(person['info']); //[1, 2, 3]
//객체 안에 객체
var exam = {kor: 10, eng: 20};
var kim = {name: '김길동', exam: exam};
// var kim = {name: '김길동', exam: {kor: number, eng: number}; 위와 동일
//kim이 가지고 있는 kor값의 사용은?
console.log(kim.exam['kor']);
console.log(kim.exam.kor);
console.log(kim['exam']['kor']);
</script>
</body>
</html>
