'분류 전체보기' 카테고리의 글 목록 (38 Page)

for in 반복문은 객체에 사용하여 객체 내부의 데이터와 키값들을 출력할 수 있다.

문법)

for(var 키값 in 객체){

}

사용 예제 - 배열 출력하기

var arr = [1,2,3,4,5];
for(i in arr){
  console.log("key &gt;"+i+"    arr["+i+"] &gt;"+arr[i]);
}

사용 예제 - 객체 출력

var product = {
  name : "건조 망고",
  kind : "당절임",
  ingredient : "망고, 설탕, 메타중아황산나트륨, 치자황색소",
  origin : "필리핀"
}
for(i in product){
  console.log("key >"+i+"    product["+i+"] >"+product[i]);
}

사용 예제 - 배열 객체 데이터 출력하기

var students = [
  {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
  {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
  {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
  {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
  {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
  {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
  {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
  {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
  {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
  {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
  {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];
for(i in students){
  for(j in students[i]){
      console.log("key >"+j+"    students["+i+"]["+j+"] >"+students[i][j]);
  }
}

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

HTML, Javascript - 배열 객체데이터를 출력 후 정렬하기(sort() 메소드 활용하기) (0)	2019.09.08
Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08

javascript(jquery)를 활용하여 재생, 일시정지, 멈춤 기능이 있는 스탑워치를 만들어 보겠다.

시간은 시 분 초만 표시한다.

1. 재생버튼은 시작한다.

2. 일시정지 버튼은 잠시 멈추는 기능으로 재생버튼을 다시 누르면 기존 시간을 이어서 진행한다.

3. 멈춤 버튼은 스톱워치를 초기화하고 정지시킨다.

아래는 실제 동작 스톱워치이다.

00:00:00

index.html

<!DOCTYPE html>
<html>
<head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
  	body{
		height: 100vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
 	}
 	.box{
		width: 200px;
		height: 200px;
	}
	.timerBox{
		width: 200px;
		outline: 2px solid black;
	}
	.timerBox .time{
		font-size: 30pt;
		color: #4C4C4C;
		text-align: center;
		font-family: sans-serif;
	}
	.btnBox{
		margin: 20px auto;
		text-align: center;
	}
	.btnBox .fa{
		margin: 0px 5px;
		font-size: 30pt;
		color: #FAED7D;
		cursor: pointer;
	}
</style>
<meta charset="UTF-8">
<title>StopWatch</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="stopwatch.js"></script>
</head>
<body>
	<div id='box' class="box">
		<div id='timerBox' class="timerBox">
			<div id="time" class="time">00:00:00</div>
		</div>
		<div class="btnBox">
			<i id="startbtn" class="fa fa-play" aria-hidden="true"></i>
			<i id="pausebtn" class="fa fa-pause" aria-hidden="true"></i>
			<i id="stopbtn" class="fa fa-stop" aria-hidden="true"></i>
		</div>
	</div>
</body>
</html>

버튼 이미지는 bootstrap cdn 이미지를 활용 하였다.

stopwatch.js

var time = 0;
var starFlag = true;
$(document).ready(function(){
  buttonEvt();
});

function init(){
  document.getElementById("time").innerHTML = "00:00:00";
}

function buttonEvt(){
  var hour = 0;
  var min = 0;
  var sec = 0;
  var timer;

  // start btn
  $("#startbtn").click(function(){

    if(starFlag){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      starFlag = false;

      if(time == 0){
        init();
      }

      timer = setInterval(function(){
        time++;

        min = Math.floor(time/60);
        hour = Math.floor(min/60);
        sec = time%60;
        min = min%60;

        var th = hour;
        var tm = min;
        var ts = sec;
        if(th<10){
        th = "0" + hour;
        }
        if(tm < 10){
        tm = "0" + min;
        }
        if(ts < 10){
        ts = "0" + sec;
        }

        document.getElementById("time").innerHTML = th + ":" + tm + ":" + ts;
      }, 1000);
    }
  });

  // pause btn
  $("#pausebtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
    }
  });

  // stop btn
  $("#stopbtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
      time = 0;
      init();
    }
  });
}

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - sort() / 정렬 메소드 사용하기 (0)	2019.09.08
Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08

보통 일정시간마다 특정 값을 출력하는 문구를 만들 때, setInterval() clearInterval() 메소드를 활용하여 구성하였던것 같다.

기존에 구성하던 로직)

var i = 1;
var timer = setInterval(function(){

  if(i>5){
    clearInterval(timer)
  }else{
    document.write(i+"<br/>");
    i++;
  }

}, 1000)

그러다 문득, 반복문인 for문 안에서 처리 할 수 없는지 궁금해졌다.

setInterval도 버리고 setTimeout으로 구성하여 봤다.

첫번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000);
}

1초마다 찍히는게 아닌 동시에 6이 찍혔다.

for문의 동작은 이미 끝났고 1초뒤에 동작하는 setTimeout 메소드가 5개가 동시에 동작한 것이다.

그래서 시간을 각각 별개로 쪼개어 보았다.

1초후... 2초후... 3초후...

두번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000*i);
}

이번에도 아쉽게 결과는 6만 5개가 찍혔지만, 1초 마다 6이 찍히는걸 볼 수 있었다.

for문의 동작이 끝나기전 값을 따로 처리 해줘야 할 것 같다.

이부분을 처리하기 위해선 자바스크립트의 클로저 개념이 필요하다.

세번째 도전)

for(i=1; i<6; i++){
  (function(x){
    setTimeout(function(){
      document.write(x+"<br/>");
    }, 1000*x);
  })(i);
}

클로저란 간단하게 말하면 내부함수가 외부함수에 접근할 수 있는 것을 말한다.

기존에 동작시키던 방식은 setTimeout 함수가 i를 참조할때 for문에서 이미 5번 돌고 마지막에 ++된 값에 의해 6으로 처리되어 찍히고 있었던 것이다.

즉시발동함수로 setTimeout 메소드를 감싸고 찍고 싶었던 i의 값을 매개변수에 처리한다.

i의 값은 이제 즉시발동함수의 매개변수로 지역변수가 되기 때문에 별도의 값으로 처리 되고, setTimeout의 메소드내 함수는 외부 함수의 지역변수 'x'값을 가져와 document.write()로 값을 찍고 시간도 각각 별개의 시간으로 연산될 것이다.

그래도 이해가 잘 안된다면 콘솔 창에 찍은 결과값을 다시보자.

for(i=1; i<6; i++){
  (function(x){
    
    console.log("즉시발동함수 > i="+i+"     x="+x)
    setTimeout(function(){
      console.log("setTimeout  > i="+i+"     x="+x)
    }, 1000*x);
  })(i);
}

빨간 네모안에 있는 콘솔창 값은 즉시발동함수에서 한번에 찍힌 결과이다.

처음 i는 1 매개변수로 처리된 x도 1이고 하나씩 차례대로 증가되는걸 볼 수 있고, 그 이후 setTimeout에서 처리된 값을 보면 i는 이미 for문으로 동작이 완료된 i의 값을 찍고 있기 때문에 계속 보이던 6의 값이 찍히고 있고 x는 클로저로 인하여 1부터 5까지 처리되고 있는 걸 볼 수 있다.

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - for in 반복문을 사용하여 출력하기 (0)	2019.09.08
Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08
Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08

함수는 왜 사용할까?

1. 재사용성

구구단 프로그램을 구성해야 한다고 하자.

이런 경우 필요한 단수가 나올때마다 반복문의 변수값을 바꿔줘가면서 for문이 점점 늘어날 것이다.

하지만 매개변수 값에 따라 구구단을 출력하는 기능을 가진 함수를 정의하였다면, 우린 원하는 구구단의 값만 넣어주고

함수만 호출하면 언제든이 원하는 구구단을 소스도 지저분하지 않게 구성할 수 있을것이다.

이렇게 같은 소스를 사용하지 않게 되면, 용량도 자연스레 줄어들 것이다.

2. 가독성

함수의 기능을 정의하고 함수의 명을 잘 지어놨다면 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 유추할 수 있고,

또한 해당 기능이 필요할땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이며 가독성이 소스를 구성할 수 있다.

3. 모듈화

라이브러리 파일을 만들거나 대규모의 프로젝트를 구성하게 될 때 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 구조별로 구성하여 작성이 가능해지고 유지보수나 버그가 발생시 해당 함수를 수정함으로써 보다 편리해진다.

자바스크립트의 함수 선언

- 선언 함수

//선언 함수
function 함수명(매개변수, 매개변수 ...){
  //기능 정의
  return 반환 할 데이터;
}

가장 일반적으로 보던 형태 일 것이다.

- 익명 함수

// 익명 함수
var 함수명 = function(매개변수, 매개변수 ...){
  //기능 정의
  return 반환 할 데이터;
}

- 기명 함수

// 기명 함수
var 함수명1 = function 함수명2(매개변수, 매개변수 ...){
  return 반환 할 데이터;
}

호출 시에는 함수명2로 호출이 아닌 함수명1로 호출 한다.

MDN 측의 글을 보면 함수내에서 자신을 참조하는데 사용하거나 디버거 모드에서 함수 식별하는데 사용 할수 있다고 합니다.

var factorial = function fac(n) { 
  return n<2 ? 1 : n*fac(n-1) 
};

console.log(factorial(3));

factorial 문제를 통한 사용 예시(재귀함수를 통해 구현 하였다.)

- 화살표 함수

// 화살표 함수
var 함수명 = (매개변수, 매개변수 ...)=>{
  //기능 정의
  return 반환 할 데이터;
}

- 즉시 실행 함수

// 즉시 실행 함수
(function 함수명(매개변수, 매개변수 ...){
  //기능 정의
})()

함수는 여러개의 매개변수는 받을 수 있지만 return값인 반환 값은 한개만 가능하다.

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - 스톱워치(stopwatch) 만들기 (0)	2019.09.08
Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08
Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08
HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) (0)	2019.09.08

