자바스크립트에서
스코프는
기본적으로
자기에게 가장
가까운 순서대로
움직인다.
즉,
변수든 함수든 ,,,
예를 들어
변수를 부르면
일단 그 변수가 속해있는 곳에서 한번 찾는다
그다음
없으면
바깥에 나가서 찾는다
이게 스코프의 기본 원리이다.
자바스크립트는 기본적으로 함수 스코프인데
기본적으로 함수내에 선언되어진 변수라든지 뭐든지는
그 소속된 함수내에서 일차적으로 검색을한다는(찾는다는 의미)의미다.
var a = 'hello world'; // 전역변수(global)
function x () {
alert(a);
}
이 코드에서 alert 에서 a라는 변수를 부르는데,
그럼 a라는 변수를 찾아야되는데,
일차적으로 x 함수에서 찾는다
그다음 어 없네 하고
함수밖으로 나가서
var a 를 찾는 것이다.
스코프는 이렇게 된다.
그런데
var a = 'hello world'; //전역변수 (global)
function x () {
var a = 'hello world'; // 지역변수(local)
alert(a);
}
여기서 스코프는 어떻게 되냐면
일단 함수안에서 찾는다
어~ a라는 변수가 함수 안에 있다
끝
이렇게 된다.
스코프 용어는
local (지역변수) 와
global (전역변수) 이렇게 있다.
이어서
var a = 'hello world'; //전역변수 (global)
function x () {
alert(a);
}
function x2 () {
alert(a);
}
x();
x2();
이 코드는
alert 창으로
글로벌(전역변수)가 두번 출력된다.
그이유는
일단
처음
밑에서 x(); x 함수를 부르면,
위에 x함수안에 있는 alert의 변수 a를 부른다
그리고 맨위에 변수 a의 내용이 최종 찍힌다.
근데 또 함수 x2 안에 내용에 alert에서
똑같이 변수a를 부르고 a를 실행하라는 코드가 있으므로
중복이 되는거다.
추가설명을 하자면,
(일단 a변수는 global 이니까
그 뜻은 a변수는 모든 함수에서 a변수에 접근할수있다 라는 뜻이다.
즉 , 전역에서 (전 지역에서 ) 접근 할 수 있다 라는 뜻)
그리고
(함수안에서 선언된 변수들은
무조건 그 함수 안에서만 접근이 가능하다
즉, 함수안의 변수는 local 이니까 그 지역에서만 부를수 있다는 뜻이다.
물런, 함수안에서 (함수 안의 애들이 함수밖이나 global을 부를수있다
,접근이 가능하다) global은 부를수있다.
!!!하지만 함수안의애들은 누가 접근하는가? 함수안에서 접근이 가능하다
즉, global애들이 local 애들은 못 부른다는 뜻이다. )
local 애들은 한마디로 함수 안에서 갖혀있다.
그렇지만 함수안에 갖혀있지만 , global애들을 부를수는 있다.
(깜방안에 갖혀서 꺼내올수는 없지만(부를수는없지만) ,
깜방 안에서 밖에 것들을 부를수는있다, 시킬수는 있다.)
자
function x = () {
var a = "xxx";
}
x();
이 코드는 x() 라는 함수를 콜, 부른다
그러면
함수x 안에서 변수 a 가 만들어진다(생성이 될뿐) ,
생성이되며 그안에 xxx라는 게 생성만된다.
생성이 될뿐, 아직 아무 명령도없는 상태가 저 코드다.
그리고 콘솔에서는 undefined가 찍힐것이다.
자 여기 색다른 코드가 있는데,,
var a = 'global';
function x () {
var a = 'local';
}
x();
alert(a);
이코드는
어떻게 결과가 나올까????
일단
처음에는 쭉 파싱이되고
x(); 함수를 콜 하고, 나서
마지막 alert에서 a 변수를 부르는데,
그러면 맨위의 a변수가 콜을 받고 global이 찍힌다
자 여기서는
var a = 'global';
function x () {
a = 'local'; //var 을 지움
}
x();
alert(a);
여기서는 함수안에서 var 이 없는 그냥 a변수가 있다
저 a뜻은
특별하게 함수안에서의,
var 이 생략된 변수는
global 변수가 되어버린다.
(원래 자바스크립트에서는
var을 생략하면 전역변수로 선언하게되는 특성이 있다)
하지만 또한!@@!
함수안에서 var a 가 선언되있고, 나서 그밑에 var이 없는 a는
함수안에서의 지역변수로 작동한다. 이것은 밑에 예시가 따로 있다.
아무튼
그래서
저코드의
결과는
스택이 쭉 밑으로 쌓이고
덮어써여져서 변수 a는 위에서 global 이었다가 밑에서 덮어쓰기되서 local 로 다시바뀐다
그래서
화면에 local 이 찍힌다.
자 그다음
var a = 'global';
function x () {
var a = 'local';
a = 'local'; //var 을 지움
}
x();
alert(a);
자 여기서는 함수안에 var a 가 있고,
그 밑에 var 가 없는 a 가 있다
이 결과는 어떻게 되냐면,
local 이 찍힌다
왜냐면
함수안에서 var a 를 이미 선언해서
저 함수안에서 var a 라는 지역변수가 이미 생성이 된 상태인데,
그밑에 var 가 없는 a 를 선언하면 자동적으로 밑이기 떄문에
var 가 없는 a 라도 이것은 local 로 생성된다.
즉, 함수안에서 생성되서 덮어쓰기가 된 코드다.
*참고로
전역변수는 잘 쓰지않는게 좋고
지역변수를 사용하는게 낫고
또 변수를 만들때는 항상 var을 붙여라.
*참고로
for문이 전역변수로 작동한다면 큰 문제가 발생할수도 있는 그런 예를 들어보겠다.
(그래서 for문 같은 반복문은 보통 함수안에서 돌게 만드는게 좋다?)
예를들어...
function a () {
i = 0; // var가 없는 변수
}
for( var i = 0; i < 5 ; i++){
a();
document.write(i);
}
자 이코드 를 설명을 하자면,
일단
(//저 함수안에 i는 var가 없는 변수라서 이 함수를 호출하게되면 ,
i가 전역변수로써 실행은된다.
하지만 누구든 저 i 를 부를수는 있다.
왜냐면
var가 없기 떄문에 전역변수로 등록되있기때문이다.)
암튼,,
for문이 돌게되는데,
for문 안에 내용은
a() 함수를 호출 하고 a()함수의 내용은 i= 0
이므로 for문이 카운트가 안되고 계속 값이 0으로 되어버리는것(일종의 초기화?됨)
그래서 계속 무한 반복이 되고있다....
전역변수(global)가 하나도없이!!! 만드는 어플리케이션 의 예>>>>>>>>>>>>>>
일단
예로,,,
var MYAPP = {} // MYAPP이라는 변수명의(전역변수) 객체를 생성한 다음 밑에서..
MYAPP.calculator = { // MYAPP객체 안에 calculator 라는 소속을 더 만들어줌.
'left' = null;,
'right' = null;
}
MYAPP.coordinate = {
'left' : null;,
'right' : nill;
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum()); // 30
이코드는,,,
객체안에 소속 객체를 생성후 그안에 데이터를 넣고
밑에는 더해서 결과를 내는 그런 코드인데,,,
일단 이코드는 전역(global)객체가 하나이다.
맨위에 MYAPP 이란 변수의 객체 임,,,
그래서 아예 전역 객체를 남기고 싶지 않다 라고 생각한다면,
익명 함수로 감싸면 된다.
뭐 익명함수가 아닌 그냥 함수로 감싸면 함수도 전역(global) 변수가 되긴 하다.
아무튼
익명함수로 감싼 코드의 예는 아래와 같다. // ( function () {}())
(function () {
var MYAPP = {} MYAPP.calculator = {
'left' = null;,
'right' = null;
}
MYAPP.coordinate = {
'left' : null;,
'right' : nill;
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}())
익명함수를 짜면 , 전역(global)변수로서 남지가 않고 , 깔끔하게 바로 실행이 된다.
(지역변수 로서의 존재?로서,,,?)
*참고로
자바스크립트에서
함수 안에서 선언된 변수는 지역(local)변수가 되는거고,
그러나
for문이나 if문..등의 반복문/조건문 안! 에서 선언된 변수는 전역(global)변수로
된다는 점을 참고해라.
for (var i = 0 ; i < 1 ; i++){
var name = 'xxx'; //전역(global)변수임!!
}
alert(name);
*정적 유효범위>
자바스크립트에서
함수가 선언된 시점에서의 유효범위는,
정적 유효범위가 된다.(그러한방식을 정적유효범위라부른다)
다른 말로는 렉시컬 이라고 한다.
(정적 유효범위(렉시컬은)은 클로져와 연결되어있는 부분임)
다른말로는 (렉시컬 스코핑)
렉시컬 스코핑은,,예를들자면
var i = 5; // 글로벌
function a(){
var i = 10; //로컬
b();
}
function b(){
document.write(i);
}
a(); // 결과는 5가 찍힌다
이 코드는,,
마지막에 a() 함수를 부르고
a()함수 안에서 는 변수 i가 선언되고,
그와는 상관없이 밑에
b()함수가 호출이 되고,
b()함수에 가서는,,,
i변수를 출력하라는 코드가 있어서
i를 찾게되는데,
b()함수 내에서 일단 찾아보니 없으니까,
밖에서 찾는거다 밖에 i변수가 있으니까 그걸 찾아오는거임!!
그래서
즉, a()함수안에서 b()함수를 불렀지만 그건 상관없이,
b()함수에서 처리되는 스코프는 b()함수 안이 첫번쨰고 그다음이 전역변수로 찾게되는 순서가 두번째 순서인 것이다.
이게 렉시컬 스코프이다.
(자바스크립트는 기본적으로 함수스코프니까...함수안에서 찾아보고 없으면 전역으로가서 찾거든,,,,)
- 참고로
자바스크립트에서는
함수도 객체다,
즉, 데이터(값) 라는거다
객체(박스)도 데이터고,
함수(박스/메서드/기능을하는,,,)도 데이터고
변수도 데이터고
다~ 데이터로 봐야됨.
일종의 값이다.
(아무튼 함수도 값이다.)
<*값 의 특징은>
- 변수에 담을수 있다 ( var a = '값' )
즉, 함수는 변수에 담을수 있다.
예를들어
var a = function() {} 이렇게 변수에 넣을수 있다.
이렇게 함수는 값이니까, 값으로써 변수에 담을수 있다.
-함수는 값이다
또한 객체안에 키의 값으로 담아둘수있다.
a = {
b : function(){}
}
a라는 객체가 있고
그 안에
b라는 키가 있고 그 키에 연결된(담긴) 함수가 키갑으로 담겨져 있다.
(즉, 함수는 객체 안에 저장될 수 있다.)
b 라는 키의 역할은 어떠한 그릇과 같다, 뭘 저장할수있는 그릇과 같다
(보다시피 지금 b는 (함수라는) 값을 저장하고있는 상태임)
- 객체의 구조는
키 와 값(키값 또는 속성 또는 프로퍼티로 부른다)으로 구성되어있다.
키는 일종의 변수(var)같은 역할이다.(왜냐면 어떤 값을 저장하고 있기떄문에)
그리고
저함수는 뭐라고 부르냐면
저렇게 객체안에 속성값으로 담겨진 함수를 메소드(method) 라고 부른다.
(즉, 메소드 b가 되는것임)
- 함수는 값이기 떄문에 ,
다른 함수의 인자로도 , 전달될 수 있다.
예>
function cal (func , num ){ //여기서 func은 함수임!!!!
return func(num)
}
function increase (num) {
return num + 1
}
function decrease (num){
return num - 1
}
alert(cal(increase,1));
alert(cal(decrease,1));
// 이 코드는,,
alert로 cal함수를 콜하는데 인크리즈랑 , 1 을 데리고 올라가라는뜻이고,
위에가서는
인크리즈를 처리한후의 결과값을 func(num)으로 나타낸것이다,
cal의 내부 는 예를들자면 (실제는 아니지만) 마치 이렇게 되어 있다,.
function cal(func , num) {
var func = increase (num){
return num + 1 // 결과는 2
}
}
func ( 1 )
- 함수는
함수의 리턴 값으로도 사용할 수있다.<<<<<<<<<<<<<<<<<
예를들어
function cal(mode) {
var func = {
'plus' : function (left , right) { return left + right },
'minus' : function (left , right) {retturn left - right}
}
return funcs[mode]; // cal 함수의 리턴값 3
}
alert(cal('plus')(2,1)); // cal 함수에 인자 plus 와 파라미터 2, 1
alert(cal('minus')(2,1)); // 동일하게 적용하면됨
// 이 코드에서
밑에서 첫번째 alert 에서 첫번쨰 인자로 'plus'를 주게되면 어떤일이 생길까요?
일단
위로 가서
cal함수를 타고, func객체 안에 plus 키안에 값에 접근을해서 인자로 받은 2 , 1 을
대입 시켜서 결국 cal함수의 리턴값 결과는 3 이 나옵니다.
인자값이 plus 이니까 저기 mode라고되있는 파라미터 값들이 다 plus로 대입바뀌는 거고 plus는 함수를 담고 있으니 결국 함수의 리턴값을 거치고 나와서
또 리턴값을 거치면 결과가 나오는 구조임
즉, 함수 안에 객체 그리고 그 함수의 리턴값 그리고 밑의 콜 이렇게 구분됨
여기서 또 중요한건
alert(cal('plus')(2,1)); // 이 코드는
cal에서 plus라는 인자를 담고있는 괄호는 함수니까, cal함수로 일단 가는거고,
cal함수의 프로퍼티로 plus가 mode로 가는거고
그 뒤의 (2,1) 이 괄호는 또 함수가 나왔다는 의미인데 , 어디로 가냐면
plus 키 의 값안에 함수가 있으니까 그 함수로 저 인자들이 대입이 되는 구조이다.
그리고 각 각 따로 되는게 아니고 두 인자들 다 연결이 되있는구조이다.
즉, 암에 괄호는 함수의 이름을 뜻하고,
뒤에 괄호는 그함수의 인자를 뜻한다는 거다!
그래서
함수 안에 객체 안의 함수를 꺼내서 쓸때는
그렇게 쓰면 된다.
아무튼 괄호가 나오면 함수가 일단 나오는거임을 알고있어라
배열의 값으로도 함수를 사용할 수 있다.<<<<<<<<<<<<<<<<<
var process = [ // process라는 배열임!!
function ( input) { return input + 10;},
function ( input) { return input * input;},
function ( input) { return input / 2;}
];
var input = 1;
for ( var i = 0 ; i < process.length ; i ++ ){
input = processi;
}
alert(input);
자 이코드는..
밑에서 alert 이고 input 인자를 가지고,
위에 일단 배열을 다 생성한다음
밑에 쭉쭉 가서
for문을 돌리는데,
for문에서
내용이
input = processi;
이거는 process배열의 내용을 차례대로 돌리는것이고,
거기에 추가적으로 input인자를 가지고 돌리는건데,
input은 미리 선언되있었던 1이라는 값을가지고
다시 위의 함수안에서 리턴처리가되면서
첫번째 함수의 값은 11 이되고 , input의 값도 11로 덮어쓰기가되고,
두번째 함수의 값은 121 이되고, input의 값도 121로 다시 덮어쓰고,
세번째는 함수의값은 60.5이고, input의 값도 60.5 이다.
input은 계속 값이 덮어쓰여지므로 값이 게속 변한다.
변한상태에서 연산을 하는것이다.
*자바스크립트에서 이렇게
함수가
변수의 값으로도 사용되고,
매개변수로써도 사용이 되고,
리턴값으로도 사용이 되는걸
바로
first - class object(citizen)이라고 부른다 (일급 객체)
함수는 일급객체이다.
콜백<<<<<<<<<<<<<<<<<<<<<<<
콜백은
어떠한 함수가 수신하는 인자 가
함수인경우를
콜백이라고 한다.
즉, 함수의 인자가 함수인데
그 인자속에 함수를 부르는곳으로 보내는 그런 형태(구조)를 콜백이라고 한다는거지요
(그니까 부르면(콜하면) 가는거니까 근데 그 함수를 부르면 인자로 함수를 달고(데리고) 가는거죠 그래서 콜백이다. )
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
numbers.sort(); //배열을 정렬할때 sort를 쓴다.
console.loog(numbers.sort()); // 콘솔로그에 값 출력..
자 여기서 정리하고 넘어가야되는건
numbers.sort();
모든 함수앞에 쩜 이 있으면 그 쩜 앞에 존재하는 모든것은 다 객체이다.
그니까 sort()라는 함수가 있으면 ,
sort()함수의 앞에 쩜이 있고
그 앞에 numbers가 바로 객체 라는 사실이다.
객체 . 함수
(객체 쩜 함수)
이런식으로 하는게 객체 안에 함수를 접근하는 접근방법이다.
참고로 numbers. 는 배열객체 이다.
즉, 배열도 객체이다.
객체 쩜 뒤에 나오는 함수는 메소드라고 부른다.
그리고
sort()
alert() 이런종류의 메서드는
내장메소드, 빌트인 객체, 빌트인 메서드 라고 부르기도한다.
근데 , 저렇게 배열을 정렬하면
문제가있다
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
numbers.sort(); //배열을 정렬할때 sort를 쓴다.
console.log(numbers.sort());
여기서 콜솔로그로 찍어보면,,,
1, 10, 2, 20, 3, 4, 5, 6, 7, 8, 9,
이렇게 나온다.(이렇게 정렬이 되버린다...)
이게 뭐냐면
문자열로 정렬이 된것이다.
그러니까, 1 이 포함된것이 가장 앞에 오니까
1 하고 10 이 가장 앞으로 오고
그 다음이 2 와 20 이런식으로 정렬이되버리는데
이걸 바르게 숫자로 정렬하려면,
콜백함수를 써서 하면 되는데,
일단 콜백함수가 뭐냐면
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
var sortfunc = function (a , b){
return a - b // 정렬 순서를 바꾸려면 b - a 하면된다.
}
console.log(numbers.sort(sortfunc));
이제 여기서
콜백함수는 간단히 말하면 함수를 호출하는 인자 값 에 글어가 있는 함수를 콜백함수 라고 부른다.
자 ,이거다
맨밑에 콜솔로그에
console.log(numbers.sort(sortfunc));
이부분에서 sort() 라는 함수안에 sortfunc이라는 콜백 함수를 포함해서
보내게되면,
sortfunc함수는 리턴값을 출력한다.
오지리널 함수의 동작 방법을 함수를 전달하므로
그 오리지널함수의 동작방법을 바꿀수있는 좋은 방법이다.
즉, sort()함수의 원래 방식에서 함수로 된 인자를 전달함으로
그 인자의 정체는 함수이고 그 함수를 콜백함수라고 부른다.
(그니까 콜 (함수를 콜하면) 다시 함수를 보내주니까 콜~백 이니까 콜백함수이다)
저 코드의 설명은 ...
원래함수(sort())의 기능을 변경하고 싶을때 인자로 함수를 넣어서 그렇게,,, 콜백을 쓰면 된다는것이다.
이게 다 함수가 값으로 역할도 하기때문에 가능한거다.
인자값에 함수를 넣어서 보냄 (그 보낸 함수가 바로 콜백함수)
자 .. 이어서
저 코드를 해석 하자면
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
var sortfunc = function (a , b){
return a - b // 정렬 순서를 바꾸려면 b - a 하면된다.
}
console.log(numbers.sort(sortfunc));
맨 밑에서
20 10
10 20
10 9
9 10
9 8
8 9
88
78
67
66
56
55
45
이런식으로 두개를 비교해서
결국 1이 ....
앞에서 1이 되는거고
또 다음 비교가 시작이되고
아무튼 sort() 가 돌아가는데 거기 방식을 인자 a ,b 이렇게 줘서 비교하는 알고리즘으로
돌려서
정렬을 하는 코드이다.
그래서
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
var sortfunc = function (a , b){
console.log(a,b); // 결과값을 찍고
if ( a > b ){ // 비교값으로 순서를 정렬하는 방법!!
return 1;
}else if ( a < b ){
return -1;
}else{
return 0;
}
}
console.log(numbers.sort(sortfunc));
이렇게 해준다
여기코드중에
이거
if ( a > b ){ // 비교값으로 순서를 정렬하는 방법!!
return 1;
}else if ( a < b ){
return -1;
}else{
return 0;
}
이거는
그니까...
둘을비교하는데
(괄호안에 a 와 b를 비교를 하는데)
비교순서는
if문으로
작은 값이 -1
그다음 큰값이나 같은값 정렬이 0
그다음 큰값이 정렬이 1
이렇게 -1 0 1 의 순서대로 정렬하면
결국 결과는
1 ,2 ,3,4,5,6,7,8,9,10,20
이렇게 나오는거다.
여기서 저 코드를 더 간편하게 만드는 코드를 짜보면,,,
var numbers = [20 , 10 , 9 , 8, 7, 6, 5, 4 ,3 ,2, 1]; // 배열생성(배열객체)
var sortfunc = function (a , b){
console.log(a,b); // 결과값을 찍고
return a - b; // if문을 지우고 이렇게 간단하게 넣을수 있다.
}
- 참고로 sort() 메서드 의 괄호 안에() 방식은 정렬방식은 음수 , 양수로 구분하여 -1 0 1 이렇게 정렬하는 방식이다.
코드 설명>>
우선 [20, 10, 9,8,7,6,5,4,3,2,1]의 배열에서 a-b라는 연산을 모두 한 다음
그 결과값으로 정렬하는 것이 결코 아닙니다.
뭐하러 굳이 뺄셈을 하고 그 값으로 또 정렬하겠습니까?
자바스크립트의 정확한 알고리즘은 아니지만
쉽게 정렬 알고리즘을 설명하면 이렇습니다.
(a,b) 형식으로 지정한 두 인자를 차례로 비교합니다.
우선 배열 numbers[0]과 numbers[1] 즉, 20과 10을 비교해 볼까요?
20-10 = 10
결과값이 10 즉, 양수입니다.
sort함수에 sortNumber(a,b)의 return 값으로 양수 10을 전달합니다.
그럼 sort함수가 양수값을 전달받고 배열의 순서를 바꾸어 버립니다.
(정확하게 말하면 두 배열 안에 든 값을 교체)
그럼 배열이 [10, 20, 9,8,7,6,5,4,3,2,1] 이렇게 바뀝니다.
그 다음 numbers[0]과 numbers[2] 즉 10과 9를 비교합니다. 10 - 9 = 1 >0, 양수입니다.
결과값이 양수이므로 또 10과 9의 순서를 바꿉니다.
이런 식으로 계속 두 인자를 비교해서 결과값이 양수가 나오면 순서를 바꾸고,
음수가 나오면 순서를 그대로 유지하는 겁니다.
배열이 바뀌어가는 순서를 보면 이해하기 쉽습니다.
[(20), (10), 9,8,7,6,5,4,3,2,1] 20-10 = 10, 즉 양수이므로 순서바뀜! ()는 비교되는 인자값.
[(10), 20, (9),8,7,6,5,4,3,2,1] 10 - 9 = 1 또 양수, 순서 바뀜.
[(9), 20, 10, (8),7,6,5,4,3,2,1] 반복...
[(8), 20, 10, 9,(7)...]
...
[(2). 20, 10...3, (1)][(1), 20, 10...]
그럼 배열 내에서 가장 작은 값 1이 찾아지겠죠.
[1, 20, 10, 9,8,7,6,5,4,3,2]
1의 순서는 바뀌지 않습니다. 1-2 = -1
즉 결과값이 음수이기 때문이죠.
그 다음은 두번째 배열 차례입니다.
20 - 10 = 10 > 0 이므로 순서를 또 바꿉니다.
[1, (20), (10), 9,8,7,6,5,4,3,2][1, (10), 20, (9), 8...]
[1, (9), 20, 10, (8)...]
이런 식으로 반복하다 보면 두번째로 작은 값 2도 찾게 됩니다.
....
[1, 2, 20, 10, 9,8,7,6,5,4,3]
그럼 다음은 세번째...
이렇게 지루하게 반복하면 결국 정렬이 됩니다.
물론 실제 자바스크립트에서는 비교하는 순서가 다릅니다.
다른 알고리즘을 쓰기 때문이죠.
이렇게 차례차례 비교해 나가면 인간이 이해하기는 쉽지만
연산량이 기하급수적으로 늘어나기 때문에 다른 정렬 알고리즘을 쓰는 것이죠.
실제로는
[20, 10, 9,8,7,6,5,4,3,2,1]
배열의 양쪽 끝부터 비교하고 (20, 1),
그 다음 배열의 가운데 값을 차례로 비교해 나갑니다. (1,6)
디버깅해 보시면 쉽게 아실 수 있을 겁니다
결국 계속
20 10
이렇게 반복해서 비교해서
그 리턴 결과는
단순히 20 10 을 뺸결과를 리턴하는게 아니라
그 결과가 양수 음수 를 또 분간해서 인덱스를 형성하고
그 인덱스의 결과가 데이트의 위치를 결정해서
최종 남는 나머지 값이
쌓이는 스택으로 정렬이 되는것이다
