Web development/Modern JavaScript Deep Dive

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 1. 매개변수와 인수 매개변수를 통해 인수를 전달하는 방식. 인수는 값으로 평가 될 수 있는 표현식이어야 한다. 함수를 호출할 때 인수를 지정하며, 개수와 타입은 제한이 없다. //함수 선언문 function add(x,y){ return x+y; } //함수 호출 var result = add(1,2); console.log(result); //3 매개변수의 스코프는 함수 내부에 한정되므로 함수 몸체 외부에서 해봤자 소용없다. 함수는 매개변수의 개수와 인수의 개수따위 신경쓰지 않는다. 많이 넣으면 많이 넣는대로, 적게 넣으면 적게 넣는대로 움직인다. 대신 ..
함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것. *변수는 선언한다고 하지만 함수는 정의한다고 표현함. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당되기 때문. 1. 함수 선언문 //함수 선언문 function add(x,y){ return x + y; } //함수 참조 console.dir(add); //[Function: add] //함수 호출 console.log(add(2,5)); //7 함수 리터럴과 형태는 동일하지만 함수 선언문을 함수 이름을 생략할 수 없고, 함수 리터럴은 생략이 가능하다. 함수 선언문은 표현식이 아닌 문이기 때문에 함수 선언문을 실행하면 undefined가 출력된다. 표현식이 아닌 문은 변수..
1. 함수란? 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 마치 기계와 같아서 입력을 받으면 출력을 내보낸다. 함수는 입력을 받으면 매개변수를 통해 입력을 전달받는다. 호출할 때의 입력은 인수, 출력은 반환값이라 한다. 식별자인 함수 이름을 통해 특정 함수를 구별한다. 함수 정의 function add(x,y){ return x + y; } 함수 호출을 통해 반환값을 받는다. var result = add(2,5); console.log(result); 2. 함수를 사용하는 이유 - 실행 시점을 개발자가 결정할 수 있으며, 몇 번이든 재사용 가능하기 때문에 편리한 기능이다. - 코드의 중복을 억제하고 재사용성을 높이기 때문에 유지보수와 편의성 제고, 코드..
7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 객체, 심벌)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 원시 타입은 변경 불가능한 값(immutable value)이다. 반면 객체(참조)타입의 값은 변경 가능한 값(mutable value)이다. 하지만 처음에는 원시 타입도 변경을 해도 되는 것 같은 착각을 받는다. 암튼 원시값은 변수에 실제 값을 저장하지만, 객체를 변수에 할당하면 변수에는 참조 값이 저장된다는 차이점이 있다. 이 차이점으로 원시값과 객체의 값 변화에 대해 잘 알 수 있다. 1. 원시 값 1-1. 변경 불가능한 값 앞에서 말했듯 변경 불가능하다. 한 번 생성됐다면 원시 값은 읽기 ..
메서드 앞에서 말했듯 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다. 객체에 묶여 있는 함수를 메서드(method)라고 한다. var circle = { radius : 5, //얘는 일반 프로퍼티 getDiameter : function(){ return 2 * this.radius; //this(circle)의 radius 값을 뜻함 } //이 프로퍼티 값이 메서드 }; console.log(circle.getDiameter()); //10 프로퍼티 접근 프로퍼티 접근은 두 가지 방식이 있다. - 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation) - 대괄호 프로퍼티 접근 연산자([])를 사용하는 대괄호 표기법(bracket notation) v..
자바스크립트는 객체(object)기반의 프로그래밍 언어이다. 자바스크립트를 구성하는 것들 중에 원시 값을 제외한 나머지 값은 모두 객체다. 함수나 배열 정규표현식 등등 원시 타입은 단 하나의 값만 나타내지만 객체 타입(object/reference type)은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure)이다. 원시 값은 변경 불가능한 값(immutable value)이지만 객체는 변경 가능한 값(mutable value)를 가진다. 객체는 0개 이상의 프로퍼티로 구성된 집합이고, 키(key)와 값(value)로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 이는 즉..
우리가 맨날 값(value)이라고 말하는 것은 표현식(expression)이 평가(evaluate)되어 생성된 결과를 말하는 것이다. 평가는 그냥 식을 해석하고 값을 생성하거나 참조하는 것이다. 1+2; //값은 3 모든 값은 각각의 데이터 타입이 있으며 비트의 나열인 2진수로 저장된다. 만약 데이터 타입을 구별하지 않으면 값이 이상해질 수 있다. 예를 들어 메모리에 저장된 값 0100 0001은 숫자로 65지만 문자로 해석하면 'A'이기 때문이다. 이처럼 데이터 타입을 구별하지 않으면 값이 이상하게 굴러간다. var age = 20+4; 여기서 우리는 age 변수에 20을 저장하는 것도 아니고 4를 저장하지도 않는다. 연산자를 통해 계산된 값인 24를 저장하는 것이다. 즉 우리는 변수에 '값'을 할당하..
식별자(identifier)은 계속 말했듯 어떤 값을 구별해서 식별할 수 있는 이름이다. 여기에도 네이밍 규칙이 있다. 1. 특수문자를 제외한 문자, 숫자, 언더스코어(_), $ 사용 가능 2. 숫자 시작은 안됨 3. 예약어는 식별자로 사용할 수 없음 여기서 예약어는 뭘까? 예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어이다. 웬만하면 자주 쓰는 것들이라 많이 쓰다보면 알아서 기억할 것이다 await break case catch class const continue debugger delete do else default enum export extends false finally for function if implements* import in instanceof interface*..
값의 할당 할당(assignment)에는 어려울 것 없이 할당연산자 =만 사용하면 된다. var age; //변수 선언하기 age = 24; //값 할당하기 var age = 24; //변수 선언 + 값 할당 웬만하면 보기 좋게 합쳐 쓴다. 여기서 중요한 점 할당 연산자는 우변의 값을 좌변의 변수에 할당한다. 이거 까먹으면 피본다 근데 여기서 궁금한 점은 변수 선언이 런타임 이전에 실행되는데 값 할당은 언제 하지? -> 값 할당은 런타임에 실행된다 console.log(age); //undefined 1번 var age; // 변수 선언 2번 age = 24; // 값 할당 3번 console.log(age); // 24 4번 직접 해보면 이해가 쉽다 변수 선언과 값 할당을 떼어놓고 처음과 끝에 cons..
자바스크립트는 인터프리터 언어이다. 인터프리터는 위에서부터 한 줄씩 순서대로 실행된다는 특징이 있다. 위 말대로라면 요렇게 쓰면 참조에러가 뜰 게 분명하다 띠용? 분명 에러가 떠야 하는데 undefined가 나왔다 왜그러냐면 변수 선언은 런타임(소스코드가 한 줄씩 순차적으로 실행되는 시점) 전에 실행되기 때문. ​ 쉽게 비유하면 자바스크립트는 행군(내가 준 소스코드를 실행)에 앞서 군장검사를 한다 여기서 과자(변수나 함수 선언문 등)가 나온다? 너 다 먹고 가 그래서 해당 과자를 다 먹으면(선언) 그제서야 출발한다. ​ 결론적으로 변수 선언은 소스코드의 위치와 상관이 없다는 것. 이렇게 아무데나 변수 선언문을 놔도 코드 맨 처음에 놓은 것처럼 동작하는게 변수 호이스팅(variable hoisting)이다..
문이과 통합형 인재(人災)
'Web development/Modern JavaScript Deep Dive' 카테고리의 글 목록