달팽이 배열은 배열에 데이터를 달팽이 껍질형태로 차례대로 채워나가는 것을 말한다.

채우는 동작 원리)

- 4 x 4 배열 생성

1. 생성 방식은 첫 행인 0행부터 마지막 열인 3열까지 차례대로 숫자를 찍는다.

(작업이 끝나면 첫행을 1행으로 증가시킨다.)

	0열	1열	2열	3열
0행	1	2	3	4
1행
2행
3행

2. 증가된 첫행인 1행부터 마지막 행 3행까지 마지막 열인 3열에 숫자를 넣는다.

(마지막 열인 3열을 하나 감소시킨다.)

	0열	1열	2열	3열
0행	1	2	3	4
1행				5
2행				6
3행				7

3. 마지막 열이 2열으로 바뀌었고(마지막 열이 2번에서 동작 후 감소됨) 부터 첫 열까지 차례대로 마지막 행 3행에 찍는다. (마지막 행인 3행을 감소시킨다.)

	0열	1열	2열	3열
0행	1	2	3	4
1행				5
2행				6
3행	10	9	8	7

4. 마지막 행인 2행부터 첫 행인 1행까지 숫자를 채운다.3번에서 마지막행이 3행에서 감소하여 2행이 됨, 1번에서 첫행이 증가하여 첫행은 1행이 됨 (첫열을 증가시킨다. 1열 증가시킨다.)

	0열	1열	2열	3열
