JavaScript

1. 자바스크립트의 클래스(Class)란?자바스크립트의 클래스는 객체를 만드는 설계도입니다. 쉽게 말해, 클래스가 붕어빵 틀이라면 클래스로 만든 객체는 그 틀로 만든 붕어빵입니다. 클래스는 객체지향 프로그래밍의 개념을 지원하며, 여러 객체를 생성할 때 공통되는 속성과 메서드를 정의할 수 있습니다. 자바스크립트의 클래스는 ES6(ECMAScript 2015)에서 도입되었습니다. 2. 클래스와 인스턴스, 붕어빵 틀과 붕어빵 관계 클래스는 붕어빵 틀처럼 어떤 물건을 찍어내는 틀이라고 생각할 수 있습니다. 그 틀에는 붕어빵의 모양과 재료(속성) 등이 정의되어 있습니다. 예를 들어, 붕어빵 틀에는 크기, 모양, 안에 팥이나 슈크림 같은 내용물이 무엇인지가 정해져 있습니다.객체는 그 틀로 찍어낸 붕어빵입니다. 같은..

공부 목적알고리즘 공부를 하다가 배열 문제에서 slice와 splice를 자주 사용했습니다. 자주 사용하는 만큼 개념을 정리하면 좋을 것 같아 정리했습니다. Array.prototype.slice()기본 문법slice() 메소드는 배열의 일부분을 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다. 사용법은 다음과 같습니다.array.slice(start, end) start: 추출을 시작할 인덱스 번호- 추출할 때 이 시작 인덱스가 포함됩니다.- 음수 값을 넣으면 배열의 끝에서부터 역방향으로 계산합니다.- 생략 시 start 값은 0으로 간주합니다. end: 추출을 종료할 인덱스 번호- 추출할 때 이 종료 인덱스는 포함되지 않습니다. end 번호 앞까지 추출합니다.- 음수 값을 넣으면 s..

📚 공부 목적자바스크립트를 공부하면서 자바스크립트 개념 자체에 대해서 공부한다면 이해하기 좋을 것 같아 찾아보게 되었습니다. 자바스크립트는 웹 브라우저에서 실행되는 스크립트 언어입니다. 실제로 웹 브라우저 뿐만 아니라 다양한 환경에서 실행될 수 있습니다. 이때 코드가 실행되는 환경을 '런타임(runtime)'이라고 합니다. 그래서 흔하게 볼 수 있는 런타임 환경은 브라우저이기도 합니다. 런타임 이전에 자바스크립트 엔진 역시 웹 개발에서 주요 구성 요소입니다. 엔진이 없으면 런타임도, 자바스크립트도 없습니다.📚 자바스크립트 엔진(JavaScript engine)과 런타임(Runtime)1. 자바스크립트 엔진이란?자바스크립트 엔진이란 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터입니다. 대체적으로..

📌  getElementById, querySelector란?브라우저 돔 객체에 접근하기 위해서는 getElementById, querySelector 메소드를 이용하는 두 가지 방법이 있습니다. 이 두 가지 방식 모두 엘리먼트를 반환하는 메소드입니다. 더 구체적인 엘리먼트를 선택하고 싶다면 querySelector (혹은 querySelectorAll)를 사용하면 되지만, getElementByID가 조금 더 빠르고 지원이 잘 됩니다.   📚 공부 목적간단한 게임을 구현하는 프로젝트 형 스터디를 진행하다가, getElementById와 querySelector 메소드를 이용해 현재 플레이어(activePlayer)의 점수를 확인하는 로직을 구현했습니다. 사용한 코드는 다음과 같습니다. // 1.현..

개발자들이 실행 환경에 구애받지 않고 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 도구인 바벨(Babel)에 대해 알아보겠습니다. 1. 트랜스파일러(Transpiler)바벨은 자바스크립트의 트랜스파일러로 현재, 이전의 브라우저 또는 환경에서 ES6코드를 이전 버전의 자바스크립트로 변환하는 데 주로 사용되는 도구입니다. 트랜스파일러란 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미합니다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 변환하는 것인데, 이 점에서 트랜스파일러와 컴파일이 다릅니다. 예를 들어 컴파일러는 Java에서 bytecode로, C에서 assembly로 변환합니다. 트랜스파일러는 es6 코드를 es5 코드로, C++에서 C로 변환합니다...

자바스크립트 조건문에는 If 조건문 이외에도 조건 분기에 활용할 수 있는 switch 조건문이 있습니다. 1. switch 조건문의 형태 switch (자료) { case 조건A: break case 조건B: break // default: // break // 주석 내용은 생략 가능 } switch 조건문은 위와 같은 형태로 작성합니다. 2. switch 조건문 사용하기 // 변수 선언 const input = Number(prompt('숫자를 입력하세요.', '숫자')) // 조건문 switch (input%2){ case 0: alert('짝수입니다.') break case 1: alert('홀수입니다.') break default: alert('숫자가 아닙니다.') break } break 키워드..

1. 객체 객체란 '실제로 존재하는 사물'을 의미합니다. 이름(name)과 값(value)으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입입니다. 객체는 키(key)를 사용합니다. 중괄호 {...}로 생성하며, 키: 값 같은 형태의 자료를 쉼표로 연결해 입력합니다. const person = { name: ["seung", "hyun"], age: 23, gender: "female", interests: ["javascript", "design"], bio: function () { alert( this.name[0] + " " + this.name[1] + " is " + this.age + " years old. She likes " + this.interests[0] + ..

조건문이란 조건에 따라 다른 코드를 실행하는 구문입니다. 조건문에는 If와 Switch가 존재합니다. 이번엔 if 조건문에 대해 알아보겠습니다. 1. If 조건문 if 조건문은 '참과 같은 값'이면 코드 블록을 실행합니다. if 키워드 다음 소괄호에 조건을 작성하고 중괄호 범위의 코드 블록에 실행할 코드를 작성합니다. 이때 조건이 '거짓과 같은 값'이라면 구문이 실행되지 않습니다. const isShow = true; const checked = false; if (isShow) { console.log('Show!'); } if (checked) { console.log('Checked!'); } 위 코드에서는 isShow라는 변수가 '참과 같은 값'인 true이기 때문에 첫 번째 코드 블록이 실행됩니..