Web/JavaScript (10) 썸네일형 리스트형 [JavaScript / ES6] 화살표 함수 화살표 함수는 ES6에 추가된, 함수를 정의할 수 있는 또 다른 방법이다. function order(name, menu) { return `${name}님이 ${menu}를 주문하셨습니다.`) } console.log(order('manzoo', 'pizza')) 화살표 함수를 사용하면 간단하게 함수를 만들 수 있다. function 키워드를 쓰지 않아도 되며, return도 생략 가능하다. (아래와 같이 한 줄로 값을 반환할 때만 생략할 수 있다.) const order = (name, menu) => `${name}님이 ${menu}를 주문하셨습니다.` console.log(order('manzoo', 'pizza')) 파라미터가 없는 경우에는 빈 괄호를 표시하며, 하나일 때는 괄호를 생략할 수 있.. [JavaScript / ES6] 디폴트 파라미터 ES6 명세에 디폴트 파라미터가 추가되었다. 디폴트 파라미터란, 말 그대로 함수 파라미터의 디폴트 값을 의미한다. function order(name="manzoo", menu="pizza") { console.log(`${name}님이 ${menu}를 주문하였습니다.`) } order() // manzoo님이 pizza를 주문하였습니다. 위와 같이 디폴트 파라미터를 설정해놓으면, 함수를 호출할 때 인자를 넘기지 않아도 기본 값이 설정된다. [JavaScript / ES6] 템플릿 문자열 템플릿 문자열은 문자열 연결 대신 사용할 수 있다. 보통, 문자열을 연결하여 출력하려면 + 기호를 사용하여 이어붙여야 한다. console.log("안녕하세요.\n제 이름은 " + name + "입니다. 제 나이는 " + age + "살 입니다.") 하지만 템플릿 문자열에서는 ${ }를 사용해 그 안에 변수를 넣을 수 있다. console.log( `안녕하세요. 제 이름은 ${name}입니다. 제 나이는 ${age}살 입니다.` ) 그레이브 액센트(`) 사이에 문자열을 문자열을 입력하고, 변수는 ${ } 사이에 넣으면 된다. 그러면 + 와 " 로 일일이 이어붙이지 않아도 되며, 탭, 개행 문자, 공백 모두 유지하게 되어 한눈에 파악하기 쉽다. [JavaScript / ES6] 변수 선언 ES6 이전에는 변수를 선언하는 유일한 키워드가 var 이었다. ES6 에서는 두 가지 방법이 추가되었다. 1. const constant는 값을 변경할 수 없는 상수이다. 따라서 상수에 값을 재설정하는 것은 불가하다. const test = true test = false // error const는 변경하면 안되는 값이나 함수, 객체 선언에 주로 사용된다. 함수 예) const func = function() { console.log("const") } ... // error func = function() { } 이미 정의된 함수를 실수로 재정의하게 되는 경우를 막기 위함이다. 객체 예) const menu = { "name": "pizza", "price": 10000 } menu.price = .. [JavaScript] 객체 자바스크립트에서 객체는 아래와 같이 중괄호 {}를 이용해 생성 가능하다. 콜론의 왼쪽은 키이고, 오른쪽이 속성이다. 객체의 요소에 product[키] 또는 프로퍼티 접근자를 이용해 product.키 로 접근 가능하다. (product.키 방법을 더 많이 사용한다고 한다.) ex. product['제품명'] ===> '7D 건조 망고' product.제품명 ===> '7D 건조 망고' 단, 식별자가 아닌 문자를 키로 사용했을 때는 무조건 대괄호를 사용해야 접근 가능하다. object['with space'] ===> 273 [JavaScript] 콜백 함수 콜백 함수란 매개변수로 전달하는 함수를 말한다. 콜백함수는 보통, 익명 함수로 많이 사용한다. [JavaScript] 오버로딩 자바스크립트에서는 오버로딩 기능을 제공하지 않는다. (매개변수 형태가 다른 함수여도) 동일한 이름의 함수가 정의되면, 함수가 재정의된다. 책에서 보니 함수 이름 충돌때문에, 내부 함수로 많이 사용한다고 적혀져 있었다. 그럼 오버로딩 기능은 사용할 수 없는 건가? 궁금해서 찾아보니 변수 arguments 를 사용하여 오버로딩 기능을 구현할 수 있었다. 변수 arguments 는 모든 전달인자를 받는 배열이다. 따라서 arguments의 크기에 따라 다른 처리를 해주면 된다. [JavaScript] 가변 인자 함수 가변 인자 함수는 매개변수의 개수가 변할 수 있는 함수를 말한다. 위에 정의된 func 함수는 매개변수가 없다. 하지만 자바스크립트의 모든 함수는 내부에 기본적으로 변수 arguments가 있다. arguments는 매개변수의 배열을 나타낸다. 따라서 아래와 같은 코드 작성이 가능하다. 이전 1 2 다음