쑥쑥자라기🌱

HTMLCollection처럼 배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부릅니다. 유사 배열(Array-Like Object)이란? 앞에서도 설명한 것처럼 이름 그대로 배열과 유사(類似)한 객체를 유사 배열, 영어로는 Array-Like Object라고 부릅니다. 하지만 마냥 모양만 비슷하다고 해서 모두 유사 배열이라고 부르진 않는데요. 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있습니다. 1. 숫자 형태의 indexing이 가능하다. 배열은 각 요소에 0부터 순서대로 매겨진 index를 통해 요소끼리의 관계도 파악할 수 있고 그 index를 통해 요소에 접근할 수도 있다는 특징이 있죠? 유사 배열도 마찬가지로 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 ..

id는 고유한 값이기 때문에 하나의 태그를 선택할 때는 유용하지만 만약 여러 요소들을 동시에 선택해야 하는 경우에는 활용하기가 어렵습니다. CSS로 스타일링을 할 때도 여러 요소들의 스타일을 한꺼번에 다룰 때는 id가 아니라 클래스 속성을 활용합니다. 클래스 속성을 활용해서 태그를 선택하는 방법 클래스로 태그를 선택하는 메소드의 이름은 getElementsByClassName입니다. 여러 요소들을 선택하는 거니까 getElement에 s가 붙습니다. 저장하고 실행해보면 color-btn 클래스가 있는 모든 태그들이 이렇게 대괄호로 감싸져서 배열의 형태로 선택됩니다. HTMLCollection를 눌러보면 각 값들마다 인덱스도 있고 length 프로퍼티도 있어서 마치 배열 같아 보이지만 사실은 완벽하게 배열..

JavaScript를 배울 때 가장 많이 사용했던 console.log처럼 그냥 Javascript에서 미리 만들어져있는 document라는 객체의 getElementById라는 메소드를 사용합니다. 메소드 이름 그대로 id 속성을 통해서 어떤 요소를 가져오겠다는 의미입니다. 그래서 이 메소드의 파라미터로 접근하고자 하는 태그의 id값을 문자열로 전달해 주게 되면 해당되는 태그가 선택되는 원리입니다. 콘솔에 출력해보면 딱 그 태그만 보여주는 것이 아니라 해당 태그 내부에 있는 모든 내용들이 표시된다는 점을 확인할 수 있습니다. document.getElementById라는 메소드를 활용해서 id 속성을 가지고 태그를 선택합니다. HTML 태그에서 id 속성은 코드 전체에서 봤을 때 다른 태그들과 구분하기..

바스크립트에는 variable의 약자를 따서 var라는 키워드로 변수를 선언할 때가 있었습니다. 자바스크립트에 변수를 선언하는 방식은 처음부터 let과 const가 아니였습니다. 변수 선언 일단 아래 코드 처럼 var 변수는 let 이나 const 처럼 똑같이 키워드 다음에 변수이름을 써서 선언할 수 있고, var myVariable; myVariable = 'codeit'; 혹은 키워드와 변수이름, 그리고 할당연산자와 값으로 선언과 동시에 값을 할당해 줄 수도 있습니다. var myVariable = 'codeit'; 중복 선언 허용 var 키워드로 선언한 변수의 첫 번째 문제는, let과 const와는 다르게 중복 선언이 가능하다는 겁니다. 똑같은 이름으로 변수를 한 번 더 선언하게 되면, 에러가 발..

프로그래밍이 익숙해지고 점점 더 다른 사람들이 작성한 코드도 살펴보기 시작하면 어느 순간부터는 상수를 만들 때 배웠던 const 키워드를 더 자주 보게 될 것입니다. 실제로 몇몇 스타일 가이드에서는 변수를 const 키워드로 선언하라고 권장하고도 있습니다. 분명 상수를 만들 때 사용한다고 배웠었는데 왜 변수 선언에 let이 아니라 const를 사용하라는 걸까요? 일단 const와 let의 가장 큰 차이를 보면 바로 재할당이 불가능하다는 건데요. 이 코드를 보면 let으로 선언한 변수는 재할당이 가능하기 때문에 계속해서 값을 바꿀 수 있지만 const로 선언한 다음에 새로운 값을 할당하려고 하면 오류가 발생합니다. let x = 1; console.log(x); x = 2; console.log(x); c..

// 참조형 복사하기 (Reference Type Copy) let numbers1 = [1, 2, 3]; let numbers2 = numbers1; numbers2.push(4); console.log(numbers1); // [1, 2, 3, 4] console.log(numbers2); // [1, 2, 3, 4] 참조형 값은 변수에 할당될 때 값 자체가 아니라 주소값이 할당됩니다. 그래서 이 코드를 보면 배열도 참조형이기 때문에 numbers1에 이 배열의 주소값이 할당이 되고 numbers2에서도 numbers1이 가지고 있는 배열의 주소값이 복사가 돼서 numbers2만 변경했지만 이 코드를 실행했을 때 numbers1도 변경된 모습을 확인할 수 있습니다. 그런데 상황에 따라서는 이 참조형 ..

자료형 (Data Type) 기본형 (Primitive Type) Number, String, Boolean, Null, Undefined 어떤 값을 다룰 때 특별한 경우를 제외하면 모두 변수에 할당해서 사용하는데, Javascript에서 변수에 기본형 값을 할당하면 해당 변수 이름을 가진 상자에 그 값을 넣어준다고 생각해 볼 수 있습니다. 1번 줄에서 변수 x에 3이라는 값을 할당하고 있으니까 x라는 숫자에 값 3을 담았다고 볼 수 있습니다. 그리고 2번 줄에서는 y라는 변수에 변수 x를 할당하고 있는데 이러면 변수 y에 x가 가지고 있는 값을 복사해서 담게 됩니다. 그래서 4번 5번 줄이 실행되면 똑같이 숫자 3이 콜솔에 두 번 출력됩니다. 그리고 나면 6번줄에서 변수 y에 5라는 새로운 값을 할당해..

문자열도 생각해보면 '문자' + '열'이기 때문에 배열과 비슷한 부분들이 많습니다. 비슷한 점 실제로 지난 시간에 배열과 문자열 모두 length프로퍼티를 가지고 있고, 대괄호 표기법으로 각 요소에 접근할 수 있다거나.. 꽤 많은 메소드들이 배열과 문자열 모두 동일하게 사용되는 것도 확인할 수 있었는데요. 배열을 다룰 때 유용한 for..of문을 문자열에 활용할 수도 있습니다. let myString = 'Codeit'; for (let str of myString) { console.log(str); } // C // o // d // e // i // t 다른 점 하지만 비슷하다고 해서 완전히 같다고는 할 수 없습니다. let myString = 'Codeit'; let myArray = ['C', ..