0행	1	2	3	4
1행	12			5
2행	11			6
3행	10	9	8	7

5. 1번에서 했던 동작을 다시 반복한다.

	0열	1열	2열	3열
0행	1	2	3	4
1행	12	13	14	5
2행	11			6
3행	10	9	8	7

6. 2번에서 했던 동작을 반복한다.

	0열	1열	2열	3열
0행	1	2	3	4
1행	12	13	14	5
2행	11		15	6
3행	10	9	8	7

7. 3번에서 했던 동작을 반복한다.

	0열	1열	2열	3열
0행	1	2	3	4
1행	12	13	14	5
2행	11	16	15	6
3행	10	9	8	7

8. 4번에서 했던 동작을 반복한다.

for문 종료조건으로 인해 만족되지 않아 실행되지 않는다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Snail Array</title>
    <style media="screen">
      body{
        background: #fff;
      }
      td{
        width: 50px;
        height: 50px;
        background: #fff;
        color: #fff;
        text-align: center;
      }
    </style>
    <script type="text/javascript" src="js-snail.js"></script>
  </head>
  <body>
    <table id="snail">

    </table>
  </body>
</html>

js-snail.js

window.onload=function(){
  (function(){
    var rows = prompt("행의 개수를 입력하세요");
    var cols = prompt("열의 개수를 입력하세요");

    var drawArr = createSnailArray(rows, cols);
    drawAnimate(drawArr);
  })();

}

