공부하다가 재미있는 것이 있어서 작성한다. const planets = ['Morag', 'Aakon', 'Xandar'] const worlds = planets worlds[2] = planets worlds[2][1] = 'Ego' console.log(worlds) console.log(planets) planet은 배열의 주소를 가진 변수이고 worlds는 그 주소를 공유하는 변수이다. 이 때 worlds의 두번째 배열에 다시 planets을 할당하고 그 배열의 요소를 바꿔보자. 그럼 아래와 같은 결과가 나온다. 결국 참조하는 주소가 같아 아무리 할당하고 수정한다 하더라도 같은 배열을 수정하는 형식인 것이다.
요약 비원시값은 (배열, 함수, 객체 등) 작업에 따라 메모리 할당용량이 바뀔 수 있다. 원시값은 할당할 메모리 용량이 그렇게 가변적이지 않다. 따라서, 비원시값은 가변적인 용량을 처리할 수 있는 메모리에 따로 할당된 후 메모리 주소만 변수에 넘겨준다. 원시값은 그냥 변수에 할당해도 큰 관계가 없다. 즉 효율성 문제로 원시값과 비원시값의 데이터 저장 방법이 달라지게 된 것이다. 원시값은 숫자, 문자열, 불리언값이고 그 외 값들은 비원시값이라는 말을 많이 많이 들었다. 원시값은 변수에 그 값을 저장하고, 비원시값은 그 값이 있는 메모리 주소를 저장한다는데 조금 더 직선적으로 이해해보자. 원시값은 숫자, 문자열, 불리언값을 말한다. 원시값을 가지고 있는 변수는 오로지 문자열이던, 숫자던, 불리언값이던 자체만..
배열은 다양한 종류의 변수값을 묶어서 저장할 수 있는 자료구조 이다. 자바스크립트에서 한 배열 안에는 숫자, 불리언, 문자열, 함수까지도 들어갈 수 있다. 아래를 통해서 Computational하게 연습해보자. // 코딩이 진행될때마다 배열이 어떻게 바뀌는지 서술하시오. // 문제는 총 5개로 코드 옆에 (1)과 같이 괄호안에 번호로 적혀있음. const barks = [ [1, 2, 3], [2, 3, 4], [3, 4, 5] ] barks[2][1] = 10 // (1) barks[1][0] = barks[2][1] // (2) barks[2] = () => { barks[0][1] = barks[0][1] + barks[0][0] } // (3) barks[2]() // (4) barks[1] = ..
채팅창처럼 내가 쓴 대화 내용이 저장되면서, 적은 타이핑은 200ms씩 딜레이되며 출력되는 구조의 html 문서를 만드는 연습이다. 본인 풀이 전 생각) 풀기 전에 html의 구조를 먼저 짜고, 필요한 클래스와 추가적인 구조를 생각한다. 1) h1과 div가 각각 하나씩 있어야 이 전 기록들을 저장하면서 하나씩 뒤로 밀 수 있다고 생각했다. 2) 반복적인 기능은 input에 문자열을 넣고 Start를 누르면 글자가 하나씩 출력되는 기능이다. - 이에 따른 함수를 만들어야 한다. 3) 모든 기능은 Start 버튼을 눌렀을 때 시작된다. 풀이) Start 제대로 동작한다. 동작 순서) html의 각 요소를 querySelector로 표기해준다. button을 누르면 동작이 시작된다. input의 값이 str..
문제) 입력한 숫자까지의 소수를 아래 사진과 같이 출력하는 기능을 만들어라. 1 이하를 입력한다면 1 이상의 수를 입력하라고 경고창을 출력해라. 풀이 전 생각) 소수를 판별하는 함수를 만들어야 한다. start 버튼을누르면 입력한 수부터 소수인지 아닌지를 모두 다 판단해야 한다. start 버튼을 누른 뒤 화면에 출력하려면 innerHTML 또는 innerText로 어떤 결과값을 산출해야 한다. 함수 작성은 함수 작동의 행위가 시작되는 onclick 프로퍼티로부터 작성한다. 그 외, 모르는 부분이나 수정해야할 부분은 작성하면서 세분화한다. Start 위 기능의 동작 순서) 각 종 html 요소들을 querySelector로 지정하여, 선택가능한 프로퍼티로 만든다. button.onclick 프로퍼티를 클..
내가 어떠한 문제를 해결해야 할 상황을 맞닥드렸을 때 아무 가이드라인도 없이 문제를 풀려고 하면 심히 당황할 것이다. 이럴 경우를 대비한 문제 해결의 가이드라인이다. 문제 해결 접근법 문제를 이해하라 몇가지 간단한 예제를 만들어라. 문제를 분할하고 어떻게 풀 지 고민해라. 문제를 풀어라. 풀리지 않는다면 간단하게 만들어라. 복습하고 리팩토링해라 문제를 이해하라 - 문제를 내 방식대로 다시 생각할 수 있는가? - 실제 문제가 어떤 것인지 내 스스로 질문을 던지고 이해해라. - 문제의 인풋은 무엇이고 아웃풋은 무엇인지? 간단한 예제를 만들어라 - 문제를 이해했다면 인풋과 아웃풋을 예상할 수 있을 것이다. - 간단한 예제를 만들어본 뒤, 복잡한 예제를 만들어보아라. - 유효한 인풋부터 아무것도 입력하지 않은 ..
풀기 전 생각) 1) 초기 값을 입력하고 Start를 누를 때, 덧셈에 필요한 함수가 클로저로 초기값을 저장할 수 있어야 한다. 따라서, 함수는 함수를 리턴하는 형태를 가지게 설계해야 한다. 2) 모든 버튼들은 계속 사용할 수 있어야 한다. innerHTML을 사용함에도 불구하고 재사용이 가능하도록 설계한다. 나의 답안) 이번에는 정답과 비슷했다. querySelector를 설정할 때, 그것을 사용하는 element끼리 붙어있도록 설계하여 코드의 간결성을 보장할 수 있을듯 하다.
제작 전 생각하자! innerHTML을 사용하여 element의 내부사항을 조작했을 시 모든 프로퍼티가 날라가게 되므로, 프로퍼티를 재설정해주어야 함. 반복하여 사용하기 위해서는 함수의 기능을 이용해야 함. 재귀적 용법에 대해 상기해보자. 나의 답) 아래는 start 버튼과 cancel 버튼을 나누어서 조작하는 방식이다. 답지와는 다른 나만의 정답이지만, 나름 합리적으로 만들었다고 생각한다. 직관적이기 때문이다. 답지) 함수를 하나로 만들어 모든 기능을 구현하였다.
배열은 정렬된 자료구조로써 인덱스를 통해 자료들을 배열한다. 이 인덱스라는 존재가 배열의 연산성능을 다소 희생시킬 수 있다. 객체는 그냥 종이봉다리에 키값쌍을 잔뜩넣은 한 뭉치라 굳이 인덱스에 신경 쓸 필요가 없지만 배열은 중간에 자료를 하나 넣으면 그 뒤의 모든 인덱스를 일일히 수정해주어야 한다. 따라서 삽입과 삭제의 경우, 그 연산 위치에 따라 빅오 성능이 달라진다. 삽입 - 배열끝이냐 처음, 중간이냐에 따라 달라짐 삭제 - 배열끝이냐 처음, 중간이냐에 따라 달라짐 검색 - O(N) 접근 - O(1) 만약 배열 끝에 push만 할 경우, 인덱스만 하나 추가하고 자료를 하나 더 붙여주면 되기 때문에 push의 시간은 O(1)이다. 배열의 끝 자료를 삭제하는 pop도 마찬가지이다. 배열의 앞에서 자료를 ..
객체란 무엇인가? 객체는 정렬되지 않은 키 값 쌍이다. 여기서 키포인트는 정렬되지 않았다는 것이다. 객체는 정렬되지 않은 키값쌍을 나타내는 자료구조며, 따라서 정렬할 필요가 없는 데이터를 활용할 때 사용하면 가장 괜찮은 자료구조가 객체이다. 이 정렬되지 않는다는 장점은 객체의 삽입, 삭제, 검색, 접근에 따른 빅오 시간에 있다. 삽입 : O(1) 삭제 : O(1) 검색 : O(N) 접근 : O(1) 객체는 정렬이 되어있지 않으므로 삽입했을 때 다시 인덱스를 수정하는 등의 작업을 하지 않아도 된다. 그냥 해당 객체를 삽입하거나, 삭제하거나, 접근(Access)하면 된다. 따라서 삽입, 삭제, 접근의 빅오 노테이션은 O(1)이라고 할 수 있다. 다만 검색(Search)의 경우 해당 키(key)에 따른 (va..
