분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 오브젝트(Object) Key, Value에 접근하기

1. 다양한 방법으로 객체 생성 //객체 리터럴을 이용해 객체 생성과 동시에 프로퍼티 설정 var person = { name : 'Lee', age : 28, print : function(){ console.log('name : ' + name + ', age : ' + age); } } //객체 생성 후 프로퍼티 추가(1) var person = {}; // var person = new Object(); person.name = 'Lee'; person.age = 28; //객체 생성 후 프로퍼티 추가(2) person["name"] = 'Lee'; person["age"] = 28; //객체의 Key값을 동적으로 생성 var keyArr = ['One', 'Two']; var personArr ..

2021. 9. 6. 22:40

Frontend/JavaScript

[JS] 함수 표현식과 함수 선언식

자바스크립트에서 함수를 정의하는 방법에는 선언식과 표현식이 있다. 1. 함수 선언식 함수 선언은 function으로 시작하며 선언 된 함수는 call 될 때 실행된다. function foo() { return "함수 선언식"; } foo(); // "함수 선언식" 2. 함수 표현식 함수 표현식은 변수에 저장할 수 있고 해당 변수는 함수처럼 사용할 수 있게 된다. 또한, 변수에 저장된 함수는 함수명이 필요 없고 변수 이름을 통하여 호출된다. var x = function (a, b) { return a * b }; 3. 함수 표현식과 함수 선언식 ▶ 함수 표현식 alert(foo()); // Error var foo = function() { return 5; } 함수 표현식은 호이스팅되지 않으므로 에러..

2021. 9. 5. 19:44

Frontend/JavaScript

[JS] new Function()

new Function()는 문자열을 코드로 인식해 실행한다는 점에서 eval 함수와 비슷하다. ( eval() : https://cocobi.tistory.com/76 ) 하지만 new Function()은 함수 내부 Scope에만 접근과 수정이 가능하며 내부에서 선언된 변수 등은 해당 Function 안에서만 유효하기 떄문에 eval과 같은 보안 이슈가 없다. 1. 문법 new Function()의 기본 문법은 다음과 같다. let func = new Function ([arg1, arg2, ...argN], functionBody); 2. 활용 방법 인수가 없을 경우 다음과 같이 작성할 수 있다. let hello = new Function('alert("Hello")'); hello(); // H..

2021. 9. 5. 00:04

Frontend/JavaScript

[JS] 자바스크립트 eval( )

eval( )는 문자로 표현된 코드를 실행하게 해주는 함수이다. 또한, eval( ) 에는 여러 보안 이슈가 있기 떄문에 대체제로 new Function( ) 를 사용하는것을 매우 권장한다. ( new Function() : https://cocobi.tistory.com/77 ) 1. eval( ) 1.1 Text를 Object로 변환 eval()는 text를 변환하여 객체 구조로 만들 수 있다. var obj = eval(string); //반환값은 eval의 string을 실행하여 얻은 값, 값이 없으면 undefined를 반환 1.2 Json Parser var obj = string.parseJSON(); Json 객체를 만들때는 JSON parser를 사용하여 eval()를 대체할 수 있다. ..

2021. 9. 4. 00:10

Frontend/JavaScript

[JS] 객체를 복사하는 메서드(assign)

자바스크립트에서 다른 객체를 복사해서 새로운 객체를 만들기 위해 assign 메서드를 사용한다. 1. assign assign 메서드의 첫 번째 인자에는 비어 있는 객체를, 두 번째 인자에는 원본 객체인 origin을 전달한다. 이를 newObj 객체에 할당한뒤 결과를 확인해보면 정상적으로 원본 객체의 값이 복사됨을 확인할 수 있다. let origin = { name : "Jinny", hobby : "piano" } let newObj = Object.assign({}, origin) console.log("My name is " + newObj.name) // My name is Jinny 2. assign 활용하기 원본 객체를 새로운 변수에 할당했을 때, 새로운 변수의 값을 바꾸면 원본 객체의 값..

2021. 9. 1. 21:54

Frontend/JavaScript

[JS] 화살표 함수(Arrow Functions)

화살표 함수는 ES6에서 도입된 함수 정의 방식이며, 기존 방식보다 짧은 코드로 함수를 선언할 수 있다. // 기존 함수 선언(ES5) function (인자) { 함수 로직 } // 화살표 함수 선언(ES6) (인자) => { 함수 로직 } 1. 화살표 함수의 선언 // 1) 매개변수가 없는 경우 const area = () => { return 100; }; // 2) 매개변수가 한 개인 경우 () 괄호를 생략할 수 있다. const area = width => { return width; }; const area = (width) => { return width; }; // 3) 매개변수가 두 개 이상인 경우 () 괄호를 생략할 수 없다. const area = (width, height) => {..

2021. 8. 31. 01:36