/* 달팽이 배열을 만드는 함수
 * @param rows : 생성할 2차원 배열의 행 개수
 * @param cols : 생성할 2차원 배열의 열 개수
 */
function createSnailArray(rows, cols){
  // 애니메이션 효과용 1차원 배열 선언 및 초기화
  var drawArr = new Array();

  // 달팽이 형태로 데이터를 삽입할 2차원 배열 선언 및 초기화
  var arr = new Array();
  for(i=0; i<rows; i++){
    arr[i] = new Array();
  }

  var num = 1; //삽입할 데이터  1, 2, 3, 4, 5 ...

  var row_min = 0;       //행 최소값
  var col_min = 0;       //열 최소값
  var row_max = rows-1;  //행 최대값
  var col_max = cols-1;  //열 최대값

  var cycle = 0;         //그리면서 for문을 돌릴 바퀴 수
  if(rows >= cols){
    cycle = cols/2;
  }else{
    cycle = rows/2;
  }

  for(i=0; i<cycle; i++){

    //상단 출력
    for(j=col_min; j<=col_max; j++){
      arr[row_min][j] = num++;
      drawArr.push("td"+row_min+j);
    }
    row_min++;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;


    //우측 출력
    for(j=row_min; j<=row_max; j++){
      arr[j][col_max] = num++;
      drawArr.push("td"+j+col_max);
    }
    col_max--;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

    //하단 출력
    for(j=col_max; j>=col_min; j--){
      arr[row_max][j] = num++;
      drawArr.push("td"+row_max+j);
    }
    row_max--;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

    //좌측 출력
    for(j=row_max; j>=row_min; j--){
      arr[j][col_min] = num++;
      drawArr.push("td"+j+col_min);
    }
    col_min++;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

  }
  var snail = document.getElementById("snail");
  appendTag(snail, arr);

  return drawArr; //애니메이션을 차례대로 그릴 ID값이 담긴 1차원 배열 반환
}

/* HTML 태그 target을 지정하여 생성하는 함수
 * @param target : 생성, 접근할 요소 dom형태로 전달
 * @param data   : 생성할 데이터 배열 전달
 */
function appendTag(target, data){
  var tag = "";

  for(i=0; i<data.length; i++){
    tag += "<tr>"
    for(j=0; j<data[i].length; j++){
      tag += "<td id='td"+i+j+"'>"+data[i][j]+"</td>"
    }
    tag += "</tr>"
  }

  target.innerHTML = tag;
}

/* 0.3초마다 배열에서 ID값을 하나씩 접근하여 색상 처리
 * @param arr : 아이디값이 담긴 배열
 */
function drawAnimate(arr){

  for(i=0; i<arr.length; i++){    
    (function(x){
      setTimeout(()=>{
        document.getElementById(arr[x]).style.background = "#FAAC58";
      }, 300*x)
    })(i);
  }
}

prompt 창으로 열과 행의 입력을 받은 후, 빙글 빙글 돌아가면서 달팽이 형태로 배열을 채우고 출력하는 소스이다.

열과 행이 1개차이까진 문제가 없지만 2개이상 차이가 나면 계속해서 도는 문제가 있어

이너 for문안에서 종료조건을 마지막 데이터값으로 체크하여 break 처리를 하였다.

