Informatics

목차 호이 스팅이란? var, const, let의 호이 스팅과 TDZ 1. 호이 스팅이란? 호이 스팅의 간단한 개념부터 설명하자면, 호이 스팅이란 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이다. [Javascript]6. 함수 선언과 호출 강의에서 우리는 함수의 두 가지 선언 방식에 대해 배웠다. 하나는 선언식이고 다른 하나는 표현식이다. 아직 두 가지 선언식을 모른다면 [Javascript]6. 함수 선언과 호출 강의를 듣고 오길 바란다. 다시 본론으로 돌아가서, 호이 스팅은 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이라고 했다. 원래 자바스크립트의 코드는 위에서 아래로 읽힌다. 따라서 함수의 호출이 선언 부보다 앞에 있다면 아래 예와 같이 에러가 나는 것이 당연하다. o..

목차 즉시 실행 함수란? 즉시 실행 함수의 기본적인 구조 1. 즉시 실행 함수란? 즉시 실행 함수, IIFE(Immediately-involked-function)는 말 그대로 즉시 실행되는 함수이다. 즉시 실행 함수는 주로 함수를 선언하자마자 바로 호출을 할 때 사용된다. 아래 예를 보면 이해가 될 것이다. 아래 코드를 분석해 보자면 변수 a에 1이라는 수를 넣어주었고 x를 매개변수로 가지는 ong 함수를 호출하였다. ong 함수가 호출되면 문서에 매개변수 x에 1을 더한 값을 쓴다. 함수를 호출할때 매개변수 x에 a, 즉 1을 넣었기 때문에 2가 나온다. 이런 경우에는 선언이 되자마자 호출이 되었기 때문에 주로 이런 상황에서 즉시 실행 함수를 사용하는 것이 좋다. const a = 1 function..

목차 화살표 함수란? 화살표 함수의 기본적인 구조 1. 화살표 함수란? 화살표 함수(Arrow Function)는 기존의 함수에서의 function을 생략하고 그 대신에 화살표(=>)를 이용하여 더 직관적으로 코드를 볼 수 있도록 해주고 축약시킬 수 있도록 해준다. 하지만 화살표 함수를 모든 상황에서 축약이 가능한 것은 아니다. 2. 화살표 함수의 기본적인 구조 화살표 함수는 기본적으로 다음과 같은 구조로 이루어져있다. const 함수명 = (매개변수1, 매개변수2) => { 코드 } //example const ong = (x, y) => { return x + y } 만약 위의 예시처럼 return 뒤에 단순 실행문만 있다면 아래와 같이 중괄호와 return 삭제가 가능하다. 하지만 만약 return..

목차 함수란 무엇인가 함수 선언 방식 함수를 호출 하는 법 함수란 무엇인가 함수란 하나의 목적을 위해서 독립적으로 설계된 코드의 집합이라고 할 수 있다. 함수를 호출하면 함수 안의 코드들이 순차적으로 실행된다. 자바스크립트에서 함수는 일반함수, 익명함수, 중첩함수, 콜백함수, 로드함수, 화살표함수, 즉시 실행함수 등이 있다. 기본적인 함수의 형태는 다음과 같다. function 함수명(매개변수1, 매개변수2){ 동작 } 함수 선언 방식 기본적으로 함수 선언 방식에는 함수 선언식과 표현식으로 크게 두가지가 있다. 함수 선언식은 다른 언어에서 볼수 있는 흔한 함수의 형태이고, 함수 표현식은 변수에다가 익명 함수를 넣는 방식이다. 이 두가지 방식은 나중에 호이스팅을 다룰때 차이점이 나타나게 되는데, 아직은 몰..

