Javascript

자바스크립트 환경에서 디버깅하면서 한번쯤 삽질해봤을 부분 중 하나로, 불변성이 지켜지지 않는 객체를 들 수 있을 것이다. 나는 분명 건든 적이 없는 객체라고 생각했는데, 어디선가 예기치 못한 곳에서 값이 바뀌어있을 때 코드 구석구석을 찾아보면서 디버깅하기란 쉽지 않은 일이다. 불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 예기치 못한 버그나 사이드이펙트로 이어진다. 따라서 우리는 코드의 가독성을 높이고 버그를 예방하기 위해 불변성을 지켜야만 한다. 원시값과 참조값 불변성을 이해하기에 앞서, 자바스크립트에는 원시값과 참조값 두 가지 데이터 타입이 존재한다는 점을 짚고 가보자. 원시값이란, Number, String, Boolean, Null, Undefi..

이전 포스트에서도 알아봤듯이, 자바스크립트에서는 많은 것들이 객체로 간주된다. 그 중 하나가 바로 배열이다. 오늘은 웹개발을 하는 데 있어서 절대 빠질 수 없는 배열에 대해서 알아보고자 한다. 배열이란 무엇이고, 왜 자바스크립트에서는 배열을 객체라고 할까? 위키피디아에 따르면, 배열의 정의는 다음과 같다. 컴퓨터 과학에서 배열(Array) 은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조 를 나타낸다. 일반적으로 배열에는 같은 종류의 데이터들이 순차적으로 저장되어, 값의 번호가 곧 배열의 시작점으로부터 값이 저장되어 있는 상대적인 위치가 된다. 즉, 일반적으로 배열이란 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 보통 동질적인 타입의 값들이 저장되며, 순서에..

일반적으로 서버 요청을 통해 받은 데이터는 JSON 형태의 객체로 들어온다. 이를 console.log 로 출력해보려고 하면 예상과 다르게 [object Object] 라고만 출력될 때가 있다. 문자열이나 숫자를 출력할 때에는 문제가 없었는데, 뭔가 구조화된 객체를 출력하려고만 하면 이런 이상한 로그가 찍힌다. 이 로그의 정체는 무엇이며, JavaScript 객체의 내용은 어떻게 출력해서 확인해볼 수 있을까? [object Object] 란 무엇인가 JavaScript의 자료형은 크게 두 가지로 나뉜다. 오직 하나의 데이터만 담을 수 있는 원시형(primitive)과, 다양한 데이터를 담을 수 있는 객체형(object)이다. string, number, boolean 등의 원시형 데이터들은 string으..

Javascript에서 i라는 index 값을 증가시키는 operator로 종종 i++가 사용되곤 한다. i += 1 라는 동일한 표현식보다 간결해서 주로 반복문 등의 제어문에서 많이 사용한다. 이번에는 이 ++ 연산자의 정체가 무엇인지, 그리고 비슷하거나 헷갈릴 만한 증가/감소 연산자들을 반복문 예시를 통해 비교해보고자 한다. for (let i = 0; i < 5; i++) { console.log( i ); } // 0, 1, 2, 3, 4 Javascript의 반복문은 일반적으로 이렇게 생겼다. i는 초기값인 0부터 시작해서, 본문을 실행하고 나자마자 ++ 연산자에 의해 값이 1씩 증가하게 된다. alert 출력값은 0, 1, 2, 3, 4가 된다. 이번엔 좀더 간결한 while문을 살펴보자. l..

switch문은 C언어 등에서 사용하는 제어문 중의 하나로, 분기 명령에 속한다. 내가 자주 사용하는 javascript에서도 switch 문법을 지원한다. 같은 변수를 비교하는 경우, if - else if 로 중첩된 조건문보다 switch문을 더 선호하는 편이다. 비교 상황을 직관적으로 잘 설명해주기도 하고, 무엇보다도 indent 구조가 더 깔끔해보이기 때문이다. 그런데 switch문을 쓰면서 항상 궁금했던 것이 있다. 왜 case마다 break를 굳이 사용해서 다른 case로 넘어가는 것을 막아줘야 할까? if문과 어떻게 다르게 동작하길래 break를 해주지 않으면 다음 case로 넘어가서 나머지 코드블럭이 전부 실행되는 것일까? 사실 Javascript 뿐만 아니라 switch 제어 문법을 가지..