더 좋은 로직이 있다면 코멘트 부탁드립니다.

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2)	2019.09.08
Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08
HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) (0)	2019.09.08
Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점) (0)	2019.09.08

알고리즘 문제를 풀이해 보겠다.

1 ~ 입력받은 숫자까지 데이터를 배열에 담을 때, 홀짝별로 정렬되어 들어가는 배열을 만들 것이다.

조건이 배열을 한개만 사용해야 한다는 부분이 신기하여 작성하여 보았다.

1. 입력받은 숫자까지 배열에 담는다. ex) 6을 입력시 1, 2, 3, 4, 5, 6

2. 배열에 어떻게 넣든 상관은 없지만 나중에 호출시

홀수부터 시작이면 1, 3, 5, 2, 4, 6 으로 출력된다.

짝수부터 시작이면 2, 4, 6, 1, 3, 5 으로 출력시킨다.

3. 배열은 한 개만 선언하여 사용한다. 2개이상 사용금지!

재미있는 조건의 문제같아서 풀이해보았다. 더 신박한 풀이 방식이 있다면 피드백 부탁드립니다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>홀짝</title>
    <script type="text/javascript" src="js-sipping.js"></script>
    <style media="screen">
      .inputData{
        width: 80px;
        height: 30px;
      }
      .button{
        width: 60px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <input type="number" id="inputData" class="inputData">
    <button type="button" class="button" name="button" onclick="sipping()">실행</button>
    <div id="outPut">

    </div>
  </body>
</html>

js-sipping.js

function sipping(){
  var num = document.getElementById("inputData").value;
  num = parseInt(num);
  if(num > 1){

    var arr = new Array();
    var half;
    var idx = 0;
    var orderBy = confirm("홀수 부터 정렬할까요?");

    if(orderBy){
      half = Math.ceil(num/2);
    }else{
      half = Math.floor(num/2);
    }

    for(i=1; i<num+1; i++){
      if(orderBy){

        if(i%2 == 0){
          arr[half] = i;
          half++;
        }else{
          arr[idx] = i;
          idx++;
        }
      }else{

        if(i%2 == 0){
          arr[idx] = i;
          idx++;
        }else{
          arr[half] = i;
          half++;
        }
      }
    }

  }else{

    alert("2이상부터 동작합니다.")
    return;
  }

  document.getElementById("outPut").innerHTML = arr;
}

작성 한 코드는 2이상부터 동작하도록 설정하였다.

짝부터 정렬한다고 가정하고

0번인덱스부터 차례대로 짝수값만 %연산자를 통해 집어넣고

배열길이의 절반위치부터 차례대로 홀수값만 입력하여 완성시키는 코드이다.

홀부터 정렬할경우엔 반대로 동작

입력값이 2, 4, 6 등의 짝수 값을 입력시엔 반값이 정확하므로 문제가 없지만

입력값이 3, 5, 7 등의 홀수 값을 입력하면 반값이 소숫점으로 나오므로 정렬순에 따라 올림 또는 버림이 필요했다.

ex) 7이 입력된 경우 짝부터 정렬하면 홀수의 시작 위치가 3이다.(길이의 반 값(3.5)을 내림을 해야함)

숫자	2	4	6	1	3	5	7
배열[인덱스]	0	1	2	3	4	5	6

숫자	2	4	6	1	3	5	7
배열[인덱스]	0	1	2	3	4	5	6

ex) 7이 입력된 경우 홀부터 정렬하면 짝수의 시작 위치가 4이다.(길이의 반 값(3.5)을 올림을 해야함)

숫자	1	3	5	7	2	4	6
배열[인덱스]	0	1	2	3	4	5	6

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - 함수(Function)를 사용하는 이유, 문법 (0)	2019.09.08
Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08
HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) (0)	2019.09.08
Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점) (0)	2019.09.08
Javascript - 배열(Array) 선언 및 사용 하기 (0)	2019.09.06

2차원 배열에 색상을 저장하고, 배열 데이터를 활용하여 태그로 파싱 후

태그를 클릭하면 해당 태그의 ID 값을 가져와서 body 태그의 배경색을 바꾸는 프로그램을 구성해보겠다.

