개발/JavaScript
자바스크립트 화살표 함수 사용 방법 정리
자바스크립트의 화살표 함수는 ES6에서 도입되었으며, function 키워드 대신 =>(arrow notation 또는 fat arrow라 함)를 사용한다. 다음 예시에서 보듯, 화살표 함수 생성은 아규먼트[파라미터] 다음에 =>를 사용하고 함수의 바디를 적는다. 함수가 하나의 아규먼트를 취할 경우 괄호를 생략할 수 있으며, 함수 바디가 하나의 구문만을 포함하는 경우 중괄호와 return구문을 생략할 수 있다. 또한 화살표 함수는 언제나 익명이며, 따라서 이를 변수에 할당할 수는 있으나, function 키워드처럼 이름을 만들 수는 없다. 다음은 에서 가져온 화살표 함수 예시다. const f1 = function() { return "hello!"; } // 또는 const f1 = () => "hel..
자바스크립트 표현식과 연산자 개념
자바스크립트에는 표현식(expression)과 표현식이 아닌 것(non-expression)이 존재한다. 이 둘을 구분하는 것이 중요한데, 표현식은 값을 산출하기 때문에 이를 변수, 상수, 속성에 담아 다른 표현식과 연결할 수 있는 반면, 표현식이 아닌 경우에는 동일한 방식으로 연견할 수 없기 때문이다. 자바스크립트 표현식 자바스크립트에서 표현식은 하나의 값을 산출해 내는 것이다. let x; x = 3 * 5; // 간단한 표현식의 예 자바스크립트 연산자 다음으로 연산자에 대해 살펴보자. 연산자는 +, -, /, *, % 등처럼 특정한 연산을 수행해 값을 도출해 내도록 하는 것이다. 이러한 연산자의 연산 순서는 보통의 사칙 연산과 같지만, 자바스크립트에는 사칙 연산 이외에도 많은 연산자가 존재한다. 실..
[JavaScript] ⑤ 자바스크립트 함수란?
자바스크립트에서 함수란 무엇일까? 함수란 입력을 받고 입력(input)을 받아 출력(output)을 내보내는 일종의 작은 프로그램을 의미한다. 예시를 살펴보자. 함수란 우리가 고등학교 수학 교과서에서 본 것처럼 f(x) = x + 1과 같은 구조를 취한다. 이는 함수(f) 안에 x값을 넣으면 x+1 값이 출력되는 일종의 연산을 의미한다. function f(x) { return x = x + 1; } f(2); // 3 위 예에서 볼 수 있듯 함수는 코드 블록 내의 문으로 구성된다. f()라는 함수는 아규먼트 x를 입력값으로 받는다. 입력값이 전달되면 여기에 1을 더해 이를 반환하게 된다. 따라서 f(2)를 실행시킬 경우 3이라는 값을 얻게 된다. 자바스크립트에서 함수 선언하는 방법 자바스크립트에서 함수..
[JavaScript] ③ 자바스크립트 데이터 타입
자바스크립트의 모든 값은 데이터 타입을 갖는다. 데이터 타입을 구분하는 것은 중요한데 이를 통해 메모리 크기 공간이 다르게 할당되기 때문이다. 데이터 유형은 크게 원시 타입(Primiive Type)과 객체 타입(Object Type)으로 구분된다. 이러한 데이터 유형은 값 앞에 typeof 연산자를 사용하여 직접 확인해볼 수 있다. 원시 데이터 유형 Number: 일반적인 숫자(+Infinity, -Infinity, NaN(Not a Number)가 포함됨) String: 문자 데이터로 따옴표 "" 또는 홑따옴표 ''로 감싸 표시 Boolean: true 또는 false Null: null은 null 값을 가짐 Undefined: 값이 할당되지 않은 변수는 undefined를 값으로 가짐 Symbol:..
[JavaScript] ② 자바스크립트 변수의 이해
자바스크립트를 공부하는 첫 번째 단계는 변수(variable)라는 개념을 이해하는 것이다. 변수란 원하는 값을 메모리에 저장하고 이를 참조하여 사용하는 방법이다. 달리 말하자면, 변수를 선언하는 것은 값을 저장하고 식별하기 위해 저장소의 이름을 붙이는 과정을 의미한다. 자바스크립트 변수의 개념 변수에 대한 정의가 복잡하다고 느껴질 수 있다. 그러나 아래의 예시를 보면 변수가 어떤 역할을 하는지 쉽게 이해할 수 있다. let message; message = 'Hello'; alert(message); // Hello 우리는 message라는 변수를 선언했다. 그리고 여기에 'Hello'라는 값을 할당했다. alert는 브라우저의 알림창을 띄우는 코드인데, 이를 실행하면 화면에 Hello라는 문구가 출력된..
[JavaScript] ① 자바스크립트란 무엇일까?
자바스크립트는 '웹페이지에서 동적인 활동'을 지원하기 위해 출시된 프로그램 언어다. 웹페이지에 대한 이해가 없다면 바로 이러한 동적인 활동이 무엇인지가 궁금할 수 있다. 이를 위해서는 먼저, 웹페이지에 대한 간략한 이해가 필요하다. 웹페이지의 이해 지금은 브라우저에서 인류의 거의 모든(?) 활동을 하는 것이 가능하지만, 초창기의 웹은 이처럼 다이나믹한 활동을 지원하지 못하는 정적인 웹(글과 이미지를 겨우 보여주는 정도)에 불과했다. 우리가 현재 보고 있는 웹페이지는 크게 HTML, CSS, JavaScript로 구성된다. HTML은 웹의 뼈대를 만들고, 콘텐츠를 추가하는 마크업 언어다. CSS는 HTML 콘텐츠를 이쁘게 꾸미는 스타일링 역할을 한다. 마지막으로 JavaScript는 페이지를 자동으로 새로..
