JS 썸네일형 리스트형 [JS] 객체 지향 프로그래밍과 Class Class에 대해서 이야기하려면 객체 지향 프로그래밍(Object Oriented Programming)을 빼놓을 수 없습니다. 객체 지향 프로그래밍은 프로그램을 여러 개의 독립된 객체들의 모임으로 나누고 이 객체들 간의 상호작용으로 표현하는 프로그래밍 패러다임입니다. 여기서 객체는 모든 것이 될 수 있습니다. 실제 하는 것이든 개념적으로 존재하는 것이든 속성과 행동(기능)을 떠올릴 수 있다면 객체로 표현할 수 있습니다. 예를 들어 사람 객체의 속성과 행동을 생각해보겠습니다. 속성으로는 키, 몸무게, 피부색 등이 뽑아볼 수 있습니다. 행동으로는 걷기, 뛰기, 엎드리기 등을 뽑을 수 있을 겁니다. 이렇게 객체에게서 뽑아낸 속성과 행동은 클래스(class) 안에 프로퍼티(property)와 메서드(metho.. 더보기 [JS] 화살표 함수(arrow function) ES6부터는 () => 표기법(notation)을 이용하여 함수를 간결하게 표현할 수 있습니다. 화살표 함수는 함수를 표현하는데 function 키워드가 필요 없습니다. 대신 함수의 파라미터가 들어갈 괄호((): parentheses)와 함수의 바디를 가리킬 화살표(=>)를 사용합니다. // ES5 익명 함수 function() { // {}: 함수 바디 }; // ES6 익명 함수 () => { // {}: 함수 바디 } 화살표 함수를 만드는 몇 가지 방법과 화살표 함수를 사용을 피해야 하는 경우를 알아보겠습니다. 화살표 함수를 만드는 방법 1. 파라미터가 없는 경우 // 매개변수가 없는 경우 const funcName = () => {}; 2. 파라미터가 하나인 경우 매개변수가 하나인 경우라면 괄호의.. 더보기 [JS] 함수의 기본적인 사용 방법과 동작 방식 함수는 하나의 단위로 실행되는 블록으로 특별한 목적의 작업을 수행하도록 설계됩니다. 이번 포스팅에서는 함수의 기본적인 사용방법과 동작 방식을 알아봅니다. function sayHi() { // 함수의 바디(body)는 여는 중괄호( {: curly bracket)로 시작합니다. // 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기를 하였습니다. console.log("Hi"); // 닫는 중괄호( }: curly bracket)로 끝납니다. } 위의 코드는 함수 선언의 예입니다. 함수를 선언할 때는 다음과 같은 조건을 지켜야 합니다. - function 키워드로 시작하여 - 함수 이름을 지어주고 - 함수를 알리는 괄호( (): parentheses)를 여닫고 - 중괄호 사이(바디)에 함수 호출.. 더보기 자바스크립트 childNodes 속성과 children 속성의 차이 자바스크립트에서 자식 요소/노드에 대해서 접근하는 방법인 childNodes 프로퍼티와 children 프로퍼티의 차이점에 대해서 보겠습니다. 사실 각각의 이름에서 그 차이를 알 수 있습니다. 다음과 같은 예제 HTML 코드를 이용해서 두 프로퍼티의 결과를 비교해 보겠습니다. 은하수를 여행하는 히치하이커를 위한 안내서 오리엔트 특급살인 childNodes: 자식 노드에 접근 현재 요소의 자식 노드가 포함된 NodeList를 반환합니다. 이때 반환되는 NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함합니다. document.querySelector("div").childNodes 크롬 브라우저를 열고 콘솔 창에서 div 요소의 childNodes 프로퍼티를 확인해 봤습니다. .. 더보기 이전 1 다음
