소상공인 감자네

우리가 알고 있던 함수는 대부분 이름을 가지고 있다.예를 들어,function sum(a,b){ return a + b;} 이런식으로 이름을 가진 함수를 기명 함수(Named Function) 라고 한다. 하지만 자바스크립트를 하다보면 이름 없이 정의된 함수들을 작성하고 만나게 될 것이다.바로 익명 함수(Anonymous Function) 인데, 익명 함수는 자바스크립트의 많은 동적인 기능의 기반이 된다. 1. 익명 함수란?익명 함수는 말 그대로 이름이 없는 함수이다.자바스크립트에서 함수는 다른 언어와 달리 일급 객체로 취급이 된다.이 뜻은 함수를 일반적인 값처럼 다룰 수 있다는 의미인데, - 변수를 저장할 수 있다. (함수 표현식)- 다른 함수의 인수로 전달할 수 있다. (콜백 함수)- 다른 함수의 ..

화살표 함수(Arrow Function)는 2015년에 등장한 ES6(ECMAScript 2015)의 핵심기능으로,전통적인 함수보다 코드를 훨씬 짧고 읽기 쉽게 만들어 준다.게다가 자바스크립트에서 가장 까다로운 개념 중 하나인 this의 동작 방식까지 단순화 시켜주는 강력한 도구이다. 1. 화살표 함수(Arrow Function)?화살표 함수는 기존의 function 기워드 대신 => (화살표) 기호를 사용하여 함수를 정의하는 방식이다.주로 익명 함수(이름이 없는 함수)를 필요로 할 때 코드를 간결하게 만들기 위해 사용된다. a. 기본 문법전통적인 함수 선언 방식과 화살표 함수 방식을 비교해서 알아보면구분일반 함수(Function Expression)화살표 함수(Arrow Function)코드const ..

자바스크립트의 기본 반복문이라 할 수 있는 while, for 문을 알았다면 현대적인 반복문인 forEach() 매서드를 알 차례이다. forEach() 는 단순히 반복을 수행하는 것을 넘어, 코드를 훨씬 간결하고 읽기 쉽게 만들어 준다. 1. forEach() 란?for 문 같은 경우는 let i=0; i이는 매우 유연하지만 대신 코드가 길고 복잡해지는 단점이 있다. forEach() 는 배열(Array)이 기본적으로 가지고 있는 내장 매서드이다.직접 반복 횟수를 관리하지 않아도, 배열의 모든 요소를 순서대로 하나씩 꺼내어 지정된 작업을 수행할 수 있다. a. forEach() 의 구조forEach() 는 콜백 함수(Callback Function) 를 인수로 받는다. 이 콜백 함수는 배열의 각 요소..

DOM 에 대해 기초개념을 이해했다면 이제 DOM 트리에서 우리가 원하는 특정 요소를 정확히 찾아내는 DOM 선택자(Selector)에 대해서 알아야 한다. 자바스크립트로 웹 페이지를 동적으로 만들기 위해서는 가장 먼저 "어떤 요소"를 변화시킬지 지정해야 한다.예를 들어 회원가입을 하려면 회원가입 버튼을 눌러야 하는데 그러려면 회원가입 버튼을 선택할 수 있어야 한다.또는 특정 클래스의 요소들의 배경색을 일괄적으로 변경하고 싶다면 해당클래스를 가진 요소들을 선택할 수 있어야 한다.이렇기 때문에 DOM 조작의 첫 단추는 바로 요소의 선택이다. 1. 단일 요소 선택대부분의 동적 작업은 단 하나의 특정 요소를 대상으로 하게 된다.이럴 때 유용하게 사용되는 두 가지 핵심 매서드가 있다. a. ID로 선택HTML ..

DOM(Document Object Model)DOM은 Document Object Model의 약자로HTML 이나 XML 같은 문서(Document)를 프로그래밍 언어(여기선 자바스크립트)가접근하고 조작할 수 있는 객체(Object) 형태로 모델링(Model)한 것이다. 쉽게 말해 HTML은 단순한 텍스트 파일이지만, 웹 브라우저가 HTML을 읽어 자바스크립트가 이해할 수 있는 메모리상의 데이터 구조로 변환한 것이 DOM이라고 할 수 있다. 자바스크립트(Javascript)와 DOM의 관계자바스크립트의 역할은 웹 페이지의 동적인 동작을 구현하는 것이다. 예를 들어 "버튼을 클릭해 배경색을 바꿔라" 는 명령을 내리려면, 자바스크립트가 웹페이지의 '버튼'이라는 요소와 '배경색'이라는 스타일에 접근 할 수..

