DEV Note

프로퍼티에 대한 자세한 내용은 https://yoonddo.tistory.com/76 [JavaScript] #07 - 객체 프로퍼티 (데이터 / 접근자) 자바스크립트에는 8가지의 자료형 ( number, string, BigInt, boolean, null, undefined, Symbol, 객체) 이 존재한다. 이 중 객체를 제외한 나머지들은 딱 하나의 값만 가질 수 있는데, 이런 자료형을 원시타입(prim yoonddo.tistory.com 프로퍼티(속성)의 종류 데이터 프로퍼티 : 값을 저장하기 위한 프로퍼티. 일반적으로 사용하는 프로퍼티이다. 접근자 프로퍼티 : 본질은 함수인데 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 그런데 외부 코드에서는 함수가 아닌 일반 프로퍼티..

자바스크립트에는 8가지의 자료형 ( number, string, BigInt, boolean, null, undefined, Symbol, 객체) 이 존재한다. 이 중 객체를 제외한 나머지들은 딱 하나의 값만 가질 수 있는데, 이런 자료형을 원시타입(primitive type)이라 하고, 객체는 여러 값들을 포함할 수 있는 하나의 덩어리이며 참조타입(reference type) 이라 부른다. 객체가 포함할 수 있는 값들에 제한은 없으며 어떤 자료형이든 객체의 내부 값으로 할당할 수 있다. 프로퍼티란 객체 안에 선언된 키-값으로 이루어진 한 쌍을 말하는데 키는 값을 나타내는 이름이라 생각하면 되고, 이 키로 해당 프로퍼티 값에 접근할 수 있다. let obj = { name: 'sunny' // 키(nam..

ES6가 등장하기 이전에 배열에 있는 요소 혹은 JSON 객체의 프로퍼티를 각각 변수에 담기 위해 다음과 같이 하나하나 변수에 할당해 주곤 헸다. let users = ['홍길동', '임꺽정', '김달수'] let user1 = users[0] let user2 = users[1] let user3 = users[2] console.log(user1) console.log(user2) console.log(user3) let user = { name: '홍길동', age: '20' } let name = user.name let age = user.age console.log(name) console.log(age) 하지만 이 경우 배열의 요소가 많아지거나 JSON 객체의 프로퍼티 수가 많아지면 작성하기..

ES6에서 도입 되었으며 뭉쳐있는 여러 값을 펼쳐서 개별적인 값의 목록을 만들어 내는 문법이다. 주의 할 점은 스프레드 문법은 for...of 문으로 순회 가능한 이터러블에 한정되며 스프레드는 개별적인 값을 만드는 것이 아닌 값들의 목록을 만드는 것이기 때문에 이를 값을 생성하는 연산자로 생각하면 안된다. 즉, 스프레드 문법의 결과를 변수에 할당이 불가능하다. (변수에는 값만 할당이 가능) // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. console.log(...{ a: 1, b: 2 }); // TypeError: Found..

ES(ECMAScript)란? ES(ECMAScript)는 자바스크립트를 표준화 하기 위해 만들어진 ECMA-262 기술 규격에 따라 정의하고있는 표준화 된 스크립트 프로그래밍 언어를 말한다. 뒤의 숫자는 버전을 뜻하고 ES5는 2009년, ES6는 2015년애 출시되었다. const / let const 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수이다. 상수로 사용한다. 예 ) react에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데 const를 사용한다. let 새로운 값을 받을 수도 있고 재할당 할 수도 있다. var를 쓰지 않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위해서이다. 템플릿 리터럴 (Templete Literal) 백틱(..

함수(Function) 수학의 함수는 입력을 받아 출력을 내보내는 과정을 정의한 것이지만 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter), 입력을 인수=인자(argument), 출력을 반환값(return value)라고 한다. 또한 함수는 값이며, 여러 개 존재할 수 있다. 그래서 구별하기 위해 식별인 함수 이름을 사용할 수도 있다. 안녕하세요 라는 메시지를 출력하는 프로그램을 만든다고 가정하면 다음과 같이 작성해볼 수 있다. // "안녕하세요!" 메시지를 출력하는 함수를 정의한다. function sayHello() { cons..

연산자(Operators)의 종류 대입 연산자 (Assignment Operators) 산술 연산자 (Arithmetic Operators) 비교 연산자 (Comparison Operators) 논리 연산자 (Logical Operators) 비트 연산자 (Bitwise Operators) 문자열 연산자 (String Operators) 대입 연산자 (Assignment Operators) 값을 할당하는 연산자로 아래와 같이 사용한다. let x = 3; let y = 6; 산술 연산자 (Arithmetic Operators) 수식을 계산해 주도록 하는 연산자이다. 기본적으로 사칙연산과 나머지 연산, 증감 연산이 있다. const num = 10 * 2 //20 여기서 *기호가 산술 연산자이다. 산술 연..

console.log() 를 사용하는 구체적인 방법을 알아보자 기본 출력 log, info, debug, warn, error console.log('기본'); console.info('정보'); console.debug('디버그'); console.warn('경고'); console.error('에러'); console로 출력할 수 있는 출력문은 level(중요도)로 분류해서 사용할 수 있다. 크롬 같은 경우 console 출력 설정 기본값이 info, Warning, Errors라 Debug는 출력이 안될 수 있기 때문에 옵션 설정 확인이 필요하다. 여러가지 출력 방법 const owner = 'YD'; const message = 'Hello world!'; const isDeveloper = tr..

주민등록번호 13자리를 입력받은 후에 기준에 맞게 입력했는지 검사하고 맞지 않다면 알림창을 띄우는 코드를 작성해보지 juminForm.jsp - formCheck.js //javascript 함수의 형식 //function 함수이름([인수, ...]) { //함수가 실행할 문장; //...; //[return 값;] //} //이벤트가 실행되는 객체에 최대 글자수 만큼의 문자가 입력되면 포커스를 넘겨줄 객체로 포커스를 넘겨주는 함수 //moveNext(이벤트가 실행되는 객체, 최대 글자수, 포커스를 넘겨줄 객체) function moveNext(obj, len, nextObj) { //alert() 함수는 인수로 지정된 내용을 메시지 창에 출력한다. //alert('moveNext() 함수 실행'); /..

객체 객체는 관련된 데이터와 함수의 집합이다. (일반적으로 여러 데이터와 함수로 이루어지는데 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부른다) 자바 스크립트는 객체 기반 프로그래밍 언어로 자바 스크립트를 구성하는 거의 모든것이 객체이다. 객체를 생성하는 것은 변수를 정의하고 초기화 하는 것으로 시작한다. const person = { name: 'Hanamon', age: 20 }; 객체는 0개 이상의 요소(property)로 구성된 집합이다. 요소(property)는 키(key)와 값(value)으로 구성된다. 자바 스크립트에서 사용할 수 있는 모든 값은 속성(property)값이 될 수 있다. 객체의 프로퍼티 (속성, property)와 메서드(method) 프로퍼티 : 객체의 상태를 나타내는..