Sonny Cucumber

배열은 다양한 메서드를 제공합니다. 학습 편의를 위해 본 챕터에선 배열 메서드를 몇 개의 그룹으로 나눠 소개하도록 할게요 요소 추가-제거 메서드 배열의 맨 앞이나 끝에 요소(item)를 추가하거나 제거하는 메서드는 이미 학습한 바 있습니다. arr.push() - 맨끝에 요소 추가 arr.pop() - 맨 끝에 요소 제거 arr.shift() - 맨 앞 요소 제거 arr.unshift() - 맨 앞에 요소 추가 이 외에 요소 추가와 제거에 관련된 메서드를 알아봅시다. splice 배열에서 요소를 하나만 지우고 싶다면 어떻게 해야할까요? 배열 역시 개체형에 속하므로 프로퍼티를 지울 때 쓰는 연산자 delete를 사용해볼 수 있습니다. let arr = ["I", "go", "home"]; delete ar..

키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 주료구조를 이용해 저장하는데, 객체만으로도 다양한 작업을 할 수 있습니다. 그런데 개발을 진행하다 보면 첫번째 요소, 두번째 요소, 세번째 요소 등과 같이 순서가 있는 컬렉션이 필요할 때가 생기곤 합니다. 사용자나 물건, HTML 요소 목록같이 일목요연하게 순서를 만들어 정렬하기 위해서 말이져~ 순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메서드가 없어 그다지 편리하지 않습니다. 객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에 객체를 이용하면 새로운 프로퍼티를 기존 프로퍼티 '사이에' 끼워 넣는 것도 불가능합니다. 이럴 땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있습니다. 배열 선언 ..

자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 따옴표 따옴표의 종류가 무엇이 있었는지 상기해봅시다. 문자열은 작은따옴표나 큰따옴표, 백틱으로 감쌀 수 있습니다. let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이가 없습니다. 그런데 백틱엔 특별한 기능이 있습니다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있죠. 이런 방식을 템플릿 리터럴(template l..

모던 JS는 숫자를 나타내는 두가지 자료형을 지원합니다. 일반적인 숫자는 '배정밀도 부동소수점 숫자???(double precision floating pooint number)' 로 알려진 64형식의 IEEE-754에 저장됩니다. 튜토리얼 전체에서 이 형식을 사용하여 숫자를 표현할 예정입니다. 임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일반적인 숫자는 2의 53승 이상이거나 -2의 53승 이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌습니다. BigInt는 아주 특별한 경우에만 사용되므로, 별도의 챕터 BigInt에서 자세한 내용을 다루겠습니다. 자, 그럼 일반적인 숫자(?)에 대해서 자세히 알아보자 숫자를 입력하는 다양한 방법 10억을 입력해야한다고 상..

JS는 원시값(문자열,숫자 등)을 마치 객체처럼 다룰 수 있게 해줍니다. 원시값에도 객체에서처럼 메서드를 호출 할 수 있죠. 원시값의 메서드에 대해선 곧 학습할 예정인데 그 전에, 원시값은 객체가 아니란 것을 상기하도록 합시다 원시값과 객체는 다음과 같은 차이점이 있습니다. 원시값: 원시형 값입니다.(Primitive value) 원시형의 종류는 문자열(string), 숫자(Number), bigInt, 불린(Boolean), 심볼(Symbol), null, undefined으로 총 일곱가지입니다. 객체: 프로퍼티에 다양한 종류의 값을 저장할 수 있습니다. {name: "john", age: 30}와 같이 대괄호 를 사용해 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데, 함수도 객체의 일..

obj1 + obj2처럼 객체끼리 더하거나 빼는 연산을 하면 어떻게 될까? 이 모든 경우에 자동 타입 변환이 일어나는데, 객체는 원시값으로 변환되고, 그 후 의도한 연산이 수행된다. 원시형 자료가 어떻게 문자, 숫자, 논리형으로 변환되는지만 알아봤다. 이젠 메서드와 심볼에 대한 지식을 갖췄으니 본격적으로 이 공백을 메꿔보자 객체는 논리 평가 시 true를 반환합니다. 예외없이, 따라서 객체는 숫자형이나 문자형으로만 타입 변환이 일어난다고 보면 됨. 숫자형으로의 타입 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어남 객체 date끼리 차감하면(date1 - date2) 두 날짜의 시간 차이가 반환. 문자형으로의 형 변환은 대개 alert(obj) 같이 객체를 출력 하려고 할 때 일어..

자바스크립트는 객체 프로퍼티로 오직 문자형과 심볼형만 허용. 숫자형, 불린형 모두 불가능하고 오직 이 둘만 가능하다. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴봤다. 이번엔 프로퍼티 키로 심볼값을 사용해보면서 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하자. 심볼 심볼(symbol)은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol()을 사용하면 만들 수 있다. 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다. 심볼 이름은 디버깅 시 유용 // id는 새로운 심볼이 됩니다. let id = Symbol(); // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 타입이기에, 설명이 ..

옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 이게 등장하게 된 배경 상황을 못겪어봤을거다. 몇가지 사례를 재현하면서 왜 이게 등장했는지 알아보자. 사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해보자 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례..

객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫글자는 무조건 대문자 반드시 'new' 연산자를 붙여 실행합니다. 예시: function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"..

메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해보자 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 이렇게 객체 프로퍼티에 할당된 함수를 메서드 라고 부른다. 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있다. let user = { // ... }; // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; user.sayHi(); // 안녕하세요! 중요! - 객체 지향 프로그래밍 객체를 사용하여 개체를 표현하는 방식을 부르는데 (ob..