developer_note

property key는 문자형(string)으로 처리됩니다. const obj = { 1: '1입니다.', false:'거짓' } Object.keys(obj); // ["1", "false"] 실제로 접근할 때도 문자열로 접근할 수 있습니다. obj['1'] // "1입니다." obj['false'] // "거짓" 문자열 말고 하나 더 가능한 것이 심벌형(Symbol)입니다. 심벌은 유일한 식별자를 만들 때 사용합니다. console로 확인해보면 Symbol()이라는 같은 값을 표시하지만 일치 연산자(===)나 동등 연산자(==)로 확인해보면 false를 리턴합니다. 심벌형은 유일성이 보장됩니다. 전체 코드 중에 딱 하나라는 뜻입니다. 심벌을 만들 때 설명을 붙여줄 수도 있습니다. 설명을 붙여주면 디..

Computed Property(계산된 프로퍼티) 아래와 같은 코드가 있다고 가정합니다. 변수 a와 user 객체의 key값 중 일치하는 값(age)이 있습니다. let a = 'age'; const user = { name : 'Mike', age : 30, } 위에 코드를 아래와 같이 사용할 수 있습니다. let a = 'age'; const user = { name : 'Mike', [a] : 30 } 대괄호로 묶어주면 [a]라는 값이 들어가는 것이 아니라 변수 a에 할당된 값이 들어가게 됩니다. 이를 Computed Property(계산된 프로퍼티)라고 부릅니다. 아래와 같이 식으로 넣을 수도 있습니다. const user = { [1 + 4] : 5, ["안녕"+"하세요"] : "Hello" }..

객체 리터럴 let user = { name: 'Mike', age: 30, } 개발을 하다 보면 객체를 여러 개 만드는 경우가 발생합니다.(회원, 상품 등등..) 그럴 때 유용하게 사용하는 것이 생성자 함수입니다. 1. 생성자 함수는 보통 첫 글자를 대문자로 해서 함수를 만들어 줍니다. 2. new 연산자를 사용해서 함수를 호출해줍니다. function User(name, age){ this.name = name; this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Jane', 22); let user3 = new User('Tom', 17); 생성자 함수는 붕어빵틀이나 와플펜이라고 생각하시면 됩니다. 필요한 재료들을 넣어..

변수 let, const가 있으며 이것은 ES6 때부터 생겼습니다. 이 이전 자바스크립트에서는 var를 사용했습니다. 그럼 var, let, const가 어떻게 다른지 알아보겠습니다. var는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = "Mike"; console.log(name); // "Mike" var name = "Jane"; console.log(name); // "Jane" let은 에러를 발생시킵니다. var는 선언하기 전에 사용할 수 있습니다. console.log(name); // undefined var name = "Mike"; console.log에서 name을 호출하고 있는데 에러를 일으키지 않습니다. var 선언한 변수는 코드가 실제로 이동하지는 않지만 코..

배열은 대괄호로 묶어주고 쉼표로 구분해서 만들 수 있습니다. let students = ['철수','영희',...'영수']; 배열을 탐색할 때는 고유번호를 사용합니다. 이를 인덱스(index)라고 합니다. 인덱스는 0번부터 시작합니다. 배열 데이터 출력하기 아래와 같이 사용하여 배열에 있는 데이터를 꺼내올 수 있습니다. console.log(students[0]); // 철수 console.log(students[1]); // 영희 배열 데이터 수정하기 아래 코드를 이용하면 첫 번째 데이터를 '철수'에서 '민정'으로 수정할 수 있습니다. students[0] = '민정'; console.log(students[0]); // 민정 배열의 특징 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 ..

Method 객체 프로퍼티에 할당된 함수를 메서드라고 합니다. function 키워드를 생략해서 단축코드로 작성할 수도 있습니다. const superman = { name:'clark', age:33, fly(){ console.log('날아갑니다'); } } user라는 객체가 있고 sayHello라는 메서드에 안에 있는 콘솔에 name프로퍼티를 넣고 싶다고 가정해봅니다. 그러면 아래와 같이 작성할 수 있을겁니다. 하지만 이 방식을 문제가 발생할 수 있습니다. 이럴 때는 this라는 키워드를 사용하면 됩니다. user.sayHello를 호출하면 점(.) 앞에 있는 user가 this가 됩니다. boy(소년)과 girl(소녀) 객체를 만들고 sayHello라는 함수를 만들었습니다. 여기서 this는 아..

Object 여기에 슈퍼맨이 있습니다. 이름은 clark이고 나이는 33세입니다. 객체는 중괄호로 작성하고 키(key)와 값(value)으로 구성된 프로퍼티가 들어갑니다. 각 프로퍼티는 쉼표로 구분되고 마지막 프로퍼티는 쉼표가 없어도 되지만 수정, 삭제 용이하기 때문에 쉼표를 넣어줘도 됩니다. Object - 접근, 추가, 삭제 객체를 만들어봅시다. const superman = { name:'clark', age:33, } 이렇게 만든 객체에 접근할 때는 점(.) 혹은 대괄호([])를 사용하여 접근합니다. superman.name // 'clark' superman['age'] // 33 객체에 데이터를 추가, 삭제할 수도 있으며 추가할 때도 점(.)이나 대괄호([])로 이용합니다. superman.g..

함수(function) 함수는 코드의 재활용성을 높여줍니다. 유지보수가 쉽습니다. 함수 작성 방법 function sayHello(name){ console.log(`Hello, ${name}`); } sayHello 함수를 만들어서 실행해보겠습니다. function sayHello(name){ console.log(`Hello ,${name}`); } let name = prompt("이름을 입력하세요."); sayHello(name); newName이라는 변수를 만들어 아래와 같이 사용할 수 있습니다. function sayHello(name){ let newName = name || 'friend'; console.log(`Hello, ${newName}`); } sayHello(); // Hell..

switch 스위치는 if과 동일하나 조건식이 많은 경우 case 문을 사용해서 간결하게 표시할 수 있는 장점이 있습니다. case문 안에는 반드시 break를 적어주어야 합니다. 그렇지 않으면 true일 경우 아래 조건식이 모두 실행되게 때문입니다. let char = prompt('알파벳 한글자를 입력하세요.'); switch(char){ case 'a': console.log("입력한 글자는 a입니다."); break; case 'b': console.log("입력한 글자는 b입니다."); break; case 'c': console.log("입력한 글자는 c입니다."); break; default: console.log("글자를 입력해주세요."); } break를 적지 않으면 아래와 같이 표시됩니..

반복문(Loop) 동일한 작업을 여러 번 반복할 때 사용합니다. 콘솔 창에 숫자를 1부터 5까지 찍으라고 가정한다면 아래와 같이 코드를 작성하면 됩니다. console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); 하지만 여기서 1부터 500까지 혹은 1부터 50000까지 콘솔 창에 숫자를 찍어 달라고 하면 위와 같은 방식으로 코딩할 수는 없습니다. 이럴 때 반복문을 사용해서 코딩을 해보도로 하겠습니다. for for문을 이용하여 1부터 500까지 콘솔창에 표시하는 코드를 작성해보겠습니다. for(let i=1; i