본문 바로가기

Language/Javascript

 (20)
[Javascript] 어휘적 환경(Lexical Environment), 클로저(Closure) 어휘적 환경(Lexical Environment)let one;one = 1;function addOne(num){ console.log(one + num);}addOne(5);코드가 위에서부터 아래로 어떻게 동작하는지 알아보자.Lexical 환경one : 초기화X  사용 불가addOne : function 사용 가능프로그램이 실행되면 스크립트 내에서 선언한 변수들이 lexical 환경에 올라간다. let으로 선언한 변수는 초기화 되어 있지 않기 때문에 사용할 수 없다. 반면 함수 선언문은 바로 초기화되어 사용할 수 있다. (함수 표현식은 불가능) let one;Lexical 환경one : undefined  사용 가능addOne : function아직 할당은 안 되어 있기 때문에 undefined..
[Javascript] 나머지 매개변수(Rest parameters), 전개 구문(Spread syntax) 인수 전달 function showName(name){ console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // ? showName(); // undefined 자바스크립트에서 함수에 넘겨주는 인수의 개수에는 제한이 없다. 인수의 개수를 정해놓고 함수를 만들어도, 함수를 호출할 때 정확히 그 개수를 맞출 필요가 없다. 따라서 위 코드에서 에러가 발생하지 않는다. 함수의 인수를 얻는 방법은 두 가지가 있다. 1) arguments 2) 나머지 매개변수 과거에는 argument만 사용할 수 있었지만 지금은 여러 가지 장점이 있는 나머지 매개변수를 쓰는 추세이다. **화살표 함수에는 argument가 없다!! 1) argument..
[Javascript] 구조 분해 할당(Destructuring assignment) 구조 분해 할당이란? 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let [user1, user2, user3] = users; 은 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다. let str = "Mike-Tom-Jane"; let [user1, user2, user3] = str.split(..
[Javascript] 배열(Array), 배열 메소드(Array methods) 배열: 순서가 있는 리스트let students = ['철수', '영희', ..., '영수'];console.log(students[0]); // 철수console.log(students[1]); // 영희console.log(students[29]); // 영수students[0] = '민정';console.log(students); // ['민정', '영희', ...]  배열은 문자, 숫자, 객체, 함수 등을 포함할 수 있다.let arr = [ '민수', 3, false, { name : 'Mike', age : 30, }, function(){ console.log('TEST'); }];반복문 : forlet ..
[Javascript] 문자열 메소드(String methods) 문자열 여러 줄 백슬래시(`)로 감싸 여러 줄을 입력하거나 \n으로 줄바꿈을 할 수 있다. let desc = `오늘은 맑고 화창한 날씨가 계속 되겠습니다. 내일은 비소식이 있습니다.`; let desc = '오늘은 맑고 화창한\n날씨가 계속 되겠습니다.'; let desc = '오늘은 맑고 화창한 // error! 날씨가 되겠습니다. 내일은 비소식이 있습니다.'; 특정 위치에 접근 let desc = '안녕하세요.'; desc[2] // '하' desc[4] = '용'; console.log(desc); // 안녕하세요. 한 글자만 바꾸는 것은 허용되지 않는다. 문자열 길이 : str.length let desc = '안녕하세요.'; desc.length // 6 검색 : str.indexOf(text..
[Javascript] 숫자, 수학 method(Number, Math) toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" 괄호 안에 숫자를 쓰면 그 숫자의 진법으로 변환한다. Math 자바스크립트에는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장객체가 있다. 대표적인 프로퍼티의 예로 Math.PI;를 입력하면 원주율을 구해준다. Math.ceil() : 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 Math.floor() : 내림 let num1 = 5.1; let num..
[Javascript] 심볼(Symbol) 지금까지 객체의 property key는 문자형으로 만들었다. const obj = { 1: '1입니다.', false: '거짓' } Object.keys(obj); // ["1", "false"] obj['1'] // "1입니다." obj['false'] // "거짓" 숫자형이나 boolean형으로 만들어도 Object.keys로 key들을 가져오면 문자형으로 반환되며, 실제로 접근할 때도 문자형으로 접근할 수 있다. 문자형 외에 Symbol형이 가능하다. Symbol은 유일한 식별자를 만들 때 사용한다. const a = Symbol(); // new를 붙이지 않는다!! const b = Symbol(); console.log(a) // Symbol() console.log(b) // Symbol()..
[Javascript] 계산된 프로퍼티(Computed property), 객체 메소드(Object methods) 계산된 프로퍼티(Computed property)[] 을 이용해서 객체의 변수명에 미리 계산된 변수를 넣는 것이 가능하다.let a = 'age';const user = { name : 'Mike', [a] : 30 // age : 30}식 자체가 들어가는 것도 가능하다.const user = { [1 + 4] : 5, // 5 : 5 ["안녕"+"하세요"] : "Hello" // 안녕하세요 : "Hello"} 객체 메소드(Object methods)Object.assign() : 객체 복제const user = { name : 'Mike', age : 30,}// const cloneUser = user;const newUser1 = Object.assi..

티스토리툴바