본문 바로가기

728x90

Study/JavaScript

(36)
JavaScript [ 객체 ] 객체는 자료형 중 하나입니다. 객체를 제외한 나머지 7개는 오직 하나의 데이터만을 담을 수 있어 '원시형'이라고 부릅니다. 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 객체를 저장할 수 있죠. 객체는 중괄호 {...} 를 이용해 만들 수 있습니다. 중괄호 안에는 '키(key) : 값(value)' 쌍으로 구성된 프로퍼티를 여러 개 넣을 수 있으며 키엔 문자형, 값엔 모든 자료형이 허용됩니다. 프로퍼티 키는 '프로퍼티 이름'이라고도 부릅니다. 서랍장을 상상하면 객체를 이해하기 쉽습니다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하면 됩니다. 복잡한 사랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, ..
JavaScript [닌자 코드] 다양한 편법이 사용된 코드들을 닌자 코드라고 부른다. 팀원들이 알아보기 힘들기 때문에 사용하면 말아야하며 어떤 편법을 사용했는지 확인해봅시다. 코드 짧게 쓰기 문법 지식등을 총동원하면 코드 양을 획기적으로 줄일 수 있습니다. 조건부 연산자 ? 를 사용한 예시를 살펴보겠습니다. i = i ? i < 0 ? Math.max(0, len + i) : i : 0; 이렇게 코드를 작성하면 i가 무엇을 나타내는지 파악하는데 많은 시간이 소모될 것입니다. 글자 하나만 사용하기 글자 하나만 사용해서 변수 이름을 지읍시다. a, b, c 처럼 말이죠. 변수 이름이 짧아지면 변수를 코드 속에 숨길 수 이습니다. 그 누구도 변수를 찾을 수 없게 되죠. 검색 기능도 통하지 않습니다. 어렵게 변수가 정의된 곳을 찾더라도 변수 ..
JavaScript [주석] 코드 구조에서 한 줄짜리 주석은 // 로, 여러 줄의 주석은 /* ... */ 로 시작합니다. 주석은 어떻게 코드가 동작하고 왜 코드가 동작하는지 설명하는데 쓰입니다. 좋지 않은 주석 초심자들은 주석에 '코드에서 무슨 일이 일어나는지'에 대한 내용을 적곤 합니다. // 이 코드는 (...)과 (...)을 수행합니다 // A라는 개발자가 이 기능에 대해 알고 있으며... very; complex; code; 그러나 좋은 코드엔 '설명이 담긴' 주석이 많아선 안됩니다. 주석 없이 코드 자체만으로 코드가 무슨 일을 하는지 쉽게 이해할 수 있어야 합니다. 이와 관련된 규칙도 있습니다. "코드가 불분명해서 주석 작성이 불간으하다면 코드를 다시 작성해야 하는 경우입니다" 리팩토링 팁 : 함수 분리하기 함수 내 코드..
JavaScript [코딩 스타일] 개발자는 가능한 간결하고 읽기 쉽게 코드를 작성해야 합니다. 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술입니다. 문법 몇 가지 추천할만한 규칙들을 아래 그림으로 알아보겠습니다. 이제, 각 규칙과 규칙이 생긴 이유에 대해 알아보겠습니다. ⚠ 무조건 따라야 할 규칙은 없습니다. 이 글에서 제안하고 있는 모든 규칙을 무조건 따르지 않아도 됩니다. 스타일에 대한 선호에 따라 규칙을 따를 수도, 따르지 않을 수도 있습니다. 중괄호 대부분의 자바스크립트 프로젝트에서 여는 중괄호는 '이집션'스타일을 따라 새로운 줄이 아닌 상응하는 키워드와 같은 줄에 작성합니다. 여기에 더하여 여는 중괄호 앞엔 공백이 하나 있어야 합니다. if (condition) { // 코드...
JavaScript [Chrome 으로 디버깅 하기] 이번 시간에는 디버깅에 대해 이야기해보겠습니다. 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다. 우리는 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다. Sources 패널 크롬 버전에 따라 보이는 화면이 다를 수 있습니다. 그러나 구성이 크게 바뀌지 않기 때문에 캡쳐본과 함께 설명하겠습니다. Chrome의 창을 띄워놓습니다. F12 를 눌러 개발자 도구를 엽니다. Sources 탭을 클릭해 Sources 패널을 엽니다. 그리고 옆의 파일 목록에서 파일 하나를 클릭하면 다음과 같이 화면이 바뀝니다. 왼쪽 파일들이 있는 영역은 파일 탐색 영역은 페..
JavaScript [화살표 함수 기본] 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수를 사용하는 것입니다. let age = (a, b, c, ... z) => expression 이렇게 코드를 입력하면 a, b, c를 받는 함수 age가 만들어집니다. 함수 age는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다. 아래 함수의 축약 버전이라고 할 수 있습니다. let age = function(a, b, c, ... z) { return expression; }; 좀 더 구체적인 예시를 살펴보겠습니다. let sum = (a,b) => a + b; /* 아래 코드는 위의 코드를 함수 표현식으로 나타낸 버전 let sum = function(a,b){ r..
JavaScript [ 함수 표현식 ] 자바스크립트는 함수를 특별한 종류의 값으로 취급합니다. 다른 언어처럼 특별한 동작을 하는 구조로 취급하지 않습니다. 이전 챕터에서 함수 선언, 함수 선언문 방식으로 함수를 만들었습니다. 이것 외에도 함수 표현식을 사용해서 함수를 만들 수 있습니다. let sayHi = function() { alert( "Hello" ); }; 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었습니다. 함수는 값으로 취급하기 때문에 변수에 할당할 수 있습니다. 또한 alert을 이용하여 함수 코드를 출력할 수 있습니다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 출력 마지막 줄에서 sayHi 옆에 괄호가 없기 때문에 함수는 실행되지..
JavaScript [함수] 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요한 경우가 있습니다. 함수는 프로그램을 구성하는 주요 '구성 요소'입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다. 앞서 우리는 alert, prompt, confirm 과 같은 내장 함수를 배웠습니다. 이번에는 함수를 직접 만드는 방법에 대해 알아보겠습니다. 함수 선언 함수 선언 방식을 이용하면 함수를 만들 수 있습니다. (함수 선언 방식은 함수 선언문이라 부르기도 합니다.) 함수 선언 방식은 아래와 같이 작성할 수 있습니다. function showMessage() { alert('안녕하세요'); } function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 쓰면 함수를 선언할 수..

728x90