배열(Array)을 반복해서 원하는 값을 찾거나 수정하는 작업을 하다 보면,객체(Object)도 같은 기능을 사용하면 참 좋겠다는 생각이 들 때가 있다. 코딩을 하다보면 배열보다는 객체를 이용해 데이터를 사용하는 일이 훨씬 많기 때문이다.for...in 문은 이런 상황에 객체를 이용해 작업할 수 있게 해주는 도구이다. 객체의 키(Key) 를 확인하여 값(Value)을 찾아내는 작업을 할 수 있다. 1. for...in 의 기본 구조for...in 은 for...of 와 비슷해 보이지만 목적이 완전히 다르다. for...of 는 배열에 무엇이 있는지 알아내야 할 때 주로 사용하고 for...in 은 객체에 어떤 이름(키)의 속성(값)이 있는지 알고 싶을 때 사용한다. 주 사용처가 배열과 객체라는 차이점도 ..

while 문은 조건에 따라 유연하게 반복문을 처리하고for 문은 인덱스(i)를 통해 배열의 요소를 처리한다. 하지만 조금 간단하게 조건이나 인덱스가 아닌 순수 배열 안에 담겨있는 값을 간단하게 접근할 수 있게 도와주는 구문이 있다. 바로 for ... of 인데 이는 배열(Array), 문자열(String) 등 순서가 있는 데이터에서 값(Value)에 직접 접근하게 도와준다. 1. for ... of 의 기본 구조for ... of 반복문은 문법이 매우 간단하다.반복에 필요한 변수와 데이터 소스만 명시하면 된다.for ( let 요소 of 반복가능한데이터) { // 반복 가능한 데이터의 "값"이 요소 변수에 할당 // 이 "값"을 이용해 실행할 코드를 작성} a. 요소(값)let 요소 의 변수에 반..

자바스크립트 반복문에서 가장 많이 쓰이는 핵심 이 바로 for문.while 반복문은 특정 조건에 특화되어 많이 사용되고,for 문은 일반적으로 가장 많이 쓰이는 반복문이라고 불 수 있다. while문과 달리 for 문은 정확히 몇 번 반복할지 횟수를 정하는 차이가 있다. 1. for 문의 기본 구조for 문은 반복에 필요한 세 가지 핵심 정보를 괄호 () 안에 순서대로 명시한다.이 정보들은 각각 세미콜론 ; 으로 구분된다.for( 초기식; 조건식; 증감식; ){ // 조건식이 참(true)일 때 반복해서 실행할 코드 블록}for(let i=0; i a. 초기식반복문이 시작될 때 딱 한 번만 실행된다.주로 반복 횟수를 셀 카운터 변수를 선언하고 초기값을 할당한다.기본적으로 i (index)를 사용하며, ..

코딩을 하는데 있어 가장 핵심적인 주제는 아마 반복의 최소화 이지 않을까 싶다.우리가 100개가 넘은 정말 많은 데이터를 작성해야 한다면,하나하나 입력을 통해 100번이 넘는 코딩을 직접 하는건 매우 비효율 적이라고 할 수 있다. 그런 비효율적인 행동을 효율적으로 만들어 줄 수 있는것이 바로 반복문이라고 할 수 있다.반복문에는 몇 가지가 존재하는데 이번에는 while 반복문에 대해서 알아보도록 하자. 1. while 반복문의 기본 구조while 반복문은 하나의 핵심요소인 조건식만을 가진다.while(조건식){ // 조건식이 참(true)일 경우 실행할 코드블록 // !! 반드시 조건식이 거짓(false)이 되어 반복문이 무한정 반복되지 않게 하는 코드가 있어야 한다.} 조건식은 while 문이 매..

자바스크립트를 이용해 개발함에 있어 가장 중요한 것 중 하나인 객체(Object). 문자열, 숫자, 불리언 같은 원시타입들이 각각 하나의 값만 담을 수 있는 기본적인 데이터라면,객체는 이름, 나이, 주소 등 서로 연관된 여러개의 데이터를 한 묶음으로 관리해주는 데이터 묶음 상자라고 할 수 있다.객체는 관련있는 데이터들을 체계정으로 정리해줘 데이터를 구조화 할 수 있게 도와준다. 예를 들어 어느 한 사람의 정보를 저장해야 한다면,let name = "김철수";let age = 20;let adress = "서울시"; 객체를 사용하지 않는다면 각각의 정보를 따로 담아서 저장을 해야 할 것이다.하지만 객체를 이용한다면,let user = { name: "김철수", age: 20, adress: "서울시"..