본문 바로가기

javascript

 (57)
함수03 - 함수 리터럴 "함수" 3. 함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록 그리고 함수 몸체로 구성된다. // 변수에 함수 리터럴을 할당 var add = function add(x, y) { return x + y; }; 함수 리터럴의 구성 요소에 대한 설명은 아래와 같다. 함수 이름 함수 이름은 식별자이다. 따라서 식별자 네이밍 규칙을 준수해야 한다 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. 함수 이름은 생략할 수 있다. 함수는 객체 타입의 값이다. 따라서 변수와 마찬가지로 재사용하기 위해 이름을 붙일 수 있다..
함수02 - 함수의 사용 이유 "함수" 2. 함수의 사용 이유 함수는 필요할 때 여러 번 호출할 수 있다. 동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적이다. 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다. 함수를 사용하지 않고 같은 코드를 중복해서 여러 번 작성하면 그 코드를 수정해야 할 때 중복된 횟수만큼 코드를 수정해야 한다. 따라서 중복된 횟수에 비례하여 코드 수정에 걸리는 시간이 증가한다. 또한 사람은 실수하기 마련이므로 실수할 가능성도 높아진다. 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다. 함수는 변수처럼 이름(식별자)을 ..
함수01 - 함수란? "함수" 1. 함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메소드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 따라서 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해 갈 수 없는 핵심 중의 핵심이라고 할 수 있다. 수학의 함수는 "입력(input)"을 받아서 "출력(output)"을 내보내는 일련의 과정을 정의한 것이다. 예를 들어 f(x, y) = x + y라는 함수를 정의하고 이 함수에 두개의 입력 2, 5를 전달하면 함수는 정의된 일련의 과정, 즉 x + y를 실행하여 7을 출려한다. 이처럼 함수는 마치 재료를 투입받아서 제품을 생한하는 기계와 같다..
원시 값과 객체의 비교05 - 참조에 의한 전달 "원시 값과 객체의 비교" 2.2. 참조에 의한 전달 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이 무엇을 의미하는지, 이로 인해 어떤 부작용이 발생하는지 확인해 보자. var person = { name: 'Lee' }; // 참조 값을 복사 var copy = person; 객체를 가리키는 변수(원본, person)를 다른 변순(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(Pass by reference)라 한다. 위 그림처럼 원본 person를 사본 copy에 할당하면 원본 person의 참조 값을 복사하여 copy에 저장한다. 이때 원본 person와 사본 copy는 메모리 주소는 다르지만 동일한 참조 값을 갖는다. 다시 말해, 원본 pers..
원시 값과 객체의 비교04 - 변경 가능한 값 "원시 값과 객체의 비교" 2. 객체 객체는 프로퍼트의 개수가 정해져 있지 않으며 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에도 제약이 있다. 따라서 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다. 따라서 객체는 하나의 값을 관리하기 위한 방식이 아니라 여러 개의 값을 복합적인 구조로, 다시 말해 자료 구조로 다룰 수 있는 하나의 자료 구조라고 볼 수 있다. 객체는 복합적인 자료 구조이므로 객체를 관리하는 방식이 원시 값과 비교하여 복잡하고 구현 방식도 브라우저 제조사마다 다를 수 있다. 원시 값은 상대적으로 적은 메모리를 소비하지만 객체는 경우에 따라 크기가 매우 클 수도 있다. 객체를 생성하고 프로퍼티에 접근하는 것도 원시값과 비교할 때 비용이 많이 드..
원시 값과 객체의 비교03 - 값에 의한 전달 "원시 값과 객체의 비교" 1.3. 값에 의한 전달 var score = 80; var copy = score; console.log(score);// 80 console.log(copy);// 80 score = 100; console.log(score);// 100 console.log(copy);// ? 변수 score에 숫자값 80을 할당했다. 그리고 변수 copy에 변수 score를 할당했다. 그 후, 변수 score에 새로운 숫자값 100을 재할당하면 변수 copy의 값은 어떻게 될까? 이 질문의 핵심은 "변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?"이다. copy = score 에서 score는 변숫값 80으로 평가되므로 변수 copy에도 80이 할당될 것이다. 이때 새로운 숫자값 ..
원시 값과 객체의 비교02 - 문자열과 불변성 "원시 값과 객체의 비교" 1.2. 문자열과 불변성 자바스크립트에서는 문자열도 원시값이다. "데이터 타입에 의한 메모리 공산의 확보"에서 살펴보았듯이 메모리 공간을 확보할 때 데이터 타입이 필요하다. 원시 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야 한다. 이를 위해 원시 타입 별로 메모리 공간의 크기가 미리 정해져 있다고 했다. 단, ECMAScript 사양에 문자열 타입(2byte)과 숫자 타입(8byte) 이외의 원시 타입은 크리를 명확히 규정하고 있지는 않아서 브라우저 제조사의 구현에 따라 원시 타입의 크기는 다를 수 있다. 원시 값인 문자열은 다른 원시 값과 비교할 때 독특한 특징이 있다. 문자열은 0개 이상의 문자(character)들로 이루어진 집합을 말하며 1개의 문자..
객체 리터럴05 - ES6에서 추가된 객체 리터럴의 확장 기능 "객체 리터럴" 9. ES6에서 추가된 객체 리터럴의 확장 기능 ES6에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공한다. 9.1. 프로퍼티 축약 표현 객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다. // ES5 var x = 1, y = 2; var obj = { x: x, y: y }; console.log(obj)// {x: 1, y: 2} ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때, 프로퍼티 키를 생략(Property shorthand)할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다. // ES6 let x = 1, y = 2;..

티스토리툴바