색상 배열 데이터는 네이버 색상표를 검색시 나오는 데이터를 옮겼다.

Pallet

See the Pen Pallet by myhappyman (@myhappyman) on CodePen.

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - 달팽이 배열 생성하기(snail Array) (0)	2019.09.08
Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08
Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점) (0)	2019.09.08
Javascript - 배열(Array) 선언 및 사용 하기 (0)	2019.09.06
Javascript - 슬라이드쇼(SlideShow) 만들기 (6)	2019.09.06

배열에 예제문제 풀이를 준비하던 도중 문제가 발생하였다......

문제는 아래와 같다.

var numberArr = [["1", "2"],
                 ["3", "4"]];

function shiftTable(){
  var copyArr = numberArr;  //문제가 되는 부분

  for(i=0; i<numberArr.length; i++){

    for(j=0; j<numberArr[i].length; j++){
        if(i==0 && j==0){
          copyArr[i][j+1] = numberArr[i][j];
        }else if(i==0 && j==1){
          copyArr[i+1][j] = numberArr[i][j];
        }else if(i==1 && j==0){
          copyArr[i-1][j] = numberArr[i][j];
        }else if(i==1 && j==1){
          copyArr[i][j-1] = numberArr[i][j];
        }
    }
  }
}

함수 shiftTable 내부에 첫줄

var copyArr = numberArr;

형태로 배열을 복사하게 되면 어떻게 될까?

배열 데이터를 출력해보면 정상적으로 복사가 된 것 같지만 사실 이것은 주소값이 복사 된 것이다.

먼저 선언한 numberArr라는 배열의 주소값을 copyArr이라는 변수가 참조하기 시작한다.

그럼 어찌되었든 간에 값을 똑같이 복사 했을텐데 뭐가 문제냐라고 의문이 생길 수 있겠지만

반복문 구간에서 문제점을 볼 수 있다.

1	2
3	4

간단하게 4칸짜리 테이블의 데이터가 빙글 빙글 돌아가는걸 표현하기 위해 인덱스가 증가함에 따라

하드코딩으로 해당 위치값을 옮기는 걸 표현한 소스인데

최초 반복문 동작하면 i=0; j=0; 값의 상태에서 처음 if 조건을 만족하고

copyArr[i][j+1] = numberArr[i][j]; 문장이 실행이 된다. (numberArr[i][j] 의 값은 현재 "1")

여기서 서로 같은 주소값을 바라보고 있다보니

copyArr 값이 [["1", "1"], ["3", "4"]] 으로 바뀌고 동일한 주소값을 바라보는 numberArr도 동일하게 값이 바뀌어 버린다.

그럼 자바스크립트에서 배열을 복사 할 때, 우린 무엇을 사용해야 할까?

검색을 해보니 slice() 메소드를 활용하면 된다고 나와있어서 사용해보았지만 결과는 동일하게 서로의 값을 참조하고

독립적인 배열로 동작하지 않는다.

~~(확인 결과 1차원배열은 독립적으로 동작하지만 2차원배열은 독립적으로 동작하지 않는 점을 확인했다.)~~

독립적인 배열의 값만 복사하기

방법) JSON.parse(JSON.stringify(배열)) 활용하기

var numberArr = [["1", "2"],
                 ["3", "4"]];

var copyArr = JSON.parse(JSON.stringify(numberArr));
copyArr[0][1] = numberArr[0][0];
console.log(copyArr) // ["1", "1"], ["3", "4"];
console.log(numberArr) // ["1", "2"], ["3", "4"];

JSON 데이터를 파싱할 때 사용하는 메소드인데 배열을 복사 할 때도 사용할 수 있다.

이 방식을 이용하여 독립적인 값을 가지는 배열을 복사 할 수 있다.

저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 (0)	2019.09.08
HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) (0)	2019.09.08
Javascript - 배열(Array) 선언 및 사용 하기 (0)	2019.09.06
Javascript - 슬라이드쇼(SlideShow) 만들기 (6)	2019.09.06
Javascript - 반복문(for, while, do~while) (0)	2019.09.06

개발 흔적 남기기