개발/JavaScript
[JavaScript] ⑥ 자바스크립트 DOM 뜻과 활용 방법
DOM이란 무엇일까? 브라우저의 콘솔 창을 켜고 document라고 입력하면 해당 웹페이지의 HTML 객체가 반환된다. 이번 포스팅에서는 MDN 문서를 바탕으로 DOM의 뜻과 간단한 활용 예시를 정리해 보려고 한다. DOM이란? DOM이란 The Document Object Model의 약자로 HTML 문서(Document) 객체(Object)와 상호작용하는 모델(Model)을 의미한다. 즉, DOM을 통해 HTML 요소를 객체처럼 접근해 다룰 수 있다. document.title // 현재 웹페지의 제목에 접근할 수 있다 document.title = "New Title" // 웹페이지의 제목을 변경할 수 있다! 브라우저와 DOM 브라우저는 HTML 문서를 파싱하여 DOM을 생성한다. 이를 통해 HTM..
자바스크립트 값, 표현식, 구문, 리터럴 의미 설명
자바스크립트를 처음 공부하는 입장에서 가장 난감한 것 중 하나가 용어의 의미를 제대로 이해하기 어렵다는 것이었다. 그 중에서도 한글로 읽으면 어떤 의미인지 알 거 같으나, 정작 프로그래밍 용어로는 정의하기 어려운 용어들이 바로 '값, 표현식, 구문, 리터럴'이었다. 이번 포스팅에서는 해당 용어들을 정리해보려고 한다. (각 용어의 개념 정의는 위키북스 를 참고했다.) 값이란? 값은 표현식의 결과이다. 최대한 쉽게 적어보려 했지만, 개인적으로 상당히 난감한 정의라 생각한다. 표현식의 의미를 아직 모르는 데, 표현식의 결과라는 문장을 어떻게 이해해볼 수 있을까? 우선, 여기서는 다음 예제를 보고 의미를 직관적으로 이해해 보는 것이 좋을 것 같다. 다음이 값이다. 1 30 + 10 표현식이란? 이제 표현식에 대..
자바스크립트 for... in 구문 정리
자바스크립트 for... in 구문은 객체의 키 및 속성 값을 반환하는 데 사용할 수 있으며, 다음과 같은 형태로 반복할 객체의 프로퍼티를 받을 변수를 선언하여 사용한다. (예제 출처는 MDN). const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // 출력값 // "a: 1" // "b: 2" // "c: 3" 한 가지 주의할 점은 for.. in 구문은 임의의 순서로 객체 속성을 반복한다는 것이다. for... in 구문은 특정 순서에 따른 값 반환을 보장하지 않는다. 따라서 배열 반복에는 사용하지 않는 것이 좋으며, 객체의 속성을 확인하..
자바스크립트 논리 연산자 설명: ||, &&, !
자바스크립트에는 ||(or), &&(and), !(not) 세 가지의 논리 연산자가 존재한다. 명칭은 논리 연산자지만, 불리언 뿐만이 아닌 모든 데이터 유형에 사용할 수 있다. 참고로 && 연산자가 || 연산자보다 우선 순위가 높아 먼저 실행된다. || (OR) 자바스크립트에서 || 연산자는 비교하는 값 중 최초의 truthy 값을 찾아 리턴한다. result = value1 || value2 || value3; 위의 예시에서 || 연산자는 왼쪽부터 오른쪽으로 차례대로 연산을 수행하며, 결과가 true 일 경우 연산을 멈추고 해당 값을 리턴한다. 만약, 모든 값이 false 일 경우, 가장 마지막 값을 리턴한다. 다음은 MDN에서 소개하고 있는 || 연산자 예시다. o1 = true || true // ..
자바스크립트 기본 개념 공부 내용 정리
1. 자바스크립트 기초 자바스크립트란? 자바스크립트 변수란? 자바스크립트 데이터 유형 자바스크립트 표현식과 연산자 자바스크립트 논리 연산자 2. 자바스크립트 함수 자바스크립트 함수란? 자바스크립트 화살표 함수 자바스크립트 고차 함수란? 자바스크립트 returing과 mutating이란? 자바스크립트 스코프란? 자바스크립트 함수 호이스팅이란? 3. 자바스크립트 객체와 메소드 자바스크립트 배열 속성 및 메소드 자바스크립트 객체란? 자바스크립트 객체 인스턴스란? 자바스크립트 map이란? 4. 자바스크립트 조건문 자바스크립트 if 조건문이란? 5. 자바스크립트 반복문 자바스크립트 for ... in 구문 정리 자바스크립트 do while 반복문이란? 6. 자바스크립트 이해 객체 지향 프로그래밍이란? 자바스크립트..
자바스크립트 호이스팅이란?
자바스크립트에서 호이스팅(hoisting)이란 무엇일까? 호이스팅을 이해하려면 스코프의 개념과 전역 변수, 지역 변수의 의미를 이해해야 한다. 이번 포스팅에서는 변수 호이스팅과, var, let, const 키워드의 사용, 함수 호이스팅에 대해 정리해 보려 한다. 자바스크립트 변수 호이스팅 자바스크립트는 기본적으로 위에서 아래로 차례차례 코드를 실행해 간다. 따라서 변수를 선언하기 전에, 변수를 호출하면 오류가 발생해야 한다. 그러나 자바스크립트의 호이스팅 기능은 모든 변수 선언문이 해당 스코프의 최상단으로 끌어 올려 처리한다. console.log(bear); // undefined bear = "A market is in bearish trend."; console.log(bear); // "A ma..
Returing과 Mutating 차이점 (정리 중)
returning과 mutating의 차이를 보자. 아래의 push 메소드는 기존의 배열을 mutating 하고, 값도 return한다. let pets = [ {name: "Meowsalot", species: "cat", age: 2}, {name: "Barksalot", species: "dog", age: 3}, {name: "Purssloud", species: "cat", age: 8} ] pets.push({name: "Puppster", species: "dog", age: 1}) console.log(pets); returing은 새로운 배열을 반환하는 것이고 mutating은 기존의 배열을 변화시키거나 수정하는 것이다. 그러나 push와 다르게 mutating하지 않는 메소드가 있다. ..
자바스크립트 고차 함수(higher-order function)란?
자바스크립트에서 고차 함수란 (1) 함수를 아규먼트로 받거나 (2) 함수를 결과로 리턴하는 함수다. (1) 함수를 아규먼트로 받는 고차 함수의 예 document.addEventListener("click", greeting); function greeting() { return alert("Hello, world!") } (2) 함수를 결과로 리턴하는 고차 함수의 예 function creatMultiplier(multiplier) { return function(x) { return x * multiplier } } let doubleMe = creatMultiplier(2); let tripleMe = creatMultiplier(3); let quadrupleMe = creatMultiplier(..