목차 반복문의 목적 for문의 구조 do while/while문의 구조 break와 continue 사용법 1. 반복문의 목적 반복문의 구조에 대해서 설명하기 이전에, 간단하게 반복문이 왜 쓰이고 어느 상황에 쓰이는지 설명해주겠다. 반복문이란 말 그대로 특정 행위를 반복적으로 행하는 것이다. 반복문은 특정 코드를 여러번 실행 할때 쓰인다. 만약 "ong"을 한번만 출력할 것이라면 모르겠지만 아래와 같이 "ong"을 10번 출력하기 위해서 같은 코드를 10번이나 입력하는 것은 매우 비효율적이다. 반복문은 이런 비효율적인 부분을 for문 또는 while문을 통해 효율적인 부분으로 바꿀수 있다. console.log("ong"); console.log("ong"); console.log("ong"); cons..

목차 switch문과 if문의 차이 switch문의 구조 1. switch문과 if문의 차이 switch문의 구조에 대해 설명하기 이전에 switch문과 if문의 차이점에 대해 설명하자면, if문은 if를 만날때마다 조건문을 만족하는지 인트럭션이 필요하지만 switch문은 처음 입력값을 확인하는 인터럭션만 필요하고 조건을 확인할 때는 인터럭션이 필요하지 않다. 인터럭션이 무엇인지 간단하게 설명하자면 CPU가 명령을 수행하기 위해서 메모리 상에서 명령어를 읽어오는 과정이다. 즉 인터럭션이 적을수록 좋은것이다. switch문은 조건이 많아져도 인터럭션이 늘어나지 않으므로 조건이 많은 경우에는 switch문을 사용하는 것이 if문을 사용하는 것보다 더 좋다고 할 수 있다. 2. switch문의 구조 switc..

목차 조건문이란? 문법 조건문의 연산자 1. 조건문이란? 조건문이란 말 그대로 조건을 가진 문장이다. 조건문은 조건이 참일시 중괄호 안의 명령이 참일시 명령을 수행하며 if문과 switch 문이 대표적이다. 2. 문법 조건문의 기본적인 형태는 다음과 같다. 아래 코드는 기초적인 if문을 보여주고 있다. a == b라는 조건문이 참일시에 document.write("a = b")를 수행하고, 조건문 a + 1 == b가 참일시 document.write("a + 1= b")를 수행하고 조건문1과 조건문2가 모두 거짓일 시에는 document.write("?")을 수행한다. See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen. 조건문에서 거짓으로..

목차 데이터의 종류 연산자 변수 선언 방법 데이터의 종류 자바스크립트의 데이터는 기본 타입과 참조 타입이 있다. 기본 타입으로는 숫자, 문자열, 불린, undefined, null, symbol이 있다. 참조타입으로는 객체, 배열, 함수 그리고 정규 표현식이 있다. 여기서 의문이 생깁니다. a 는 null 인데 왜 문자열 형이라고 출력 되는걸까요? 이것은 그냥 초기 버급니다. 수정하면 파장이 클까봐 그냥 두는 것입니다. 또다른 의문은 객체 데이터를 보면 배열 데이터의 자료형이 객체 데이터라고 나온다는 것이다. 이것은 typeof가 객체데이터와 배열 데이터를 구분하지 못하기 때문에 생기는 일이다. 연산자 자바스크립트의 연산자는 다항연산자, 산순연산자, 시프트 연산자, 관계연산자, 논리연산자, 조건 연산자,..

목차 자바스크립트의 특징 자바스크립트의 필요성 1. 자바스크립트의 특징 자바스크립트의 특징중 하나는 camel case를 쓴다는 것이다. camel case란 파일, 변수 또는 함수의 이름을 띄어쓰기를 안쓰고 표기하기 위해 말 그대로 낙타처럼 짓는것이다. ex)this is boring -> thisIsBoring 자바스크립트의 또 다른 특징은, 대부분의 프로그래밍 언어가 그렇듯이 zero-based numbering 체계이다. 즉 숫자를 셀때, 0부터 시작한다. 2. 자바스크립트의 필요성 자바스크립트는 웹 개발의 3대 요소(HTML, CSS, JS)라고 불릴만큼 웹과 관련이 많다. HTML과 CSS만으로는 물체가 움직이는것을 구현하는데에 무리가 있다. 물론 hover과 같은 CSS 태그로 애니메이션을 ..